2020-01-01から1年間の記事一覧

TypeScript+webpackでブラウザでもNodeでも動くライブラリを作るメモ

ブラウザで動く事は確認したけど、Node環境でうまくいくかの動作検証はできてない状態 概要 webpackを使ってTypeScriptで書かれたライブラリをブラウザ向け、もしくはNode向けにバンドルしようと思ってあれこれしてみた備忘録 webpack.config.jsでoutputの設…

HTMLテンプレートエンジン EJSの主要なメソッド

EJS

ejs.render(str, data, options) EJSのテンプレート文字列とデータを指定してHTMLを生成する関数。 前回の記事で使ったメソッドはこれ。 let ejs = require('ejs'); // テンプレートとデータを用意 const str = '<%= enemies.join(", "); %>'; const data = …

HTMLテンプレートエンジン EJSを触ってみる

EJS

EJSはJavaScriptでHTMLを作成する事ができるHTMLテンプレートエンジン。 いろんな記事を見ているとだいたいGulpとセットで使われている記事ばかりだったので そういう余計なものは使わず、とりあえずEJS単品の動作について見ていこうと思う。 ブラウザでも動…

Craete React App に SASS を導入する

create-react-app.dev ガイドにある通りでyarn add node-sassとしてnode-sassを追加するだけで SASSが使えるようになりました。

Create React App に Reset cssを導入する

create-react-app.dev ガイドによると CSSの任意の場所に@import-normalize;を追加して下さい って書いてある しかし、追加してみても全然リセットされないんですが! gist.github.com 仕方ないので別な方法を探した結果、↑の記事を発見。 yarnでnormalize.c…

Create React App 依存関係のインストール

Create React Appで作成したプロジェクトに、追加でパッケージをインストールしてもいいの? というお話 結論からいうとOK 公式のドキュメントには 他の依存関係を追加したかったら、普通にnpmとかyarnでインストールしても構わないよ って書いてある 例えば…

Node.jsでXMLHttpRequestを使う

Node.jsでXMLHttpRequestを使おうとしたら以下のエラーがでて怒られた。 ReferenceError: XMLHttpRequest is not defined XMLHttpRequestは、Webブラウザーの組み込みオブジェクトで、Node.jsには含まれていないみたい つらい Node.jsで使いたければ個別にイ…

Babel 設定ファイル #2

Babel 設定ファイル Babelの設定ファイルとは、BabelでどのようにJavaScriptを変換するかを定義したもの。 設定ファイルの作成 Babelの設定ファイルはプロジェクトのルート(package.jsonがある場所)に babel.config.jsonというファイルを作成するだけで、こ…

Babel 基本 #1

Babelとは何か BabelはJavaScriptのコンパイラ 新しい構文で書かれたJavaScriptを古いブラウザでも動作するように変換するのがBabel。 Babelの主な仕事 JavaScriptコードを変換する ポリフィル(最近の機能をサポートしていない古いブラウザでも、新しい機能…

お気に入りのNPM

お気に入りのNPMパッケージメモ json-server - npm jsonファイルを用意するだけで簡単に疑似REST APIサーバーを作成できる。 開発時に適当なREST APIが欲しい時に使う。 dat.gui - npm Three.jsのサンプルページの右上などにあるUnityのInspector的なUIを実…

Create React App はじめに

Create React App はじめに Create React Appを使えば webpackやbabelなどのツールをインストールしたり設定したりする必要がなく Reactをサクッと始める環境が整えられる。 アプリケーションの作成 Nodeのバージョン8.10以上が必要らしいので、予めインスト…

npm コマンドメモ

npm コマンドメモ すぐ忘れてしまうのでnpmのコマンドをメモしておく。 バージョン > npm -v > npm -version 初期化 > npm init このコマンドを実行するとプロジェクト名などを入力するモードになり、入力を追えるとpackage.jsonが作成される。 また以下のよ…

Webpackの導入と動作確認

やること webpackを導入しつつ、実際にwebpackを使って 複数のソースコードを1つのファイルにバンドルしてみる。 実行環境 node v10.10.0 yarn 1.22.0 最終的なディレクトリの中見 root ┣ node_modules ┣ public ┃ ┣ index.html ┃ ┗ js ┃ ┗ bundle.js ┣ src…