プログラミング

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

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

Pug(旧Jade)テンプレートファイル内で、npmでインストールしたモジュールを使う方法

Pug(旧Jade)というJavaScriptのテンプレートエンジンがありますが、このテンプレートファイル内では JavaScriptが使えるので、複雑なHTMLを生成することができます。 但しデフォ …

Web Components

Web Components のサンプルコード

Web Components を使ったサンプルコードを紹介します。

webpack 3 を使ったウェブページ開発手順

webpack 3 を使って、簡単なウェブページを開発する手順を紹介します。あくまで一つの例です。 1つ1つ細かい説明はできていませんが、「だいたいこんなふうにして作ることができますよ」ということが伝 …

Web Programming

サーバーからブラウザを通じてデスクトップ通知する方法(Push API を利用)

Push API を使ってサーバーからブラウザにメッセージを送る方法について説明しています。

JavaScript でスロットマシーンを作ってみました(Canvas版)

JavaScript でスロットマシーンを作ってみました。 前回 とは違い、今回は Canvas を使っています。 目次1. スクリーンショット2. デモページ3. 内容4. ソースコード5. 参考情 …