教育カリキュラムの元ネタ
2021 年 4 月から 12 月までの間、新中学生の方に対して毎月 6 時間のプログラミング研修をオンラインで行った。
cs50.jp と言うオンライン学習サイトがあって、ここではハーバード大学のコンピュータサイエンス入門講座「CS50」を日本語化した動画を見ることができるのだが、この内容を元ネタにして中学生向け教育カリキュラムを構成した。また Webプログラミングについては、長年某 Web 事業者で新規参入者向けに実施される Web プログラミング研修のトレーナーを担当している友人の知見も参考にしている。
中学生の方の教育カリキュラムは３段階に分けていて、以下の構成で学習を進めていった。
- プログラミング入門 (Scratch)
- オブジェクトプログラミング入門 (Python)
- Webプログラミング入門 (HTML, JavaScript, React)
この教育カリキュラムを、Webプログラミングに焦点をあてた構成に組み替えて、企業人向けに Webプログラミング を学べるカリキュラムにしたいと考えている。
対象者
この研修の対象になる方々
- 新入社員
- すべての非エンジニア職
- Webプログラミングの経験がないエンジニア職
この研修の対象外になる方々
- Webプログラミングを経験済みのエンジニア職
研修内容
- インターネットとはなにか？
- ネットワーク
- ノード
- Webサーバ
- DNS
- CDN
- REST API
- クラウドコンピューティング
- Webプログラミング入門
- CURL または Postman を使いこなす
- お気に入りのテキストエディタを用意する
- お気に入りの Webブラウザを用意する
- HTML
- CSS
- JavaScript
- REST API の呼び出し
- データベースアクセス
- ユーザ認証
- Responsive Design
- Sass
- Single Page Application
- 実務について
- ステージング
- 開発ブランチ
- コンフリクトとマージ
- 「追いつき」とは何か
- 「デグレ」とは何か
- 「リファクタリング」とは何か
cs50.js の Webプログラミング講座は、架空の航空会社のフライト予約システムを作る体で構成されているが、本講座では、架空の EC サイトを構築する体で進めようと考えている。
研修に必要な時間
オンラインでのマンツーマン形式を想定しており、個人差がかなりあると思われるが 8 から 15 時間程度を要する内容だと考えている。企業内研修も可能と考えており、その場合は私どもからトレーナー様に対する研修を実施後、トレーナー様が実施される研修を何度かサポートさせていただく想定となる。
研修のゴール
この研修を受講することで、以下のシーンに対応できるようになる。
- Webプログラミングがブラックボックスではなくなり、ほしい機能はプログラムで実装できることを理解する
- ブラウザに表示される Webフロント部分だけでなく、裏側のデータの流れを理解できるようになる
- 自分がかかえているタスクの依頼先がわかるようになる
- プログラムコードを書く人達に依頼する内容か (それはどの自社部門なのか、またはどのパートナー企業なのか)
- コードではなく素材を作れる人達に依頼する内容か
- 依頼したタスクの成果物は、各ステージング環境にリリースされたことを必ず自分の目で確認するようになる
- PC、タブレット、スマートフォンのそれぞれで成果物を確認するようになる
研修内容の詳細
インターネットとはなにか？
ここは座学なのですぐに終わります。個人差はあるものの座学だとすぐ飽きてしまうので、「ネットワークとは何か」の座学を終えたら「HTMLによる静的Webページの実装」の実習を行うといった、座学と実習を交互に実施する、というか、実習の合間の気分転換に座学を置くスタイルになる。
Webプログラミング入門
CURL または Postman を使いこなす
| OS | アプリインストール | 実習形態 |
|---|---|---|
| macOS | インストール可 | CURL をコマンドラインで利用 |
| macOS | 不可 | ブラウザ版の Postman を利用 |
| macOS以外 | インストール可 | アプリ版の Postman を利用 |
| macOS以外 | 不可 | ブラウザ版の Postman を利用 |
アプリインストールが可能な PC を利用した方が研修効果は高いが、業務で利用する PC がインストール不可である場合は、その不自由な環境でなんとかする体験も重要だと考えている。
お気に入りのテキストエディタを用意する
お気に入りのテキストエディタが既にある方は、それをそのまま利用していただく。
特に希望がない場合は以下とする。
| アプリインストール | エディタ (と言うか開発環境) |
|---|---|
| インストール可 | Visual Studio Code を利用 |
| 不可 | ブラウザから Code Pen または Code Sandbox を利用 |
お気に入りの Webブラウザを用意する
研修で利用するブラウザは Google Chrome 一択になるが、お気に入りのブラウザがある方は併用していただく。Chrome が利用できない場合は、一部の研修コンテンツが実施できなくなるため、研修効果が減少してしまう。
HTML
- hello.html を作成する
- DOM (Document Object Model) を理解する
- html タグがおおもとの親
- html タグ以外のタグは必ず親のタグを持っている
- 各タグが DOM 上でどの階層にあるかを理解する
- headings.html を作成する
- title タグと h1 タグを理解する
- lists.html を作成する
- ul タグと ol タグを理解する
- image.html を作成する
- img タグを理解する
- img タグは クロージングタグ を必要としないことを理解する
- link.html を作成する
- a タグを理解する
- table.html を作成する
- form.html を作成する
css
- style.html を作成する
- styleプロパティを指定する
- colorプロパティを指定する
- text-alignプロパティを指定する
- headセクションで styleプロパティを指定して冗長性 (Redundancy) を排除する
- cssファイルを独立したファイルで定義する
- size.html を作成する
- div タグを理解する
- 背景色、横幅、縦幅を指定する
- パディングとマージンの違いを理解する
- font.html を作成する
- Webページにフォントを追加する
- Webページのフォントサイズを変更する
- 境界線を指定する
- table.html に styleプロパティを追加する
- class を指定して特定の h1 タグのスタイルを変更する
- descedant.html を作成する
- 箇条書き要素の全体のスタイルを指定する
- 箇条書き要素の特定の要素のスタイルを指定する
- attribute.html を作成する
- style タグでスタイルを指定する
- hover.html を作成する
- cssセレクタでスタイルを指定する
- cssセレクタの特異性 (適用優先順位) を理解する
Responsive Design
- Viewport を理解する
- Media Queries を理解する
- Flexbox を理解する
- Grids (グリッドレイアウト) を理解する
- Bootstrap を使って定番のスタイルを入手する
- Bootstrap の使い方を理解する
- Bootstrap が定番の 12 分割レイアウトを提供してくれることを理解する
- Bootstrap が画面のサイズに応じて異なるレイアウトを提供してくれることを理解する
- あなたが担当するプロジェクトでは Bootstrap を使っていない場合でも、なんらかの UI ライブラリを使用しているのであれば、そのライブラリが裏で Bootstrap を使っている可能性があることと、たとえ使っていなくても Bootstrap の設計思想に影響を受けている可能性が高いことを理解する
Sass
Sass はデモを確認するに留め、深入りしない。使っている現場もあるかもしれないので、概念だけ理解する。
JavaScript
JavaScript は DOM にアクセスできて自由に書き換えることができる重要な技術要素のひとつである。
- JavaScript で DOM を更新する
- アイテムをクリックしたらカウンターをカウントアップするアプリをつくってみる
- script タグを理解する
REST API の呼び出し
- Webブラウザから REST API を呼び出す
- CURL または Postman から REST API を呼び出す
- JavaScript から REST API を呼び出す
データベースアクセス
データベースには「データ設計重視 (SQL)」型と「DIY (NoSQL)」型がある。本研修では SQL型と NoSQL型をそれぞれ取り扱う。
- データベースを構築する
- データベースに商品情報を登録する
- データベースの商品情報を ECサイト に表示する
- ECサイト で商品をカートに入れてデータベースにカート情報を登録する
ユーザ認証
ここは深入りしない。デモを確認して概念を理解する。
Single Page Application
ここも深入りはしない。
実務について
開発ステージ
aws 上に以下の４つの環境を構築して、どのようにリリースが行われていくか体験する。
- dev
- stage B
- stage A
- prod
開発ブランチ
- 開発ブランチをつくってみる
- ブランチに新規機能を追加してみる
- 複数の担当者が同一のリソースを更新することでコンフリクトが発生することを確認する
- コンフリクトを解決する
- 本番環境ではバグ対応を行う
- ブランチ側での追いつき (本番環境でのバグ対応の取り込み) を行う
- デグレ (degrade) を体験する
- 不充分な構成管理が招くデグレを理解する
- 追いつきの不備が招くデグレを理解する
リファクタリングについては深入りせずに概念のみ理解する。
thanks for your attention!!