調査と学習

効果的な調査

ウェブ開発者として、仕事中に直面する問題の解決策を探すのに多くの時間を費やすことになるでしょう。すべてを覚えておく必要などありません。プロのウェブ開発者でさえ、MDN Web Docs などのツールを使って、忘れてしまったことを頻繁に調べ直しています。これからお分かりいただけるように、ウェブ開発を学ぶということは、多くの構文を覚えることよりも、むしろ問題解決やパターンの習得に重点が置かれているのです。

これを円滑に進め、より自立できるようになるためには、下記で説明するように、答えを探すための効果的な戦略と、どの戦略を使用すべきかを学ぶ必要があります。例えば、まずオンラインで情報を調べ、本当に行き詰まってしまったときにのみ、メンターやクラスメート、先輩開発者に助けを求めるようにしましょう。

質が高いリソースの選択

調査に用いる情報源は、質が高く、信頼できるものであることを確認してください。どの情報源が信頼できるかを知るには、先生や経験豊富な同僚に推奨されるものを尋ねたり、ウェブ検索を行ってネット上の他のユーザーが推奨しているものを探したりしましょう。もちろん MDN はおすすめですが、他にも以下のような優れた例があります。

• Stack Overflow
• Scrimba ^{コースパートナー}
• YouTube
• freeCodeCamp
• Codecademy
• Dev.to

どのようなリソースを、いつ使用するべきかを学ぶ

ドキュメントにはさまざまな種類があり、それぞれがどのような場面で有益であるかを知っておくと便利です。用語はサイトによって異なり、多くの場合、重複していることもありますが、一般的に、主な種類は以下の通りです。

• リファレンス：人間の言語には、すべての単語の意味を掲載した辞書があるのと同様に、プログラミング言語にも、開発者が使用する可能性のあるあらゆる機能の目的や構文を網羅的に解説したリファレンスがあり、多くの場合、使用例も併記されています。リファレンスは、機能の使い方よりも、何をするものかに焦点を当てています。
• チュートリアル：開発者が新しい技術の使い方を学ぶことができるようにするものです。チュートリアルは、多くの場合、段階的に説明されており、初心者向けとなっています。
• ガイド/手引き：同時に学習に関連付けられていますが、初心者向けというよりは、特定の問題を解決することを目的としている場合が多いです。
• 解説記事/概念解説：特定の技術の背後にある大まかな概念や用途の説明に重点を置く傾向があり、低レベルのコードの詳細にはあまり踏み込みません。
• Q&A/フォーラム：ユーザーが質問をし、他のユーザーが回答を提供するサイト。

さまざまなサイトをいくつか参照し、それぞれのサイトでどのようなドキュメントのスタイルが主流かを確認した上で、状況に応じてどのスタイルが有益であるかを考えてみてください。例を示します。

• MDNは、HTML、CSS、JavaScript のさまざまな機能に関するリファレンスドキュメントを調べるのに最適で、新しいテクニックを学ぶための役立つガイドやチュートリアルも掲載されています。
• Stack Overflow は Q&A 形式のサイトで、ユーザーが互いに協力して具体的な問題の解決策を見つけ合っています。
• Scrimba や Codecademy では、ステップバイステップの対話型チュートリアルが提供されています。YouTube も、動画チュートリアルを探すのに最適な場所です。

何よりもまず、あなたにとってどの学習手法が最も効果的かを把握しましょう。人によって学ぶ方法は異なります。現実的には、調査や学習のために複数の資料を使用することになるでしょう。

効率的に検索

お気に入りのウェブサイトで問題の解決策を探しても見つからない場合は、検索範囲をウェブ全体に広げる必要があります。このコースの前半では、効果的なウェブ検索のための一般的なヒントを網羅しました（情報の検索を参照）。この章では、質の高い情報を調べるための具体的なヒントやコツをいくつか紹介します。

