こちらの記事は、Simon Holdorf 氏により2020年01月に公開された『 9 Projects to Inspire Front-End Developers in 2020 』の和訳です。
本記事は原著者から許可を得た上で記事を公開しています。
2021年改訂版はこちら！
「ポートフォリオに役立つJavaScriptプロジェクト40選（動画あり）」
続編もどうぞ！「フロントエンド開発者のための刺激的なプロジェクト10選」
最初からはっきりと言ってしまいましょう。プログラミングに関する本を何冊読んでも、ビデオやポッドキャストを何本観たり聞いたりしても、もしあなたがより良い開発者になりたいのであれば、継続的に練習することは欠かせません。
フロントエンドの世界には、React、Angular、Vueなど数多くのフレームワークが存在します。どれも素晴らしいものばかりで、それらがなければフロントエンド開発は今のようにはなっていなかったでしょう。しかし、様々な特色を持つフレームワークでも、全てにおいて共通するのは、それらがすべてJavaScriptをベースにしているということです。そう、古き良きJavaScriptなのです！
今、Webを動かしているのは間違いなくJavaScriptです。また、フロントエンド開発者はベテランでも、キャリアを始めたばかりの新人であっても、JavaScript、HTML、CSSの基本は必須知識と言えます。
フレームワークは時代の流れによって流行り、また廃れていくものですが、JavaScriptは変わることがありません！
そこであなたのスキルをリフレッシュするべく、JavaScriptの新たな技術を学び、2020年の時代についていくための、素晴らしいプロジェクトを9つリストアップしました。これらはすべて純粋なJavaScript、HTML、CSSをベースにしており、ポートフォリオに追加したり、将来の雇用主に見せたり、また将来のプロジェクトのためのリファレンスとしてGitHubに残しておくこともできます。なお、これはJavaScriptについて一からすべてを学ぶためのものではありません。JavaScriptのA~Zまでを網羅したコースは他にもあります。ですがこれは一から物を作るためのものです。実際に手を動かして記憶力のトレーニングをしてみましょう。
読者の皆様が、すぐに取り掛かれるよう、参考までに、それぞれのチュートリアルプロジェクトに私の総評を載せています。ですがこれはあくまでも私の意見にすぎません。どのようにして学ぶのが最良か、そしてあなた自身の今のレベルが分かるのはあなただけです。是非ご自身で試してみることを強くお勧めします。
1. 瞑想アプリを作る
構築するもの
瞑想のための環境音を再生するアプリケーションを構築します。ユーザーは、異なるタイマーとサウンドを選択できます。
総評
このチュートリアルでは、バニラJavaScriptを使用しています。インストラクターの声と指示がはっきりしており、理解しやすいです。それに加えてこのチュートリアルでは、JSを使ってサウンドとビデオを操作する方法が学べます。
星5/5
2. 仮想キーボードを作る
構築するもの
ブラウザ上で動作するレスポンシブでタッチ操作にも対応した、バニラJS、HTML、CSSを使った仮想キーボードをゼロから構築します！
総評
私はこの企画の独創性にとても気に入りました。これまで私は仮想キーボードを作ったことがなく、JavaScript、HTML、CSSのみを使ってそれを作ることは、個人的にとてもすばらしい体験でした。インストラクターの声もはっきりしていて、説明もとても上手です。
星5/5
3. Eコマースショッピングカートを作る
構築するもの
バニラJS、HTML、CSSを使用して、オンラインショップおよびEコマースサイトで使われるようなショッピングカートを構築します。ここでは商品情報を格納するためのヘッドレスCMSであるContentfulを利用しています。ContentfulやヘッドレスCMS全般の扱い方を学ぶことは、このチュートリアルの主要なポイントではありませんが、とても素晴らしいサービスなので、実際に動いているのを見て後悔することはないでしょう。
総評
このチュートリアル動画は非常に長いです。チュートリアルは印象的である一方で少し骨が折れる内容です。インストラクターの声ははっきりしていてわかりやすいです。彼の説明についていくのは少々難しい所もありますが、おそらくそれはこのプロジェクトの複雑さが故のものでしょう。
星4/5
4. 天気アプリを作る
構築するもの
このプロジェクトでは、バニラJS、HTML、CSSを使用して天気アプリケーションを構築する方法について説明しています。ここではDark Sky APIを使用して気象情報を取得しています。このチュートリアルはAPIの操作方法を習得するための素晴らしい機会になるでしょう。
総評
このプロジェクトはポートフォリオにぴったりかもしれません。プロジェクト1をすでに受けた方なら、このインストラクターのことはご存知でしょう。このチュートリアルも非常に高いクオリティーで完成しています。彼は本当に分かりやすくて面白い教え方を知っているようです。
星5/5
5. Issueトラッカーを作る
構築するもの
このチュートリアルでは、バニラJS、HTML、CSSを使用して(ソフトウェア製品などの)Issueを作成するためにどのようなWebサイトでも使用できる課題追跡ツールを構築します。これはポートフォリオなどに載せるのにも適しています。
総評
インストラクターは、あなたと一緒にこれから何を構築していくのかについて明確なコンセプトを持っています。彼の声は明瞭で理解しやすく、初心者に優しいプロジェクトになっています。
星4/5
6. PINパッドを作る
構築するもの
このプロジェクトではブラウザ上で動作し、入力されたPINコードが正しいかどうかをチェックする機能を持つPINパッドを構築します。このチュートリアルでインストラクターは、バニラJS、HTML、CSSのみを使用しています。
総評
バニラJavaScriptだけで作れる物の可能性をとてもよく示している、非常に創造的なチュートリアルプロジェクトだと思います。インストラクターはすべてをわかりやすく、また付いて行きやすい様に説明してくれます。
星4/5
7. ランディングページを作る
構築するもの
ここではBradが時間とユーザーの名前を表示するインタラクティブなランディングページの構築方法を説明しています。アプリケーションはLocalStorageを使用して名前を保存するため、これを確認しておくと便利です。
総評
Bradは、完全で優れたチュートリアルでよく知られています。このチュートリアルはかなり短く、単純化されていると言えますが、JavaScript、HTML、CSSのみを使用しています。
星4/5
8. じゃんけんゲームを作る
構築するもの
ゲームを作ることは新しいことを学ぶ楽しい方法になり得ます。JavaScriptは、ブラウザベースのゲームを作成できる大きなポテンシャルを持っています。このチュートリアルプロジェクトでは、古典的なじゃんけんのゲームを構築します。
総評
プロジェクト1と同じく、このインストラクターもこのチュートリアルをうまくこなしています。彼にはエンターテイメント性があり、十分に付いて行ける様な話し方をしています。このプロジェクトもまたバニラJavaScriptをベースにしています。
星4/5
9. まるばつゲームを作る
構築するもの
このプロジェクトでは、楽しいだけでなく複雑なエクササイズである基本的なAIとアルゴリズムを使用した、まるばつゲームを構築します。ですが、それ以外はすべてバニラJS、HTML、CSSで作られています。
総評
このプロジェクトのサイズ感はよく、構造も明確で楽しく構築していくことができます。インストラクターの声ははっきりしており、説明にもついて行きやすいです。説明もとても上手く、最後はとても気分が良くなるはずです。
星5/5
おまけ: 9-in-1ミニプロジェクトを作る
構築するもの
最後に紹介させてもらいたいのがこちら。一つの動画でJavaScript、HTML、CSSを練習する9つの小さな独立したプロジェクトを続けて構築していくチュートリアルです。もしかしたら、これらのうちのどれかをスニペットとして自身のサイトで再利用できるかもしれませんね。
総評
1つの動画に複数の小さな断片を入れるというアイデアが気に入りました。インストラクターの声はもう少しはっきりしていた方が好ましく、所々聞き取りづらい場面もありました。
星3/5
ということで以上になります。これらの優れたチュートリアルを始めるのが待ちきれないことでしょう。ですが一つだけ言わせてください。動画を見て、それに合わせてコーディングすることは練習するための良い方法ですが、独自のフレーバーを加えること、つまり機能を強化、アレンジしたり、組み合わせて改善などをすることで、最大限の効果を得ることができます。また、自分自身でプロジェクトを作りその工程を文書化できればなお良いでしょう。そうすれば、そこから多くのことが学べるだけでなく、いろんな人がきっとあなたに感謝することでしょう！
翻訳協力
Original Author: Simon Holdorf
Thank you for letting us share your knowledge!
この記事は以下の方々のご協力により公開する事が出来ました。
改めて感謝致します。
選定担当: yumika tomita
翻訳担当: shiro1
監査担当: takujio
公開担当:@aoharu
ご意見・ご感想をお待ちしております
今回の記事は、いかがだったでしょうか？
・こうしたら良かった、もっとこうして欲しい、こうした方が良いのではないか
・こういったところが良かった
などなど、率直なご意見を募集しております。
いただいたお声は、今後の記事の質向上に役立たせていただきますので、お気軽にコメント欄にてご投稿ください。
みなさまのメッセージをお待ちしております。