Javascript

forを使ったループ処理をしよう

特定の処理を繰り返し実行するためのfor文について見ていきます。

  • for
  • テンプレートリテラル

for

・for文は特定の処理をくり返し実行するための構文です。ループ処理ともいわれます。

for文でdivを増やしていく

100個のdiv要素を作る

・今回は’hello world’という文字列を10回繰り返すループ処理をおこなっていきたいと思います。

・for( let i = 1; i <= 10; i++){}というように書き{}の中に表示させる処理を書きます。

・forの中身には let i = 1;でカウンターとして使う変数を宣言して初期値を指定します。ようは「i」って「1」って言うことにするねーってことです。

・i <= 10; はi が 1 から 10 以下である間の処理をするということでここの数字を変えることで何回繰り返すかを決めます。

・ i++ ではi を 1 ずつ増やしながら次の処理を実行してという意味です

・記号は ; (セミコロン)で、カウンターの変数名としては慣習的に i がよく使われます。 i は 1 ずつ増やしながら値を再代入していくので、for文では let が使われています

・あとは単純にconsole.logで'hello world’を表示してあげます。ただこのままだとconsoleでは'hello world’が10個だよと表示されます。

・カウンターの値も処理の中で表示してあげたい場合は、console.log('hello world +i);とするとhelloのあとに数字を1つずつ増やしながら表示させることができます。

・他にもテンプレートリテラルという特殊な記法を用いてカウンターの処理を表示する方法もあるのでそれについても見ていきましょう。

テンプレートリテラル

・文字列に変数の値を埋め込む記法をテンプレートリテラルといいます。console.log(`hello world ${i}`);とすると’hello worldのあとにiの数字を代入することができます。

・テンプレートリテラルを使うには ' (シングルクォーテーション)の代わりに ` (バッククオート)という記号を使ってあげます。

・値を埋め込みたいところで ${} としてあげて、この中に値や計算式を入れると文字列に変換してくれます。

-Javascript