Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
本当に 0 からの 関数型プログラミングの歩き始め方 / How to Walk into F...
Search
TAKASE Kazuyuki
March 24, 2023
Education
1
1.1k
本当に 0 からの 関数型プログラミングの歩き始め方 / How to Walk into Functional Programming from Scratch
このスライドは、2023/03/24 に開催された「第四回 関数型プログラミング(仮)の会」で発表したものです。
cf.
https://opt.connpass.com/event/272470/
TAKASE Kazuyuki
March 24, 2023
Tweet
Share
More Decks by TAKASE Kazuyuki
See All by TAKASE Kazuyuki
"数学" をプログラミングしてもらう際に気をつけていること / Key Considerations When Programming "Mathematics"
guvalif
0
570
"情報設計" と "体験設計" の観点から捉える UI 構築の考え方 / Approaches to UI Construction from the Perspectives of "Information Architecture" and "Experience Design"
guvalif
0
470
Chatwork における採用広報と技術広報のリアル / Trial & Error of New Grad Developer Relations at Chatwork
guvalif
0
470
宣言的 UI 時代のクライアントサイド DDD 大考察 / Client-side DDD in the Age of Declarative UI
guvalif
11
10k
新卒採用・育成を通じて、プロダクト人材が育つカルチャーを作りたいお話 / How to Make Developer's Educational Culture
guvalif
2
1.7k
Other Decks in Education
See All in Education
XML and Related Technologies - Lecture 7 - Web Technologies (1019888BNR)
signer
PRO
0
2.5k
Beispiel einer Fortbildung für "Soziales Lernen"
gsgoethe
0
120
1106
cbtlibrary
0
420
Padlet opetuksessa
matleenalaakso
4
12k
子どものためのプログラミング道場『CoderDojo』〜法人提携例〜 / Partnership with CoderDojo Japan
coderdojojapan
4
14k
Comment aborder et contribuer sereinement à un projet open source ? (Masterclass Université Toulouse III)
pylapp
0
3.2k
Ch2_-_Partie_1.pdf
bernhardsvt
0
110
Design Guidelines and Models - Lecture 5 - Human-Computer Interaction (1023841ANR)
signer
PRO
0
690
Introduction - Lecture 1 - Web Technologies (1019888BNR)
signer
PRO
0
4.9k
HCI and Interaction Design - Lecture 2 - Human-Computer Interaction (1023841ANR)
signer
PRO
0
820
H5P-työkalut
matleenalaakso
4
36k
勉強したらどうなるの?
mineo_matsuya
10
6.5k
Featured
See All Featured
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
430
A Modern Web Designer's Workflow
chriscoyier
693
190k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
A Tale of Four Properties
chriscoyier
156
23k
Designing on Purpose - Digital PM Summit 2013
jponch
115
7k
StorybookのUI Testing Handbookを読んだ
zakiyama
27
5.3k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
28
2k
How to Ace a Technical Interview
jacobian
276
23k
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
How GitHub (no longer) Works
holman
310
140k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Speed Design
sergeychernyshev
25
620
Transcript
© 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 全体支援 人事企画 & 組織開発を横断するスクラムチームで、プロダクト人材の成長環境 を一緒につくりませんか?
働くをもっと楽しく、創造的に