2019-08-24 ODC 2019 Tokyo (fujiwara)

専門学校教育におけるドキュメンテーションの役割

2019年8月24日 ODC東京2019
藤原 由来 (Twitter: @skyy_writing)
神戸電子専門学校／ソラソルファ

Transcript

1. 専⾨学校教育における ドキュメンテーションの役割 2019年8⽉24⽇ ODC東京2019 藤原 由来 (Twitter: @skyy_writing) 神⼾電⼦専⾨学校∕ソラソルファ 1
2. ⾃⼰紹介：藤原由来（ふじわらゆき） l 神⼾電⼦専⾨学校 ⾮常勤講師 l フリーエンジニア・ライター l 現在は出版系システムの開発 l 著書『Markdownライティング⼊⾨』 （インプレスR&D） l 別名義：藤原惟 l ⽇本Pandocユーザ会 （ユーザーズガイド⽇本語版 改訂作業中） l Twitter: @skyy_writing
3. 本⽇お伝えしたいこと l ドキュメンテーションはIT系の開発・運⽤だけではない！ l 専⾨学校 × ドキュメンテーション l 専⾨学校の先⽣って何やってるの？（業務フロー） l 実際の授業におけるドキュメンテーションツール活⽤実例 3
4. ⽬次 l 神⼾電⼦専⾨学校で教えていること l 専⾨学校講師の業務フロー l 実際のドキュメンテーションツール活⽤ l 専⾨学校教育におけるドキュメントの役割 l 教育およびドキュメンテーション上のノウハウ・⼯夫 l まとめ：教育の⽂脈における「ドキュメンテーション」とは何か 4
5. 5 Facebook: 神⼾電⼦専⾨学校 Ｗｅｂエンジニアコース https://www.facebook.com/kobedenshi.webengineer/photos/a.278876715777705/881179322214105/?type=3&theater
6. 神⼾電⼦専⾨学校で教えていること 6
7. 神⼾電⼦専⾨学校で教えていること l Webエンジニアコース（新設4年⽬） l 藤原の担当：Web開発・Webプログラミング l 各種開発ツール (コマンドラインとGit)、HTTPの基礎 l プログラミング基礎 (JavaScript/Ruby) l 後期：Webアプリケーション制作 (Rails/React) l 制作実習との連携を意識
8. 参考：学習⽬標 1. Webアプリケーションを構成する技術と概念を理解する 2. Webプログラミングの基礎を学ぶ l 主にJavaScriptとRuby l ⾃⾝が望むアプリケーション制作・開発のための技術的能⼒を養う 3. Webフレームワークを⽤いた基礎的なWebアプリケーションを構築する l Ruby on RailsやReactなど 4. Web開発に必須の開発環境・ツールの使い⽅と概念を学び、活⽤できるようにする l Git / GitHub・テキストエディタ・コマンドラインなど 5. ⾃⾝の得た知識や考えを適切に表現し、必要に応じて助けや必要な情報を求めるこ とができる 8 ドキュメンテーション を書く能⼒
9. 参考：カリキュラム（前期） l 4/19 前期#1 Webアプリ開発のための準備 l 4/26 前期#2 開発ツールの基本 l 5/17 前期#3 コマンドラインの⼩技 / Git/GitHub (1) l 5/24 前期#4 Git/GitHub (2) / Web技術とは l 5/31 前期#5 HTML/CSSによるサイト構築 l 6/7 前期#6 HTTPでやりとりする仕組み l 6/14 前期#7 Web APIとJSON l 6/21 前期#8 JavaScriptの基本 (1) l ※ 6/26（⽔） 前期中間発表会 l 6/28 前期#9 JavaScriptの基本 (2) l 7/5 前期#10 クライアントサイドJavaScript (1) l 7/12 前期#11 クライアントサイドJavaScript (2) l ※ 7/19（⾦） Rubyビジネス創出展 l 7/22〜9/2 夏休み（課題あり） l 9/6 前期#12 Rubyとオブジェクト指向 l 9/13 前期#13 Rubyの基本 l 9/20 前期#14 アプリ制作の⼼構えと知識 (1)、グ ループコーチング l ※ 9/25（⽔） 前期期末発表会 9
10. 参考：カリキュラム（後期） l 10/4 後期#1 サーバサイドWebフレームワーク とRuby on Rails l 10/11 後期#2 Railsアプリはどのように 動作しているか l 10/18 後期#3 CRUDの基礎とindexアクション l 10/25 授業なし（試験休み・保護者懇談会） l 11/1 後期#4 パッケージマネージャ l 11/8 後期#5 ES2015以降のJavaScript l 11/15 後期#6 JavaScriptフレームワークの概要 l 11/22 後期#7 Reactの基本 l 11/29 後期#8 React Nativeによる スマホアプリ開発体験 (1) l ※ 12/4（⽔） 後期中間発表会 l 12/6 後期#9 React Nativeによる スマホアプリ開発体験 (2) l 12/13 後期#10 ライティングとMarkdown l ※ 12/20〜1/7 冬休み l アプリ制作の⼼構えと知識 (2) グループコーチング l 1/10 後期#11 アプリ制作の⼼構えと知識 (3) グループコーチング l 1/17 後期#12 制作∕グループコーチング l 1/24 後期#13 制作∕グループコーチング l ※ 1/29（⽔） 後期期末発表会 l 1/31 予備⽇ l 2/7 まとめ・1年の振り返り 10
11. 専⾨学校講師の業務フロー 11
12. 専⾨学校講師の業務フロー 年度開始前 授業計画作成 教科書選定 毎回 授業前の準備 当⽇授業 授業後の処理 ※ あくまでも⾮常勤講師の⼀例です。常勤になると管理業務や雑⽤が増えます
13. 毎回：授業前の準備 l その回の授業⽬標を確認 l 教材準備（スライド・資料作成） l 課題の設計・準備 l 必要に応じて学⽣向け リマインダーメールを送る
14. 毎回：当⽇授業 l 講義（スライド・資料を元に話す） l 演習（実際に⼿を動かし、コマンド・コードを打ってもらう） l 課題提⽰ l 学⽣ふりかえり（藤原独⾃の取り組み）
15. 毎回：授業後の処理 l 課題の採点 l 講師ふりかえり l 次のタスクを洗い出し
16. 実際の ドキュメンテーションツール活⽤
17. スライド（プレゼンツール） l 画⾯上で⼤きく提⽰したいときに使う l グラフィカルな説明には必須 l 簡単な注釈もプレゼンテーションモード中に⾏う l ⼈数が増えてきて、板書が⾒えないという苦情が増えたため l PowerPoint：ペンツール 17
18. スライドじゃないと表現が難しい 18 <p id="text1" class="hot">少し暑いですね</p> 例: <p> 要素 id属性 class属性 <script> window.addEventListener("DOMContentLoaded", function(){ var button = document.getElementById("button"); button.addEventListener("click", function(){ window.alert("クリックしました！"); }); }); </script> HTML (JavaScript) イベント「DOM（ページ）全体の 読み込みが終わったとき」 イベント「ボタンが クリックされたとき」
19. Wiki（Kibela） https://kibe.la/ja l MarkdownベースのWiki l 「グループ」という概念でワークスペースを 区切れる l 技術コミュニティ・教育機関は無料（重要） l テキスト＋ソースコード中⼼のときに便利 l 個⼈的にこちらの⽅が書くのは楽 l どうしても複雑な図を⼊れたい場合は PowerPointで作成し画像として挿⼊する 19
21. 専⾨学校教育における ドキュメントの役割 21
22. 専⾨学校教育におけるドキュメントの役割 講義 • 教材・講義資料 • ⾃習⽤の参考資料（補⾜説明、リンク・書籍など） 演習 • 学⽣への指⽰書 • 演習問題・ワークシート 課題 • 学⽣とのコミットメント • レポート提出の⼿段
23. 演習のポイント l 学⽣への指⽰書（インストール、初めての操作、課題提出など） l はじめて⾏う作業は、丁寧に書く l 重要な定型作業は、毎回書く（時間短縮） l 授業⽬標にある項⽬（プログラミングの習得など）の時間を確保 l 演習問題・ワークシートの要点 l 能⼒を養うべき箇所では、頭を使わせる l すべて教えず、ヒントを出す
24. 課題の明⽰は学⽣とのコミットメント l 課題内容・提出期限・提出⽅法 などを明⽰ l 講師が学⽣に対して約束する → 学⽣からの信⽤を得られる l できれば採点基準も明⽰
25. 教育およびドキュメンテーション上 のノウハウ・⼯夫
26. Wiki：テンプレート機能を活⽤する l 専⾨学校の学⽣は、基本的に 作⽂が苦⼿ l テンプレートを提⽰することで 書くことに集中できる l レポートのフォーマットも、具体的 に提⽰する l 慣れてきてから、テンプレートの ⾃由度を⾼くしていく
27. 参考：ふりかえりとそのテンプレート l 経験学習：ふりかえりを⾏うことで、学びが効率よく強化できる l YWT法 (やった・わかった・つぎにやること) l 1. 今⽇なにがありましたか？ l 2. どんなことを感じましたか？なにを学びましたか？ l 3. 今度やってみたいこと、つぎもできそうなことはなんですか？ l ⼩技：MarkdownではHTMLコメントが書ける l 具体的な記⼊例をHTMLコメントで補⾜している 27 参考：ふりかえり実践会：ふりかえり読本 学び編〜経験を⼒に変えるふりかえり〜 https://booth.pm/ja/items/1308222
28. ツールの使い⽅を実演する l 学⽣は勝⼿にツールを使ってくれない l Slackを「⾃由に使ってください」と⾔っても、なかなか使ってくれない l 講師が⾃ら「このツールはこのように使う」と実演する
29. Wikiのフォルダ分け l 授業資料とレポート提出（ふりかえり）は分けた⽅がいい l 授業資料：講師から学⽣へ l 学⽣は授業や⾃習のときに、資料を⼀括で⾒たい l レポート：学⽣から講師へ l 講師は採点のときに、提出済レポートを⼀括で⾒たい l Kibelaではグループ機能で両者を分けている（便利）
30. 記法（Markdownなど）は段階的に教える l 実演（こういうことができるよ！） l テンプレートの例⽰（実際にはこのように書いたらOK） l 記法の説明（もっと使いこないしたい⼈向けに）
31. オープンクエスチョン（模索中） l 事前に資料を配るべきか？ l どこまで学⽣を「⽢やかす」べきか？ l 過剰に丁寧なドキュメンテーションは、学⽣の成⻑機会を奪う？
32. まとめ：教育の⽂脈における 「ドキュメンテーション」とは何か 32
33. 教育の⽂脈における「ドキュメンテーション」 l 講師→学⽣、学⽣→講師の2つの流れがある l 知識を与える（⿂を与える） l 講師がドキュメントを書く l ⾃分で知識を得る⼒を得る（⿂の釣り⽅を教える） l 学⽣がドキュメントを書く l 講師があえてドキュメントを書かない（バランスが重要） l ⽬の前の学⽣をしっかり観察し、⽣のインタラクションを尊重す る（→ドキュメントの書き⽅を改善）