parcelでelmアプリを作成してみる(1)
elmと bulmaでググったら、以下のサイトを見つけたので、写経してみたいと思います。
2019/3/26時点で、途中みたいですが、とりあえず、途中まででも写経してみたいと思います。
特徴的なのは、parcel.jsというバンドラーを用いており、index.htmlに、cssフレームワークbulmaと、fontawesomeアイコンを簡単に導入できるところが魅力的です。
→(20190328追記)create-elm-appでも、public/index.htmlに、簡単に、bulmaとFontAwesome5のCDNを記載することができることが後で分かりました。
https://dev.to/mickeyvip/writing-a-word-memory-game-inelm—part-1-setting-up-an-elm-application-with-parcel-1ppk
![](https://i-doctor.sakura.ne.jp/font/wp-content/uploads/2019/03/image-122.png)
開発環境
Windows 10 Pro
Chrome
VisualStudioCode 1.32.3
git version 2.20.1.windows.1
nvm 1.1.7
node 10.2.0
npm 6.4.1
elm 0.19.0-bugfix6
elm-format 0.8.1
VisualStudioCodeの拡張機能でelmをインストールして、settings.jsonに以下のようにelmを設定。
(『Alt + Shift + F』と『Ctrl + S』を使用。)
"[elm]": {
"editor.formatOnSave": true
},
今回構築した環境
parcel-bundler@1.12.3
package.jsonの作成
C:/elm/ フォルダに、word-memory-game/ ファルダを作成し、そのフォルダを、VisualStudioCodeで開き、Ctrl+@でターミナル画面を開き、以下を入力。
npm init -y
![](https://i-doctor.sakura.ne.jp/font/wp-content/uploads/2019/03/image-123.png)
![](https://i-doctor.sakura.ne.jp/font/wp-content/uploads/2019/03/image-125.png)
package.jsonファイルが作成されます。
parcelのインストール
npm i -D parcel-bundler
数分かかります。
![](https://i-doctor.sakura.ne.jp/font/wp-content/uploads/2019/03/image-126.png)
index.htmlとindex.jsの作成
![](https://i-doctor.sakura.ne.jp/font/wp-content/uploads/2019/03/image-127.png)
![](https://i-doctor.sakura.ne.jp/font/wp-content/uploads/2019/03/image-128.png)
package.jsonの編集
(変更前)
![](https://i-doctor.sakura.ne.jp/font/wp-content/uploads/2019/03/image-129.png)
(変更後)
![](https://i-doctor.sakura.ne.jp/font/wp-content/uploads/2019/03/image-130.png)
npm run dev する
開発サーバを起動します。
![](https://i-doctor.sakura.ne.jp/font/wp-content/uploads/2019/03/image-131.png)
Chromeが開いて真っ白ですが、Ctrl+Shift+I を押して、Console画面を出すと、以下のようになります。
![](https://i-doctor.sakura.ne.jp/font/wp-content/uploads/2019/03/image-132.png)
![](https://i-doctor.sakura.ne.jp/font/wp-content/uploads/2019/03/image-133.png)
Elmアプリ作成のために、index.htmlとindex.jsを編集
![](https://i-doctor.sakura.ne.jp/font/wp-content/uploads/2019/03/image-134.png)
![](https://i-doctor.sakura.ne.jp/font/wp-content/uploads/2019/03/image-135.png)
src/Main.elmの新規作成
src/ フォルダを作成し、その中にMain.elmを作成します
![](https://i-doctor.sakura.ne.jp/font/wp-content/uploads/2019/03/image-137.png)
![](https://i-doctor.sakura.ne.jp/font/wp-content/uploads/2019/03/image-136.png)
うまくいかないので、一度、Ctrl+C => Enter でサーバを停止してから、再度、npm run devでサーバを起動すると、3回目くらいで動きました。原因はよくわかりません。
![](https://i-doctor.sakura.ne.jp/font/wp-content/uploads/2019/03/image-138.png)
![](https://i-doctor.sakura.ne.jp/font/wp-content/uploads/2019/03/image-139.png)
src/Main.elmを編集して、Msg, Model, view, updateを記載する
![](https://i-doctor.sakura.ne.jp/font/wp-content/uploads/2019/03/image-140.png)
![](https://i-doctor.sakura.ne.jp/font/wp-content/uploads/2019/03/image-141.png)
途中
ディスカッション
コメント一覧
まだ、コメントがありません