elm環境をコマンド一発で作る「create-elm-app」スターターキットの導入方法

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 build

elmに触れることがあれば、活用してみてはいかがだろう。このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。