JavaScript 再入門
なんとなく書き始めた「JavaScript 再入門」ですが、いつの間にか記事数が増えてしまい、「エンジニアノート」の多くを占めてしまうコンテンツとなってしまいました。
そこで「JavaScript再入門」をまとめて、アーカイブにすることとしました。
「JavaScript再入門」が他言語経験者やこれからプログラミングを学ぶ人達の一助になれば幸いです。
-
はじめに EMCAScript 3th edition(ES3)の頃独学ではじめたJavaScriptですが、2015年に公開されたECMAScript 2015(ES2015)でダイナミックに改変されました。 それまでのプログラミング経験を使ってES20215以降の改変を曖昧にしながらプログラミングしてきましたが、MDN Web D …
-
データ型 JavaScriptで扱うことのできるデータの型は次のとおりです。ほかにもError型などがあります。 undefined データ型が未定義で値がない。 null 値がない (オブジェクト型) Number 数値型 (浮動小数点数) BigInt *ES2020 長整数型 (浮動小数点数) String 文字列型 Boole …
-
JavaScript 再入門(その3) undefined と null
undefined と null JavaScriptでのデータの取扱いでよく混乱するのが、undefined と null です。 undefined 宣言のみが行われた変数または、まだ存在しないもの、あるいはもう存在しないもの。プリミティブデータ null 値がない (あらゆるオブジェクト型はnull値から派生)Object の特 …
-
JavaScript 再入門(その4) 数値型 Number型 と BigInt型
数値型 Number型 と BigInt型 数値型データ JavaScriptで数値を扱うデータは Number型 と BigInt型*ES2020 の2つがあります。Number型(数値型) は符号付整数ではなく倍精度浮動小数点数となります。BigInt型(長整数型) は Number型 を超える整数を扱うことができます。 var …
-
変数と宣言 JavaScriptで新しい変数を宣言するのには、 var / const*ES2015 / let*ES2015 の3つがあります。const と let はブロックレベルの変数を宣言することができます。 var var は変数を宣言した関数内で使用できます。(関数スコープ) function sampleFunc() …
-
算術演算子 JavaScript の算術演算子は加算、減算、乗算、除算の +、-、*、/、そして剰余演算子の % です。値は = を使って代入されます。+= や -= のような複合代入文もあります。 const x = 3 , y = 2 ; let res ; res = x + 2 ; console.log( res ) ; / …
-
比較演算子 JavaScript の等価・不等価演算子には、厳密等価・厳密不等価演算子があります。厳密等価・厳密不等価演算子、 === 、 !== は型と値を比較します。等価・不等価演算子、 == 、 != は型が異なる場合はNumber型へ型変換をおこなってから値を比較します。 console.log( 3 == '3&# …
-
論理演算子 JavaScript には、|| (OR:論理和)、&& (AND:論理積)、! (NOT:論理否定)、?? (Null合体) *ES2020 の 4 つの論理演算子があります。 || (OR:論理和) if 文の中で条件のいずれかが真(true)であるかを確認する。 let x = 9 ; …
-
条件分岐 if JavaScript の if 文はカッコ内の式を評価して、結果を Boolean型 に変換し true であれば処理を実行します。false であれば else の処理を実行します。 let x = 'JavaScript' ; if ( x == 'JavaScript' ) …
-
ループ JavaScript の ループ処理には while と for の2つがあります。 while while ループは評価が true の間、ループの処理(イテレーション)を繰り返します。 while ( 評価 ) { イテレーション // 評価が true の間 ループの処理を繰り返す } let i = 0 ; while …
-
配列 配列の定義と初期化と要素の長さの取得 配列を定義するには new Array と [] があり、定義済みの変数に対しては配列として初期化します。配列には、配列の長さ(配列の一番大きな添字より1大きい値)を取得するプロパティ array.length が用意されています。 配列を new Array で定義 // 配列の定義 le …
-
配列の複製 = だけで代入して複製 配列を = で代入すると、どちらか一方の要素の値が変わると双方の値が変わります。 let ary = [ '車寅次郎' , '諏訪さくら' , '諏訪博' , '諏訪満男' , 'タコ社長' , &# …
-
関数 関数の宣言 JavaScript には、関数の宣言方法が、大きく分けて3つの方法があります。 function を利用した関数宣言無名関数(関数式)での宣言アロー関数式による宣言 function を利用した関数宣言 // 平均値を求める関数 function ave( argA , argB ) { return retArg …
-
JavaScript 再入門(その14) オブジェクト 1 概要とデータ構造
概要とデータ構造 JavaScript は、オブジェクトベース言語 JavaScript のオブジェクトを説明するのに非常に悩ましい部分があります。 PHP の連想配列や C++ のハッシュテーブル等と同じような働きをするデータ構造の側面と、PHP や C++ / JAVA のようなクラスベース言語ではなく、クラスを使用せずにオブジェ …
-
JavaScript 再入門(その15) オブジェクト 2 継承とプロトタイプチェーン
継承とプロトタイプチェーン はじめに これからオブジェクトのプロトタイプについての説明が続きますが、前の記事でも書いたように、ES2015 以降 class キーワードが導入され、クラスベースに近いコードが許されるようになりました。これはシンタックスシュガー(糖衣構文:ある構文を簡略化したり可読性をよくするための記法)であり、あくまで …
-
JavaScript 再入門(その16) オブジェクト 3 コンストラクタ関数
コンストラクタ関数 はじめに 前の記事に続き、オブジェクトのプロトタイプについての説明が続きます。前回は継承とプロトタイプチェーンの動作が理解しやすいように、オブジェクトを Object.create() を使って説明しました。今回はコンストラクタ関数を使ってのプロトタイプチェーンの利用です。より class キーワードを使ったクラス …
-
JavaScript 再入門(その17) オブジェクト 4 オブジェクト間の継承
オブジェクト間の継承 はじめに 前の記事に続き、オブジェクトのプロトタイプについての説明が続きます。前回はコンストラクタ関数を使ってのプロトタイプチェーンの利用について説明しました。class キーワードの中でどのような継承が行われているか、おぼろげながらでもイメージがつかめれば良いです。多分プロトタイプをガシガシ使ってコードを書くこ …
-
JavaScript 再入門(その18) モジュール import / export
モジュール import / export はじめに モジュール構文 import / export *ES2015 は、モジュールの機能を共有することができます。開発システムが複雑化するとプログラムを複数に分割して開発することになります。汎用的に使われるクラスや関数やオブジェクトを、プログラムファイルとして保存しておき、複数のプログ …
-
JavaScript 再入門(その19) クラス class
クラス class はじめに クラス構文 class *ES2015 は、オブジェクトの記事で説明したとおり、クラスベースに近いコードが許されるようにした、プロトタイプベース言語のシンタックスシュガー(糖衣構文:ある構文を簡略化したり可読性をよくするための記法)です。このあたりの説明は過去の記事を参照してください。JavaScript …
-
JavaScript 再入門(その20) 非同期処理 1 非同期処理とPromise
非同期処理とPromise 非同期処理とは？ まずは、通常の処理方法、同期処理から説明します。通常のプログラムは上から順番にコードを処理して、処理が終わると次の処理を実行していきます。 console.log(1) ; console.log(2) ; console.log(3) ; console.log(4) ; /* 1 2 …
-
JavaScript 再入門(その21) 非同期処理 2 プロミスの動作
プロミスの動作 前回の記事でプロミスの大まかな動きを見てみました。 プロミスって何をしてるの？ 今回は、プロミスの状態や値の受け渡しなどの、プロミスの動作について説明します。 まずは、Promise を定義後の状態をみてみましょう。このスクリプトの Promise は非同期処理ですが、処理は何もしていないので実務上役に立つスクリプトで …
-
JavaScript 再入門(その22) 非同期処理 3 Promise の待ち合わせメソッド
Promise の待ち合わせメソッド 前回までの記事でプロミスの動きを見てみました。 プロミスの待ち合わせメソッド プロミスには、複数のプロミスの状態により .then() .catch() .finally() メソッドを実行するメソッドがあります。 説明するにあたって、プロミスを返すコンストラクタ関数を定義します。以下の例題はこの …
-
JavaScript 再入門(その23) 非同期処理 4 非同期関数 async / wait
非同期関数 async / wait 前回までの記事でプロミスの動きを見てみました。 非同期関数 いままで、ややこしいプロミスのスクリプトを書いてきましたが。ES2017 で、非同期処理をまるで同期処理のようにサラッと書ける救世主が現れました。それが、async / await *ES2017 です。 async キーワードは関数につ …
-
JavaScript 再入門(その24) 非同期通信 1 fetch
非同期通信 fetch fetch オブジェクトは、XMLHttpRequest(XHR) オブジェクトに代わる、サーバーと対話するためのAPIです。fetch はプロミス値を返しますので、XMLHttpRequest に比べて、簡略化されて可読性の良いスクリプトを書くことができます。 この記事では、演習用のJSONデータとして MD …
-
JavaScript 再入門(その25) 非同期通信 2 PHP と JavaScript
非同期通信 PHP と JavaScript 前の記事では fetch を使って JSON ファイルからデータを取得する方法を見てきました。実務では、クライアントからパラメータとリクエストを受け取り、サーバー側でデータベースなどから必要なデータを加工しクライアントへ返します。今回は、サーバーサイドを PHP で簡単なデータを返すプログ …
-
JavaScript 再入門(その26) ドキュメントの操作
ドキュメントの操作 ウェブ文書である HTML や XML で書かれた、ウェブサイトを操作する場合には、ドキュメントオブジェクトモデル DOM を使って操作します。 今回の記事は JavaScript再入門なので、JavaScriptを使ってDOMにアクセスしますが、JavaScipt以外のPython等を使ってもDOMを利用すること …
-
JavaScript 再入門(その27) ドキュメントのHTML属性の操作
ドキュメントのHTML属性の操作 HTML 属性とは、タグに付けられた補足情報です。id / class / name 等は属性 (Attribute) と呼びます。 <タグ 属性1="属性値1" 属性2="属性値2 属性値3"> HT …
-
イベントの操作 イベントとは？ JavaScript 再入門なので、今更こんな説明は必要ないと思われますが、概念的には理解できていても、いざ説明しようとすると難しいものです。 MDNの「イベントへの入門」には次のように説明されています。 イベントは、あなたがプログラムを書いているシステムで生じた動作、出来事を指します。システムからあな …