N予備校プログラミングコース座談会 in 2021.11

N予備校プログラミングコースでは、毎週行っているプログラミング授業のほかに毎月1回の頻度でプログラミングコース座談会という番組を行っています。

この番組では、授業中での回答が難しい質問や悩み、エンジニア就職に関する話など、授業ではメインで扱うことが難しい話題を取り扱っています。

Transcript

1. プログラミングコース座談会 N予備校プログラミングコース
2. プログラミングコース座談会は、プログラミングに 関する相談・悩みへの回答や、プログラミングコー スについての意見交換などを行う番組です。 プログラミングコース座談会
3. ◦ 経歴 通信インフラ/ネットワーク系 　→SI系派遣プログラマ/コンサル 　　→ニコニコ動画の開発 　　　→エンジニア採用/研修 　　　　→プログラミングの先生 ◦ 神奈川県出身、東京都在住🗼 ◦ 🐈🐈🐕 を飼ってます🐾🐾 小枝 創 -Koeda Hajime - 講 師
4. • プログラミング教材制作アルバイト • 🏠京都府在住（テレワーク） • バイト以外の時間は理科の教材編集者🧪 執筆/編集/イラスト/動画作成をしています • 小学校の教員免許を持っています • 趣味 バイク : Hondaクロスカブ110に乗っています 料理　 : 食べるのも作るのも好きです 音楽　 : アニソンをバンドで演奏していました🎹 青木 萌 -Moe Aoki - 本 日 の ゲ ス ト
5. 本日のテーマ コンテスト結果ページ の作り方解説 教材制作のアルバイト はどんなことをしているのか？ 他 お知らせ 2本
6. 教材制作のアルバイト はどんなことをしているのか？ プログラミングコース座談会
7. 教材制作チームは何をしているの？ 教材原稿の編集✅ 受講者と同様に教材を読みデバッグ🖥 OSやアプリのバージョンアップに伴う修正✏ イラストの作成 新教材や新企画の検討
8. 教材はどうやって管理しているの？ 原稿はGitHubのリポジトリで管理。 Markdown形式で書かれています。 文書のみでなく、MarkdownからHTML への変換ツールやイラストデータなども GitHubで管理しています。
9. 教材はどうやって管理しているの？ 原稿をGitHubからcloneし、 ローカルで修正用ブランチを切り VSCodeで修正しています。
10. 図の編集にはAdobe Illustratorを 使っています。 文書などと同様にGitHubで管理 しています。 教材はどうやって管理しているの？
11. 教材はどうやって管理しているの？ 修正用ブランチから本番環境へデプロイする ため、mainブランチへプルリクエストを出し ます。プルリクエストはダブルチェック後に マージされます。 教材はどうやって管理しているの？
12. 教材はどうやって管理しているの？ Gitで管理しているので、同時に複数人が編集ができます。
13. どうして完成している教材を編集するの？ 受講者の方がより理解しやすくなるよう、常に改良しています。
14. 教材の編集って何をしているの？ どうして完成している教材を編集するの？ フォーラムやSlackでの質問からも 教材や加筆や変更を検討しています。 皆さんの質問がよりわかりやすい教材 作りに役立っています！
15. 教材の編集って何をしているの？ どうして完成している教材を編集するの？ OSやソフトウェアのアップデートに 伴って、教材通りプログラムが動かなく なることがあります。 スムーズにプログラミングの勉強に取り 組んでもらうためには教材保守は欠かせ ないのです。
16. 教材の編集って何をしているの？ どうして完成している教材を編集するの？ プログラミングはまだまだ発展中の 分野ですので、より実践に近づける よう新しい技術を取り入れた教材作 りをしています。
17. 教材の編集って何をしているの？ どうして完成している教材を編集するの？ 編集中に見つかった課題で検討が必 要なものは、issuesに投稿して社員 さんやアルバイトメンバーで議論し て方向性を決めることもあります。 場合によってはZoomミーティング もしています。
18. テレワークでどうやって仕事を覚えるの？ N予備校の教材保守には特別な知識 はあまり必要ありません。 過去にアルバイトのOBさんがWiki まとめたものを読んだり、入門コー スでJavaScriptについて勉強しまし た。 手詰まりになった時は、Slackで相 談したりZoomの画面共有で教えて もらいます。
19. テレワークでコミュニケーションは取れてるの？ Zoomでのデイリーミーティング slackでコミュニケーション Googleカレンダーで予定管理
20. プログラミングをしていてよかったこと 地方在住でも、ネット環境さえあれば東京の 会社で仕事が出来ていること。 エンジニア以外の職種でも、プログラミング の知識が役に立っていること！ 書籍の編集や一般事務職でもプログラミング ができると仕事をとても効率よく進めること ができます。
21. コンテスト結果ページ の作り方解説 プログラミングコース座談会
22. コンテスト結果発表ページを作ろう
23. 🔧使われている技術 HTML/CSS/JavaScript GitHub Pages jQuery Bootstrap
24. 🔧使われている技術 第3章27節で登場！ HTML/CSS/JavaScript GitHub Pages jQuery Bootstrap
25. 🌲 ディレクトリ構成 index.html summer winter js css assets/img 2021 2020 summer winter TOP
26. 📌こだわりが無ければテンプレを使おう
27. 📌結果発表ページで使ったテンプレ
28. 🧱HTML全体の構成 ヘッダー ページタイトル 受賞作品 全作品 審査員 フッター
29. 🧱HTML全体の構成 ヘッダー ページタイトル 受賞作品 全作品 審査員 フッター 作品データの 埋め込みが必要
30. 📟データの準備 スプレッドシートでデータ作成
31. 📟データの準備 CSV データを JSON 形式に変換
32. 📟データの準備 JSON 形式ならJSでオブジェクトとして使える
33. 🏆受賞作品のデータ埋め込み ヘッダー ページタイトル 受賞作品 全作品 審査員 フッター 賞ごとにデータを埋め込み
34. 📚全作品のデータ埋め込み テンプレHTMLを 賞ごとに作っておく 賞のデータを抽出 テンプレHTMLに データを挿入 賞の数だけ 繰り返し
35. 🏆受賞作品のデータ埋め込み 賞ごとにテンプレHTMLを作成
36. 🏆受賞作品のデータ埋め込み ⇦ タイトル ⇧ 作品へのリンク ⇧ GitHubへのリンク ⇦ 応募者名 ⇦ 作品説明 JSからデータを埋め込むので空にしておく
37. 🏆受賞作品のデータ埋め込み データをセットする関数を作成
38. 🏆受賞作品のデータ埋め込み 賞ごとにデータを抽出して関数を実行
39. 📚全作品のデータ埋め込み ヘッダー ページタイトル 受賞作品 全作品 審査員 フッター 全作品データを作成
40. 📚全作品のデータ埋め込み テンプレHTML を作っておく JSでテンプレHTML を複製 複製したHTMLに データを挿入 メインのHTMLに追加
41. 📚全作品のデータ埋め込み テンプレHTML を作っておく 作品の数だけループ JSでテンプレHTML を複製 複製したHTMLに データを挿入 メインのHTMLに追加
42. 📚全作品のデータ埋め込み
43. ✨GitHub Pages で公開して完成
44. 社会人向け研修 N Code Training
45. 秋の特別番組 レベルアップ プログラミング 2021年11月8日 月曜日 19:00 ~ 20:30 (90分) 津野 貴大 講師
46. なんでも質問コーナー