• 特定のツールや製品の使用で問題が生じた場合は、まず公式ドキュメントを参照してください。これを思いつかない人が驚くほど多いのですが、公式ドキュメントは初心者向けに書かれていることが多く、経験者は自分に適していないと考えてしまうかもしれません。もし使用している製品がウェブプラットフォームであれば、非公式な公式ドキュメントといえば MDN ですので、ここはまさに適切な場所です。
• 見つけた資料の日付を確認しましょう。最近メンテナンスされているのか、それともしばらく更新されておらず、そのため情報が古くなっている可能性があるのか。信頼できるサイトでは、ユーザーがこれを簡単に調べられるよう、公開日や「最終更新日」が記載されていることが一般的です。理想を言えば、現行の技術や手法を扱った信頼できるサイトの記事は、数年間（例えば 2 ～ 3 年）以上メンテナンスされていない状態になってはいけません。成熟した技術（例えば、HTML や CSS の基本機能など）に関する古いドキュメントであっても、依然として正確である可能性は十分ありますが、この点は念頭に置いておく必要があります。
• 前項の続きですが、新しく公開された資料であっても、情報が古くなっている場合があります。例えば、CSS によるページレイアウトに関する記事では、グリッドやフレックスボックスといった最新の手法が取り上げられているでしょうか、それとも、浮動ボックスを使って複数列のレイアウトを生成するといった、もはや使われていない手法が依然として紹介されているでしょうか？
• 単一の情報源だけに頼ってはいけません。特に、その情報源が信頼できるかどうか確信が持てない場合は、異なる情報源を照らし合わせて確認しましょう。
• コーディングの課題の解決には、AI ツールを使用してみるのも良いでしょう。例えば、ChatGPT や GitHub Copilot などがあります。AI ツールの使用には（特に初心者の場合は）注意が必要ですので、その長所と短所をよく理解しておく必要があります。
  • 良い点としては、調査や検索を大幅にスピードアップできるほか、コードや文章の構成を整えるのにも役立ちます。
  • 一方で、AI ツールには推論能力がなく、誤解を招くような答えや、まったく間違った答えを提供することもよくあります。AI の回答が正しいと安易に想定してはいけません。必ず検査を行い、それ以外にも存在する他のソースと照らし合わせて確認してください。

コードのコピー＆ペーストに関する補足

AI によって生成されたかどうかに関わらず、自分が書いたものでもなく、理解もしていないコードをコピー＆ペーストして使用することは、スキルレベルにかかわらず、常に避けるべきとされてきました。そうすることでバグの修正が難しくなるほか、そのコードの使用状況や方法に起因して、セキュリティ、パフォーマンス、アクセシビリティ上の問題が生じる可能性があります。多くの場合、コンテキストや使用方法によって、これらの問題が生じる可能性があります。

初心者にとって、解決策を単にコピー＆ペーストするということでは、自分でやってみるという学習の機会を逃してしまうことになります。これは、スキルや概念を定着させる上で重要なことです。また、コードに著作権があり、使用許可を得ていない場合、ライセンス上の課題に巻き込まれる可能性もあります。

ここでアドバイスしたいのは、他の場所にある解決策を使用する場合は、まずその仕組みを理解してから、コピー＆ペーストするようにしてください。理想を言えば、その解決策から学び、自分なりのバージョンを書き上げるのが良いでしょう。

人脈ネットワークを築く

ウェブサイトについてはもう十分話したので、これで「人」について話しましょう。それと、ウェブサイトについても。

協力できる人々のネットワークを築くことは、ウェブ開発者にとって欠かせない要素です。この点については、共同作業とチームワークでも触れますが、ここでは特に、調査に役立つネットワークの活用に焦点を当てます。

効果的な調査ネットワークは、知識のレベルやあなたとの親密度が異なる、いくつかのグループの人々で構成されています。

• 仲間: 身近な仲間（クラスメートやチームメイトなど）に情報を共有したり、質問をしたりすることは有益です。彼らには役立つ知見を持つことができるかもしれませんし、一緒に問題に取り組みたいと思っているかもしれません。また、前回も同じ問題に取り組んだことがあり、答えを教えてくれる可能性もあります。

• 教師や先輩同僚: 同僚から助けが得られない場合、通常は次に先輩同僚、上司、教師に依頼することになります。彼らは同僚よりも経験が豊富ですが、利用できる自由な時間が少ないことを念頭に置いておいてください。まず自分で問題を解決しようと試みたこと、そして相手の時間を尊重していることを示せば、より良い結果が得られ、感謝もされるでしょう。そのための方法は以下の通りです。

  • これまでに試みたことを記録しておきましょう。何がうまくいかなかったのでしょうか？
  • 調査対象が、うまく動作させることができない特定のサンプルコードやテクニックである場合は、CodePen や Scrimba ^{コースパートナー} などのサイトを利用して、相手に表示させることができるオンラインのテストケースを生成してください。
  • 相手にどのような質問をするか、よく考えてください。具体的にはどのような問題があるのでしょうか？ 相談したい問題が複数ある場合は、優先順位をつけて、最も重要な事項を確実に網羅できるようにしましょう。
  • そのセッションの目標を設定しましょう。例えば、「最優先の問題の解決策を探そう」などです。また、最大の問題を解決することで、それ以外にも他の問題を修正する可能性がある点にも注意してください。
  • 相手にとってできるだけ気楽にやり取りができるよう、その問題についてどのように連絡を取りたいか尋ねてみてください。
  • 打ち合わせを設定する際は、必要以上の時間を確保しないようにしましょう。所要時間がわからない場合は、例えば 30 分といったように、セッションの時間をあらかじめ決めておきましょう。必要があれば、後で改めて助けを要求することも可能です。

