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

プログラミング初心者に Rails を教えるコツ / Tips for Teaching Rails

プログラミング初心者に Rails を教えるコツ / Tips for Teaching Rails

「プログラミング初心者に Rails を教えるコツ」を発表した
http://kakakakakku.hatenablog.com/entry/2018/01/12/102123

Yoshiaki Yoshida

January 11, 2018
Tweet

More Decks by Yoshiaki Yoshida

Other Decks in Technology

Transcript

  1. プログラミング初心者に
    を教えるコツ
    2018.01.11
    表参道.rb #30
    吉田慶章 @kakakakakku

    View full-size slide

  2. 吉田慶章 @kakakakakku
    - インフラ, サーバサイド, 認定スクラムマスター, 技術広報など
    - 趣味は「ブログを書くこと」
    - http://kakakakakku.hatenablog.com/
    - 「アウトプット芸人」もしくは「アウトプットアスリート」

    View full-size slide

  3. 今日は「プログラミング講師」の話を

    View full-size slide

  4. 副業
    - 2017年1月から プログラミング講師 (Rails) の副業をはじめた
    - TechAcademy「ウェブアプリケーションコース」のパーソナルメンター
    - 1年間で, 30名以上の生徒さんを担当した
    - ビデオチャットで実施する

    View full-size slide

  5. 「教える」を仕事にする
    - 「技術を教えること」を仕事にしたかった
    - 「生徒さんが挫折せず学び続けられるように導くこと」が最大のやりがい
    - 良い講師になる素質は「生徒さんと同じ目線で考えられること」
    - 決して「メタプログラミングなど黒魔術に精通している」必要はない
    - コミュニケーション能力は確実に必要

    View full-size slide

  6. 1年間の講師経験から学んだコツを紹介

    View full-size slide

  7. コツ1 : 連想できるように身近な例を出す
    - 例えば, each
    - 例えば, Router + MVC

    View full-size slide

  8. 例えば, each
    members = ['A', 'B', 'C']
    members.each do |member|
    puts member
    end

    View full-size slide

  9. 処理フローを連想できない
    members = ['A', 'B', 'C']
    members.each do |member|
    puts member
    end
    どこから来た member ?
    each って何のこと ?
    | って何 ?

    View full-size slide

  10. コンビニのレジとお客さんを連想する
    A
    B
    C
    B
    C
    C
    A B

    View full-size slide

  11. 処理フローを連想できるようになる
    members = ['A', 'B', 'C']
    members.each do |member|
    puts member
    end
    1番前にいる
    お客さん
    レジで接客を受けているお客さん
    お客さんが並んでいる

    View full-size slide

  12. 例えば, Router + MVC
    Router Controller Model
    View
    なぜ, 細かく分類するの ?

    View full-size slide

  13. 株式会社 Rails (大企業) を連想する
    Router Controller Model
    View
    複数の部署があり
    ハンコをもらって
    承認を進める感じ
    (役割を明確に)
    データが必要な場合は
    モデル部に依頼する

    View full-size slide

  14. Router は道案内を連想する
    Router
    「東京」に行くなら「下の道」ですよー
    「/users」に行くなら「users#index」ですよー

    View full-size slide

  15. 連想の繰り返し
    - 文字列 / シンボル / 配列 / ハッシュ
    - Bundler と Gemfile
    - rails db:migrate
    - rails console ( REPL )
    - belongs_to / has_many / has_many through
    - STI (Single Inheritance Table)

    View full-size slide

  16. ポイント2 : プログラミングの原則を押し付けない
    - 例えば, DRY / KISS / TDD
    - 例えば, パーシャル

    View full-size slide

  17. プログラミングの原則とは
    - 例えば
    - DRY (Don’t Repeat Yourself)
    - KISS (Keep It Simple, Stupid)
    - TDD (Test-Driven Development)
    - 「ツライ過去を経験しているから」わかることだったりする
    - プログラミング初心者にとっては, 遠回りのように感じる

    View full-size slide

  18. 例えば, パーシャル
    <%= render 'shared/items' %>
    なぜ, ファイル名と同じように
    _ を付けないの ?
    なぜ, わざわざ別のファイルに書くの ?

    View full-size slide

  19. 実際に「バグを経験してもらう」
    b.html.erb c.html.erb
    a.html.erb
    xxx を yyy に変更してみましょう!
    yyy yyy xxx
    「あー!修正忘れました!」

    View full-size slide

  20. ポイント3 : エラーを解決するプロセスを楽しんでもらう
    - 例えば, NameError
    - 例えば, SyntaxError

    View full-size slide

  21. エラー = 恐怖体験 ?
    - エラーが出ると, 思考停止してしまう

    - 学習するモチベーションが一気に下がってしまう (英語もよくわからない)

    - 挫折する原因の1つ
    - 職業プログラマでも, エラーは大量に出るよ!ということを事実として伝える
    - 「いかに早くエラーの原因を特定できるか」がスキルであることも伝える

    View full-size slide

  22. 例えば, NameError
    Did you mean? は超ヒント
    このあたりにミスがありそう

    View full-size slide

  23. 例えば, SyntaxError
    構文が間違ってそう
    既に動いている実装を見比べればわかるかも?

    View full-size slide

  24. エラー探偵になってもらう & 解決できたときの喜びを大切にしてもらう
    ある程度慣れてきたら binding.pry もペアプロ形式で教えることが多い

    View full-size slide

  25. 第11章「Ruby のデバッグ技法を身につける」
    - バックトレースの読み方
    - print デバッグ
    - トラブルシューティング方法
    - などなど
    初心者にも参考になる

    View full-size slide

  26. まとめ
    - プログラミング初心者に教えるのは, エンジニアリングとは別次元のスキルだと思う
    - 1人1人にパーソナライズした教え方をする
    - 「連想できるように身近な例を出す」ことは効果的

    - エラーが出たら「探偵」になって, 楽しんでもらう

    \楽しすぎる/

    View full-size slide