この記事は「【マイスター・ギルド】本物の Advent Calendar 2020」8日目の記事です。
今年11月から入社いたしましたマイスター・ギルド（以下MG）開発部の吉川です。Qiita初投稿となります。
やろうと思ったきっかけ
はてなブックマークの方で話題になっていたことがきっかけです。
400スターくらいついててこれはすごいコースじゃないかと思ってみたら、
コース概要にタイピングゲームやブラウザ拡張機能を作るよ！とあったので
これはやるしかねぇとなったのがきっかけです。MGでは主にフロントエンドを担当させていただいており、JavaScriptを改めて復習したいと思っていたのもあります。
https://github.com/microsoft/Web-Dev-For-Beginners
で、どんなコース？
コースは24レッスンあって、これを12週間かけて取り組みましょうな構成です。
ちなみにオール英語です。
各レッスンには次の内容が入っています。
- optional sketchnote（オプションのスケッチノート）
- optional supplemental video（オプションのYoutubeビデオ）
- pre-lesson warmup quiz（レッスン前のウォームアップクイズ）
- written lesson（レッスン）
- for project-based lessons, step-by-step guides on how to build the project- （プロジェクトの構築方法に関するステップバイステップガイド ※プロジェクトベースのレッスンのみ）
- knowledge checks（知識チェック）
- a challenge（チャレンジ）
- supplemental reading（補足資料）
- assignment（割りあて）
- post-lesson quiz（レッスン後のクイズ）
レッスン内容は下記表の通り。
| プロジェクト名 | 教えること | 学習目標 | |
|---|---|---|---|
| 1 | 入門 | プログラミングとプログラム売買のツールの紹介 | ほとんどのプログラミング言語の背景にある基本的な基盤と、プロの開発者が仕事をするのに役立つソフトウェアについて学習します |
| 2 | 入門 | GitHubの基本（チームでの作業が含む） | プロジェクトでGitHubを使用する方法、コードベースで他のユーザーとコミュニケーションする方法 |
| 3 | 入門 | アクセシビリティ | Webアクセシビリティの基本を学びます |
| 4 | JSの基本 | JavaScriptデータ型 | JavaScriptデータ型の基本 |
| 5 | JSの基本 | 関数とメソッド | アプリケーションのロジックフローを管理する関数と方法について学習します |
| 6 | JSの基本 | JSで意思決定 | 意思決定を使用してコードに条件を作成する方法を学びます |
| 7 | JSの基本 | 配列とループ | JavaScriptで配列とループを使用してデータを操作します |
| 8 | テラリウム | HTMLの実践 | レイアウトの構築に重点を置いて、HTMLを構築してオンラインテラリウムを作成します |
| 9 | テラリウム | CSSの実践 | ページをレスポンシブにするなど、CSSの基本に焦点を当てて、オンラインテラリウムのスタイルを設定するCSSを構築します |
| 10 | テラリウム | JavaScriptクロージャ、DOM操作 | クロージャとDOM操作に焦点を当てて、テラリウムをドラッグアンドドロップインターフェイスとして機能させるJavaScriptを構築します |
| 11 | タイピングゲーム | タイピングゲームを構築する | キーボードイベントを使用してJavaScriptアプリのロジックを駆動する方法を学びます |
| 12 | グリーンブラウザ拡張機能 | ブラウザの操作 | ブラウザーのしくみ、ブラウザーの履歴、およびブラウザー拡張機能の最初の要素を足場にする方法を学習します |
| 13 | グリーンブラウザ拡張機能 | フォームの作成、APIの呼び出し、ローカルストレージへの変数の保存 | ブラウザ拡張機能のJavaScript要素を構築して、ローカルストレージに保存されている変数を使用してAPIを呼び出します |
| 14 | グリーンブラウザ拡張機能 | ブラウザのバックグラウンドプロセス、Webパフォーマンス | ブラウザのバックグラウンドプロセスを使用して、拡張機能のアイコンを管理します。Webパフォーマンスといくつかの最適化について学習します |
| 15 | 宇宙ゲーム | JavaScriptを使用したより高度なゲーム開発 | ゲームを構築するための準備として、クラスと構成の両方、およびPub / Subパターンを使用した継承について学習します |
| 16 | 宇宙ゲーム | Canvasへの描画 | 画面に要素を描画するために使用されるCanvasAPIについて学習します |
| 17 | 宇宙ゲーム | 画面上で要素を移動する | デカルト座標とCanvasAPIを使用して、要素がどのように動きを得ることができるかを確認します |
| 18 | 宇宙ゲーム | 衝突検出 | キーを押すことで要素を衝突させて反応させ、クールダウン機能を提供してゲームのパフォーマンスを確保します |
| 19 | 宇宙ゲーム | スコアを維持する | ゲームのステータスとパフォーマンスに基づいて数学計算を実行します |
| 20 | 宇宙ゲーム | ゲームの終了と再会 | アセットのクリーンアップや変数値のリセットなど、ゲームの終了と再開について学習します |
| 21 | 銀行アプリ | WebアプリのHTMLテンプレートとルート | ルーティングとHTMLテンプレートを使用して、複数ページのWebサイトのアーキテクチャの足場を作成する方法を学習します |
| 22 | 銀行アプリ | WebアプリのHTMLテンプレートとルート | ルーティングとHTMLテンプレートを使用して、複数ページのWebサイトのアーキテクチャの足場を作成する方法を学習します |
| 23 | 銀行アプリ | データを取得して使用する方法 | アプリにデータが出入りする方法、データを取得、保存、破棄する方法を学習します |
| 24 | 銀行アプリ | 状態管理の概念 | アアプリが状態を保持する方法と、プログラムでアプリを管理する方法を学習します |
こんな感じで
やったプロジェクト
今回は時間が足りなくてアドカレの一環だし全レッスンやっていると分量が増えすぎてしまうので、グリーンブラウザ拡張機能までやってみました。
- 入門
- JSの基本
- テラリウム
- タイピングゲーム
- グリーンブラウザ拡張機能
どんな手順で勉強したの？
筆者はこんな手順で勉強しました。
スケッチノート見る→レッスン前のウォームアップクイズやる→レッスン本文読む
（テラリウムプロジェクト以降のみ）実際にソースコードを動かす→ レッスン後のクイズやる
実際に取り組んだ所感
英語なのでGoogle翻訳とかDeepL翻訳に助けてもらいながら頑張りました。
あと詳しい学習内容はコースページを見ればわかるのでここでは割愛する。1レッスン長くないしね。
入門～JS入門プロジェクト
※以下レッスンのみ日本語化済み（2020/11/28時点）
この2プロジェクトは実際に手を動かしてコードを動かすというよりかは、テキストを読んで学習するスタイルとなる。筆者もテキストを読みながらふむふむと学習していた。
入門コースは「プログラミングとは」「プログラミングで使うツール」「GitとGithubの基本的な使い方」「アクセシビリティ」が主なトピック。
なお入門プロジェクトにあるアクセシビリティレッスンに関してはこの手のコースで触れられるのは初めて見たと思う。アクセシビリティについては個人でサイトを作った際にLighthouseというツールを触れた程度なのでこんなツールがあるのか！と感じながら新鮮な気持ちで読んでいました。
JS入門はJavaScriptの「データタイプ」「関数とメソッド」「意思決定」「配列とループ」の4レッスン。レベルはProgateのJavaScriptコースと同じくらい。ES6の初学者は読んでもいいけど、それ以外の人はページ最初のスケッチノートだけ見ておけばいいかなという印象。スケッチノートに学習内容が詰め込まれているし。クラス文に関するレッスンがない点は疑問に感じた。
テラリウム
HTML、CSS、JavaScriptのDOM操作について学習しながら、簡単なドラッグアンドドロップができるテラリウムアプリを作るコース。ここから実際にコードを書いて学習を進めることになる。
完成図はこんな感じです。
で、植物の絵をドラッグアンドドロップすると、次のように真ん中の瓶の中に植物を設置できるようになります。
やってみた所感ですが、レッスン中のソースコードを指示に従って写経し完成させる形で作っていくのは楽しい。
ですが、CSSやJavaScriptのプロパティはいくつか補足説明されている一方、特に説明されていない点も少なくなく入門コースにしては説明不足感は否めないように思えた。他サイトのドキュメントで調べてねってことだろうか。
（筆者はpositionプロパティとか位置関係は苦手なのでただ写経する形じゃ辛かった、この辺もっと勉強しないと…）
タイピングゲーム
JavaScriptキーボードイベントを学習しながら、タイピングゲームを作るコース。
完成するとこんな感じでゲームができる。
これはコードが比較的簡単だったのとロジックの説明が順序立てて説明されていたので取り組みやすかったです。ゲームが完成したときはこんな簡単なロジックでエラーも検知できて、クリア時間まで出てくるタイピングゲームができるのかと少し感動していました。
グリーンブラウザ拡張機能
今回筆者が一番楽しみにしていたプロジェクトです。
ここでは「ブラウザについて」「フォームの作成、APIの呼び出し、ローカルストレージの使い方」「Webパフォーマンスの測定・改善」を学びならが、ブラウザ拡張機能を作ることになります。ここで作る拡張機能はC02 Signal APIという外部APIを使用して、地域の二酸化炭素排出量を確認できる拡張機能です。
※ここで作る拡張機能はEdge（おそらくChromium版のみ）、Chrome、Firefoxで動作するとのこと
ここのプロジェクトは拡張機能を作る前の準備がちょっと分かりづらいのでメモを残しておきます。
- Node.jsなどでnpmをインストール（多分yarnに置き換えてもいいはず）。
- APIを使用するためのAPI Key：ここからメールアドレスを入力するとメールが送られてくるのでそこに書かれている
personal API token: xxxxxxxxxxxxxxxxxxを見て使ってください。 - 地域コード：炭素取得料を調べたい地域のコードをここから取得します。本当は関西の排出量を知りたかったので
JP-KNで調べたかったのですが、取り組んでいた日時だとデータが取得できず、九州を表すJP-KYとしました。 - スターターフォルダ：ここのフォルダを今回は使うので
git cloneなどしてダウンロード。 - 4のスターターフォルダをコマンドツールで開き、
npm install→npm run buildの順にコマンドを叩く。 - 公式はEdgeで紹介されているので、ここではEdgeでの手順を記載。Chromeも拡張機能ページを開いたあとの手順はほぼ同じ（Firefoxは何故か上手く行かなかった）。url欄に
edge://extensions/を入力→左下の開発者モードをON→展開して読み込みをクリックし、4のスターターフォルダのdistフォルダを開く。するとMy Carbon Triggerという拡張機能が読み込まれるはずです。 - レッスンの指示どおりにコードを書き、終えたあとは
npm run buildするとコードの記載内容が反映されているはずです。
完成図はこんな感じ。調べたい地域の地域コードとAPIKeyを入力し、Submitボタンを押下すると、二酸化炭素使用量と電気の供給における化石燃料（石炭とか石油などのこと）の割合を確認することができる。
↓
このプロジェクトを感想した所感としては、axiosを使用したAPI取得を通して、非同期処理とLocalStorage/SessionStorageの説明はわかりやすかった。preventDefaultメソッドはReactを使った開発で出てくるイメージがあって、React専用のものだと思っていたのですが、JavaScript標準のメソッドだったんですね。
最後のパフォーマンスに関するレッスンなのですが、やっていて感じたのが今回の小さめの拡張機能だとパフォーマンス改善は伝わりづらいじゃないかと思った（開発者ツールのパフォーマンスタブの使い方のところは良かったです）。この辺りはWebアプリレッスンでやった方が取り組みやすかったと思う。
今回の記事でやったプロジェクトはここまで。
最後に
本コースをある程度進めた感想としましては、beginnerコースでありながら、「アクセシビリティ」や「LocalStorage/SessionStorage」などこの手のコースでは触れられることは少ない項目もあり、新しく学ぶことも少なくなくやりがいはありました。
ただ、実際にアプリを作るプロジェクトになると、コード写経してくださいと言わんばかりにCSSとかJSプロパティの意味は公式ドキュメントとか外部サイト見てね感はあり、全くのWeb開発初心者がやるのはきついかもしれません。
筆者としては今回できなかった「宇宙アプリ」「銀行アプリ」も忘れないうちに触れていきたい次第です。
本コースは翻訳活動が歓迎されており、Githubのpull requestを開くとすでにいろんな言語の翻訳が進んでいます。ただ、日本語については殆どタッチされておらず残念に思います。ということで時間と気力があれば、本コースの日本語翻訳をいつか私が担当したいなぁと思っている次第です。（まずはJS Primer1周するのが優先ですが…）
あと本コース、docsifyという文書作成ツールをローカルにインストールすると、localhostで読めるみたいですよ。筆者はまだ試せてないので、また別の機会に…