• より広範なコミュニティネットワーク: これには、フォーラムやチャットグループなどの専用のオンラインコミュニティ（例えば、MDN Web Docs の Discord や freeCodeCamp のフォーラムなど）や、カンファレンスやスキルシェアイベントなどの対面式の交流会が含まれます。

• グローバルネットワーク: 時には他に手立てがなくなってしまうこともあるでしょう。その場合は、ソーシャルメディアなどの一般的なグローバルコミュニティで質問を投稿してみるのも一つの手です。思いがけない場所から役立つ回答が得られることもあります。

何よりも重要なのは、対話するすべての人に対して、常に敬意を払い、親切に接することです。また、受け取るだけでなく、与えることも学ぶべきです。互いに助け合い、支援を提供するウェブ開発者ほど、強固な関係を築き、今後も助けを得続けられる可能性が高くなります。

学習計画を立てる

自分が学ぶことを習得するための計画を作成するのはよい考えです。

まずは目標を設定する

ばかばかしく聞こえるかもしれませんが、まずは自分が何を達成したいのかを一文にまとめることから始めるべきです。野心的であると同時に、現実的であることも大切です。

以下のものは、それぞれスコープが異なりますが、すべて現実的かつ達成可能なものです。

• 2 年後にプロのウェブ開発者になりたい。
• 地元のアマチュアテニスクラブのウェブサイトを制作できるだけの知識を身につけたい。
• HTML と CSS を学び、会社のウェブサイトのコンテンツ更新業務を引き継ぐことができるよう、担当業務の範囲を広げたい。

以下のものは、それほど現実的とは言えません。

• 完全な初心者から、3 ヶ月でシニアウェブ開発者になりたい。
• 2 年以内に、自分の会社を立ち上げ、Facebook を上回るソーシャルネットワークを構築したい。

そのためには何が必要なのかを定義する

目標を定めたら、その目標を達成するために何が必要かを調べておくのがよい考えです。

例を示します。

• 必要な素材:
  • コンピューター
  • インターネットアクセス
  • ペンと紙
• 必要な知識:
  • HTML、CSS、JavaScript、および関連ツールやベストプラクティスを活用して、ウェブサイトやウェブアプリケーションを構築する方法（この点については、役立つアドバイスをすることができます）。
  • ドメインやホスティングサーバーを取得し、それらを利用してウェブサイトやアプリケーションを公開する方法。
  • 中小企業を経営する方法。
  • 自分のビジネスを宣伝し、顧客を獲得する方法。

どれくらいの時間が必要か見当をつける

次に、目標を達成するための時間計画を立て始めましょう。例えば、次のような単純なもので構いません、

「必要な知識を学ぶには約 500 時間必要で、そのための期間は 1 年間ある。2 週間の休暇を想定すると、週に 10 時間ずつ取り組む必要がある。夕方や週末は時間が空いているので、その時間帯を中心にスケジュールを組むことにする。」

計画の正確さを過度に気にする必要はありません。大まかな見積もりで十分です。何らかの目標を書き出して、それに向かって取り組むことの方が重要です。

これにどれだけの時間を割けるかは、もちろんそれぞれの状況次第です。学生であれば、仕事や子育てで忙しい人よりもはるかに多くの自由時間があります。目標を達成することは依然として可能ですが、どれくらいのスピードで達成できるかについては、現実的に考える必要があります。

もしウェブ開発を学ぶために大学や短大のコースを受講しているなら、こうした計画のほとんどはすでに整っているはずです。ラッキーですね！

メインの目標の下に、いくつかのサブ目標を書き出しておくと、現在の進捗状況を把握することができるので、よい考えです。例えば。

