Webの基礎を勉強する上での心構えと参考になるサイト

# はじめに
この記事は[Webの基礎をおさらいカレンダー Advent Calendar 2022](https://qiita.com/advent-calendar/2022/basic_review)の1日目です。
このカレンダーでは、なんとなくわかった気になっている、Webの知識をおさらいするカレンダーです。
興味をもし持ってくださった方は、購読いただけると嬉しいです！

1日目は、そもそも分かった気にならないようにするための心構えの話と、基礎を学んでいくときに便利なサイトを紹介します！

## 分かった気にならないようにするために
そもそも、分かった気になってしまうと何がまずいのかを考えてみます。
* 誤った結果に導かれる可能性
    * 前提が異なると結果も変わる
    * 他者とのコミュニケーションで認識ずれが生じる
* 実業務に活きづらい
    * 複雑な仕様などに対応できない
* 結果的に理解が遅くなる
    * 点での知識で、線にならない。
        * 周辺知識を学ぶ際に、都度都度1から理解する必要がある。

こうして考えてみると、分かった気になってるって怖いことだなーと思いますね！
自然と分かった気になってることって結構あると思うので、意識的に学習しないと
上記で述べたような事態になる可能性が高くなるだろうなと思います。

上記の事態を避けるために、この記事では、まずWebの基礎を学ぶ上でのファーストステップとして、どう学習するかという部分の自分なりの考えをまとめました。

### なぜを意識する
さて、分かった気にならないために、まずすべきこととはなんでしょうか？  
私は、なぜ？をまず意識するのが重要だと考えています。

なぜこの技術が生まれたのか？
なぜこの知識が必要なのか？
なぜ今勉強しているのか？

とにかく、本質を理解することが重要だと考えています。
自分自身への問いと、相手への問いを大事にしましょう。

自分自身への問いが重要なのは、自分の中でしっかり腹落ちさせるためです。
腹落ちさせないと、どうしても理解が浅くなってしまったり、効果的でない学習の仕方になります。
こういう理解であってるんだよな？　他の人に説明してと言われた時にできるか？


相手への問いは、リアルな人だけを指すわけではないです。学習した記事やプログラミング言語などへも問いかけてください。
この記事ではこうやって言ってるけど、実際どうなんだろう。この言語早いって言われてるけど、なんでこんなに早いんだろう？

その疑問が本質的な理解へとつながります。

#### n回深掘りする
なぜを意識した後、必ずそのなぜが本質的なのかどうか？ということを検証してください。
なぜを考えようとなったときに、最初に陥るのが、表面で捉えてしまうケースです。
このケースを防ぐ良い方法として、なぜなぜ分析というのがあります（5回なぜを繰り返す)。

詳細の説明を省きますが、自分がこれ以上深掘りできないな、というところまで落とし込むと効果的です。

### 分かった気になる
とはいっても、なぜなぜを繰り返して学習を進めていたら日が暮れてしまいます。
なので、一回、わかった気になってしまいましょう。

あれ、最初の話と矛盾してません？と思った方もいるかと思いますが、
1回で全部分かろうとしないという意味です。トライアンドエラーを繰り返して理解をするのが大事です。

### アウトプットする
分かった気になって、そのまま何もしないと、浅い理解で終わってしまいます。
そこで大事なのが、アウトプットするということです。
ラーニングピラミッドというものはご存知でしょうか？
学習の定着率を図に表したもので、人に教えることで定着率が90％と言われています。
![1173375.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224825/bc08422b-d12a-896a-e4bc-73de336292ca.jpeg)


アウトプットは自ら体験し、人に伝える作業と等しいです。
理解度がかなり深まるはずなので、学習したことは必ずどこかにアウトプットしましょう。

#### 真似する
アウトプットの具体的な方法として、まずは真似をしてみましょう。
コードを写経してみる。説明通りサイトを構築してみる。など
まずは概念を理解するというよりも全体を通して雰囲気をふんわり理解でいいと思います。

#### 言語化する
次に、真似する中で、ふんわり理解したことを言語化してみましょう。
何も見ずに、自分の言葉で言語化することが大事です。
ここで、言語化した内容は、今の自分の理解度になります。
言語化した時に、違和感を覚えるようであれば、理解しきれていないです。
その違和感をクリアにしていきましょう。

#### 応用する
言語化した内容を元に、自分で同じことができるかを挑戦してみてください。
その時に、作るものや試す内容を変えたりした方が良いです。
また、こういうケースだったらどうか？という仮定を考えてみるのも良いです。
試した内容がスムーズにうまく行ったなら、理解が進んでいる証拠です。
うまく行かなければ、理解し切れていない箇所があるので、再度見直しましょう。

### 学習し直してみる
ここまで試した後、再度同じ学習をしてみてください。
おそらく、分かるところとまだ分かってないところの濃淡がはっきりしてくるかと思います。
また、分かるところの中でも、疑問を感じる場所があるかもしれません。
その感覚を大事にしてください。深掘りが自然と行われるはずです。

この学習の仕方に、最初は時間がかかるかもしれませんが、慣れるとすぐに全体の手順を通してできるようになります。

## Webの基礎を学ぶ上で参考になるサイト
ということで、学習方法を工夫して、Webの基礎を学んでいきたいと思います！
25日間のアドカレでは、下記サイト達を参考にしながら、アウトプットをしていきたいと思います。
下記サイトの内容を全て理解するだけでも、Web知識の基礎力はかなり身につくと思うので、一緒に頑張っていきましょう！

* [mdn web docs](https://developer.mozilla.org/ja/docs/Learn)
    * 最初、jsのリファレンスとして使ってただけだったんですが、学習コンテンツが実はすごい。
        * かなり初歩の初歩から伝えてくれているので、必見です。
* [「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典](https://wa3.i-3-i.info/index.html)
    * 用語でわからないものがあったときに、理解の足がかりとなってくれます。
* [developer-roadmap](https://github.com/kamranahmedse/developer-roadmap)
    * 自分の目指す方向性に対してのロードマップを知ることができます。
        * 何学習したらいいか迷ったらこのロードマップを見ると良いです。
* [とほほのWWW入門](https://www.tohoho-web.com/)
    * Webの基本をサラッと理解するのに、とても役に立ちます。
* [w3schools](https://www.w3schools.com/)
    * 英語のサイトですが、リアルタイムに学習進めていくのにおすすめです。


# まとめ
抽象的な話が多くなってしまいましたが、せっかく頑張って勉強しても、闇雲にやっていると分かった気になっただけで、身につくものがほとんどなく終わってしまいます！  
量だけではなく、質も意識して、一緒にWebの基礎知識を深掘りしていきましょう！

[Webの基礎をおさらいカレンダー Advent Calendar 2022](https://qiita.com/advent-calendar/2022/basic_review)の1日目でした。
明日以降は、具体的なWeb技術の基礎を深掘りしていきます。
興味をもし持ってくださった方は、購読いただけると嬉しいです！