IT~情報と技術

ドットインストール「詳解JavaScript 基礎文法編」で勉強#16(for文でループ処理)

ドットインストールというオンラインのプログラミング講座に「詳解JavaScript」というのがあります。

これでJavaScriptの基礎を勉強していきましょう。まずは「基礎文法編」から。

今日のメイントピックは、for文でループ処理をしよう、です。

詳解JavaScript

ドットインストールのレッスン一覧に「②もっと詳しくJavaScriptを学ぼう」というセクションがあります。

ここに3つ並んでいる

  • 詳解JavaScript 基礎文法編(全24回)
  • 詳解JavaScript オブジェクト編(全23回)
  • 詳解JavaScript DOM編(全15回)

で勉強していきたいと思います。

これまでの勉強した内容はこちらです。

基礎文法編 #16

詳解JavaScript 基礎文法編 #16 forを使ってループ処理をしよう ←講座はこちら

今日はfor文テンプレートリテラルが出てきました。

for文

今回の「for文」は、繰り返し処理を行うための1つの方法です。(for文の他にも、繰り返しを行う方法がいくつかあります。)

for文に関しては、MDNのforに説明がありました。

for 文はループを作ります。丸括弧で囲まれセミコロンで分けられた、3 つの省略可能な式と、その後にループ内で実行される文が構成されます。(MDNのforから)

MDNのループと反復処理によると、JavaScripで提供されるループ処理はこれだけあります。

  • for 文
  • do…while 文
  • while 文
  • label 文
  • break 文
  • continue 文
  • for…in 文
  • for…of 文

講座で出てきたfor文の例

以下のようなfor文による繰り返し処理の例が出てきました。

フローチャートだとこんな感じでしょうか。

iが10になるまで `${i} hello` を表示し、11になったらループから抜けます。

for文のフローチャート(1)for文のフローチャート(1)

ググってて知ったのですが、繰り返しのフローチャートは、このような書き方もあるみたいです。

for文のフローチャート(2)for文のフローチャート(2)

規模が大きくなると、こっちの方が見やすいかもしれません。

テンプレートリテラル

ここで出てきた `${i} hello` という表現を、テンプレートリテラルと言います。

これは、”文字列” や’文字列’のように文字列を表現する方法の拡張版・進化版のような感じです。

テンプレートリテラルに関しては、MDNのテンプレート文字列に説明がありました。

Template literal は組み込み式を扱うことができる文字列リテラルです。複数行文字列や文字列内挿機能を使用できます。(MDNのテンプレート文字列から)

プレースホルダー

MDNのテンプレート文字列をさらに見ていくと、${}を使った表記についての説明があります。プレースホルダーと言うらしいです。

Template literalにはプレースホルダーを含めることができます。プレースホルダーはドル記号と波括弧(${expression})で示されます。(MDNのテンプレート文字列から)

テンプレートリテラルを使うと、${i}とするとiの値を文字列に変換しつつ組み込んでくれます。

例えば、以下の2行は講座で出てきた例ですが、同じ出力結果となります。

複数行

以下の2文はMDNのテンプレート文字列にある例で、同じ出力結果となります。

テンプレートリテラルでは、単に改行しておけば出力結果でも改行されます。

ダブルクオーテーションを使った文字列では、バックスラッシュを使った改行コードを書いておく必要がありました。

今日のまとめ

#16は、for文とテンプレートリテラルについてでした。

いきなりテンプレートリテラルって言うのが出てきて何?!って感じですが、要するに文字列の表現方法の1つだ、と理解しておけばよろしいでしょう。

超スローペースなプログラミング学習ですが、マイペースでぼちぼち続けています。

JavaScriptはちょっと難しいですが、がんばって一通りやってみましょう!