JavaScript - 文法: 初心者のガイド
こんにちは、未来のJavaScriptの魔法使いたち!このエキサイティングなJavaScriptの世界の旅にあなたのガイドとして参加できることを嬉しく思います。プログラミングを教えてきた年数を振り返ると、文法を掌握することは詩を書く前にアルファベットを学ぶことと同じだと言えます。基本的なものに見えるかもしれませんが、これが私たちが一緒に築くすべてのものの基盤です。それでは、始めましょう!
JavaScriptの文法: コードの基本単位
JavaScriptの文法は、JavaScriptプログラムがどのように構築されるかを定める規則の集合です。これをJavaScript言語の文法と考えます。私たちが話すときに意味を成すために文法規則を守る必要があるように、コンピュータがコードを理解するために文法規則を守る必要があります。
最初のJavaScriptコード
簡単な「Hello, World!」プログラムから始めましょう。新しい言語を学ぶときに最初に書くプログラムがこれです。
console.log("Hello, World!");
このコードを実行すると、「Hello, World!」がコンソールに表示されます。以下に分解します:
-
console
は、ブラウザのデバッグコンソールにアクセスするためのオブジェクトです。 -
.log()
は、console
オブジェクトのメソッドで、引数として渡されたものを.printします。 -
"Hello, World!"
は、.printしたい文字列(文字のシーケンス)です。
JavaScriptの値
JavaScriptでは、さまざまなタイプの値を扱います。主なタイプは以下の通りです:
- 数値:
42
,3.14
- 文字列:
"Hello"
,'JavaScript'
- ブール値:
true
,false
- オブジェクト:
{name: "John", age: 30}
- 配列:
[1, 2, 3, 4]
- 関数:
function greet() { console.log("Hi!"); }
以下は、さまざまなタイプの値を使用した例です:
let age = 25; // 数値
let name = "Alice"; // 文字列
let isStudent = true; // ブール値
let person = {name: "Bob", age: 30}; // オブジェクト
let numbers = [1, 2, 3, 4, 5]; // 配列
console.log(age); // 出力: 25
console.log(name); // 出力: Alice
console.log(isStudent); // 出力: true
console.log(person.name); // 出力: Bob
console.log(numbers[2]); // 出力: 3
空白と行ブレイク
JavaScriptは空白(スペース、タブ、改行)に非常に寛容です。コードをより読みやすくするために使用しても、機能には影響しません。
let x = 5;
let y = 10;
let z = x + y;
// これは同じです:
let x=5;let y=10;let z=x+y;
// そしてこれも:
let x = 5
let y = 10
let z = x + y
セミコロンは任意
JavaScriptでは、文の終わりにセミコロンは任意です。しかし、一般的には含めることが推奨されます。
let a = 5; // セミコロンを使用
let b = 10 // セミコロンを使用しない
// 両方とも有効ですが、セミコロンを含むことが推奨されます
大文字と小文字の区別
JavaScriptは大文字と小文字を区別します。myVariable
、MyVariable
、MYVARIABLE
はすべて異なる変数です。
let myVariable = "Hello";
let MyVariable = "World";
console.log(myVariable); // 出力: Hello
console.log(MyVariable); // 出力: World
JavaScriptとキャメルケース
JavaScriptでは、変数名や関数名にキャメルケースを使用する慣習があります。これは、最初の文字を小文字にし、次以降の文字の最初を大文字にすることを意味します。
let firstName = "John";
let lastName = "Doe";
let fullName = firstName + " " + lastName;
console.log(fullName); // 出力: John Doe
JavaScriptのキーワード
JavaScriptには、変数名として使用できない予約語があります。これらはキーワードと呼ばれます。以下は一般的なものです:
キーワード | 説明 |
---|---|
let | ブロックスコープの変数を宣言します |
const | ブロックスコープの不変の定数を宣言します |
if | 条件に基づいてブロックの実行をマークします |
for | ループのブロックをマークします |
function | 関数を宣言します |
return | 関数を終了します |
true | ブール値 |
false | ブール値 |
JavaScriptの識別子
識別子は、変数、関数、プロパティに名前を付けるためのものです。有効な識別子の規則は以下の通りです:
- 文字、数字、アンダースコア、ドルーシグンを含むことができます。
- 文字、アンダースコア、ドルーシグンで始める必要があります。
- 大文字と小文字を区別します。
- 予約語 cannot 使用されます。
// 有効な識別子
let myVariable = 5;
let _privateVar = 10;
let $specialVar = 15;
// 無効な識別子
// let 123abc = 20; // 数字で始まらない
// let my-var = 25; // ハイフンを使用できない
// let let = 30; // 予約語を使用できない
JavaScriptのコメント
コメントは、コードに注釈を追加するか、特定の部分を実行しないようにするために使用されます。JavaScriptには2種類のコメントがあります:
// これは単行コメントです
/*
これは
マルチ行コメントです
*/
let x = 5; // 行の終わりにコメントを追加することもできます
JavaScriptの演算子
演算子は、変数や値に対して操作を行うために使用されます。以下は一般的なものです:
演算子 | 説明 | 例 |
---|---|---|
+ | 加算 | 5 + 3 |
- | 減算 | 5 - 3 |
* | 掛け算 | 5 * 3 |
/ | 除算 | 15 / 3 |
% | 剰余 | 5 % 2 |
++ | 増加 | x++ |
-- | 減少 | x-- |
== | 等しい | 5 == 5 |
=== | 厳密に等しい | 5 === "5" |
!= | 等しくない | 5 != 3 |
> | 大于 | 5 > 3 |
< | 小于 | 3 < 5 |
JavaScriptの式
式は、値、変数、演算子の組み合わせで、評価された値を返します。以下はいくつかの例です:
let x = 5;
let y = 3;
console.log(x + y); // 出力: 8
console.log(x * y); // 出力: 15
console.log(x > y); // 出力: true
console.log(x === "5"); // 出力: false
JavaScriptの文字セット
JavaScriptはUnicode文字セットを使用します。これは、さまざまな言語や絵文字と一緒に動作できることを意味します。以下は楽しい例です:
let greeting = "Hello! ?";
let name = "Alice";
console.log(greeting + " " + name); // 出力: Hello! ? Alice
そして、ここまででJavaScriptの文法の基本をカバーしました。練習が完璧にするものです。すぐにすべてが理解できないのは完璧に正常です。続けて実験し、コーディングを続け、最も重要なのは、楽しむことです!
次のレッスンでは、変数とデータ型についてさらに深く掘り下げます。それまでは、ハッピーコーディング!?????
Credits: Image by storyset