JavaScriptの記述ルール 〜コードが正しく伝わる書き方〜

JavaScript学習ガイド

ここからは、JavaScriptを書くうえで欠かせない「基本ルール」を整理していきます。

どんなに面白いアイデアを思いついても、
書き方のルールが守られていなければ、コンピュータは正しく理解してくれません。

実は、初心者がつまずく原因の多くは「難しい内容」ではなく、
ほんの小さな書き方の違いなんです。

まずは土台をしっかり固めて、
安心してコードを書ける状態を作っていきましょう!

大文字と小文字は「まったくの別物」

JavaScriptは、大文字と小文字をきっちり区別します。

const message = "こんにちは";
console.log(message);

これは問題なく動きます。

でも、もしこう書いてしまうと…

console.log(Message); // 「M」が大文字

JavaScriptは「Message」という別の名前を探してしまいます。
message とは違うものとして扱われるからです。

私たちには同じ単語に見えても、
JavaScriptにとっては まったくの別人

この感覚は、最初に慣れておきたいポイントです!

コードは基本「半角」で書く

JavaScriptのコードは、原則すべて半角で書きます。

console.log("Hello");

一見同じに見えても、
全角の英数字や記号は別の文字として扱われてしまいます!

console.log("Hello");

見た目は似ていますが、これは正しく動きません💦
少し地味な話ですが、入力モードの確認はとても大切です。

ちなみに、""'' の中に書く文字列は全角の日本語でも大丈夫です!

console.log("こんにちは");

コード部分は半角、文字列の中は自由。
この切り分けを覚えておくだけで、エラーはぐっと減ります!

文字列はクォーテーションで包む

JavaScriptでは、文字のまとまりを「文字列」として扱います。

そのためには、必ず ' ' (シングルクォーテーション)" "(ダブルクォーテーション) で囲みます。

const name1 = 'React太郎';
const name2 = "React次郎";

どちらを使っても動きは同じです。

JavaScriptは、世界中で使われる言語。
さまざまな書き方を受け入れられるように設計されているため ' ' (シングルクォーテーション)か " "(ダブルクォーテーション) どちらも受け入れられています。

大事なのは「どちらが正解か」ではなく、
自分の中で統一できているかどうか

なお、`(バッククォート)という書き方もありますが、
それは少し先のお話にしておきましょう。

セミコロンは「文の終わり」

JavaScriptでは、文の終わりを ; で区切ります。

console.log("Hello");
console.log("World");

実は、書かなくても動くことはあります。
JavaScriptには「自動で補ってくれる仕組み」があるからです。

でも、それに頼りすぎると
思わぬ場所で区切られてしまうことがあります。

そのため、
「文の終わりにはセミコロンを付ける」
これを習慣にしておくのがおすすめです。

地味ですが、トラブルを防ぐ大事なポイントです!

コメントは未来の自分へのメッセージ

コードの中には、実行されない説明文を書くことができます。
これを「コメント」といいます。

コメントは、他の人のためだけではありません。
数日後、数か月後にコードを見返す「未来の自分」を助けてくれる大切なメモです。

JavaScriptには、主に2つの書き方があります。

1行コメント(//

// 商品の価格を設定
const price = 100;

// と書くと、その行の後ろはすべて説明文として扱われます。
ちょっとした補足や、1行のメモを書くときに便利です。

複数行コメント(/* ... */

/*
ここから割引計算を行う
複数行にわたって説明を書くこともできる
*/

/**/ で囲むと、その間の内容がすべてコメントになります。
処理のまとまりを説明したいときや、少し長めの補足を書くときに使われます。

さらに、/** ... */ という少し特別な書き方もあります。

これは JSDoc と呼ばれる形式で、
関数の説明や引数の意味などをエディタに伝えるための書き方です。

つまりコメントは、

  • 人間に向けたメモ
  • 未来の自分へのメッセージ
  • ときにはエディタへの説明書

という役割を持っています。

コードが長くなればなるほど、
「何を考えて書いたのか」を残しておくことが大きな助けになります!

投稿主の女の子が書いたコードのコメントが、未来の自分への助けとなり笑顔を生んでいる様子を描いたイラスト

変数名にもルールがある

JavaScriptでは、変数名の付け方にも決まりがあります。

const name1 = "OK";      // 問題なし
const 1stName = "NG"; // 数字から始めることはできない

また、constletif など
JavaScriptが特別な意味で使っている単語は、変数名にできません。

これらは「予約語」と呼ばれています。

言語がすでに使っている名前は、私たちは使えない。
そんなイメージで覚えておきましょう!

まとめ

JavaScriptは自由度の高い言語です。
だからこそ、基本ルールを理解しているかどうかが大きな差になります。

\\ 今回のまとめ //

・ JavaScriptは 大文字と小文字を区別する
・ コードは 半角で書く
・ 文字列は クォーテーションで囲む
・ 文の終わりには セミコロンを付ける習慣を持つ
・ コメントは「未来の自分」を助ける。
・ 変数名にはルールがある。

どれも特別なテクニックではありません。

でも、この土台があるからこそ、
これから学ぶ「変数」や「条件分岐」や「React」も、スムーズに理解できるようになります!

次は、JavaScriptでデータを扱うための基本、
「変数(const・let)」の役割を見ていきましょう!

コメント

タイトルとURLをコピーしました