差分

このページの2つのバージョン間の差分を表示します。

--- z_blog:2019:190319_elm2 [2019/03/19] – [Windows10にVisualStudioCodeでElm開発環境構築手順] adash333
+++ z_blog:2019:190319_elm2 [2019/03/23] (現在) – [Elmリンク2] adash333
@@ 行 1: / 行 1: @@
 ====== 190319 Windows10でElm環境構築（2回目） ======
+===== Elmって何？ =====
+Elm は、Webページの表示に用いる、 JavaScript にコンパイルできる関数型プログラミング言語だそうです。
+Elmで書いて、Javascriptに変換して、WEBページを作成することができるということになります。
+Javascriptよりも簡単！？と宣伝している人がいる印象です。
+私にはJavascriptよりも100倍難しそうに感じますが、とりあえず、『関数型言語』というものに興味を持ってしまったので、しばらく触ってみたいと思います。
 ===== 開発環境 =====
 <code>
@@ 行 31: / 行 38: @@
 {{:z_blog:2019:pasted:20190319-150229.png}}
-===== Windows10にVisualStudioCodeでElm開発環境構築手順 =====
+===== Windows10にVisualStudioCodeでElm0.19開発環境構築手順 =====
 VisualStudioCodeとnode.jsはインストール済みとします。
@@ 行 54: / 行 61: @@
 {{:z_blog:2019:pasted:20190319-151024.png}}
+File > References > Settings
+{{:z_blog:2019:pasted:20190319-152720.png}}
+{} をクリック
+{{:z_blog:2019:pasted:20190319-152757.png}}
-===== リンク =====
+以下を追加。
+<code>
+"[elm]": {
+    "editor.formatOnSave": true
+},
+</code>
+{{:z_blog:2019:pasted:20190319-152859.png}}
+これで、Windows10でVisualStudioCodeでelmを使用するための環境構築が終わりました。
+node.jsを、nvmなどのバージョン管理システムを用いてインストールしていると、うまくいかないことがあるという話もどこかで見ましたが、よくわかりません。
+うまくいかなければ、node.jsを、https://nodejs.org/ja/ から直接ダウンロードしてインストールした方がよいかもしれません。
+===== Hello Worldしてみる =====
+VisualStudioCodeで、C:/elm_from_vscode/　を開き、Ctrl+@で、コマンドプロンプトを開いて、以下を入力。
+<code>
+elm init
+</code>
+Knowing all that, would you like me to create an elm.json file now? [Y/n]:
+と聞かれるので、そのままEnterを押す。
+{{:z_blog:2019:pasted:20190319-153359.png}}
+Elm ソースファイルの作成と編集
+src/　フォルダに、Main.elm ファイルを新規作成。
+{{:z_blog:2019:pasted:20190319-155049.png}}
+以下を入力。
+<code>
+main = div [] [ text "Hello world!" ]
+</code>
+{{:z_blog:2019:pasted:20190319-155312.png}}
+この状態で、Alt + Shift + F を押す。
+すると、ワンテンポ遅れて、いきなり、以下のように変化します。
+{{:z_blog:2019:pasted:20190319-155403.png}}
+これは、elm-formatにより、elmのコードが自動的にフォーマットされたからだそうです。
+まあ、たしかに、importとか勝手にやってほしいですよね。
+次に、Ctrl+S　で保存します。
+すると、今回も、ワンテンポ遅れて、以下のように赤い波線が出てきます。
+{{:z_blog:2019:pasted:20190319-155550.png}}
+これは、コンパイルエラーを示しているそうです。
+main = の上の行で、impと打ち込んでからEnterを押すと、以下のようになります。
+{{:z_blog:2019:pasted:20190319-155642.png}}
+{{:z_blog:2019:pasted:20190319-155656.png}}
+NameのところをHtmlに置き換えて保存します。
+すると、divとtextの下に出ていた赤い波線が消えます。
+{{:z_blog:2019:pasted:20190319-155729.png}}
+これで、コンパイルエラーのないコードができたらしいです。
+==== Elmコードの実行 ====
+VisualStudioCode上で、
+  -Ctrl+Shift+Pで、コマンドパレットを表示し
+  -elm reactor startと打ち込んで、Enterを押します
+{{:z_blog:2019:pasted:20190319-155942.png}}
+{{:z_blog:2019:pasted:20190319-160029.png}}
+以下のような画面になります。
+{{:z_blog:2019:pasted:20190319-160050.png}}
+このとき、WEBサーバが起動しているらしく、ChromeなどのWEBブラウザで、
+http://localhost:8000/src/Main.elm
+にアクセスすると、以下のような表示が出ます。
+{{:z_blog:2019:pasted:20190319-160228.png}}
+これで、Hello Worldが終了です。
+ちなみに、このページのソースコードを表示すると、わけのわからないことになっています。
+{{:z_blog:2019:pasted:20190319-160342.png}}
+なお、サーバを、止めるときは、以下の手順となります。
+VisualStudioCode上で、
+  -Ctrl+Shift+Pで、コマンドパレットを表示し
+  -elm reactor stopと打ち込んで、Enterを押します
+==== Elmコードの実行 その2 ====
+こちらの方が簡単です。
+VisualStudioCode上でCtrl+@で、コマンドプロンプトを表示し、以下を入力
+<code>
+elm reactor
+</code>
+その後、ChromeなどのWEBブラウザで、
+http://localhost:8000/
+にアクセスします。
+サーバを止めるときは、コマンドプロンプト上で、Ctrl+C を押します。
+===== Elmリンク =====
+https://qiita.com/kawauso7/items/fc42fc3e252d88d73f3c
+@kawauso7
+年12月05日に更新
+Elm3（予備） Advent Calendar 20183日目
+Elm を実戦投入した話 2018年冬
+https://gitpitch.com/ababup1192/elm-handson2
+Elm入門ハンズオン
+https://syossan.hateblo.jp/entry/2018/12/17/000000
+初心者Elmerがクソアプリを作った時に気付いたこと
+https://gist.github.com/ababup1192/a1a091bcc0e535d180544639f531302c
+ElmのHello Worldができるまで (2018 10/25)
+→Atomでの環境構築の方法
+https://mbylstra.github.io/html-to-elm/
+{{:z_blog:2019:pasted:20190322-132953.png}}
+http://elmrepl.cuberoot.in/
+{{:z_blog:2019:pasted:20190322-133013.png}}
+===== Elmリンク2 =====
 [[z_blog:2019:190318_elm|190318 Elm]]
