Elmを使った開発環境構築(webpack編)

構成

  • Git --ソースコードのバージョン管理
  • Node(npmまたはyarn) --ライブラリなどのパッケージ管理システム
  • Elm 0.18
  • elm-format --自動整形ツール
  • webpack --フロントエンドのビルドツール

npmを使いElmを含めたフロントエンド環境のライブラリやツールのバージョン管理を行います。 yarnとは、npmの不便な所を簡単なコマンドで行えるようにしてくれるツールです。最近使われだしています。

elm-formatはElmソースコードをElm公式スタイルガイドのスタイルで整形してくれるツールです。 elm-formatを使ってElmソースコードを整形します。

webpackはフロントエンドのソースコード全般の管理ツールです。 webpackを使ってホットリロードによる開発と、ビルドを行います。

Nodeをインストール

Nodeの公式ページに行き、インストーラをダウンロードして使います。stableと開発バージョンの2つが公開されていますが、どちらでも構いません。

Node自体のバージョンも管理する必要がありますが、今回は扱いません。必要になったら調べてみてください。

npm

npmはNodeに搭載されたパッケージ管理システムです。

npmスクリプト

package.jsonファイルを眺めてみます。

todo

elm-format

avh4/elm-format

elm-formatは、Elmコードをきれいに整形してくれるツールです。注意したいコードがあった場合も教えてくれます。(例:インポートしても使わないライブラリがあるなど)

elm-formatをエディタに組み込むプラグインも多数公開されているので、エディタに設定しましょう。

複数人で開発する場合は、すべてのElmソースコードを最終的にelm-formatで整形する仕組みを作ると良いです。今回は一人で開発する規模を想定しているので、この仕組みは用意しません。

ここでは、エディタにelm-format用プラグインを導入して、変更保存するたびに自動で整形するようにします。

elm-formatのインストール

MacとLinuxとwindowsそれぞれにバイナリが公開されています。 elm-formatバイナリをダウンロードしてフォルダに設置します。設置した場所のパスを環境変数に設定します。

以下のコマンドが通ると成功です。

elm-format -h

エディタにプラグインを設定する。

elm-formatのドキュメントには、各エディタへのプラグイン対応状況とプラグイン名と簡単な設定方法が載っています。各プラグインのgithubページも参考にしてみてください。自分のエディタにあったプラグインをインストールして、elm-formatをエディタから使えるようにします。

例えばAtom(エディタ)では、atom-elm-formatとatom-beautifyというプラグインが紹介されています。

Atomで設定してみます。ctrl + shift + p から、open setting panelを選び、設定パネルのインストールからatom-beautifyをインストールします。設定パネルのpackage欄からatom-beautifyを検索します。設定のElmの欄からelm-formatを選択してセーブ時にフォーマットを行うようにチェックを入れると完了です。

webpack

webpackとは、フロントエンド環境のソースコード全般を管理するツールです。

フロントエンドにはHTMLやCSSやJSやElmといったコードがありますが、それらはHTMLならミニファイし、SCSSならコンパイル、JSならbabelでトランスパイラして、すべてHTMLにリンクして、適切な位置に配置する必要があります。とても面倒な作業が多いので、webpackにすべてやってもらおうというわけです。

他にも似たことが出来るGrantやgulpといったツールがありますが、今回使うのはwebpackにしました。それはGruntやgulpは構文を覚える必要があり、難しさが構文とやりたい事の掛け算になりますが、webpackは設定を書くという一つの行為で済むためシンプルだと思ったからです。また沢山の開発者がいてバグが少ないことが挙げられます。

elm-webpack-starter

elm-webpack-starterはwebpackを使ったElm開発環境ボイラープレートです。webpackの設定方法や、webpackでのElmの構成がわかって大変勉強になります。

moarwick/elm-webpack-starter

elm-webpack-starterの設定を見てみます。

results matching ""

    No results matching ""