• 夏までに HTML と CSS の基礎を学ぶ
• 12 月までに JavaScript の基礎を学ぶ
• 来年 4 月までにサンプルウェブサイトのプロジェクトを完成させる
• など

目標リストに何を書き入れればよいか迷っている場合は、カリキュラムが役立つことがあります。

週ごとのスケジュールを行ったら、毎週何をこなせたかを、単純な表計算ソフトや、あるいはノートにでも記録しておきましょう。自分の進捗状況を常に確認し、必要に応じて計画を調整してください。

モチベーションを維持する方法

モチベーションを維持するのは難しいものです。特に、プログラミングやウェブ開発のような複雑なスキルを学ぼうとしている場合はなおさらです。ここでは、モチベーションを維持し、学び続けるためのヒントをいくつか紹介します。

• 作業環境をできるだけ生産的なものにしましょう。作業しやすい快適な机と椅子を取得し、作業内容が見えるように十分な照明を確保し、集中しやすい環境を整えましょう（例えば、穏やかな音楽や香りなど、自分に役立つことを取り入れてください）。気が散るような部屋（例えば、テレビがついている部屋や、友人がサッカー観戦している部屋など）で作業しようとしないでください。また、携帯電話は部屋の外に置いておきましょう。ほとんどの人は携帯電話に気を取られがちなので、別の場所に置いておくことをお勧めします。
• 食事、運動、睡眠。健康的な食事を心がけ、定期的に運動し、十分な睡眠をとるようにしましょう。当たり前のように聞こえるかもしれませんが、コーディングに夢中になるとつい忘れがちです。これらの重要な要素をスケジュールに組み込み、これらを犠牲にしてまで学ぶ時間を増やさないように注意してください。
• 自分へのご褒美を用意しましょう。学習セッションのたびに、学習が終わって完了してからしかできない楽しいことを予定に組み込んでおきましょう。例えば、ゲームが大好きなら、「3 時間の学習を終えるまでは今夜はゲームをしない」と決めるのは、かなりやる気を引き出してくれるものです。あとは意志力次第です。頑張ってください！
• 共同学習と実演。これは誰にでもできることではありませんが、可能であれば、他の人と一緒に学ぶようにしてください。繰り返しになりますが、ウェブ開発に関する大学の講座を受講している場合はこれが容易ですが、友人を説得して一緒に学んでもらったり、地元のミートアップの参加者に声をかけてみたりするのはいかがでしょうか？ アイディアについてディスカッションをしたり、助けを求めたりできる相手がいることは実に有益で、やる気を引き出してくれます。また、自分の作品をデモする時間も確保すべきです。その称賛の声は、あなたの原動力となるでしょう。

休憩をとること、ラバーダッキング

問題の答えがなかなか思いつかなかったり、学ぶことに集中できなかったりするときは、少し休憩を取ると有益です。15 分ほど散歩に出かけたり、お茶を淹れたり、音楽を聴いたりしてみてください。あるいは、その 3 つをすべて組み合わせてみるのもいいでしょう！

また、休憩を取らずに長時間作業することは、身体にも悪影響を及ぼします。モニターを長時間見続けると目が疲れますし、長時間じっと座り続けると背中や脚に負担がかかります。 "20-20-20" のルールを実践すれば、目の疲れを防ぐことができます。20 分ごとに、20 メートル先にあるものを 20 秒間見ていくようにしてください。 同時に、1 時間から 90 分ごとに、15 分間の正規の休憩を取ることをお勧めします。

休憩時間を利用して、同僚や友人、家族などにその課題についてディスカッションしてみてください。たとえ彼らが答えを提供してくれなくても、頭の中で課題を整理しているうちに、自分自身で解決策を探すことができる可能性が高いでしょう。自分自身に、あるいは無生物に向かって声に出して課題を説明してみるだけでも、効果があります。

この手法はラバーダックデバッグ^(英語)（またはラバーダッキング）として知られており、その名前は、もともとコーディング上の問題をゴム製のアヒルに説明するというアイディアに由来しています。

効率的な問題解決

ウェブ開発に関連するあらゆる問題（そしてあらゆることを学ぶこと）を解決するための、唯一の効果的な方法など存在しませんが、ほとんどの場合に役立つ一般的なアドバイスはいくつかあります。

問題を小さな単位に分解する

何か特定のことを実装しようとしているときに、その内容を理解するのが実に難しいと感じたら、それをいくつかの小さな問題や要素に分解してみるといいでしょう。

