Upgrade to Pro — share decks privately, control downloads, hide ads and more …

本当に 0 からの 関数型プログラミングの歩き始め方 / How to Walk into Functional Programming from Scratch

本当に 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

More Decks by TAKASE Kazuyuki

Other Decks in Education

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  5. 前提整理
    1

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide