原文: Learn Responsive Web Design by Building 20 Projects – a Major freeCodeCamp Curriculum Update (Quincy Larson)

翻訳・翻案: Yoko Matsuda

現行の freeCodeCamp 認定講座 10 種のうち最初の講座であるレスポンシブウェブデザイン認定講座の大幅アップデートがリリースされました。また、コードエディターもアップデートされました。

授業のような形式ではなく、15 の練習プロジェクトと 5 つの認定プロジェクトを通してコンセプトや構文を学べるようになりました。

認定講座の全体は以下の構成となっており、ウェブ開発の初心者であれば、完了させるのに 300 時間程度かかると想定しています。

  1. HTML の学習: 猫の写真アプリを作成する
  2. CSS 基礎の学習: カフェメニューを作る
  3. CSS 色指定の学習: カラーマーカーのセットを作成する
  4. HTML フォームの学習: 登録フォームを作成する
  5. 認定プロジェクト: アンケートフォーム作成
  6. CSS ボックスモデルの学習: ロスコの絵画を作る
  7. CSS フレックスボックスの学習: フォトギャラリーを作る
  8. タイポグラフィの学習: 栄養ラベルを作る
  9. アクセシビリティの学習: クイズを作る
  10. 認定プロジェクト: トリビュートページ作成
  11. CSS 疑似セレクターの学習: 貸借対照表を作成する
  12. CSS 中級の学習: ピカソの絵画を作る
  13. レスポンシブウェブデザインの学習: ピアノを作る
  14. 認定プロジェクト: テクニカルドキュメントページ作成
  15. CSS 変数の学習: 都市のスカイラインを作る
  16. CSS グリッドの学習: 雑誌を作る
  17. 認定プロジェクト: プロダクトのランディングページ作成
  18. CSS Transform の学習: ペンギンを作成する
  19. CSS アニメーションの学習: 観覧車を作る
  20. 認定プロジェクト: 個人ポートフォリオのウェブページ作成

レスポンシブウェブデザイン認定証を取得するには、太字で示した 5 つの認定プロジェクトを完成させ、テストスイートに合格するだけで構いません。残りの課程はオプションです。

認定プロジェクトはカリキュラム全体に分散させました。これらの認定プロジェクトは自由解答形式です。まっさらなコードエディタ―からスタートし、一行ずつコードを書いてプロジェクトを組み立てていき、最終的にすべてのテストに合格することを目指します。現状、認定プロジェクトについては CodePen を使用していますが、2022年1月をめどに、独自のコードエディタ―に移行することを予定しています。

また、この 5 つの認定プロジェクトは従来の認定講座で使用していた物と同一です。後方互換性が確保されており、過去にこれらのプロジェクトを完成させている場合、再度取り組む必要はありません。

また、過去に取得した従来の認定証は今後も有効です。レジュメや LinkedIn のプロフィールにリンクを記載しているとしても、リンク切れになる心配はありません。

新しい練習プロジェクトの使い方: 新しいコードエディター

Learn_Typography_by_Building_a_Nutrition_Label__Step_66___freeCodeCamp_org_--
新しいコードエディターの機能について、上の画像に書き込みました。このエディターで、練習プロジェクトを一行ずつ構築し、テストがパスするようにしていきます。

このデザインの最初の構想は 2017 年に始まりました。それだけの長い時間をかけて作成し、試行錯誤してきました。最終的にこのような形になり、わくわくしています。

練習プロジェクトの各ステップにはそれぞれテストがあります。また、その場面に合わせたヒントもあります。完全な答えではなく、これらのヒントが少しずつ、あなたを正しい方向に導いてくれるようになっています。

一つのステップのテストに合格すると、シームレスに次のステップに移動します。コード内の次の行を書くべき場所へ自動でスクロールされます。

私たちが目指したのは、あなたが「フロー」(flow) 状態に入り、その状態を継続できることです。何十ものステップ、あるいはプロジェクト全体を、一気に片づけられるような形を目指しました。

私たちの開発したマルチファイルエディターでは、十分複雑なフロントエンドプロジェクトのコードを書くことができます。

近いうちに完全なサンドボックスをリリースし、認定プロジェクトもこの環境で作成できるようになる予定です。これからは CodePen や JSBin を利用する必要がなくなり、freeCodeCamp.org 上ですべてが完結するようになります。

数年間に渡って得られた多数のフィードバックやユーザーエクスペリエンスの教訓を取り入れました。

新コードエディターに加えて以下の改善も行いました。

より多くの練習

カリキュラムに多数のプロジェクトが追加され、そのプロジェクトを通して何千行ものコードを書く経験が得られるようになりました。

全体を通じて、テストの失敗、エラーメッセージ、そしてそこからヒントを得ることを繰り返す細かな「フィードバックループ」となっています。

また、各プロジェクトの開始時にはこれから作成する物のプレビューをお見せします。

Learn_CSS_Transforms_by_Building_a_Penguin__Step_1___freeCodeCamp_org-1
プロジェクトのプレビューの一例: CSS で作られたペンギン

より多くの反復で覚えやすく

私たちの当初のゴールは、人々がプログラミングの主要なコンセプトに、幅広く、次々と触れられるようにすることでした。しかしそのスピードが速すぎるという声が多数寄せられました。

多くの人が物事にじっくりと取り組み、各テクノロジーについてより多くの練習を積むことを好んでいるようでした。

この新カリキュラムでは、主要なコンセプトやプログラミングの構文を覚えやすくするためより多くの練習を用意しました。

Responsive_Web_Design__Beta__Certification___freeCodeCamp_org-1
各プロジェクトには「ステップ」の一覧があります。完了したステップは青色でハイライトされます。いつでも、どのステップにでも移動できますが、順番通りに進めることをお勧めします。

読む量を減らし、コードを書く量を増やす

これはとても大変な作業でしたが、私たちはカリキュラムの再編成を行い、一度にほんの数センテンスの説明で「今」必要なことを教えるように改良しました。このカリキュラムにおけるゲームのような「コアループ」は以下のような流れとなっています。

短い説明を読む → 次の行にどんなコードを書けば良いか理解し、それを打ち込む → テストを実行し、合格する → このプロセスを何千回と繰り返す

一つ一つのステップはこのような見た目になっています。

Learn_CSS_Transforms_by_Building_a_Penguin__Step_16___freeCodeCamp_org
各ステップでは、あなたの手で新しいコードを追加したり、既存のコードを変更したりするべき場所が表示されます。そして多数のテストがあります。どのテストが失敗したかが、その場で必要なことのヒントになっており、それを手掛かりに前に進み続けることができます。

各レベルにちりばめられた「中ボス」

他にも大きな改善があります。従来のカリキュラムでは、5 つすべての認定プロジェクトが最後に配置されており、全てのレッスンを完了した後に取り組む形になっていました。

これを改善し、新しいテクノロジーを学ぶたび、定期的に認定プロジェクトに取り組む形としました。ガイド用のテストがある練習プロジェクトを 3 つ、4 つほど進めた後に、あなたは、まっさらなコードエディターと 10 個以上ある「ユーザーストーリー」型のテストに立ち向かうことになります。どうすればそれぞれのテストに合格できるか、学んだばかりのスキルを使って考えなければなりません。

これにより、認定証の取得に伴っていた困難が軽減されると期待しています。そしてあるスキルを学んでからそれを思い出して応用するまでの間隔を短くすることにより、スキルと記憶の強化にも役立つと考えています。

Responsive_Web_Design__Beta__Certification___freeCodeCamp_org_---2
各プロジェクトが何ステップあるかと、その内いくつ完了したかをここで確認できます。「注ボス」の認定プロジェクトは 1 ステップです。認定プロジェクトは原則、空白のコードエディターと一連のテストスイートです。あなた自身でプロジェクト全体のコードを書き、全てのテストに合格するようにしなければなりません。

今すぐ新レスポンシブウェブデザイン認定講座をお試しいただけます。

この認定講座はまだベータ版です。つまずくことがあったら、ぜひ freeCodeCamp フォーラムで助けを求めてみてください。もしかしたらあなたが見つけたその問題はバグかもしれません。この講座は現在もアクティブに開発が行われています。

私たちは 2022 年には JavaScript のアルゴリズムとデータ構造認定講座のアップデートも完了する予定です。その後、アップデートされたフロントエンド開発ライブラリ認定講座も公開予定です。

よろしければ、新しいレスポンシブウェブデザイン認定講座をぜひお試しください。

Happy coding.