© Chatwork 本当に 0 からの 関数型プログラミングの歩き始め方 2023/03/24 [Fri]　DevRel 部 MGR　高瀬 和之 (@Guvalif) Chatwork 株式会社

2019 年に Chatwork 株式会社へ フロントエンド・エンジニア としてジョインし、 リリース基盤やビデオ通話アプリケーションの開発に従事。 2020 年から エンジニア採用広報に転身 し、技術イベント運営や エンジニア採用を主業務とする。パラレルワークで講師業 も営む。 Opt さん主催のイベントには、直近のものだと 「第二回 プログラミング教育について話し合う会」に登壇しました 󰳓 自己紹介 - 高瀬 和之 (たかせ かずゆき) 2 　：@Guvalif YouTube にて アーカイブ配信中！

- 良い設計を発見する ための、ベース知識として用いる - 安全な開発を実現する ための、勘所として用いる - これらは決してプログラミング言語に依存すること無く、普遍的に応用可能 だと考える - つまり、ライトユーザーです　 （ｺﾜｸﾅｲﾖ！ 関数型プログラミングに対する私の立ち位置 󰳓 3

前提整理 "関数" に親しんでもらう "高階関数" に親しんでもらう "型" に親しんでもらう "パラダイム" に親しんでもらう 1 2 3 4 5 AGENDA アジェンダ

前提整理 1

"0 から" とはどのくらいのレベル感を想定しているか？ 6 - "知っている & できない" から、1 つステップアップ しようとしているレベル感 - 例) プログラミングっておもしろそうだな、まずは Progate で勉強してみようかな？ 知識伝達 知識の 分解・再構成 応用知識の 習得 基礎知識の 習得 原体験 経験学習 経験学習 経験学習 知らない & できない 知っている & できない 考えるとできる 考えなくてもできる 教えられる

教材選定と検証母集団 7 - "知っている & できない" から 1 つステップアップしようとしているレベル感の人たちに 対してラーニングを提供したいという背景から、見た目で Trial & Error がわかりやすい教材 を 選定することが多いです → JavaScript (& HTML + CSS) を活用 - 検証母集団は： - 18 〜 60 才の男女，約 100 人 - 職種や文系・理系の区分は問わない ※ "エンジニア" かつ "考えるとできる" 人のステップアップをどう支援するか？に関しては、 　 もし要望があればどこかでお話します

"関数" に親しんでもらう 2

学習体験の意図 / 状態定義例 9 ■ 意図 - 関数型プログラミングをしようにも、関数の有用性 をわかってもらわないことには始まらない → まずはいくつかのパターンを通じて、関数に慣れ親しんでもらう ■ 状態定義例 プログラムの全体を構成する手続きが実装できる プログラムの全体を構成する手続きから 構造を分解し関数に置き換えて実装できる

課題設定例 10 - 以下の 3 パターンに分けて、課題の提示やフィードバックを繰り返す： - 処理のまとまりに対して、名前を付ける 用途 - 似た記述であって一部だけが異なる処理に対して、テンプレート化する 用途 - なんらかの命令と結果の組に対して、アクターに見立てる 用途 ※ まず慣れ親しむことを最優先するため、この時点で "副作用" / "クロージャ" / "テスタビリティ" 　 などのキーワードには触れません 発展的指示として … 凝集度っていう考え方も調べてみるとおもしろいよ

"高階関数" に親しんでもらう 3

イベント駆動を理解しその上で インタラクションを実装できる 学習体験の意図 / 状態定義例 12 ■ 意図 - 関数をファーストクラスなものとして扱う原体験 を得てもらう → map / filter / reduce などを始めとした、主要な高階関数を理解するための足がかり ともする ■ 状態定義例 順次・反復・分岐処理は実装できるが インタラクションの実装方法は知らない λ. λ. λ.

課題設定例 13 - 「ユーザーの入力に反応できるのはなぜか？」という発問を行う - イベントループにより、さまざまなイベントを待ち受けることができる - イベントの種類に応じて、行いたい処理を登録し切り替えることができる - ↑の登録処理は、まさに 関数を値として受け渡す ことに他ならない → 高階関数の具体例 ※ 本質的には、コールバック関連の課題設定であればなんでも良いと思います 　 カリー化を用いた課題設定も、同様にバリエーションとしてありだと思います 発展的指示として … 関数を返してくれるケースで便利な用途ってありそう？

"型" に親しんでもらう 4

学習体験の意図 / 状態定義例 15 ■ 意図 - 型があることでエラーや実装のミスを減らせる ことを実感してもらう → ここでの仕掛けを通じて、代数的データ型や Monadic Computations への応用 も見据える ■ 状態定義例 データに性質の違いがあることは知っているが 暗黙的変換などで実装ミスをすることがある 型システムを通じてデータの性質の違いを可視化し 未然に暗黙的変換に気づくことができる λ→ λ2 λP λP2 = or ≠

課題設定例 16 - HTML の各種 attribute に対して、値を入れたり取り出したりする課題の提示を行う： - 特に数値や配列を入れるような課題だと、文字列への 暗黙的変換 が起きて良い - 一通りバグらせてもらった後、TypeScript を導入してもらう - 未然に暗黙的変換が防げる → 型システムの恩恵の具体例 ※ 動的型付けプログラミング言語だと、このあたりのバグらせパターンは設計しやすいです 　 undefined になるパターンなども、良く課題として用いています 発展的指示として … 型レベル計算ってキーワードも調べてみるとおもしろいよ

"パラダイム" に親しんでもらう 5

View / Model / Event が混在した状態の ペインを理解し、解決手法に興味が持てている View / Model / Event が混在した状態で なんらかの UI を実装できる 学習体験の意図 / 状態定義例 18 ■ 意図 - 関数型プログラミングの実応用に触れてもらうことで、応用知識習得への導線 をつくる → ここからが本当の関数型プログラミングへの入り口 (他の登壇者の方がノウハウをお話してくれる … はず) ■ 状態定義例

課題設定例 19 - 「見た目を操作しているのか、値を操作しているのか、なんだがスパゲッティ …」 - 宣言的 UI っていう考え方があるよ、React っていうものを調べてみるといいよ 󰳓 - 「イベントが複雑に入り組んでいるときに、上手く管理する方法ってないかな …？」 - 非同期ストリーム っていう考え方があるよ、RxJS っていうものを調べてみるといいよ 󰳓 - 「UI の変化が複雑な時に、うまくデバッグする方法ってないかな …？」 - イベントソーシング っていう考え方があるよ、Redux っていうものを調べてみるといいよ 󰳓 発展的指示として … Elm ってプログラミング言語も調べてみるとおもしろいよ

まとめ 01 0 からの育成を見据えるなら、基礎知識の習得フェーズにおいても さまざまな伏線を仕込むことが大事 20 02 トップダウンで関数型プログラミング言語を用いるケースは未検証なので もし事例をお持ちの方がいればディスカッションしましょう！

人事・組織戦略立案 ブランドリフト 採用・育成 ピープルマネジメント We are Hiring !!! 21 本部長 VPoE & ピープルマネージャー 人事 & 学習体験デザイナー エンジニア採用広報 HRBP 全体支援 人事企画 & 組織開発を横断するスクラムチームで、プロダクト人材の成長環境 を一緒につくりませんか？

働くをもっと楽しく、創造的に