Haskell勉強会

関数型プログラミングの学習日記

プログラミングElm

「プログラミングElm」という新しいElmの本が出たので、早速買ってみました。

 

 

 

目次

1章 Elmをはじめよう

 1.1 関数の基礎

  ・ElmのREPLでいろいろ試してみる

  ・最初の関数を書いてみよう

  ・真偽値に応じて分岐させる

  ・プログラムを組み立てる部品として関数を使う

  ・引数を部分適用する

 1.2 静的型を使う

  ・Elmファイルを作成する

  ・静的型について深く学ぶ

  ・型注釈を加える

 1.3 静的なアプリを構築する

  ・リストで集合を作成する

  ・写真共有アプリを作成する

  ・写真を表示する

  ・複数の写真を表示する

 1.4 学んだことのまとめ

 

2章 状態を持つElmアプリケーションを作成する

 2.1 The Elm Architectureを適用する

  ・モデルを作成する

  ・レコード型を使ってみる

  ・新しいレコードを作成する

  ・レコード更新構文を使う

  ・イミュータブルであることの利点

  ・レコード型のモデルを作成する

 2.2 ビューを作成する

  ・写真を表示する

 2.3 状態の変更を扱う

  ・写真に「いいね」を付ける

  ・ラブボタンを追加する

  ・イベントを記述する

  ・カスタム型を使ってメッセージを作成する

  ・アップデート関数を追加する

  ・プログラムを作成する

 2.4 The Elm Architectureのライフサイクル

 2.5 学んだことのまとめ

 

3章 Elmアプリケーションをリファクタリングしたり改良したりする

 3.1 うまいやり方でリファクタリングする

  ・型エイリアスを作成する

  ・写真を「いいね」するロジックをシンプルにする

 3.2 写真にコメントを付ける

  ・モデルを修正する

  ・コメントリストを表示する

  ・コメント入力欄を表示する

  ・新しいコメントを打ち込む

  ・コメントを追加する

 3.3 学んだことのまとめ

 

4章 サーバーと通信する

 4.1 JSONを安全にデコードする

  ・問題を理解する

  ・最初にやること

  ・デコーダーで遊んでみよう

  ・パイプライン演算子を使って関数を合成する

  ・JSONオブジェクトをデコードする

  ・写真データ用のデコーダーを作成する

 4.2 HTTP APIからデータを取得する

  ・コマンドを作成する

  ・コマンドを送信する

  ・Nullを安全に扱う

  ・実際にAPIから写真データを受け取る

 4.3 学んだことのまとめ

 

5章 WebSocketでリアルタイム通信を行う

 5.1 複数の写真データを読み込む

  ・複数の写真データを取得する

  ・複数の写真を更新する

  ・エラーに対処する

 5.2 WebSocketから写真データを受け取る

  ・WebSocketサーバーに接続する

  ・WebSocketのポートを使用する

  ・WebSocketデータを処理する

 5.3 学んだことのまとめ

 

6章 さらに大きなアプリケーションを作る

 6.1 ビューを整理する

  ・自分好みのサラダを作ろう!

  ・モデルの中身を見てみよう

  ・ビューを分割する

 6.2 メッセージをもっとシンプルにする

 6.3 モデルの状態を入れ子にする

  ・サラダに関する情報をくくり出す

  ・サラダに関する状態を連携させる

  ・状態の入れ子についての総括

 6.4 拡張可能レコードを使う

  ・連絡先情報のための拡張可能レコードを作成する

  ・連絡先に関する状態を連携させる

 6.5 ビューの重複コードを取り除く

  ・再利用可能なセクションを作成する

  ・トッピングの選択部分を再利用可能にする

  ・ラジオボタンを再利用可能にする

  ・文字入力を再利用可能にする

 6.6 ありえない状態をとれないようにする

  ・フィールドを統合する

 6.7 学んだことのまとめ

 

7章 強力なツールを使って開発やデバッグ、デプロイをする

 7.1 Debugモジュールを使ってデバッグする

  ・Debug.logを使ってログを出力する

  ・JSONのデコード結果を覗いてみる

  ・デコードの失敗理由を詳しく調べる

  ・Debug.todoを使う

 7.2 Elmアプリケーションの開発やデプロイを高速化する

  ・Elm Reactorを起動する

  ・Create Elm App

  ・PicshareがCreate Elm App上で動くようにする

  ・Picshareをデプロイする

 7.3 学んだことのまとめ

 

