SPAに代表されるReactには、create-react-appなるスターターキットが用意されている。これはReact開発環境を構築してくれるものだ。即座に開発を始められるようセットアップされいるため、プロジェクトの導入時に利用するケースも少なくない。
これと同様にelmにも、create-elm-appが存在する。elmを触れてみたいと思っていてもなかなか実現しなかった場合にも役立つものだと思う。
このエントリーでは、create-elm-appを紹介したい。
create-elm-appとは
elm新規プロジェクトのスターターキット。ワンコマンドで、ローカル開発環境を構築してくれる。
特徴
- コマンド一発で環境構築
- ホットリロードしてくれる
- Boilerplateとして活用
create-elm-appを触ってみる
create-elm-appのインストール
create-elm-appインストールには、Node.jsのバージョン8以上が必要だ。未インストールやバージョンが低い場合は、事前に対応してもらいたい。
$ npm install create-elm-app -g
# or
$ yarn global add create-elm-appプロジェクトを作成する
無事インストールは済んだだろうか。問題なければ、早速プロジェクトを作成してみたい。プロジェクトを作成したいディレクトリに移動して以下コマンドを実行する。＜project-directory＞に、任意のフォルダ名を記述することで、当該フォルダが生成される。
$ create-elm-app <project-directory>果たして、elm環境のセットアップが確認できる。環境の構造は以下のとおりだ。
.
├── .gitignore
├── README.md
├── elm.json
├── elm-stuff
│ └── 0.19.0
│ ├── Main.elmi
│ ├── Main.elmo
│ └── summary.dat
├── tests
│ └── Tests.elm
├── public
│ ├── favicon.ico
│ ├── index.html
│ ├── logo.svg
│ └── manifest.json
└── src
├── index.js
├── main.css
├── Main.elm
└── serviceWorker.js
ローカル開発環境を起動する
セットアップされたプロジェクトフォルダに移動して、開発モードを起動する。ローカルサーバー立ち上がるとブラウザが起動してhttp://localhost:3000にアクセスできる。
$ cd <project-directory>
$ elm-app start公開用データを作る
本番環境用データのビルドは以下コマンドを実行することで、buildフォルダに生成される。
$ elm-app buildまとめ
elmのスターターキット「create-elm-app」の話だった。プロジェクトの導入だったり、学習のキッカケだったり使い勝手は良さそうだ。
$ npm install create-elm-app -g
$ create-elm-app <project-directory>
$ cd <project-directory>
$ elm-app start
$ elm-app buildelmに触れることがあれば、活用してみてはいかがだろう。このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。