プログラミング

Web Development for Beginners を読む:レッスン4と5

投稿日:

web development

1. はじめに

Web Development for Beginners の 4日目 (JavaScript Basics: Data Types) です。あまり内容がないので、ついでに 5日目 (JavaScript Basics: Methods and Functions) も合わせてやります。

内容はどちらも JavaScript の基礎知識で、それぞれ

  • レッスン4 は データ型の話
  • レッスン5 は 関数と引数の話

となっています。

※ 本記事は、ほぼ「個人的なメモ」です。

2. Lesson 4: JavaScript Basics: Data Types

Lesson 4: JavaScript Basics: Data Types

Variables(変数)

変数についての説明です。

変数を定義するには、昔は var を使っていましたが、現在では let を使います。

let myVariable = 123;

※ 変数を使おうと思ったら、「それは定数でもよいのではないか?」と自問し、イエスであれば定数を使いましょう。

Constants(定数)

定数は、後から値を変更することができません。

しかし、オブジェクトを定数にセットした場合、オブジェクトそのものを上書きすることはできませんが、プロパティは変更できてしまいます。

const obj = { a: 3 };
obj.a = 5;  // プロパティの値は変更可能です

Data Types

データの型には、以下の種類があります。

  • 基本型 (Primitives)
    • undefined
    • 論理値
    • 数値
    • 文字列
    • BigInt
    • Symbol
  • オブジェクト型 (Objects)
    • プロパティの集合です。
    • 配列や関数もここに含まれます。
  • null

参考

3. Lesson 5: JavaScript Basics: Methods and Functions

Lesson 5: JavaScript Basics: Methods and Functions

Functions(関数)

関数の説明

関数に付ける名前は大切。やっている処理について説明しているような名前がよい。

Creating and calling a function(関数の作成と呼び出し)

実行する箇所より後に、関数の定義があっても良い。

function と method は、ほぼ同じものと考えてよい。

Function best practices

  • どんな処理を行うのかが分かるような関数名にする。
  • 関数名には、camelCasing を使う(1つ目の単語は小文字で、2つ目以降の単語は頭文字を大文字にする)。
  • 1つの関数は1つのタスクのみを行うようにする。

Passing information to a function(関数に情報を渡す)

関数には情報を渡すことができる。それが引数。

Default values(デフォルト値)

引数のデフォルト値が指定できる話

Return values(戻り値)

戻り値についての話

Functions as parameters for functions(引数としての関数)

関数の引数として関数を渡すことができる。

Anonymous functions(匿名関数)

  • 1度しか使わない関数を引数として渡す場合、その関数に名前はいらない。
  • このような場合に、匿名関数を使うことができる。

Fat arrow functions(アロー関数)

  • => を使って関数を定義することができる。
  • fat とついているのは、-> ではなくて => だからだと思う。太い矢印になっている。

When to use each strategy(それぞれいつ使うのか?)

  • 何度も使う関数であれば名前を付ける。
  • function=> のどちらを使って匿名関数を作成するかについては、どちらでもよいが、モダンな開発者は => を使っている」と書いてあるが、補足すると、この2つには明確な違いがある。それは、=> を使った場合、その匿名関数を定義した時点の this を束縛するという点で異なる(レキシカルスコープとなる)。

4. おわりに

今回は知っている内容だったので、駆け足で進めました。

📂-プログラミング

執筆者:labo


comment

メールアドレスが公開されることはありません。

関連記事

e-Stat API の利用に関するメモ

政府統計の総合窓口(e-Stat)−API機能 の利用に関するメモです。 政府統計の総合窓口(e-Stat)では、統計データ等が提供されており、プログラムで取得する事ができます。 気付いたこと 政府統 …

定期的にDOM要素をアニメーションするサンプルを用意しました

定期的にDOM要素をアニメーションするサンプルを用意しました。 DOM要素が対象ですので、div要素や img要素などが動かせます。 目次1. デモ2. ソースコード3. まとめ4. 参考 1. デモ …

Web Storage を使ったサンプルページを作りました

Web Storage を使ったサンプルページを作りました。 目次1. スクリーンショット2. デモページ3. 動作4. ソースコード5. 参考情報 1. スクリーンショット スクリーンショット 2. …

Canvas と WebGL を使ったサンプルページを作りました

Canvas と WebGL を使ったサンプルページを作りました 目次1. スクリーンショット2. デモページ3. 内容4. ソースコード5. 参考情報 1. スクリーンショット スクリーンショット …

Web Components

Web Components: カスタム属性の利用方法

Web Components を使ってカスタム要素を作成し、そのタグを記述する際に、独自の属性を利用する方法について説明します。