8章 JavaScriptとの共生

 8.1 Elmアプリケーションを組み込む

  ・画像アップロード機能の前準備

  ・ReactにElmを埋め込む

 8.2 ポートを使って画像をアップロードする

  ・ポートを使ってJavaScriptに通知する

  ・JavaScript側で画像データを読み込む

  ・App.jsのメモを更新する

 8.3 アップロードされた画像を表示する

  ・ポートを通して新しい画像を受け取る

  ・フラグを使って初期画像を受信する

 8.4 学んだことのまとめ

 

9章 Elmアプリケーションをテストする

 9.1 Elmにおけるテスト駆動開発

  ・elm-testを使う

  ・失敗するテストを書く

  ・テストを修正する

 9.2 検証用関数の使い方

  ・TrueまたはFalseになることを検証する

  ・オリジナルの検証用関数を書く

 9.3 ファズテストを行う

  ・最初のファズテストを作成する

  ・範囲を指定したファズを構築する

  ・ファザーを作成する

 9.4 アプリケーションをテストする

  ・アップデート関数をテストする

  ・ビューをテストする

  ・イベントをテストする

 9.5 学んだことのまとめ

 

10章 シングルページアプリケーションを構築する

 10.1 SPAの骨格を構築する

  ・URLをルート情報に変換する

  ・Browser.applicationを作成する

 10.2 各ページ用のコンポーネントにルーティングする

  ・アカウントコンポーネントを構築する

  ・コンポーネントの状態を格納する

  ・コンポーネントの状態を表示・更新する

 10.3 Picshareふたたび

  ・ページ間を移動できるようにする

  ・WebSocketまわりを整理する

 10.4 動的なルーティングを扱う

  ・ラッパーコンポーネントを作成する

  ・パラメーターを持つパスのルーティングを作成する

  ・ラッパーコンポーネントを利用する

 10.5 学んだことのまとめ

 

11章 アプリケーションを高速化する

 11.1 コードのベンチマークをとる

  ・Rescue Meを手伝う

  ・ベンチマークを実行する

 11.2 サイズが大きいリストを走査する

  ・リストのデータ構造を知る

  ・リストのサイズを大きくする

  ・リストをパタパタ畳み込む

  ・先頭を追加してひっくり返す

 11.3 遅延評価を活用する

  ・遅延サンクを書く

  ・もっといろいろ遅延させたりサンプルにしたり

 11.4 アプリケーションに遅延デザインパターンを取り入れる

  ・アプリケーションを手に入れる

  ・Html.Lazyモジュールを使う

  ・動物データをそれぞれ遅延描画させる

  ・最後の演習

 11.5 学んだことのまとめ

 

付録A Elmをインストールする

 A.1 すべての道はNodeに通ず

 A.2 Elmコンパイラーをインストールする

 A.3 開発ツールをインストールする

 

付録B ローカルサーバーを実行する

 B.1 サーバーをインストールして起動する

 

付録C Elmパッケージのバージョンについて

 C.1 古いバージョンのパッケージをインストールする

 

索引

 

著者紹介

●著者プロフィール

Jeremy Fairbank(ジェレミー・フェアバンク)

ハワイ在住、Test Doubleのソフトウェアエンジニアおよびコンサルタントで、Elmのエキスパート。

ジョージア工科大学(Georgia Institute of Technology)でコンピューターサイエンスの修士号(Master of Science inComputer Science)を取得。

長年のウェブ開発の経験を活かし、数多くのカンファレンスなどに登壇し、フロントエンド開発のためのElmの使い方を伝授している。

https://twitter.com/elpapapollo

 

●訳者プロフィール

ヤギのさくらちゃん

ぶめぇ。さくらちゃんはさくらちゃんやぎぃ。

東京大学大学院情報理工学系研究科修士修了。前期博士課程って書けば博士号取得者と勘違いしてもらえるけど誠実には「修士」って書くやぎぃ。

フリーランスUXハッカー

さくらちゃんは己の生き様を作品とするアーティストやぎぃ。

