2日間キャンプでリフレッシュした、もりけん塾生5日目のねこらのんです。
初心者用の本やProgateなど動画学習教材をやっていると、もりけんさん（@terrace_tech）がツイートされていました。
入門書もいいのですが、本格的な太い本を一冊持つことをお勧めします
海外で自分が英語が喋れなくても、周りが喋るような「キツい強制的な環境」もやがて順応するはずです
学習も何言ってるか分からないぐらいが自発的に調べます
つまり逆で
分からなかったら入門書で理解する— フロントエンドエンジニア (@terrace_tech) June 25, 2020
本格的な本かぁ………
以前勧めてもらった本がありましたがお金の問題もあるしページ数が膨大なので購入をやめていました。
けどなかなか進まないし、よく理解できないだろうし…と、心が追い詰められていく一方で…
ネットで検索してもJavaScriptの勉強法は人それぞれだったので自分に合いそうな方法を探して行くと良いと思ってやってたんですけど…
でも悩んでも仕方がないし、一旦購入‼
それが『改訂新版JavaScript本格入門 ～モダンスタイルによる基礎から現場での応用まで』。
この記事では『改訂新版JavaScript本格入門 ～モダンスタイルによる基礎から現場での応用まで』を読んでJavaScriptについてわたしなりにまとめていきます。
目次
『改訂新版JavaScript本格入門 ～モダンスタイルによる基礎から現場での応用まで』をVScodeで書いてみた
JavaScriptの基本的な記法の箇所にJavaScriptで「こんにちは、世界！」というコードを実際に書いてみようという内容だったので書きました。
本と違う場所は、
- 『このページの内容』→『127.0.0.1:5500』という表記に
- 『□このページでこれ以上ダイアログボックスを生成しない』がない
でした。
Progateでよく忘れていた「；セミコロン」を今回も忘れてしまっていたので、忘れやすいことを頭に入れておくとバグ修正とかに役立つと思いました。
「；」を忘れやすい。
それでもコード上ではエラーが見当たらず…
VScodeに入れていたcode spell checkerにもヒットしなかったので、調べてみてもりけんさん（@terrace_tech）に質問しようと思いました！
ーーーーー質問の回答は明日へーーーーー
<script>要素をHTMLファイルに組み込む3つの場所
<script>要素はHTMLファイルに組み込みます。
場所は3つあるようで、
- <body>要素の配下
- <body>要素の配下（</body>閉じタグの直前）
- <head>要素の配下
です。
最もメジャーで使う場所は『2.<body>要素の配下（</body>閉じタグの直前）』のようです。
理由は高速化の手法として使えるようで。
要素の配下（</body>閉じタグの直前）でまかなえないときは3.の<head>要素の配下を用いる。
1.<body>要素の配下は外部ウェジットの埋め込み以外ではほとんど使わないそうです。
優先順位
- <body>要素の配下（</body>閉じタグの直前）
- <head>要素の配下
- <body>要素の配下
コードの外部化、2つのメリット
コードの外部化をすることで2つのメリットがあるようです。
- レイアウトとスクリプトを分離することで、コードを再利用しやすくなる
- スクリプトを外部化することで、htmlファイルの見通しがよくなる
修正しやすくなる感じかな！
コードを外部化ってことは
- html
- javascript
に分けてファイルを作成するって解釈で大丈夫かな？？
間違ってたらよくないから調べました‼
エンジニアの谷さんという方の記事、CSSやJavaScriptを外部ファイル化するメリットとデメリットを読むと、
CSSやJavaScriptのコードをHTMLファイルとは別のファイルにして使用することを「外部ファイル化する」と呼んだりします。
とあったので安心しました^^!
ちなみにHTMLファイル内にJavaScriptのコードを入れ込むことを、インラインというようです。
コードの外部化とインラインを併用する場合の注意点
外部スクリプトとインラインスクリプトを併用する場合の注意点はsrc属性を指定した場合<script>要素配下のコンテンツは無視されること。
併用する場合はスクリプト要素を別にする必要があるようです。
はじめてのcodesandbox
質問するに当たってcodesandboxのリンクを貼る必要があるんですが…
githubやcodesandboxなど使ったことがなくJavaScriptも初学者で調べることに本当に時間がかかる…
- 調べ方がおかしいから時間がかかるのか
- 最初は調べることが遅いのが普通なのか
が分からないですが質問するまでにも最初は時間がかかるんだなぁ…レベルが低い証拠だ＞＜
ちなみにcodesandboxはReactの環境構築につまずいた全ての人へCodeSandboxをオススメする理由と使い方の記事を参考にどうにか自分で作成したJavaScriptのコードをコピーして他者に見せるまでのところまでいけた！
ほんの少しだけレベルアップした気分…‼
本を読んでも全然ページが進まないけど、丁寧に調べていったら徐々にスピードが早くなるのかな？
最初だけゆっくりだといいなー！
感想
今日は5時間JavaScriptについて勉強したけど…本が全然進まない〜＞＜
わからないところを調べて、そこから派生してまた調べて、分からなかったらYou Tubeを見て…すっごい時間がかかるからもっと効率よく時間短縮したいな‼
あと性格上、情報が一気に入りすぎると混乱するから、まずはゆっくりとJavaScriptを落とし込むことに専念しよう‼
githubやcodesandboxなどは必要なときに必要な分だけ調べて、余裕が出てきたらYou Tubeとかで学んでみようかな^^!
もりけん塾（@terrace_tech）