JavaScript

スポンサーリンク
JavaScript

JavaScript | ES6+ 文法:モジュール – import / export 基本

モジュールの考え方(まず全体像から)モジュールは、「ファイルごとに役割を分けて、必要なものだけをやり取りする仕組み」です。1ファイル = 1モジュール、と考えておけばOKです。「このファイルから外に出...
JavaScript

JavaScript | 1 日 90 分 × 7 日アプリ学習:タブ切り替えアプリ(初級編)

1日目のゴールと今日やること1日目のテーマは「タブ切り替えアプリの“いちばん小さな仕組み”を理解する」ことです。タブ切り替えアプリとは、「ボタン(タブ)を押すと、対応する画面だけが表示される」という、...
JavaScript

JavaScript | ES6+ 文法:クラス構文 – クラス設計の考え方

クラス設計の考え方とは何かクラス設計は、「コードをどう書くか」より先に、「このクラスは何者で、何ができて、どこまで面倒を見るのか」を決める作業です。JavaScript の class は、単に「便利...
JavaScript

JavaScript | ES6+ 文法:クラス構文 – getter / setter

getter / setter とは何か(まずイメージから)getter / setter は、「プロパティに見える“入り口・出口”の裏に、処理を仕込むための仕組み」 です。普通のプロパティはこうです...
JavaScript

