「ただプロジェクトをやってみる」というアドバイスはJavaScriptを学習する者にとって、もっとも驚くほど危険な言葉の1つです。
誤解を避けるために言っておけば、プロジェクトがコーディング言語学習にとってすばらしい方法であることは確かです（『最新技術を学び続けるのは疲れる？ フロントエンド開発者なら変化を楽しもう』参照）。しかし、なにが良いのか判断できるだけの基礎知識が十分にないまま特定のプロジェクトを始めると、問題が起こります。
これは大事なポイントです。なぜなら、プロジェクトへの挑戦を急いで始めてしまうと、多くの人がJavaScriptの学習を完全にあきらめてしまう原因の1つになるからです。
失敗をして欲しくないので、次のようなポイントについて解説します。
- JavaScriptを学ぶ人がプロジェクトに挑戦するときに一番陥りやすい罠とその理由
- JavaScriptの学習を断念してしまうことが多いプロジェクトの具体例
- ありがちな罠を避け、もっと効果的に学習する方法
- プロジェクトを開始する時期と始め方
- プロジェクト開始にあたり、必要な概念が分かる方法
JavaScriptやほかの言語を習得しているかどうかにかかわらず、前進する勇気を持ってもらうことが記事の狙いです。
失敗につながりやすい考え方
JavaScriptを学ぼうとしている人からよく聞くセリフに「ちょっとしたスライドショーを作ってみよう」があります。そして、たいてい下の2つのうちどちらかに陥ります。
- 大変すぎるということが分かり「あとで戻ってやり直そう」と考えても、永遠にあきらめてしまう
- スライドショー作りには成功するけれど、一度に扱うべきマテリアルが多すぎたのであとから応用が効かず、自信を喪失してしまって、結局、永遠に断念してしまう
なぜ、このようなことになってしまうのでしょうか。
あまりに多くのことを、あまりに早く始めるという罠
「簡単そうだから」という理由で、JavaScriptを学ぼうとする人がはじめてのプロジェクトに選びがちなのがスライドショーです。
始めてみると、思っていたよりも大変だということが分かります。スライドショーの作成には配列、関数、ループ、アニメーション、タイミング設定、イベントリスナー、DOM操作などいろいろなことが関わってきます。JavaScriptを始めたばかりの人にとって、必要な概念が圧倒的に多すぎるのです。
安易に取り組んだ簡単なはずだったプロジェクトが、突然、大変すぎるものになってしまうのです。そして、当初の「簡単そうだ」という期待が毒々しい心理的効果を生み出します。「こんな簡単なことができないのは、JavaScriptに向いていないからだ」と自分で自分に言い聞かせるようになってしまうのです。
反対に、スライドショー作りを首尾良くこなす人もいます。しかし、実際にできたものはチュートリアルのヘルプに頼るばかりのぎこちないもので、スライドショーの中でなにが起こっているのかほとんど把握できていません。このケースでは、「チュートリアルのとおりにはできたけど、自分なりの応用はできなかった」という心の声が聞こえてきます。
どちらにしても、結果として最終的に自信喪失を味わい、JavaScriptの学習をやめてしまう原因になります。
スライドショー作成だけではなく、ほかのプロジェクトであっても、学ぼうとする人があまりにも急いでいろいろと試そうとしたときに起こり得ることです。たとえば、ToDoリストは単純そうに思えますが、データをブラウザーのローカルストレージまたはクッキーに保存しなければならない場合、フルスタック作業になる可能性だってあるのです。
JavaScriptを学ぼうとするとプロジェクトの難度が前もって分からないため、自信喪失につながるトラブルのもとになるのです。
学習の妨げになるのはどのようなプロジェクトか
では、もっと具体的にするために、簡単そうだと思って挑戦してしまうプロジェクトの例と、そこに潜む概念について解説します。
| プロジェクト | 関係する概念 |
|---|---|
| クイズ | 配列、オブジェクト、関数、フォーム、イベントリスナー |
| ToDoリスト | 配列、オブジェクト、関数、フォームまたはストレージ（フロントエンドまたはバックエンド）、DOM操作、イベントリスナー |
| ちょっとした「SNS」 | SNS作成はフルスタックになる。またフロントエンドJavaScriptにとって、データベース、認証、セキュリティ、ユーザー管理などバックエンドの概念も必要 |
ポイントはなにか？
この項のポイントは、新しいことを始めようとしている人を怖気づかせることではありません。上の例のようなプロジェクトから手をつけなければ、思っていたよりも速くJavaScriptを身につけられるということです。
必要なのは、もっと入念なアプローチだけです。
もっと効果的に学ぶには
プロジェクトをあまりに急に始めることで発生する罠を防ぐには、以下のような戦略があります。
- 必要な概念の取得から始める
- 実社会同様に練習する
戦略1：必要な概念の取得から始める
大規模なプロジェクトに直接飛びつくのではなく、規模が一番小さな機能から学び始めるという戦略です。知識の土台は強化され、コーディングが簡単にできます。
たとえば、innerHTMLを使ってdivタブ内にテキストを表示したり、パラグラフのテキストの色を変更したり、2つの数字を足したり、関数の作成に初挑戦したり、変数を学んだりといろいろできます。そのほかにも、配列またはオブジェクト内になにかを保存したり、ボタンをクリックするとなにかが起きる仕組みを作ったり、ifやeelseのロジックを学んだり、ループに挑戦したりもできます。
このような概念に遊びながら慣れれば、すぐにいろいろなものが作れることに気づきます。さらに、新しい経験によって、どのプロジェクトに取り組むべきかが、もっとよく分かるようになります。成功を実感できればできるほど自信も大きくなり、弾みがつくので、最初から大規模なプロジェクトに急いで挑戦するよりも、さらに先へ進めるようになります。
チャレンジは成長させてくれるという点で大切であることは確かで、安全地帯を超えて挑戦するのはすばらしいことです。しかし、自分のペースを乱してまで挑戦するべきではありません。
戦略2：実社会同様に練習する
JavaScriptを勉強する際、実社会と同じ感覚で練習してください。自分のテキストエディターやブラウザーを使い、チュートリアルに頼らずにコーディングするのです。
コーディング練習を現実と同じ状態ですればするほど、本当になにかを作成しなければならいときに、つまずく可能性が低くなります。
チュートリアルに頼ればなにかは作れるけれど応用が効かない、といった問題を回避するには抜群の方法です。
では、プロジェクトをいつ始めるべきか？
JavaScriptの基本を学び始めると、どのようなプロジェクトから始めればよいのかが分かってきます。
チャレンジは大事ですが、たとえば、テキストをスクリーンに表示する方法を知らないのに、完璧なデジタルバンキングアプリを作れと言っても無理です。
学習できる概念や、概念を学んだあとに挑戦できるちょっとしたプロジェクトにどのようなものがあるかを、知ることが大切です。次の表ではその例を紹介します。それぞれ、学んだ概念に基づいて作成できるプロジェクトになっています。
| 新しく学習した概念 | 挑戦できるミニプロジェクト |
|---|---|
|
変数、関数 |
変数から自分の名前を取得し、ページ上にあいさつを表示する関数 |
|
クリックハンドリング、クラスの変更 |
詳細な情報を表示・非表示にする詳細情報ボタン。または、クリックするとWebページ上のコンテンツの色やスタイルがテーマに合わせて変化する、2つのテーマ選択ボタン |
|
Ifステートメント、乱数 |
2つのドアの正しい方をクリックすると特典がもらえるゲーム |
|
テキスト入力値、JavaScript計算 |
レストランのチップを計算するツール |
|
配列、ループ |
ソーシャル投稿サイトのフロントエンド部分。配列を使ってテキスト投稿のリストを作り、その配列をループして投稿を表示する |
これでなにができるのか？
いろいろなことを違う順番で試した点に注目してください。プロジェクトから始めて、必要な概念を得ていくのではなく、必要な概念からスタートし、知識に基づいたプロジェクトを作成しました。
これはJavaScriptの学習方法に深い影響を与えます。なぜなら、先を急ぎすぎて取り残される代わりに、自信を持って各ステップを進める土台を学べるからです。ここで学んだ細かなことが土台となり、最初に考えていたよりも大規模なプロジェクトを作成できるようになります。
プロジェクトに必要な概念を知るには？
いくつかの概念を学習したら、次はプロジェクトに挑戦する段階です。
使うべき概念と避けるべき概念をどのように知ればよいのでしょうか。
コーディング以外の例を挙げるなら、いま椅子を作っていて、2つの木材を1つのネジでつなげようとしているとします。手を使ってネジを締められますが、痛いし、飽きてしまいます。しかし、スクリュードライバーの存在を知っていれば、スクリュードライバーのほうが効率的だと分かります。電動スクリュードライバーがあればさらに効率的です。
たくさんの道具を知っていればいるほど問題を上手に見極め、どの道具を使うべきか分かりやすくなるということです。
この例をコーディングの世界に戻すと、それぞれの概念が道具ということになります。たくさんの概念を学んでコーディングの道具箱が大きくなればなるほど、なにを使うべきかがよりはっきりと分かってくるのです。
こうした背景を念頭に置いて、プロジェクト全体を考えていく実用的な方法を紹介します。
- 最初に、プロジェクトを小さなセクションに分ける
- それぞれのセクションで実現したいことを簡潔に書くと、コードの詳細に気を取られずに考えられる
- 知っている概念が使えるセクションから作り始める。知識をしっかり学んでいれば（最初からプロジェクトに飛びつかずに）、どのような道具を使えば良いかも分かっている
- 知識が欠けている部分があれば、可能な限り小さく分割してから調べる
- 完璧主義は進歩を妨げる存在になるので、学習中は完璧にこだわらない
- オンラインで公開されている優良なチュートリアルの多くは、公開前にいろいろな実験を経てできたものだから、違うアプローチやアイデアで実験することを恐れない
- プロジェクトへの挑戦が完了したら、同じようなプロジェクトを調べてほかの人のアプローチから学ぶ
たくさんのプロジェクトに取り組み、上のような箇条書きの経験をすれば、仕事に適した概念選びがさらにスムーズに感じられるようになります。
あとは練習あるのみです。
大事なポイントをまとめると
プロジェクトは、JavaScriptを学ぶにあたって最高の方法にも最悪の方法にもなります。その違いはタイミングです。
- プロジェクトに飛びつくのが早すぎる＝罠
JavaScriptを学ぶ上で多い失敗のひとつに、どの概念が必要なのかを理解する基礎知識が十分にないままプロジェクトに飛びついてしまうことがある。自信喪失やあきらめにつながりやすい - 概念を先に学び、そのあとでプロジェクトに挑戦する
プロジェクトの罠に引っかからないように、先に概念を学んでから、その知識に基づいたミニプロジェクトを始める。こうすれば理解度や記憶力が高まり、勢いもついて進みが速くなる。作業に圧倒されてしまうことも少なくなる - 実社会同様に練習する
現実と同じように練習を重ねるほど、チュートリアルから卒業したときに困ることが少なくなる
最後に、人はそれぞれ学び方が違います。この記事で紹介したアイデアは鉄則などではなく、ちょっとした提案です。これで、多くの人びとが陥ってきた罠を避けられるようにと願っています。
※本記事はTim Severien、Chris Perryが査読を担当しています。最高のコンテンツに仕上げるために尽力してくれたSitePointの査読担当者のみなさんに感謝します。
（原文：Projects Can Sometimes Be the Worst Way to Learn JavaScript）
［翻訳：加藤由佳／編集：Livit］
