「JavaScript の演算子と式」の実験へようこそ。この実践的なセッションでは、JavaScript プログラミングの基本的な構成要素である演算子と式について学びます。演算子は、値（オペランド）に対して操作を実行するために使用される特別な記号であり、式は値に解決されるコードの任意の単位です。
加算、減算、乗算、除算などの基本的な算術演算子から始めます。次に、加算演算子が文字列を結合するためにも使用できる方法、つまり連結について探ります。最後に、便利なインクリメント演算子について学びます。この実験の終わりまでに、JavaScript で基本的なデータ操作を実行できるようになります。
このステップでは、加算演算子 (+) を使用して数値の加算を実行する方法を学びます。これは最も一般的な算術演算の 1 つです。
ラボ環境は、~/project ディレクトリ内の index.html ファイルと script.js ファイルで既にセットアップされています。すべての JavaScript コードは script.js ファイルに記述します。
まず、画面左側のファイルエクスプローラーで script.js ファイルを見つけます。それをクリックしてエディターで開きます。
次に、script.js に以下のコードを追加します。このコードは 2 つの数値変数を宣言し、それらを加算し、console.log() を使用して結果をブラウザの開発者コンソールに出力します。
// Step 1: Addition
let num1 = 10;
let num2 = 5;
let sum = num1 + num2;
console.log("The sum is:", sum);コードを追加したら、Ctrl+S を押してファイルを保存します。
出力を確認するには、インターフェースの上部にある Web 8080 タブに移動します。次に、F12 を押すか、ページを右クリックして「Inspect」を選択し、「Console」タブをクリックして開発者コンソールを開きます。The sum is: 15 というメッセージが表示されるはずです。
このステップでは、減算演算子 (-) と乗算演算子 (*) を適用します。これらは加算演算子と同様に機能しますが、異なる計算を実行します。
~/project/script.js ファイルの編集を続行します。既存のコードの下に以下のコード行を追加して、同じ 2 つの数値の差と積を計算します。
// Step 2: Subtraction and Multiplication
let difference = num1 - num2;
console.log("The difference is:", difference);
let product = num1 * num2;
console.log("The product is:", product);ファイルを再度保存します (Ctrl+S)。Web 8080 タブを更新します（タブ内の更新ボタンを使用できます）。開発者コンソールには、加算、減算、乗算の結果が表示されるようになります。
このステップでは、除算演算子 (/) と剰余演算子 (%) を探求します。除算演算子は標準的な除算を実行し、剰余演算子は除算の余りを返します。これは、数値が偶数か奇数かを判断するなどのタスクに役立ちます。
~/project/script.js ファイルの末尾に以下のコードを追加します。
// Step 3: Division and Modulus
let quotient = num1 / num2;
console.log("The quotient is:", quotient);
let remainder = num1 % 3; // Using 3 to get a non-zero remainder
console.log("The remainder of 10 divided by 3 is:", remainder);ファイルを保存し、Web 8080 タブを更新します。コンソールを確認して、除算と剰余の新しい出力を確認します。商は 2、剰余は 1 であるはずです。
このステップでは、+ 演算子の別の使い方である文字列連結を見ていきます。文字列と共に使用されると、+ 演算子はそれらを結合して、新しくより長い文字列を作成します。
2 つの文字列変数を作成し、それらを連結してみましょう。このコードを ~/project/script.js の末尾に追加します。
// Step 4: String Concatenation
let firstName = "Hello";
let lastName = "World";
let fullName = firstName + " " + lastName;
console.log(fullName);上記の例では、firstName、スペース " "、および lastName を結合して、完全なフレーズを形成しています。
ファイルを保存した後、Web 8080 タブを更新します。コンソールには、連結された文字列 Hello World が表示されるようになります。
この最終ステップでは、インクリメント演算子 (++) について学びます。これは単項演算子であり、単一のオペランドに対して機能します。数値変数に 1 を加えるための便利なショートカットであり、ループやカウンターで非常に一般的な操作です。
実際に動作を確認するために、~/project/script.js の末尾に以下のコードを追加します。
// Step 5: Increment Operator
let counter = 0;
counter++; // This is equivalent to counter = counter + 1;
console.log("The counter value is:", counter);ファイルを最後に保存し、Web 8080 タブを更新します。コンソールにはカウンターの最終値が表示され、1 になっているはずです。
この実験を完了された皆さん、おめでとうございます！
この実験では、JavaScript の演算子と式の基本を学びました。以下の操作を練習しました。
+ (加算)、- (減算)、* (乗算)、/ (除算)、および % (剰余)。+ 演算子を使用してテキストを結合する。++ インクリメント演算子を使用する。これらの演算子は JavaScript の不可欠な構成要素であり、事実上すべてのプログラムで使用されています。これで、今後のプロジェクトでより複雑なロジックや機能に取り組む準備が整いました。
