#author("2022-01-21T11:35:26+00:00","default:sagasite","sagasite")
#author("2022-01-21T11:38:08+00:00","default:sagasite","sagasite")
[[Program]] ＞ [[JavaScript]] ＞ [[AltJS]] ＞ [[Elm]] ＞ 参考書
RIGHT:2022-01-21 (金) 公開
//RIGHT:2022-01-21 (金) 更新
//===== ===== ===== ===== ===== ===== ===== ===== ===== =====
//* 書名 [#book]
#html{{
<table border="0" cellpadding="5"><tr><td valign="top"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/4839970041/vertex9-22/" target="_blank"><img src="https://m.media-amazon.com/images/I/51bna66FrKL._SL160_.jpg" border="0"></a></td><td> </td><td valign="top"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/4839970041/vertex9-22/" target="_blank">プログラミングElm ~安全でメンテナンスしやすいフロントエンドアプリケーション開発入門</a><br>Jeremy Fairbank<br>マイナビ出版<br>2021-03-01<br>￥3278</td></tr></table>
<hr>
}}
#contents
//===== ===== ===== ===== ===== ===== ===== ===== ===== =====
* 目次 [#contents]
まえがき
** 1章 Elmをはじめよう [#bfe75f34]
[[1.1 関数の基礎>Programming-Elm_1-1]]
・[[ElmのREPLでいろいろ試してみる>Programming-Elm_1-1-1]]
・[[最初の関数を書いてみよう>Programming-Elm_1-1-2]]
・[[真偽値に応じて分岐させる>Programming-Elm_1-1-3]]
・[[プログラムを組み立てる部品として関数を使う>Programming-Elm_1-1-4]]
・[[引数を部分適用する>Programming-Elm_1-1-5]]
[[1.2 静的型を使う>Programming-Elm_1-2]]
・[[Elmファイルを作成する>Programming-Elm_1-2-1]]
・[[静的型について深く学ぶ>Programming-Elm_1-2-2]]
・[[型注釈を加える>Programming-Elm_1-2-3]]
[[1.3 静的なアプリを構築する>Programming-Elm_1-3]]
・[[リストで集合を作成する>Programming-Elm_1-3-1]]
・[[写真共有アプリを作成する>Programming-Elm_1-3-2]]
・[[写真を表示する>Programming-Elm_1-3-3]]
・[[複数の写真を表示する>Programming-Elm_1-3-4]]
[[1.4 学んだことのまとめ>Programming-Elm_1-4]]
** 2章 状態を持つElmアプリケーションを作成する [#b8b3d0a2]
[[2.1 The Elm Architectureを適用する>Programming-Elm_2-1]]
・[[モデルを作成する>Programming-Elm_2-1-1]]
・[[レコード型を使ってみる>Programming-Elm_2-1-2]]
・[[新しいレコードを作成する>Programming-Elm_2-1-3]]
・[[レコード更新構文を使う>Programming-Elm_2-1-4]]
・[[イミュータブルであることの利点>Programming-Elm_2-1-5]]
・[[レコード型のモデルを作成する>Programming-Elm_2-1-6]]
[[2.2 ビューを作成する>Programming-Elm_2-2]]
・[[写真を表示する>Programming-Elm_2-2-1]]
[[2.3 状態の変更を扱う>Programming-Elm_2-3]]
・[[写真に「いいね」を付ける>Programming-Elm_2-3-1]]
・[[ラブボタンを追加する>Programming-Elm_2-3-2]]
・[[イベントを記述する>Programming-Elm_2-3-3]]
・[[カスタム型を使ってメッセージを作成する>Programming-Elm_2-3-4]]
・[[アップデート関数を追加する>Programming-Elm_2-3-5]]
・[[プログラムを作成する>Programming-Elm_2-3-6]]
[[2.4 The Elm Architectureのライフサイクル>Programming-Elm_2-4]]
[[2.5 学んだことのまとめ>Programming-Elm_2-5]]
** 3章 Elmアプリケーションをリファクタリングしたり改良したりする [#mb0365ed]
[[3.1 うまいやり方でリファクタリングする>Programming-Elm_3-1]]
・[[型エイリアスを作成する>Programming-Elm_3-1-1]]
・[[写真を「いいね」するロジックをシンプルにする>Programming-Elm_3-1-2]]
[[3.2 写真にコメントを付ける>Programming-Elm_3-2]]
・[[モデルを修正する>Programming-Elm_3-2-1]]
・[[コメントリストを表示する>Programming-Elm_3-2-2]]
・[[コメント入力欄を表示する>Programming-Elm_3-2-3]]
・[[新しいコメントを打ち込む>Programming-Elm_3-2-4]]
・[[コメントを追加する>Programming-Elm_3-2-5]]
[[3.3 学んだことのまとめ>Programming-Elm_3-3]]
** 4章 サーバーと通信する [#af28b6b2]
[[4.1 JSONを安全にデコードする>Programming-Elm_4-1]]
・[[問題を理解する>Programming-Elm_4-1-1]]
・[[最初にやること>Programming-Elm_4-1-2]]
・[[デコーダーで遊んでみよう>Programming-Elm_4-1-3]]
・[[パイプライン演算子を使って関数を合成する>Programming-Elm_4-1-4]]
・[[JSONオブジェクトをデコードする>Programming-Elm_4-1-5]]
・[[写真データ用のデコーダーを作成する>Programming-Elm_4-1-6]]
[[4.2 HTTP APIからデータを取得する>Programming-Elm_4-2]]
・[[コマンドを作成する>Programming-Elm_4-2-1]]
・[[コマンドを送信する>Programming-Elm_4-2-2]]
・[[Nullを安全に扱う>Programming-Elm_4-2-3]]
・[[実際にAPIから写真データを受け取る>Programming-Elm_4-2-4]]
[[4.3 学んだことのまとめ>Programming-Elm_4-3]]
** 5章 WebSocketでリアルタイム通信を行う [#qf2982b8]
[[5.1 複数の写真データを読み込む>Programming-Elm_5-1]]
・[[複数の写真データを取得する>Programming-Elm_5-1-1]]
・[[複数の写真を更新する>Programming-Elm_5-1-2]]
・[[エラーに対処する>Programming-Elm_5-1-3]]
[[5.2 WebSocketから写真データを受け取る>Programming-Elm_5-2]]
・[[WebSocketサーバーに接続する>Programming-Elm_5-2-1]]
・[[WebSocketのポートを使用する>Programming-Elm_5-2-2]]
・[[WebSocketデータを処理する>Programming-Elm_5-2-3]]
[[5.3 学んだことのまとめ>Programming-Elm_5-3]]
** 6章 さらに大きなアプリケーションを作る [#ve7907d7]
[[6.1 ビューを整理する>Programming-Elm_6-1]]
・[[自分好みのサラダを作ろう！>Programming-Elm_6-1-1]]
・[[モデルの中身を見てみよう>Programming-Elm_6-1-2]]
・[[ビューを分割する>Programming-Elm_6-1-3]]
[[6.2 メッセージをもっとシンプルにする>Programming-Elm_6-2]]
[[6.3 モデルの状態を入れ子にする>Programming-Elm_6-3]]
・[[サラダに関する情報をくくり出す>Programming-Elm_6-3-1]]
・[[サラダに関する状態を連携させる>Programming-Elm_6-3-2]]
・[[状態の入れ子についての総括>Programming-Elm_6-3-3]]
[[6.4 拡張可能レコードを使う>Programming-Elm_6-4]]
・[[連絡先情報のための拡張可能レコードを作成する>Programming-Elm_6-4-1]]
・[[連絡先に関する状態を連携させる>Programming-Elm_6-4-2]]
[[6.5 ビューの重複コードを取り除く>Programming-Elm_6-5]]
・[[再利用可能なセクションを作成する>Programming-Elm_6-5-1]]
・[[トッピングの選択部分を再利用可能にする>Programming-Elm_6-5-2]]
・[[ラジオボタンを再利用可能にする>Programming-Elm_6-5-3]]
・[[文字入力を再利用可能にする>Programming-Elm_6-5-4]]
[[6.6 ありえない状態をとれないようにする>Programming-Elm_6-6]]
・[[フィールドを統合する>Programming-Elm_6-6-1]]
[[6.7 学んだことのまとめ>Programming-Elm_6-7]]
** 7章 強力なツールを使って開発やデバッグ、デプロイをする [#j322475f]
[[7.1 Debugモジュールを使ってデバッグする>Programming-Elm_7-1]]
・[[Debug.logを使ってログを出力する>Programming-Elm_7-1-1]]
・[[JSONのデコード結果を覗いてみる>Programming-Elm_7-1-2]]
・[[デコードの失敗理由を詳しく調べる>Programming-Elm_7-1-3]]
・[[Debug.todoを使う>Programming-Elm_7-1-4]]
[[7.2 Elmアプリケーションの開発やデプロイを高速化する>Programming-Elm_7-2]]
・[[Elm Reactorを起動する>Programming-Elm_7-2-1]]
・[[Create Elm App>Programming-Elm_7-2-2]]
・[[PicshareがCreate Elm App上で動くようにする>Programming-Elm_7-2-3]]
・[[Picshareをデプロイする>Programming-Elm_7-2-4]]
[[7.3 学んだことのまとめ>Programming-Elm_7-3]]
** 8章 JavaScriptとの共生 [#ocabbbf3]
[[8.1 Elmアプリケーションを組み込む>Programming-Elm_8-1]]
・[[画像アップロード機能の前準備>Programming-Elm_8-1-1]]
・[[ReactにElmを埋め込む>Programming-Elm_8-1-2]]
[[8.2 ポートを使って画像をアップロードする>Programming-Elm_8-2]]
・[[ポートを使ってJavaScriptに通知する>Programming-Elm_8-2-1]]
・[[JavaScript側で画像データを読み込む>Programming-Elm_8-2-2]]
・[[App.jsのメモを更新する>Programming-Elm_8-2-3]]
[[8.3 アップロードされた画像を表示する>Programming-Elm_8-3]]
・[[ポートを通して新しい画像を受け取る>Programming-Elm_8-3-1]]
・[[フラグを使って初期画像を受信する>Programming-Elm_8-3-2]]
[[8.4 学んだことのまとめ>Programming-Elm_8-4]]
** 9章 Elmアプリケーションをテストする [#w6cbc998]
[[9.1 Elmにおけるテスト駆動開発>Programming-Elm_9-1]]
・[[elm-testを使う>Programming-Elm_9-1-1]]
・[[失敗するテストを書く>Programming-Elm_9-1-2]]
・[[テストを修正する>Programming-Elm_9-1-3]]
[[9.2 検証用関数の使い方>Programming-Elm_9-2]]
・[[TrueまたはFalseになることを検証する>Programming-Elm_9-2-1]]
・[[オリジナルの検証用関数を書く>Programming-Elm_9-2-2]]
[[9.3 ファズテストを行う>Programming-Elm_9-3]]
・[[最初のファズテストを作成する>Programming-Elm_9-3-1]]
・[[範囲を指定したファズを構築する>Programming-Elm_9-3-2]]
・[[ファザーを作成する>Programming-Elm_9-3-3]]
[[9.4 アプリケーションをテストする>Programming-Elm_9-4]]
・[[アップデート関数をテストする>Programming-Elm_9-4-1]]
・[[ビューをテストする>Programming-Elm_9-4-2]]
・[[イベントをテストする>Programming-Elm_9-4-3]]
[[9.5 学んだことのまとめ>Programming-Elm_9-5]]
** 10章 シングルページアプリケーションを構築する [#ffdfdba2]
[[10.1 SPAの骨格を構築する>Programming-Elm_10-1]]
・[[URLをルート情報に変換する>Programming-Elm_10-1-1]]
・[[Browser.applicationを作成する>Programming-Elm_10-1-2]]
[[10.2 各ページ用のコンポーネントにルーティングする>Programming-Elm_10-2]]
・[[アカウントコンポーネントを構築する>Programming-Elm_10-2-1]]
・[[コンポーネントの状態を格納する>Programming-Elm_10-2-2]]
・[[コンポーネントの状態を表示・更新する>Programming-Elm_10-2-3]]
[[10.3 Picshareふたたび>Programming-Elm_10-3]]
・[[ページ間を移動できるようにする>Programming-Elm_10-3-1]]
・[[WebSocketまわりを整理する>Programming-Elm_10-3-2]]
[[10.4 動的なルーティングを扱う>Programming-Elm_10-4]]
・[[ラッパーコンポーネントを作成する>Programming-Elm_10-4-1]]
・[[パラメーターを持つパスのルーティングを作成する>Programming-Elm_10-4-2]]
・[[ラッパーコンポーネントを利用する>Programming-Elm_10-4-3]]
[[10.5 学んだことのまとめ>Programming-Elm_10-5]]
** 11章 アプリケーションを高速化する [#cc03bedb]
[[11.1 コードのベンチマークをとる>Programming-Elm_11-1]]
・[[Rescue Meを手伝う>Programming-Elm_11-1-1]]
・[[ベンチマークを実行する>Programming-Elm_11-1-2]]
[[11.2 サイズが大きいリストを走査する>Programming-Elm_11-2]]
・[[リストのデータ構造を知る>Programming-Elm_11-2-1]]
・[[リストのサイズを大きくする>Programming-Elm_11-2-2]]
・[[リストをパタパタ畳み込む>Programming-Elm_11-2-3]]
・[[先頭を追加してひっくり返す>Programming-Elm_11-2-4]]
[[11.3 遅延評価を活用する>Programming-Elm_11-3]]
・[[遅延サンクを書く>Programming-Elm_11-3-1]]
・[[もっといろいろ遅延させたりサンプルにしたり>Programming-Elm_11-3-2]]
[[11.4 アプリケーションに遅延デザインパターンを取り入れる>Programming-Elm_11-4]]
・[[アプリケーションを手に入れる>Programming-Elm_11-4-1]]
・[[Html.Lazyモジュールを使う>Programming-Elm_11-4-2]]
・[[動物データをそれぞれ遅延描画させる>Programming-Elm_11-4-3]]
・[[最後の演習>Programming-Elm_11-4-4]]
[[11.5 学んだことのまとめ>Programming-Elm_11-5]]
** 付録A Elmをインストールする [#w2a6b116]
[[A.1 すべての道はNodeに通ず>Programming-Elm_A-1]]
[[A.2 Elmコンパイラーをインストールする>Programming-Elm_A-2]]
[[A.3 開発ツールをインストールする>Programming-Elm_A-3]]
** 付録B ローカルサーバーを実行する [#e99603e6]
[[B.1 サーバーをインストールして起動する>Programming-Elm_B-1]]
** 付録C Elmパッケージのバージョンについて [#gb8ccb55]
[[C.1 古いバージョンのパッケージをインストールする>Programming-Elm_C-1]]
** 索引 [#c5c3ed6d]
//===== ===== ===== ===== ===== ===== ===== ===== ===== =====
* 出版社情報 [#publisher]
- プログラミングElm | マイナビブックス
https://book.mynavi.jp/ec/products/detail/id=120921
- サポートサイト
https://book.mynavi.jp/supportsite/detail/9784839970048.html
- 原著サイト
https://pragprog.com/titles/jfelm/programming-elm/
- サンプルコードのダウンロード
https://media.pragprog.com/titles/jfelm/code/jfelm-code.zip
//===== ===== ===== ===== ===== ===== ===== ===== ===== =====
* 著者紹介 [#author]
** 著者 [#f44dd14e]
Jeremy Fairbank（ジェレミー・フェアバンク）
ハワイ在住、Test Doubleのソフトウェアエンジニアおよびコンサルタントで、Elmのエキスパート。
ジョージア工科大学（Georgia Institute of Technology）でコンピューターサイエンスの修士号（Master of Science inComputer Science）を取得。
長年のウェブ開発の経験を活かし、数多くのカンファレンスなどに登壇し、フロントエンド開発のためのElmの使い方を伝授している。
https://twitter.com/elpapapollo
** 訳者 [#z6a7536d]
ヤギのさくらちゃん
ぶめぇ。さくらちゃんはさくらちゃんやぎぃ。
東京大学大学院情報理工学系研究科修士修了。前期博士課程って書けば博士号取得者と勘違いしてもらえるけど誠実には「修士」って書くやぎぃ。
フリーランスUXハッカー。
さくらちゃんは己の生き様を作品とするアーティストやぎぃ。
Elm guide日本語翻訳プロジェクト主催者。
プログラマーとしてはElmとHaskellを主に使ってるやぎぃ。
代表的なElmライブラリーにelm-form-decoderなどがある。
ヤギ語翻訳者。ヤギさんにゲップをさせるのが得意。ぶめぇ。
https://twitter.com/arowM_
//===== ===== ===== ===== ===== ===== ===== ===== ===== =====
* 書評 [#review]
訳者が「創作的翻訳」と名付けた翻訳方法によって、文章がこなれた日本語になっています。
説明や補足も丁寧で分かりやすいと思いました。
本書を参考にして、Elmの使い方について学んでみます。
//===== ===== ===== ===== ===== ===== ===== ===== ===== =====
//* 学習メモ [#memo]
//|頁+行|章節|項目|日付|h
//| [[書名_p_L]] | | | |
//----- ----- ----- ----- ----- ----- ----- -----
// A8 Ads - sakura VPS banner
~
#html{{
<center><a href="http://px.a8.net/svt/ejp?a8mat=1O73NW+3B2PRM+D8Y+BXB8X" target="_blank"><img border="0" width="468" height="60" alt="" src="http://www21.a8.net/svt/bgt?aid=101108300200&wid=001&eno=01&mid=s00000001717002003000&mc=1"></a><img border="0" width="1" height="1" src="http://www18.a8.net/0.gif?a8mat=1O73NW+3B2PRM+D8Y+BXB8X" alt=""></center>
}}
//----- ----- ----- ----- ----- ----- ----- -----