JavaScript | ES6+ 文法:クラス構文 – プライベートフィールド(#)

プライベートフィールド(#)とは何かプライベートフィールドは、class の中で「クラスの外から絶対に直接触られたくない値」を隠すための仕組みです。書き方は、名前の前に # をつけます。class U...
JavaScript

JavaScript | ES6+ 文法:クラス構文 – 静的メソッド

静的メソッドとは何か(まずイメージから)静的メソッド(static メソッド)は、「インスタンスではなく“クラスそのもの”に属するメソッド」 です。普通のメソッドはこう呼びます。const user ...
JavaScript

JavaScript | ES6+ 文法:クラス構文 – super

super とは何か(まずイメージから)super は、クラスの継承で使う「親クラスへの入り口」です。具体的には次の2つの役割があります。親クラスの constructor を呼ぶ親クラスのメソッドを...
JavaScript

JavaScript | ES6+ 文法:クラス構文 – 継承(extends)

継承(extends)とは何か(まずイメージから)継承(extends)は、「あるクラスをベースにして、それを少しだけ“追加・変更”したクラスを作る仕組み」 です。「動物」という共通部分を持つクラスが...
JavaScript

JavaScript | ES6+ 文法:クラス構文 – メソッド定義

クラスの「メソッド定義」とは何かクラスのメソッドは、「そのクラスから作ったインスタンスができる“動き(振る舞い)”を表す関数」です。class の中に書く関数が、インスタンスから user.greet...
JavaScript

JavaScript | ES6+ 文法:クラス構文 – インスタンス生成

「インスタンス生成」とは何か(まずイメージを掴む)クラスは「設計図」、インスタンスは「その設計図から作られた実物」です。class User { ... } は「ユーザーとはこういう性質・機能を持つ」...
JavaScript

JavaScript | ES6+ 文法:クラス構文 – constructor

constructor とは何か(まずはイメージから)constructor は、class から new したときに「最初に一回だけ」呼ばれる特別なメソッドです。役割はシンプルで、インスタンスが生ま...
JavaScript

JavaScript | ES6+ 文法:クラス構文 – class 構文

class 構文とは何か(まずイメージを掴む)class 構文は、「同じような性質と振る舞いをもつオブジェクトを量産するための設計図を書くための文法」です。「ユーザー」「商品」「敵キャラ」みたいな“種...
JavaScript

JavaScript | 1 日 90 分 × 7 日アプリ学習:タイマーアプリ(初級編)

1日目のゴールと今日やることこの「JavaScript タイマーアプリ(基礎) 初級編」では、最終的に「スタート」「ストップ」「リセット」ができる、シンプルなタイマーアプリを作ることを目指します。でも...
JavaScript

JavaScript | ES6+ 文法:オブジェクト拡張 – オブジェクト操作設計

オブジェクト操作設計とは何か「オブジェクト操作設計」というのは、単に user.name = "Alice" といった「その場しのぎの代入」を書くのではなく、どんな形のオブジェクトにするか(構造・型)...
JavaScript

JavaScript | ES6+ 文法:オブジェクト拡張 – Object.getPrototypeOf

Object.getPrototypeOf とは何かObject.getPrototypeOf は、あるオブジェクトの「プロトタイプ(親オブジェクト)」を取り出すためのメソッドです。プロトタイプとは、...
JavaScript

JavaScript | ES6+ 文法:オブジェクト拡張 – Object.getOwnPropertyNames

Object.getOwnPropertyNames とは何かObject.getOwnPropertyNames は、オブジェクトが「自分で持っている」すべてのプロパティ名を配列で返すメソッドです。...
JavaScript

JavaScript | ES6+ 文法:オブジェクト拡張 – Object.fromEntries

Object.fromEntries とは何かObject.fromEntries は、「配列(や Map)の一覧」からオブジェクトを作り直すためのメソッドです。一言でいうと、Object.entri...
JavaScript

JavaScript | ES6+ 文法:オブジェクト拡張 – Object.entries

Object.entries とは何かObject.entries は、オブジェクトの中身を「配列の配列」に変換する ES2017(ES8)のメソッドです。「キーと値のペア」を という2要素配列にし、...
JavaScript

JavaScript | ES6+ 文法:オブジェクト拡張 – Object.assign

Object.assign とは何かObject.assign は、複数のオブジェクトを「左から右へ」順番にコピーして、1つのオブジェクトにまとめるための ES6 のメソッドです。一言でいうと、「プロ...
JavaScript

JavaScript | ES6+ 文法:オブジェクト拡張 – Object.is

Object.is とは何かObject.is は、「2つの値が“本当に”同じ値かどうか」を判定するための ES6 の比較関数です。見た目は ===(厳密等価演算子)に似ていますが、NaN と +0 ...
JavaScript

JavaScript | ES6+ 文法:オブジェクト拡張 – メソッド定義省略

メソッド定義省略とは何かオブジェクトの「メソッド定義省略」は、ES6 から入った“関数っぽいプロパティ”を短く書くための記法です。従来はこう書いていました。const user = { name: "...
JavaScript

JavaScript | ES6+ 文法:オブジェクト拡張 – 計算されたプロパティ名

計算されたプロパティ名とは何か「計算されたプロパティ名(computed property name)」は、オブジェクトリテラルのキーを、文字列リテラルではなく「式の結果」から動的に決める書き方です。...
JavaScript

JavaScript | ES6+ 文法:オブジェクト拡張 – プロパティ短縮記法

プロパティ短縮記法とは何かオブジェクトの「プロパティ短縮記法」は、変数名とプロパティ名が同じときに、キー: 値 の 値 を省略できる ES6 の書き方です。ふつうはこう書きます。const name ...
JavaScript

JavaScript | 1 日 90 分 × 7 日アプリ学習:ランダム表示アプリ(初級編)

1日目のゴールと今日のテーマ1日目のテーマは「ランダムに1つ選んで表示する感覚をつかむ」 ことです。目指すのは、とてもシンプルなランダム表示アプリ。ボタンを押すと「今日の運勢」や「おみくじ結果」がラン...
JavaScript

JavaScript | ES6+ 文法:スプレッド構文 – 旧構文との比較

スプレッド構文と「旧構文」をざっくり比較するとES6 のスプレッド構文 ... は、「配列やオブジェクトの中身をその場でバラして並べる」ための新しい書き方です。旧構文(ES5 まで)は、concat ...
JavaScript

JavaScript | ES6+ 文法:スプレッド構文 – 不変データ作成

「不変データ」とは何か(まずここを押さえる)不変データ(immutable data)とは、「一度作ったデータを書き換えず、変更したいときは新しいデータを作る」という考え方です。ここが重要です:配列....
JavaScript

JavaScript | ES6+ 文法:スプレッド構文 – 浅いコピーの理解

「浅いコピー」とは何か(まずイメージを掴む)スプレッド構文のコピー( や { ...obj })は「浅いコピー(shallow copy)」です。ここが最重要ポイントです:外側の「箱」(配列そのもの・...
JavaScript

JavaScript | ES6+ 文法:スプレッド構文 – 上書き順序

スプレッド構文の「上書き順序」とは何かスプレッド構文では、... を使って配列・オブジェクトの中身を「左から右へ」順番に展開していきます。ここが最重要ポイントです:オブジェクトの { ...a, .....
JavaScript

JavaScript | ES6+ 文法:スプレッド構文 – 結合処理

スプレッド構文による「結合処理」とは何かスプレッド構文での結合処理は、... を使って「配列やオブジェクトの中身をバラして並べ直し、新しい配列/オブジェクトを作る」書き方です。ここが重要です:配列なら...
JavaScript

JavaScript | ES6+ 文法:スプレッド構文 – 関数引数展開

関数引数展開とは何かスプレッド構文の「関数引数展開」は、fn(...array) のように書いて「配列(や配列っぽいもの)をバラして、関数の複数の引数として渡す」書き方です。ここが重要です:... が...
スポンサーリンク