５分で書く
@suin さんが「５分でQiita記事書くのがおすすめ」と仰っていたので、実践してみます。
主旨
Elmについて学んだことや試したことを書きます。
ある程度まとめてから面白く書こうと思っていたら、いつまでも書かないでいたので、まとまりの悪い記事をちまちま書くことにしました。
Elmとは
コンパイルするとHTML、JavaScript、CSSを出力してくれる言語です。
素のJavaScriptを頑張って書こうとするとぐちゃぐちゃになりやすいですが、
Elmは言語のルールが厳格なので汚くなりにくい、きれいなソースを維持！
（間違ってたらごめんなさい）
公式サイト
日本コミュニティ
日本語ガイド（コミュニティの方々が素敵に訳してくださっています）
英語コミュニティのslackもありますが、ものすごい人数＆チャンネル＆英語オンリーなので、ついていけませんでした。辛うじてHappyNewYear!は読めました。
環境構築
ガイド見てやりました！
ただし、自分はスマホからいじれるようにしたかったので、
VPS（AWS Lightsail）を借りてそこにインストールしました。
- 借りる
- nodeをインストール
- elmをインストール
別にVPSじゃなくても、コンパイルしてできあがったHTMLたちをNetlifyにあげるとかすれば動作確認できますが、スマホでそれするのが面倒そうだったので。。。
スマホで何すんのよ
ガイド見ながらコマンド実行
Elmには、Replという、コマンドを単発で実行する機能があります。
ガイドを見ながらReplして、動きを確認しつつ学びたかったのです。
ひとさまのソースコードをコンパイルして実行
ElmはWebサーバー機能も持っています。
「elm reactor」と入力すると、ビルドしつつデプロイしてWebサーバーを起動してくれて、ブラウザからローカルにアクセスして動かせます。
さすがにスマホで開発するのはキビシイですが、githubからcloneしてきた、素晴らしいソースコードを実行してみるのに役立っています。
VPS特有のつまずき
「elm reactor」すると、localhost:8000にアクセスして動作確認できるようになるのですが、VPS上でそれをやっちゃうと、どうやってアクセスしたらいいもんだか…と困りました。
解決策としては２つ考えました。
- nginxなどのWebサーバーを別途インストールして、コンパイルしたHTMLたちをそこに置く（ためのshellを作っておく）
- nginxを使うのは同じなんだけど、リバースプロキシ（というものらしい）の設定をして、nginxに対してのリクエストをElm内Webサーバーに転送する
ふつうに1が良さそうなんですが、2を採用しました！
最初は、リクエストURLがelm/で始まるものだけ転送しようとしたのですが、HTML内で読み込んでいるCSSやJSのファイルたちが絶対パスで書いてあり（俺が書いたわけじゃねーっす。Elmが出力したものです）、思っていたような動きにならず、全てのリクエストをelmサーバーに転送することにしました。
（nginxとかリバースプロキシのあたりでつまずいていたら、@enmaさんが情報くださいました。感謝です。）
5分で書けたかな？
気がつけば40分書いていました…こんなに雑なのに…
5分って難しい。次回こそは。