JavaScriptをはじめよう #3 データ操作をしてみよう

JavaScriptをはじめる入門記事の連載 3回目は実際にJavaScriptでプログラミングをしてみるという内容です。これまでに設定してきたNode.jsやVSCodeを活用してみましょう。

今回の記事では数字の足し算を順に解説します。記事の最後では、カンマ区切りの文字列の合計を出すというコードを紹介します。次の記事で予定しているCSVを処理するための練習です。

まずは単純な足し算をしてみよう

まずはとても単純なプログラムです。

console.log(1 + 2)

2回目で作成したフォルダーの中で適当なファイル名、たとえば
number-sum.js のような名前のファイルにこのコードを入力しましょう。

console.logはNode.jsで実行すると、画面に文字を出力する命令です。括弧の中は引数と呼ばれるもので、1 + 2を計算して画面に出力するものです。

const変数を使う

やっていることは同じですが、今度のバージョンでは一度 sum という変数に 1 + 2 という値を入れてから、console.log に渡しています。

const は変数を作るときの構文(JavaScriptの言語で決められた文法)で別の値を入れることができないものです。変数を作ることを「変数を定義する」とか「変数を宣言する」と呼びます。

const sum = 1 + 2
console.log(sum)

複数回の足し算をする

今度は let で変数を宣言します。 let は const とは違い、その変数に値を入れること、代入ができます。

代入は、数学の = とは全く違い、= の右にある式(計算など)の結果を、左にある変数などに代入する構文のことです。

1行目では 1 が入った sum 変数を let で作ります。
2行目では sum = sum + 2 で、sum に を足しています。
3行目の console.log(sum) では sum は 1 + 2 で が表示されます。
4行目の sum += 3 は、sum = sum + 3 と同じ意味です。こちらの方が書きやすいためよく使われます。 += を代入演算子と呼びます。
5行目の console.log(sum) では sum は 1 + 2 + 3 なので が表示されます。

let sum = 1
sum = sum + 2
console.log(sum)
sum += 3
console.log(sum)

もっと足し算をする

今度は 1 + 2 + 3 + 4 + 5 をしてみます。ただ、何回も足し算を書くのは非効率的なので配列と繰り返しを使ってみます。

[1, 2, 3, 4, 5] は配列を作るリテラルという種類の構文で 1 2 3 4 5 の5つの数字が入った配列を作ります。

リテラルはJavaScriptのソースコードで、文字列や数値、配列などを書くための構文です。

1 は数値リテラルで、'1' とか "2" とか書かれていれば文字列リテラルです。文字列リテラルでは ' (シングルクォート)で囲うのも、" (ダブルクォート)で囲うのも同じ構文です。使い分けは好みでいいでしょう。

ただ、最近の流行りはシングルクォートです。この連載でも筆者の好みによりシングルクォートで説明していきますが、基本的にはダブルクォートでも問題なく動きます。

3行目の for は繰り返しを行う制御構文(プログラムの流れを変える、制御する構文)で、その中でもfor ofと呼ばれるものです。numbers から1つずつ値を取り出して に代入して波括弧 { } の中を繰り返します。

このケースだと4行目は numbers 配列の長さ分の5回実行されます。

sum が で、が なので、sum には 1 が入ります。
sum が で、が なので、sum には 3 が入ります。
sum が で、が なので、sum には 6 が入ります。
sum が で、が なので、sum には 10 が入ります。
sum が 10 で、が なので、sum には 15 が入ります。

最終的に sum には 15 が入っています。

const numbers = [1, 2, 3, 4, 5]
let sum = 0
for (const n of numbers) {
  sum += n
}
console.log(sum)

今度は文字列から計算してみよう

最後に冒頭でも触れたカンマ区切り文字列を処理してみましょう。

data は '1,2,3,4,5'  が入った文字列変数なので、まずはカンマごとに分割しないと繰り返しの足し算ができません。そこで4行目の data.split(',') です。

split は指定した引数の文字で分割して、文字列の配列を返してくれるという命令です。これは構文ではなく文字列用のメソッドと呼ばれるもので、後の連載でメソッドやその仲間である関数を解説します。

今回のケースだと data.split(',') は ['1', '2', '3', '4', '5'] を返します。

5行目の Number.parseInt は引数の文字列を、整数と解釈して、数値に変換してくれます。

sum が で、が文字列の '1' で Number.parseInt で 1 という数字になり、sum には 1 が入ります。
以下さきほどと同様です。

なぜ、わざわざ文字列から計算したかというと、冒頭でふれたように、次回の記事ではCSV(カンマ区切りのファイル)を処理するためです。

const data = '1,2,3,4,5'
let sum = 0

for (const n of data.split(',')) {
  sum += Number.parseInt(n)
}

console.log(sum)

補足

letconst をどう使い分ければいいかですが、let のみでもプログラミングできます。

ただ、実は最近のJavaScriptでは let はあまり必要にならないため、なるべくなら const を使うとバグを減らせられます。(間違って代入したらエラーになることと、代入しないよという意思表示になるためです)

逆にいつもは const を使って、エラーが出たら let に置き換えるという方法もあります。

Assignment to constant variable. つまり「不変の変数に代入してる」というエラーです。

次に、実は letconst 構文での = は代入文ではありません。

正しくは変数の初期値や初期化と呼びます。const sum = 1 + 2 であれば、sum という代入不可な const 変数に、初期値の 1 + 2 を入れて初期化しているというのが正しい解釈です。

const は初期値なしだとエラーになります。 Missing initializer in const declaration は「const宣言の初期化にミスってる」という意味です。

1行目の let sum は、let で代入がいくらでも可能なので初期値なしでも動きます。

let sum
const numbers

まとめ

const で代入できない変数を宣言する(作る)
let で代入できる変数を宣言する
const hoge = [1, 2, 3, 4, 5] で hoge に5個の数字が入った配列の入った変数を宣言する
for of 制御構文で、配列から1つずつ中身を取り出して繰り返し処理をする
'1,2,3,4,5' のような文字列を split(',') すると引数に指定した文字列、つまりカンマで元の文字列を分割する

いかがでしたでしょうか?簡単でしたか?難しかったですか?分かりやすかったですか?分かりにくかったですか?

コメントなどいただけますと、記事を見直したいと思います。

次回は先ほどいったようにCSV処理を題材にお送りします。

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

ありがとうございます!そのスキがとても励みになります!
15

erukiti

JavaScriptをはじめよう

今トップクラスの人気言語であるJavaScriptの入門記事の連載です。JavaScriptを動かして開発するための環境整備、JavaScriptのイロハなどを解説します。これを読めば、あなたも新しいJavaScriptの書き方で楽々ウェブやアプリ、サーバーの開発もできるよ...
1つのマガジンに含まれています
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。