Elm guide日本語翻訳プロジェクト主催者。

プログラマーとしてはElmとHaskellを主に使ってるやぎぃ。

代表的なElmライブラリーにelm-form-decoderなどがある。

ヤギ語翻訳者。ヤギさんにゲップをさせるのが得意。ぶめぇ。

https://twitter.com/arowM_

 

出版社情報

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

 

書評

まず最初に言えることは、「とても読みやすい本である」ということ。

これは翻訳者の意図によるところが大きいです。

 

まえがき(p.viii)より

 また本書は翻訳書でありながら、原著よりはるかに優れた内容にすることを目指しました。DeepLがある時代に直訳なんか人間の仕事じゃありません。原著に忠実なことよりも、原著者の言わんとすることを最大限に読みやすく分かりやすく小気味よく表現することを心がけています。論理構造を変えていますし、原文にない表現もゴリゴリ追加しています。このように、技術書翻訳の世界に「創作的翻訳」と呼ぶべき新しい手法を取り入れたのが本書です。加えて、随所にさくらちゃんの知見を活かした訳注を入れています。

 最後に、不幸を避けるために注意点を挙げておきます。よくご確認ください。

 

●Elm作者が書いた本ではありません

訳注でも補足していますが、言語作者の意図を知りたければElm guideと呼ばれるコンテンツをお勧めします。さくらちゃんが立ち上げた日本語版も存在します。

 

●網羅的に広くカバーした本ではありません

C&R研究所の「基礎からわかるElm」もお勧めです。この本はさくらちゃんもレビューに加わりました。他出版社の本ですが、とても細やかに広い範囲をカバーしています。

 

●原著至上主義ではありません

原著にもっとも忠実なのは原著です。原著を大切にしたい方は英語で読みましょう。

 

https://guide.elm-lang.jp/

guide.elm-lang.jp

 

haskell.hatenablog.com

 

訳者が「創作的翻訳」と呼ぶ手法によって、こなれた日本語になっており、説明や補足も丁寧になっているように思われます。

また、創作的翻訳が改善ではなく改悪になっていないか?という疑念もあるため、英語の原著も一度読んでみたいという気にさせるのも、商業的な戦略として巧みかも?

=日本語の訳書を買った後に、ついでに英語の原著も買ってしまうという流れ😁

 

さて、内容ですが、あまりにも読みやすいため日曜日の数時間で半分くらい読めました。

(コードの写経や動作確認はやらないで、ただ文字を読むだけ)

Elmの流儀を知りたい方は、マジで本書をお勧めします。本当に気負わずサクサクと読めるので、自分でもビックリしました。

 

なぜ、スラスラと読めてしまうのか?原因を考えてみると、思い当たる節がありました。

「東大読書」という本で、著者と対話しているつもりで本を読めば内容を飲み込みやすいという読書法が紹介されています。

 

「読む力」と「地頭力」がいっきに身につく 東大読書
 

 

本書は、訳者の「創作的翻訳」のおかげなのか、特に意識しなくても、著者と会話しながら本を読んでいるような気分になりやすいのです。

なんか、著者&訳者が読者に語りかけるような文章で、親しみやすさを感じました。

 

結果的に、読者が得たい情報=Elmの使い方を速習できれば、何でもOKなのですが、この「創作的翻訳」というコンセプトは非常に良いと思いました。

最近読んだ技術書の中では、ピカイチで読みやすい本だったので、非常に新鮮な驚きが得られました。こんなに「分かりやすい!」と思えた技術書を読んだのは、久方ぶりでしたので。

 

読書は、

  • 1巡目は文字だけ追ってみます。(サンプルコードの写経や動作確認はやらない)
  • 2巡目にサンプルコードの写経や動作確認をやってみます。
  • 3巡目は残った疑問点を調べて解決する作業に専念。
  • 4巡目は読書メモとして、ブログに気付きなどを書いてみたいと思います。

 

本書を読み終えたら、途中まで読んで放置していた「基礎からわかる Elm」も再読してみたいと思います。😅

 

 

 

基礎からわかる Elm

基礎からわかる Elm

  • 作者:鳥居 陽介
  • 発売日: 2019/02/27
  • メディア: 単行本(ソフトカバー)