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