例えば、「2 段構成の単純なウェブサイトを構築する」という課題がある場合、次のように細分化することができます。

• HTML の構造を作成する。
• サイトの基本的な字組みを決定する。
• 基本的な色を決定する。
• 大まかなレイアウトを実装する — ヘッダー、水平ナビゲーションメニュー、メインカラムとサイドカラムからなる本文エリア、フッター。
• 水平ナビゲーションメニューを実装する。
• など。

さらに細かく分解することも可能です。例えば、「水平ナビゲーションメニューを実装する」という項目は、次のように書き出すことができます。

• メニューアイテムのリストにマークアップを施す。
• メニューアイテムを横の一行に並べる。
• リストの間隔や箇条書き記号など、不要なデフォルト設定を除去する。
• メニューアイテムのホバー／フォーカス／アクティブ状態を適切にスタイル設定する。
• メニューアイテムの間隔を均等に保つ。
• メニューアイテム間に十分な縦間隔を確保する。
• それぞれのメニューアイテム内でテキストが中央揃いになるようにする。
• など。

これらの問題は、それぞれ、当初抱えていたあの大きな問題に比べれば、それほど解決が難しいように見えないものです。

パターンを把握する方法を学ぶ

ウェブ開発とは、主に問題解決とパターンの活用が中心です。

特定の問題を解決するために何をする必要があるかを書き出したら、その解決にどの技術的機能を活用すべきかを検討し始めることができます。例えば、プロのウェブ開発者はこれまで数多くの水平ナビゲーションメニューを作成してきたため、すぐに次のような解決策を思いつくでしょう、

1. ナビゲーションメニューは通常、同様にリンクのリストから作成されます。

   html

   <ul>
     <li><a href="">1 つ目のメニューアイテム</a></li>
     <li><a href="">2 つ目のメニューアイテム</a></li>
     <li><a href="">3 つ目のメニューアイテム</a></li>
     <li><a href="">など。</a></li>
   </ul>
   

2. すべてのアイテムを横並びにするには、現行の方法として最も簡単なのは、フレックスボックスを使用することです。

   css

   ul {
     display: flex;
   }
   

3. 不要な空間や箇条書きの記号を削除するには、次のようにするのが最適です。

   css

   ul {
     list-style-type: none;
     padding: 0;
   }
   

4. （他のステップが続く。）

解決策を探すためにどれだけの調査が必要かは、あなたの経験の深さや、以前に類似したものを実装したことがあるかどうかによって異なります。前回のプロジェクトで同じパターンを認識したことがあれば、それ以来忘れてしまった構文の細部をいくつか見ていくだけで済むかもしれません。

こうした問題の解決策を探したときは、自分がどのような手順を踏んだかをメモに残し、過去の作業を振り返れるように、どこかのディレクトリーに最低限のサンプルコードを保存しておくことをお勧めします。

他の人のコードを参照する

ウェブに用意されている開発者ツールを使用すれば、あらゆるサイトの構築に使用されているコードを参照できます。解決策を利用できない場合は、実際に公開されている類似の機能を持つウェブサイトを探し、その実装方法を見ていくのが有効な調査方法です。

継続的な学びの姿勢

常に学ぶという心構えを取得すべきです。ウェブは絶えず進化しており、技術やトレンドも常に変化しているため、それに遅れを取らないよう、知識を常に更新する必要があるのです。すべてを学び尽くすことなど決してできません。

作業をスムーズに進めるためには、次のようにします。

• 好奇心を持ちましょう。ウェブサイトで、かっこよくて興味深い機能や、あるいはよくわからない機能を見つけたら、それがどのように作られているのか探ってみてください。それが、あなたの次の研究プロジェクトや学習課題の形成につながるかもしれません。
• 定期的に読書や小規模な研究プロジェクトに取り組むようにしましょう。新しいスキルを身につけるために、学習時間を明確に設定してください。
• 技術ニュースやブログ、ブラウザーのリリースノートを定期的に読む習慣をつけ、これから学ぶべき新しいことが何があるのかを確認しましょう。
• 練習を続けてください。具体的な問題の解き方を練習すればするほど、その分野における脳の神経回路が強化され、具体的な問題の詳細や論理を思い出しやすくなり、将来、類似した解法を学ぶ際にもよりスムーズに理解できるようになります。

• Overview: ソフトスキル
• 次のページ