ふつうのフロントエンドエンジニアが何も考えずにElmウェブアプリケーション開発を始める方法について書きます。ポイントはこれを書いている私自身、Elmについてほとんど何も理解できていないというところです。
対象読者
elmという名前は聞いたことがあるけど何も始めていない人
コマンドラインツールをインストールする
create-elm-app というコマンドラインツールがあるので、それをインストールします。
npm install -g create-elm-app
アプリの雛形を生成する
create-elm-app コマンドを使って、 my-app という名前でアプリの雛形を生成します。
elm-app create my-app
サーバーを立ち上げる
elm-app start
ブラウザを見る
elmアプリが動いてる！やりましたね！
ソースを見る
src/Main.elm を見るとソースがあります。
ソースを修正してみる
さっきの elm-app start した状態でこれを書き換えてみると、それが反映されます。いわゆる Hot Module Replacement という機能ですね。雛形に最初からこの設定入ってるの嬉しいですね。
次のステップ
何も考えずに始めるためにはこれ以上書くことはないと思うのですが、当然これだけでは開発にならないので次のステップについても自分の体験をもとにちょっとずつ別記事にして書き足していきたいと思ってます。正直自分は最初にElmアプリのソースを見てわからないことばかりで面食らってつらかったので、順序が大事な気がしています。
- 周辺ツールについて知る
- Elmアーキテクチャについてざっくり学ぶ
- Elm言語について学ぶ
- HTMLの記法について知る
- ドキュメントの読み方を知る
- 言語仕様についてじっくり学ぶ
HTMLの記法に対する疑問（なんで [] で囲ってるの、みたいな疑問）とかドキュメントの関数シグネチャどうやって読んだらいいの、みたいなところを足掛けにしてElm言語に入門するみたいな形がよさそう
まとめ
- なんかこれだけで記事公開するのもあれかなと思うけど、elm界隈の人みんな頭良さそうなので逆にこれくらい頭の悪い記事もあっていいのでは
- 私自身はelmで趣味アプリを作ってるところなので、まだまだこれからという感じです
- 何かあとから書き足すかもしれない