このスライドは、2023/03/24 に開催された「第四回 関数型プログラミング（仮）の会」で発表したものです。
cf. https://opt.connpass.com/event/272470/
© Chatwork本当に 0 からの関数型プログラミングの歩き始め方2023/03/24 [Fri] DevRel 部 MGR 高瀬 和之 (@Guvalif)Chatwork 株式会社
View Slide
2019 年に Chatwork 株式会社へフロントエンド・エンジニア としてジョインし、リリース基盤やビデオ通話アプリケーションの開発に従事。2020 年から エンジニア採用広報に転身 し、技術イベント運営やエンジニア採用を主業務とする。パラレルワークで講師業 も営む。Opt さん主催のイベントには、直近のものだと「第二回 プログラミング教育について話し合う会」に登壇しました 自己紹介 - 高瀬 和之 (たかせ かずゆき)2 ：@GuvalifYouTube にてアーカイブ配信中！
- 良い設計を発見する ための、ベース知識として用いる- 安全な開発を実現する ための、勘所として用いる- これらは決してプログラミング言語に依存すること無く、普遍的に応用可能 だと考える- つまり、ライトユーザーです （ｺﾜｸﾅｲﾖ！関数型プログラミングに対する私の立ち位置 3
前提整理"関数" に親しんでもらう"高階関数" に親しんでもらう"型" に親しんでもらう"パラダイム" に親しんでもらう12345AGENDAアジェンダ
前提整理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 からの育成を見据えるなら、基礎知識の習得フェーズにおいてもさまざまな伏線を仕込むことが大事2002 トップダウンで関数型プログラミング言語を用いるケースは未検証なのでもし事例をお持ちの方がいればディスカッションしましょう！
人事・組織戦略立案 ブランドリフト採用・育成ピープルマネジメントWe are Hiring !!!21本部長VPoE & ピープルマネージャー 人事 & 学習体験デザイナーエンジニア採用広報HRBP全体支援人事企画 & 組織開発を横断するスクラムチームで、プロダクト人材の成長環境 を一緒につくりませんか？
働くをもっと楽しく、創造的に
guvalif
beberlei
cer
nsuz
alli83
.jpg){kind=avatar}
gtnao
yucamm124
koba04
umizaru
octu0
pyama86
soutaro
ryu_hu03
ddemaree
andyhume
iamctodd
afnizarnur
thoeni
kevinliebholz
smashingmag
robhawkes
jeffersonlam
paulrobertlloyd
jrom
tammielis