Java Scriptの大切な基礎知識3つ

この記事では、将来プログラミングをできるようになるために、プログラムについて学んだ知識を解説していく記事です。
今日学んだプログラミングの知識。

1. JavaScript を別ファイルにする。

2. セミコロン (;) について。

3. エラーについて。

JavaScript を別ファイルにする。

JavaScript を別ファイルに書き出して、 そのファイルを HTML から読み込むように構成を変更します。
VS Code で my-first.js というファイルを、 my-first-javascript.html があるのと同じフォルダ内に作成しましょう。
中身を
document.write('1 足す 2 は ');
document.write(1 + 2);
document.write(' です');
my-first.jsPlease Type!
の三行だけにして、 my-first.js というファイル名で保存してください。
次に、 HTML ファイルの方に戻って、先ほど追加した script タグを削除します。
そして、 script:src と書いてから Tab キーを押し、ファイル名を入力してください。
my-first-javascript.html を保存したら、 Chrome を再読み込み をしてみましょう。 すると、先ほどと同じ内容が表示されます。これで完成です。

セミコロン (;) について。

コードの末尾の ; という記号はセミコロン（semicolon）といいます。セミコロンは JavaScript において、プログラムにおける文の終わりを示す記号です。日本語の 。 のようなものです。
また、 JavaScript 以外でもセミコロンを文末の終わりを示す記号として使っているプログラミング言語は多いので見たことがる人もいるかもしれないですね。
JavaScript の規格「ECMAScript」としては文はセミコロンで終わらないといけないと明記されている一方で、文末の場所を自動で判断して内部的にセミコロンを追加する機能についても書かれています。
この機能を自動セミコロン挿入「Automatic Semicolon Insertion」といいます。

エラーについて。

JavaScript を扱っていると、うまく動かないことがあります。 その際にどのように対処すれば良いのか学んだことを書いていきます。エラーは、Chrome のデベロッパーツールの console タブ に表示されます。
Chrome の設定ボタンから、その他のツールを選択し、デベロッパーツールを選択しましょう。
デベロッパーツールの上部に表示されているタブの中から、Console タブを選択しましょう。Console というタブが表示されない場合、>> と書いてあるボタンの中に隠れています。エラーメッセージの隣には、「ファイルの名前:1 」という 形式でエラーが起こったファイル名と、行数が表示されます。この場合、 その ファイルの1 行目でエラーが起きた事を示しています。
エラーログの内容は、ゆっくり英語を訳しながら読めば原因をつかむきっかけになります。オンラインの翻訳サービスなどで、Google 翻訳 や DeepL 翻訳 などがあるので、これらで翻訳し、エラーで詰まった時は、じっくり観察し、直すところを直せば問題ないです。

まとめ

今回はJava Scriptの中身に少し入った内容でした。エラーの対処法などは今後たくさん使うことがあると思うのでしっかり覚えておきたいです。また、ファイルを作ったり別のファイルに移したりとかなり複雑になってきた印象があるので、しっかりと解説を読みながらやる必要があるなと考えました。