+[[z_blog:2019:190323_elmでbulmaを利用|z_blog:2019:190323_elmでbulmaを利用]]
+http://i-doctor.sakura.ne.jp/font/?p=35237
+『基礎からわかるElm』を写経してみる（２）Elmアーキテクチャ
+年3月23日
+http://i-doctor.sakura.ne.jp/font/?p=35219
+『基礎からわかるElm』を写経してみる（１）Html
+年3月23日
+http://i-doctor.sakura.ne.jp/font/?p=35192
+Elm入門ハンズオンを読んでみる（１）
+年3月22日
+http://i-doctor.sakura.ne.jp/font/?p=35162
+Windows8.1ProにVisualStudioCodeでElm0.19開発環境を構築
+年3月22日
+http://i-doctor.sakura.ne.jp/font/?p=35151
+Elmを試してみる
+年3月21日
+===== Elm0.19でお勧めの本 =====
+年3月時点で、elmに関する本は以下の1冊のみです。
+ちょっと読んだ感じですと、まず、環境構築でつまずきかけ、しかも何だか難しくてチンプンカンプンに感じましたが、これから、繰り返し写経していきたいと思います。
+ソースコード
+https://github.com/jinjor/elm-book
+<html>
+<iframe style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=i-doctor-22&language=ja_JP&o=9&p=8&l=as4&m=amazon&f=ifr&ref=as_ss_li_til&asins=B07P253FPG&linkId=c86139085c12c8a0e00a34193ff00d20"></iframe>
+</html>