みなさん、こんにちは。どんぶラッコです。
今日は、JavaScriptを最初に学習するときに、よく直面する問題をまとめてみました！
私自身がぶつかった部分でもあります笑
是非克服しちゃってください！！
1. どの情報を信用したらいいのかわからない！
世の中、情報がありすぎてどの情報を信じていいのかわからないですよね…
私が記事の確からしさを判断する基準は下記の通りです。
- 記事が執筆された日付
… なるべく1年以内の情報に当たるようにします。1年の間に全く違う記述方法がトレンドになることは日常茶飯事です。また、今後フレームワークを使うことになると思いますが、そのバージョンも確認するように心がけます。 - いいね・コメントの数
… あと、はてなブックマークの数なんかも参考にしています - 参照元に一次情報(公式のドキュメント)がある
… 私は英語が苦手なので敬遠してしまいがちですが、結局はオフィシャルの資料に当たるのが一番確実です。でも、最初からそれは内容としてもハードルが高いので、まずは日本語での理解に努めています。
2. scriptファイルが読み込まれない！
これ、あるあるですよね。そういう時は大抵JavaScriptを読み込む順番に原因があります。
大抵の場合、
<html>
<header>
...
</header>
<body>
...
<script>
...
</script>
</body>
</html>のように、<script>が<body>タグ内の一番下に記述されていると思います。
これは、DOM要素(HTMLタグのことですね)に対して内容の書き換え・動作を設定したい場合は、DOM要素を読み込んだ後にJavaScriptを設定する必要があるからです。
header や body の一番上で読み込んでいないか、もう一回見直してみてください！
もし、どうしてもheaderに記述したい場合は、 defer オプションを使うと良いですね。
読み込みのタイミングについては、ここら辺の記事が参考になるかと↓↓
https://qiita.com/phanect/items/82c85ea4b8f9c373d684
3. 何で動いていないのか、わからない！
その場合は、こまめに console.log で確認するようにしましょう！
プログラムがブワーーーーーーっと書いてあるとついつい嫌になってしまいがちですが、所詮は小さい処理の集合体です。
... 処理1 ...
... 処理2 ...
... 処理3 ...
私の観点としては、下記が挙げられます。
- 現在の変数の中身はどうなっているか？
- 関数が呼び出されている場合
- そもそも関数は実行されているか？
- 条件式がうまくいかない場合
- 変数の中身を確認
- 変数の型を確認
ポイントは思い込みを持たないことと、どこまでが想定通りの挙動かを確認するということです。
いかがだったでしょうか？「あるある〜」と思った人も多いのではないでしょうか。
素敵なJSライフを！
