【JavaScript入門】ザックリ知っておきたい基本

どこまで学べばいいか分からないという JavaScript 初心者に向けて、だいたいこれくらい知っておけばいいだろうという、ほどよいレベルの解説を心がけて書いたのがこの記事です。

気になった部分は自分でさらに調べ、気にならなかった部分はそのまま読み進めてください。

さて、HTML/CSS とともにWeb開発の基本技術となっているのがJavaScriptです。

HTML/CSS とは違い、本格的なプログラム言語になっているので、習得には時間がかかります。

その分、基本的なプログラミングスキルを高められるので、どんな処理があるのか、一通り理解しておいたほうがいいです。

実際には JavaScript ベースの人気フレームワークである React/Angular/Vue.js などを通して使うことが多いです。

ですが、基本となる JavaScript がわかっていないとフレームワークの理解が遅れ、つまづきやすくなります。

やはり、基本はしっかり押さえておくべきです。

言語仕様は Java や Python などと似た部分が多いですが、違う部分も多いので注意が必要です。

そんな違いや分かりにくい部分と基本的な部分を解説しています。

JavaScript 自体は、全体としては、融通が利いて、エラーになりにくい印象のある言語です。

インタープリタ型のスクリプト言語で、動的型付け言語にあたります。

クライアント側でもサーバー側でも動作し、比較的多機能な言語として重宝されています。

JavaScript とは

Web ページの動的な処理を実現するスクリプト言語です。

具体的には、主に DOM と呼ばれる HTML タグに当たる要素の操作とデータ通信に使われています。

ゴールを決めよう：学習時間の目安

JavaScript の初級レベルに達するには、C/Java/Python などをある程度まで理解していれば 100～200時間、プログラム初心者が HTML/CSS の次に学ぶなら200時間以上かかるイメージです。

細かいところまで理解しようとすれば300、400時間あっても足りないでしょう。

すべてを理解する必要はないので、自分の目的に合った理解レベルを想定して、学習時間を制限することをおすすめします。

そもそも、言語の仕様を全部習得しても、全部使うことはまずないですし、バージョンアップで仕様が変わってしまうからです。

理想は、大枠を押さえてあとは調べればわかるくらいの必要最低限度の学習に留めることです。

JavaScript はスクリプトとはいえ、かなりパワフルな言語なので、覚悟して取り組みましょう。

学習のゴール

JavaScriptがどんなものが知りたいという入門レベルであれば、入門書を読んでだいたいのことろが理解できればいいでしょう。

仕事や副業で何かを実装する必要がある人は、入門書レベルの他にその周辺知識の理解も深めていく必要があるでしょう。

JavaScriptを扱う一般的なエンジニアであれば、基本機能を把握し、調べればだいたいのことはできるというレベルが最初のゴールになります。

実際にはフレームワークを通して使うので、JavaScript自体はそれほど詳しく理解する必要がないことが多いはずです。

JavaScriptマスターになればフレームワークを作る側の仕事もできるようになりますが、あまり機会はないでしょうから、そこを目指すのはおすすめではありません。

Web系の開発では他の言語やDB、インフラなど多彩な技術があるので、そのときどきで価値のありそうな関連技術の習得に時間を使っていったほうが賢いでしょう。

技術同士で相乗効果が出るような組み合わせにできるといいです。

どこまで学ぶべきか

AIが無難な回答をしてくれたので引用しておきます。

JavaScriptはWebページを制御する言語なので、初級レベルでもDOMまでは学んだほうがいいです。

逆に非同期処理やオブジェクト指向は、多少わからなくても後回しでいいです。

JavaScriptの習得レベル

JavaScriptは、Webサイトやアプリケーションの開発に不可欠なプログラミング言語です。JavaScriptの習得レベルは以下のように考えられます:

基本レベル

• JavaScriptの基本的な文法や構文を理解する
• 変数、演算子、制御構文などの基本的な概念を習得する
• DOM(Document Object Model)操作の基本を学ぶ

中級レベル

• オブジェクト指向プログラミングの概念を理解する
• 非同期処理(Callback、Promise、async/await)を使いこなす
• 主要なJavaScriptライブラリ(React、Vue.js、Angular等)を使えるようになる
• TypeScriptの基本を学ぶ

上級レベル

• JavaScriptの仕様(ECMAScript)の詳細を理解する
• 高度なDOM操作やWebAPIの活用ができる
• Node.jsなどのサーバーサイドJavaScriptを使いこなす
• 大規模なWebアプリケーションの設計・開発ができる
• JavaScriptのパフォーマンス最適化ができる

習得レベルの目安

• 基本レベル: 1-3ヶ月程度
• 中級レベル: 6ヶ月-1年程度
• 上級レベル: 1年以上

JavaScriptの習得には、基本から応用まで幅広い知識が必要です。目標に応じて、段階的に学習を進めていくことをおすすめします。

引用元：質問「JavaScriptはどのレベルまで習得すべきか」 from Perplexity

回答ではライブラリ扱いされているReactなどのライブラリは、Web開発業界ではフレームワーク(FW)と呼ばれることが多いです。

各フレームワークの習得にも時間がかかるので別スキルとして扱われることが多いです。

この記事でもJavaScriptしか説明していませんが、それでもこの量ですからいかにボリュームが多いかわかってもらえると思います。

JavaScriptの基礎を理解しただけでは、フレームワークをすぐに扱えるレベルにはならないので注意してください。

学習方法

自分の頭を使う実践的な学習法が効果が高いのでおすすめです。

そのため問題集を解くのが一番おすすめです。

入門書は最初に広く浅く知識を得るのに向いています。ちゃんと理解しながら読めば、一定の学習効果があります。

最初は問題集と入門書を２対１の割合で進めると効率がいいでしょう。

ハンズオンは実践的にみえますが、指示された通りに実装するだけではインプットに近いので、あまり実践的ではないです。

ところが、自分で違うパターンに作り替えたり、オリジナルの処理を追加すると実践的な学習になるのでおすすめです。

学習の基本にはやはり入門書が向いています。

買ってもいいですが、内容が古くなるうえに、月1000円くらいの電子書籍の読み放題のほうが安上がりです。

電子書籍で内容もほぼカバーできて、他の言語や技術の本も読め、さらに一般書籍も豊富なので次がおすすめです⇒【PR】Kindle Unlimited

また入門書は特に名著である必要はないので読み放題に向いたジャンルです。

Kindle本はAmazonで検索するのですが、評価の高い本が検索結果の上から順に表示されるので探す手間も省けます。上からいくつか読んでおけばいいでしょう。

演習問題があるものがいいですが、なければ「問題」や「演習」で検索するのでも問題ありません。

Kindle無料ラインナップにも問題集があるのでKindle読み放題はやはり便利です。

他には雰囲気がつかめるのでYoutubeの入門動画もおすすめです。JavaScriptの機能や役割を把握するのに向いています。

動画の作者や説明の目的が、プログラマー系かデザイナー系かで内容が違うので目的に合った動画を見ておくといいでしょう。

単にJavaScriptを学ぶだけなら独学でいいと思います。

ですが、他の技術も合わせて学びたい、あるいは時間がもったいないのでお金をかけてもいいので早く身に着けたいという人なら、メンターやスクールを使うと効率がいいです。

あわせて読みたい

ITエンジニアのための情報収集/学習/スクールサイト一覧 ITエンジニアが勉強やスキルアップに使える無料サイト、学習サービス、スクールなどの一覧です。 無料サイトは検索して出てきたものでもいいですがメジャーサイトがある...

わからないときの調べ方/考え方

入門用に調べ方を説明しておきます。

わからない原因をはっきりさせる

よくわからない、あるいは納得できないと感じるのは、何か知らないルールや事実があるからです。

人は原因と結果の関連をたどっていく因果律で正しさを理解しています。

その原因と結果のつながりのなかに、自分が知らないブラックボックスがあると、わからないと感じます。

そのため、どこに謎があるのか探して、深掘りしていけば、その謎を解き明かすことができます。

ブラックボックスにどこまでフォーカスしているかが理解のカギです。

なんとなくわかったふりをせずに、素直に謎に迫っていけばいいだけです。

分解して難易度を下げる

プログラミングはひとつひとつの処理が連続して行われるものです。

そのひとつひとつが理解できれば全体を理解できるようになります。

そのため、一気に全部理解しようとはせずに、ひとつずつ細かく分けて理解していくといいです。

入門書や演習問題、ネット記事の内容が難しいと感じたときは、少し簡単なものにレベルを落とすとわかりやすくなります。

最終的に理解できればいいので、方法にこだわらず、プライドもすてて学んでいったほうが成長できます。

仕組みや流れの理解を心がける

何のためにどうすべきか、このアプローチで正しいのか、という視点を常に持っておくべきです。

そうしないと実装もエラー解決も方向性を間違ってしまう恐れがあります。

いわゆる、フローやモデル、デザインパターン、アーキテクチャなどの根本となる理論部分の理解も深めていくことを心がけてください。

勘ではなく理論を元に技術を使っていくことが大切です。

これができないと、エンジニアとしての成長が見込めないAIコピペ作業員エンジニアで終わってしまうでしょう。

わからないことはAIに聞こう

もう、そういう時代になったので、気にせずにAIを使いこなしたほうがいいです。

ChatGPTやPerplexityなどのチャットAIに質問したほうが、自分で調べるよりも早いことが多いです。

AIは間違う可能性もあるので、間違いを疑いつつ、怪しいときに自分で検索して調べればいいでしょう。

AIを信じすぎると痛い目に遭う恐れがありますが、用心しておけば、それなりに失敗を回避できます。

コーディング自体も、まずはAIにやらせて、人がそれをレビューして目的の処理に近づけていくようになっていくでしょう。

あわせて読みたい

「コード生成AI」エンジニアのためのChatGPT活用法 結論からいうと、これからの時代、エンジニアを目指すなら、まずはチャットAIの使い方を学ぶべきです。 本やサイトでプログラミング言語を学ぶより前にです。先にAI活用...

ちなみに、プログラミングなどのコードを出力できるAIをコード生成AIと呼びます。

生成AIは質問の回答や画像生成などを自動生成できるAIの総称です。

リファレンスで確認

エンジニアとしては、細かい仕様を確認することで、課題や問題に対処していけるといいです。初心者には少し大変ですが、これが王道の対処法です。

とりあえずAIで確認してよくわからなかったら、次のサイトで仕様を確認してみてください。

慣れてくれば、わからない仕様を次のMDNで検索するだけで開発していけるでしょう。

参考：MDN Web Docs(日本語)
URL：https://developer.mozilla.org/ja/

英語サイトの翻訳自体は簡単

プログラミングという専門分野となると翻訳の精度は落ちますが、翻訳すること自体は簡単です。

英語だからといってあきらめず、翻訳して理解することにも挑戦したほうがいいです。

JavaScript 学習の基本

JavaScriptは言語仕様やエンジンのことです。JavaScriptエンジン上でNode.jsなどの実行環境(ランタイム)が動作します。

さらに基本的なことは次の項目で説明しています。

ウェブや JavaScript の基本

ネットの仕組みをあまり知らない人は次のサイトに目を通しておくといいです。

参考 ウェブ入門 – ウェブ開発を学ぶ MDN

JavaScript とは HTML/CSS/Webブラウザ/サーバー/データベースなどと連携して、クライアントとなるWebブラウザやサーバーでの処理を実行するプログラミング言語です。

私たちが見ているWebサイトの内部では、サーバーからデータを取得し、HTML がページの基本構造を、CSS がデザインや装飾を、JavaScript が動きのある処理や通信処理などを担当することでページが表示されることで、閲覧できるようになっています。

さらに詳しい説明は次を参考にしてください。

参考 JavaScript とは – ウェブ開発を学ぶ MDN

Node.js

ChromeやFirefoxなどのＷebブラウザ上で動作するメジャーならランタイムです。参考にしたチャットAIの回答も引用しておきます。

サーバーサイドで実行できるランタイムですが、フロントエンドのブラウザ上で実行されることが多いです。

Node.jsは、ChromeのV8 JavaScriptエンジン上に構築されたJavaScriptランタイムであり、オープンソースのクロスプラットフォームのランタイム環境です。

Node.jsを使用すると、サーバーサイドでJavaScriptを実行でき、非同期、イベント駆動型モデルを利用して高速かつスケーラブルなサーバーアプリケーションを構築できます。

Node.jsは、リアルタイムチャットやIoTアプリケーションなど、さまざまな用途に利用されています。

また、Node.jsは大規模なアクティブな開発者コミュニティと世界最大のオープンソースNPMを持ち、初心者にも使いやすい特徴を備えています。

引用元：Perplexity

環境構築

メジャーなWebブラウザがインストールされていれば、付属の開発ツールでJavaScriptを実行することができます。

これだけでも問題集のコードを実行するくらいなら問題なく行えます。短いコードはこれで実行すればいいでしょう。

開発ツールはメニューなどから起動します。Console(コンソール)タブにコードを記述してEnterキーを押せば実行できます。

あとからNode.jsのバージョン管理の必要性が出てくることがあるので、エンジニアを目指す人はVSCodeで実行できるようにしておくと便利です。

VSCodeを使う場合は、htmlやjsファイルを作ってそこにコードを記述し、ブラウザの開発ツールで動作確認します。

環境設定は次の記事を参照してください ⇒ 【学習準備】プログラミング入門【環境構築】

コードを記述する位置

HTMLファイル内に記述
必要に応じてhead要素かbody要素の中にscript要素として記述

JavaScriptファイルに記述
拡張子がjsのUTF-8テキストファイルにコードを記述し、HTMLファイルのbodyタグの最後にリンクする。

//例
  ・・・
  <script src="FIlscript>
</body>

)コードを記述する場所はbody要素の最後がよい
処理に時間がかかるため後回しにすると他の表示が早くなる

■JavaScriptで前処理をする場合はhead要素内かbody要素の最初に書く

■パースされていないタグへの操作では、パース後に記述
スクリプトが上の行から処理されるので、使うタグのプロパティなどを先にパース(分析/解釈)させないとエラーになるため。

■非同期読み込みもできる

noscript要素

HTMLファイルにはJavaScriptが無効のときの警告メッセージを入れる(念のため)。

document.writeの代替法

document.writeは非推奨になっているので、使っている場合は書き換えるべき。createElement/appendChild/innerHTML/テンプレートリテラルなどで書き換える。

・代替法1
insertAdjacentHTML([設定], [書き込む内容])

・代替法2
JSファイルからheaedやbodyにコード挿入

テスト実行/コンソールログ

ブラウザに開発ツールがビルドインされているので、F12(or Ctrl+Shift+I)で起動し、開発ツール > コンソール で実行/確認できる。

エディター内ではShift+Enterで改行可。

console.log
エディター内やJavaScriptコード内でconsole.logメソッド使うことでコンソールにテキスト(エラーやメッセージなど)を出力し確認できる

文法や構文の基本

記述ルール

・コードのセパレータはタブ、スペース、改行が使える
代入(=)を改行で複数行にしても認識する。

・行末はセミコロン(;)で省略可
省略可だがエラー対策に明示すべき

・1行に複数の文をかける

・コメントアウト

例)
// １行コメント
/* 1行以上のコメント
*/
※どちらも行の途中から行末まで使える

予約語

予約語は言語仕様として使われている文字列や記号のことで、コーディングするさい変数や関数名などに使うことができない。

具体的にはECMAScriptで定義されている。

参考：ECMAScript
URL：https://www.ecma-international.org/ecma-262/#sec-keywords-and-reserved-words

予約語一覧

await
break
case
catch
class
const
continue
debugger
default
delete
do
else
enum
export
extends
false
finally
for
function
if
import
in
instanceof
new
null
return
super
switch
this
throw
true
try
typeof
var
void
while
with
yield

strict mode の予約語

let
static
implements
interface
package
private
protected
public

機能は未実装だが予約語になっているもの

enum

データ型

JavaScript のデータ型は大きくわけてプリミティブ型とオブジェクト型に分けることができます。プリミティブ型には次の 7 種類があります。

●プリミティブ型
数値
長整数 ※ ES2020～
文字列
論理値
undefined
null
シンボル

●オブジェクト型(主なもの)
Object(オブジェクト)
Array(配列)
Function(関数)
StringやNumberなどのラッパーオブジェクト
Date(日時)
RegExp(正規表現)
JSON

演算子で起こる型変換

データ型が違う数値と文字列を「+/-」で処理できるのですが、データが変わることがあるので注意してください。

次の例は文字列の10から数値で1を引くと数値型となるが、数値1を足すと文字列型として連結され文字列の101になることが確認できます。

間違いやすいので+を使うのは文字列の連結だけにして、数値は数値同士で計算した後に文字列と連結するようにしたほうが安全です。

// 数値に空文字を足す
let test = 10 + '';
console.log( 'test = ' + test + ', type = ' + typeof test);
// ⇒ test = 10, type = string

// 文字列の数字から数値を引く
test = '10' - 1;
console.log( 'test = ' + test + ', type = ' + typeof test);
// ⇒ test = 9, type = number

// 文字列に数値を足す
test = '10' + 1;
console.log( 'test = ' + test + ', type = ' + typeof test);
// ⇒ test = 101, type = string

// 文字列から数値を引き空文字を足す
test = '10' - 2 + '';
console.log( 'test = ' + test + ', type = ' + typeof test);
// ⇒ test = 8, type = string

変数

値や配列、オブジェクトのアドレスなどを保存しておくデータ領域のことで、名前を付けて管理する。

変数のスコープ(有効範囲)

変数にアクセスできるのはカッコで囲まれたブロック内のみ。この範囲をスコープと呼ぶ。

if文やforループ、関数内のスコープで使える変数をローカル変数と呼ぶ。

それらとは違い、どこからでもアクセスできる変数はグローバル変数と呼ぶ。

また、ブラウザでJavaScriptを実行するとき、グローバルオブジェクトはwindowオブジェクトになるため、window.globalName とすることでアクセスできる。

変数名に使える文字

使用可：ダラー($)、アンスコ(_)、アルファベット、数字、unicode文字(日本語可)

・大文字小文字は区別される
・日本語も使えるが使わないのが作法
・数字から始まる変数名や予約語は使えない
・ダラーは多言語の予約語として使われることがあるので使わないほうがよい

データ型：変数宣言

const
初期化が必須、再代入不可、値は不変(定数)ではない。
(※連想配列の中身などは変えられる、再代入できないだけ)
変数宣言ではなるべく const を使う。(データの安全性を確認しやすいため)

let
再代入可、同名変数の定義不可。
const が使えないときは let を使う。

var
再代入可、同名変数の定義可、再宣言できて危ない。
(※古いコードでなければ使う必要はない、letかconstを使うべき)

再宣言
・varは同名の変数を2回以上宣言できるが、他はできない
・別のデータ型を何度でも代入できる(※代入後にデータ型がリセット)
・同名だと間違いやすいので、同一スコープで違う役割をする変数を同名にすべきではない。

定数

値の変わらない変数。const 変数名 で定義する。小文字も使えるが、大文字とアンダースコア(_)のみで表現するのがJavaScriptの作法。

カンマ区切りでまとめて宣言できる(初期化も可)

例) let val1, val2=1,val3=’str’;

スコープ：変数の有効範囲

・varは関数スコープ：関数内でのみ使用できる
・let/constはブロックスコープ：ブロック内でのみ使用できる
・なにも付けずに変数を使うとグローバルスコープの変数になる

識別子

変数名や関数名を識別子と呼ぶ。

代入と参照渡し

プリミティブ型の変数は代入、オブジェクト型は参照渡しで値を変えられる。

オブジェクトの代入は参照渡しなので、代入したオブジェクトの値を変えると、元のオブジェクトの値も変わってしまう

例) aとbが同じアドレスを参照するので片方を変えると両方変わる
let a, b;
a = [10, 20];
b = a;
b[0] = 50;
console.log(a[0]);
⇒ 50

例) bに配列を代入すると別の配列オブジェクトになるのでaの値は変わらない
b = [30, 40]
console.log(a)
⇒ [50, 20]
console.log(a)
⇒ [30, 40]

undefined

1.初期化していない変数の初期値

2.グローバル変数に同じつづりのundefinedが定義されている、これと比較して初期化済かチェックできる
例) if(num == undefined){ …

3.typof演算子でもundefinedか確認できる

数値型/長整数型(Number/BigInt)

数値：64ビットの浮動小数点数
長整数：整数型より大きな値を扱える
※整数型と長整数型の演算は不可、キャストして行う

文字列(String)

・16ビットのunicodeで構成
・シングルクォートかダブルクォートで囲んで表す

Stringオブジェクトにすると文字列を比較できなくなる

文字列を入れる変数は文字列リテラルで作成したほうが安全です。Stringオブジェクトで作ると内容が比較できなくなる恐れがあるからです。

文字列リテラル同士や文字列リテラルとStringオブジェクトは「==/!=」などで正しく比較できます。

ですが、Stringオブジェクトとして作ると、オブジェクト同士の比較になるので文字列の内容同士を比較できなくなります。

// 文字列リテラルの場合は文字列の中身を比較できる
const str1 = 'ith';
const str2 = 'ith';
if( str1 == str2 ) {
    console.log('正しく比較できる');
}
// ⇒ 正しく比較できる

// Stringオブジェクトの場合はオブジェクト同士の比較になるので中身は比較できない
const strObj1 = new String('ith');
const strObj2 = new String('ith');
if( strObj1 == strObj2 ) {
    console.log('別オブジェクトなのでtrueにはならない');
} else {
    console.log('別オブジェクトなのでfalseになる');
}
// ⇒ 別オブジェクトなのでfalseになる

参考 文字列と String オブジェクトの比較 – MDN

プレースメント

文字列の中に変数の文字列や数字を入れるのにプレースメントを使うことができます。

%s : 文字列
%d : 整数

//%d に number の値が文字列に変換されて入る例
number = 3;
console.log('num:%d', number);
//⇒ num:3

編集を直接埋め込むこともできます。同時に四則演算もできます。

//変数を直接埋め込む例
number = 3;
console.log('num:${num} num-1:${num-1}');
//⇒ num:3 num-1:2

理論値/真偽値

boolean、true/falseで表す

endefined/null

endefined 変数が未定義状態
null 値が存在しない状態(初期化時に明示したい時などに代入しておく)、object型扱い

シンボル(Symbol)

作成するたびに既に作成済みのシンボルと異なるユニークな値を作成
ユニークな値の生成に使う

let s1 = Symbol();
let s2 = Symbol();
console.log(s1 === s2);
>> false

ラッパーオブジェクトとプリミティブ型

次のプリミティブ型はメソッドを呼び出すとラッパーオブジェクトに変換されメソッドを実行できる
プリミティブ型 ラッパーオブジェクト
数値 Number
長整数 BigInt
文字列 String
論理値 Boolean
シンボル Symbol

ラッパーにはtoStringなどの基本メソッドが実装されている

ラッパーオブジェクトを明示的に作成することもできる（メソッドを使わないならプリミティブ型のまま使う）
例：let obj = new Number(12);

newを使わなくてもラッパーオブジェクトからプリミティブ型を生成できる
let num = Number(10);

メソッド

オブジェクトのプロパティとして作成される関数のこと。
typeof() では function が返される。
戻り値を指定しないと undefined を返す。

strictモード：開発で使う非推奨チェックが厳しいモード

strictモードは厳格モードとも呼ぶ。ビジネスアプリ開発などでは基本的にstrictモードを使う。

これにより動的型付け言語であるJavaScriptを、静的型付けに近いエラー基準で記述することができる。

初めから動作確認しながらコーディングするならよいが、後から指定すると動作しなくなる恐れがあるので注意が必要。

プログラム全体でも一部にでも使える
次の記述で、関数内で使うとブロック内だけ厳格モードにすることもできる。
例：’use strict’;

宣言しないで変数に代入するとエラーになる
通常は可能でグローバル変数扱いになる

変数の引数に同じ名前を使えない
例：function test(a, a, b){ //Strictモードではエラー
}

8進数の記述Oxxが使えない
0oxx/0xxのどちらでもかけるがStrictモードではエラー

with文が使えない
オブジェクト名を省略できるwith文で省略するとエラーになる

true/falseの扱い

次はif/for文などの条件式などの論理値でfalseとみなされる。

型変換(キャスト)

文字列 + 値：左辺が文字列の場合、右辺の値は文字列に変換される
例： ‘moji’ + 7 ⇒ ‘moji7’

明示的な変換も可
String(値)
値.toString()

16進数などは10進数に変換される
    0x2A ⇒ '44'

連想配列(Dictionary)の要素は'object'になる、キーで取り出すべき

Symbolは+で変換できないのでtoString()を使う

NaN(Not a Number)

0割/文字列で割るなど算術例外で発生する値、演算や比較は正しくできない

ECMAScript

JavaScriptの標準仕様、準拠を強制するものではないので一部機能が準拠していないブラウザもある。

数値

■数値リテラル
（リテラルはコード内に書かれる数値のこと）
JavaScriptの数値は内部ですべて浮動小数点数として処理される
0x 16進数
0o 8進数 ※ECMAScript 2015 (ES6) より前は[0]だけでも8進数と認識され、その後もこの使用は残っている
0b 2進数

■Numberオブジェクトの数値リテラルでメソッドを使う方法
カッコで括るかスペースを開ける
例：
(数値).toString(2)
数値 .toString(2) ※数値の後にスペースを入れる

■Number.toStringメソッド(Numberオブジェクトの)
数値を2進数の文字列に変換する方法
(数値).toString(2)
数値 .toString(2)

■Number.toFixed()
指定の桁数に丸めた固定小数点形式の文字列を返す
0は省略可(小数点以下を省略する場合)

■Number.toPrecision()
数値を引数で指定した有効桁数に変換した値を返す。
let num = 123.456;
num.toPrecision() ⇒ 123.456
num.toPrecision(3) ⇒ 123
num.toPrecision(4) ⇒ 123.4
num.toPrecision(7) ⇒ 123.4560

■Number.toLocaleString()
ロケールに合わせた区切り記号を返す
※国や地域によって桁や小数点の記号が異なることに対応するメソッド
let nm = 1234.56;
num.toLocaleString() ⇒ 1234.56
num.toLocaleString(‘ja-JP’) ⇒ 1,234.56
num.toLocaleString(‘de-DE’) ⇒ 1.234,56

■Number.parseInt()
文字列を整数に変換
Number.parseInt(文字列, [基数])
Number.parseInt(’12’, 10) ⇒ 12
Number.parseInt(‘ -34asc’, 10) ⇒ -34 (文字列は無視)
Number.parseInt(‘1A’, 16) ⇒ 26 (16進数で0x1Aと解釈される)
Number.parseInt(‘BCD56’, 10) ⇒ NaN
Number.parseInt(‘301’, 2) ⇒ NaN (変換不能、2進数に3はない)
基数を省略した場合
Number.parseInt(’12’) ⇒ 78 (10進数扱い)
Number.parseInt(‘0x12’) ⇒ 18 (0xのみ16進数扱い、他は数字扱いで0などになる)

■Number.parseFloat()
文字列を浮動小数点数に変換
仕様はparseIntとほぼ同じ、0xを16進数として解釈しないのが異なる点

■Number.isNaN(値)
値が数値型でNaNかtrue/falseで返す

isNaN関数との違い
isNaN関数はNaN以外はすべてtrueを返す
Nunber.isNunメソッドは数値型かつNaNの場合のみtrueを返す
※Nunber.isNunのほうが厳密に判定できる

■Number.isFinite(値)
値が有限かつ数値型がtrue/falseで返す

有限でないためfalseになる場合
Number.isFinite(Infinity);
Number.isFinite(-Infinity);
Number.isFinite(NaN);

数値型でないためfalseになる場合
Number.isFinite(’78’); 文字列
Number.isFinite(true); 真偽値
Number.isFinite(undefined); 予約語
Number.isFinite([1, 2]); 配列

isFinite関数とNumber.isFiniteメソッドの違い
Numberメソッドの場合、数値型でない場合falseとなる(文字列など)

■Number.isInteger(値)
整数か調べる

■Number.isSafeInteger(値)
安全な整数か調べる
安全とはJavaScriptの数値である浮動小数点数で他の値と被らず、間違いが起きないという意味

長整数

通常の整数型では扱えない非常に大きな整数のこと。
値の最後にnを付けて表す。
整数なので小数点を使ったリテラルはエラーになる。
BigInt関数でも作成できる。
長整数と整数の演算は正しく行えない可能性があるので、長整数の演算には長整数を使う必要がある。
長整数もビット演算可。
整数なので除算では小数点以下が省略される。
シフト演算可。
整数型に変換する方法。
num = Number([長整数]) ※こちらのほうが精度が高い
num = parseInt([長整数])
逆は、 big_num = BitIng([整数])

文字列

文字列はUTF-16で処理される、JavaScriptのファイルはUTF-8で保存できる。
シングルクォートとダブルクォートのどちらかで囲って扱う（どちらでも同じ）。

文字列の中でクォートを使うときは、使っていないほうのクォートを使う。
・”afa’f’fa”, ‘text “ABC” ss’
・同じクォートを使うときは[]でエスケープシーケンスを使う。
・’text \‘ABC\‘ ss’

”で空文字を表す。
エスケープシーケンスで改行やタブなども表現できる。
アルファベットや漢字などをコードで表せるエスケープシーケンスもある。

■テンプレートリテラル(テンプレート文字列)
バッククォートで囲んだ文字列のことで、改行をそのまま認識したり、式、変数の値などを記述できる。
\nなどのエスケープシーケンスも使える。
${[式/変数]}で式や変数、演算子などを埋め込める
文字列を連結しなくても、そのまま書けるメリットがある

■Stringオブジェクト
明示的にオブジェクトを作ることができる
new String(数値/文字列)
単なる文字列ではなくStringオブジェクトとして使う変数を明示的にオブジェクトにしておくとコードの可読性が上がる。
String.valuOf() オブジェクトのプリミティブ値(元の中身)を返すメソッド
String.toString() オブジェクトの表す文字列を返すメソッド

■サロゲートペア
文字は16ビット(UTF-16)で扱われているが、基本8ビット(UTF-8)で処理され上位8ビットは使われない。使っていない上位8ビットを使い二つの文字コードを使う。このセットをサロゲートペアと呼ぶ。このとき上位ビットを上位サロゲート、下位8ビットを下位サロゲートと呼ぶ。
文字がサロゲートペアか確認する方法：lengthプロパティが2かどうかで判定
サロゲートペアの文字取得方法：charCoteAt()メソッドを使う
word.charCodeAt(0) 上位サロゲートの取得
word.charCodeAt(1) 下位 ”

■文字列のlengthプロパティ(文字列.length)
全角でも半角でも同じ1文字として扱う。
サロゲートペアは1文字で2length扱い。（サロゲートペアが含まれると文字数が増えるので注意）

■splitメソッド 文字列.split[区切り文字[, 最大分割回数])
最大分割数は指定回数だけ分割、省略可、省略時はすべて分割
let str = ‘A:B:C’;
let strAry= str.split(‘:’);
strAry ⇒ [“A”, “B”, “C”]
区切り文字の前後がないときは空文字を返す

■文字列の置換 文字列.replace(置換する文字列, 新しい文字列)
置換の他に空文字で削除にも使える
正規表現も使える。
$記号を使った置換
$& マッチした部分文字列
$` マッチした部分の前の文字列
$’ マッチした部分の後の文字列
$$ $の文字
$1, $2, … 正規表現で使う
※キャメルケースの文字列を別文字列として認識させられる

■文字列の連結 文字列.concat(文字列[, 文字列, …])
文字リテラルを直接していしたり、引数を変数にすることもできる
+演算子でも連結できる

■同じ文字列を作る 文字列.repeat(回数)
指定回数だけ同じ文字列の配列を作る
let str = ‘string’;
console.log( str.repeat(3) );
⇒ stringstringstring
引数0で空文字を作成

■部分文字列の取得 slice/substring/substr
Pythonのsliceと同等の処理

sliceとsubstringの違い
sliceは負の値で終末からのインデックスを指定できるが、substringでは負の値はインデックス0扱いになる
引数１が引数2の方が大きい値の場合、sliceは空文字を、substringは引数を入れ替えた結果を返す

substringとsubstrの違い
substringは開始と終了のインデックスを指定、substrは開始インデックスと取得文字数を指定する。
substrも第二引数省略時は最後まで取得、負の値は終端を基準にマイナスした値として扱われる
substrの第二引数に0または負の値を指定すると空文字を返す

■1文字取得 文字列.charAt()
指定インデックスの1文字を返す、インデックス範囲外は空文字を返す

■UTF-16の1文字の文字コードを返す 文字列.charCodeAt()
引数にインデックスを指定
サロゲートペアの文字は2文字扱いで、上位、下位の文字コードをそれぞれ返す

■Unicodeを調べる 文字列.codePintAt()
基本、指定インデックスのUTF-16文字コードを返す、サロゲートペアは2文字扱いなので指定された上位と下位のサロゲートを別々に返す。
範囲外のインデックスを指定した場合はundefinedを返す

■UTF-16文字コードから文字列を作成 String.fromCharCode()/String.fromCodePoint()
必要な文字数分の文字コードを指定するとその文字列を取得できる
サロゲートペアはfromCharCodeでは2コード指定する、fromCodePointでは1コードの指定で済む

■アルファベットの大文字/小文字変換 文字列.toLowerCase()/toUpperCase()
全角と半角のアルファベットの大文字と小文字の変換が可能。

■文字列の内部検索 文字列.indexOf/lastIndexOf
文字列.indexOf(検索文字列 [, 開始インデックス])
引数1の文字列が文字列に含まれている場合に開始インデックスを返す。引数2に検索開始インデックスを指定可。含まれていない場合は-1を返す。

文字列.lastIndexOf(検索文字列 [, 開始インデックス])
indexOfのインデックスを後ろから数えるバージョン。返すインデックスは検索語の先頭。

■文字列の内部検索で存在有無を返す
文字列.includes(検索文字列 [, 開始インデックス])
含まれればture、そうでなければfalseを返す

■文字列の先頭/末尾を調べる
文字列.startsWith(検索文字列 [, 開始位置])
真偽値を戻す

文字列.endsWith(検索文字列 [, 文字列の長さ])
文字列の先頭から長さ分が検索対象となり、そこが末尾扱いになる。真偽値を返す。

■トリミング
文字列.trim() 文字列の先頭と末尾の両方の空白を削除
文字列.trimStart() 先頭の空白を削除
文字列.trimEnd() 末尾の空白を削除

※空白としているが、全/半角スペース以外にタブや改行も取り除かれる

■文字列を指定の長さまで埋める padStart/padEnd
文字列.padStart(文字列の長さ [, 埋め込む文字列]) 文字列の前に追加
文字列.padEnd(文字列の長さ [, 埋め込む文字列]) 文字列の後に追加
どちらも引数2省略時は半角スペースが入る

演算子

・処理される優先順位が決まっている： *,/ > +,-

・優先順位が同じなら左から処理される
9 / 3 * 3 ⇒ 9
※逆に処理すると1になって違う答えになる。
優先順位を指定したいときはカッコ[(,)]でグループ化する

優先順位の詳細 ⇒ 演算子の優先順位と結合規則の一覧

■等価/不等価演算子
等価演算子: ==, !=
同じ型に変換した後に比較する、ex.文字列を数値に直して比較するなど
↕
厳密等価演算子: ===, !==
変換せずにそのまま比較する、型と値が同じ場合のみtrueになる

■論理演算子
&& 論理積
|| 論理和
式の結果となるtrue/falseに対して演算する演算子
! 論理否定
true/falseを逆にして返す

詳細
&&は左側がtrueなら右側も評価されます。
||は左側がfalseなら右側が評価されます。

■条件(三項)演算子：? if文と代入を簡略化できる演算子
[条件式 ? 式1 : 式2]
let num = 3;
let ans = (num > 1) ? ‘1よりおおきい’ : ‘1以下’;
console.log(ans)
⇒ 1よりおおきい

■カンマ演算子：式を一行でつなげてかける
左から評価される。

==と===はどちらを使うべきか？

どちらもif文などで条件判断に使いますが、結果は同じになることが多いです。

違い、==(!=)は文字列の数字と数値の同じ数を比較したときなどに、データ型が違っても自動で変換して解釈するところです。

// 例）等価と厳格等価の比較
console.log( '74' == 74 );
// true
console.log( '74' === 74 );
// false
console.log( 0 == false );
// true
console.log( 0 === false );
// ⇒ false
console.log( 'a' == new String('a') );
// ⇒ true
console.log( 'a' === new String('a') );
// ⇒ false

厳格等価(不等価)は自動変換せずにデータ型も同じかどうか判断するので、厳密な判断ができます。

自動判断は便利そうですが、予想外の動作をするリスクがあるので、厳格等価(不等価)を使ったほうが安全な実装ができます。

そのため基本的には厳格等価(不等価)を使うべきです。

ループ(基本)

処理のループ(繰り返し/反復)にはwhile/forを使う。配列などのイテラブルオブジェクトではfor…of/forEachなどでもループ処理が行える。

■break
ループ処理を途中で終了する処理。if文や関数なども途中で終了できる。

■continue
do while: doブロック内のcontinueはwhile(条件式)へジャンプ、その他はwhileやfor条件式に戻る。

■ラベル
目的
多重ループで上位ループへbreak/continueするときに使う。(break/continueは1ループしかジャンプできない)

仕様
break, continue文でのみ使える。結果的に switch/for/whileでしか使えない。
とび先となる文の先頭にラベルが付けられる。

例)
LabelStart: while(…){
for(…){
if(…) {
continue LabelStart:
} else {
break LabelEnd;
}
}
}
LabelEnd: a++;

参考：記事内の別項「様々なループ処理」

“…”：スプレッド構文と残余引数

“…”はモダンなプログラム言語で可変長引数や展開演算子に使われるコードです。

JavaScriptではそれぞれをスプレッド構文、残余引数と呼びます。

これは配列などの反復可能オブジェクトを展開して代入したり、残余要素を配列にまとめたりするときに使います。

//スプレッド構文の例
const ary = [1, 2, 3];
console.log(...ary);
//出力：1 2 3

またMath.max()ではスプレッド構文が正しく動作しないパターンがあるので注意してください ⇒ 説明

参考 スプレッド構文 – JavaScript MDN

参考 残余引数 – JavaScript MDN

配列(イテラブルオブジェクト)

異なるデータ型を同じ配列に含めることができる。

特定の要素を空にした配列も作れる

例) 要素が空の配列
let ary = [1, , 3, 4];
console.log(ary);
>> [1, empty, 3, 4]
console.log(ary[1])
>> undefined
※空の要素はundefined扱いで、empty('',…など)と表示される

※配列のlengthプロパティは最後のインデックスに1を加えたものを返す、ただし、存在しない要素を含まないので、正しい要素数でない可能性がある

配列の作成：明示的にArrayオブジェクトとして作成することもできる

書式：new Array(要素数 or リテラル)

注意
コンストラクタの最初の数字は要素数として扱われるので、要素が1つの数値型の配列は作れない。
new Array(3) ⇒ 要素が3つの配列となる、要素が1つで値が3の配列にはならない
コンストラクタにリテラル(‘1’など)を指定すれば1要素の配列も作れる。

存在しないインデックスをしてもエラーにならない(undefinedになる)。

多次元配列
配列の要素に配列を入れることもできる。次のリテラルで作成可能。

let arys = [
    [1, 'abc'],
    [2, 'def']
];
console.log(arys[0]);
>>[1, 'abc']

lengthプロパティを直接変更することで要素数を増やしたり、以降の要素を削除できる
ary = [1, 2, 3];
ary.length = 5;
console.log(ary) ⇒ [1, 2, 3, …]
ary.length = 2;
console.log(ary) ⇒ [1, 2]

Array.isArray() 配列かどうか調べる

typeofだとobject型が返ってくるのでisArrayが必要。
そもそもJavaScriptのデータ型はプリミティブとオブジェクトしかない。typeofはオブジェクトではなく中身の要素に使うならよい。

最後に要素を追加する方法

(1)最後のインデックスの要素に代入
ary1[ary1.length] = 4;
lengthは末尾の要素を+1した値を返すため、これで追加できる。

(2)pushメソッドで追加 ary1.push(値1[, 値2, …])
値は複数指定できる。

先頭に要素を追加 配列名.unshift(値[, 値2, …])

配列の先頭に引数の要素が追加される。

配列要素の削除

最後の要素を削除 配列名.pop()
同時に削除した値を返す。

先頭を削除 配列名.shift()
同時に削除した値を返す。

指定インデックス以降を削除
配列名.length = Index でlengthを変更。

空([])を代入して空にする
arrayA = []でその配列は空扱いになる。ただし、メモリは変化しないので、空にする前に元の配列を別の配列に代入しアドレスをコピーしておけば参照できる。

splice 配列要素の置き換え/削除/追加

配列名.splice(開始インデックス, 削除する要素数)
配列名.splice(開始インデックス, 削除する要素数, 追加要素1, 追加要素2, …)
引数３移行を省略すると削除、指定すると削除した後に要素を追加

forEachとfor(for…of)文の違い

forEachは配列/Map/Setのようなイテラブルオブジェクトのループ処理に使える記述。ただし、オブジェクトリテラルには使えない。

forEachは存在する値(空やNull,Undefinedなど以外)のみ返す。
for文やfor…ofはインデックスで指定したすべての値を返す、またbreak/cotinueできる点も違う。

concat 配列の結合/コピー

・結合
配列名.concat(配列)
配列名.concat(配列, 配列, …)
配列名.concat(値, 値, …)
引数には値と配列を混ぜた指定もできる。

・コピー
引数を省略すると元の配列をコピーしたものを返す。
let cp_str = str.concat();
ただし、要素が二次元配列の場合アドレスをコピーするので実体は複製されない。
slice()でも同じように配列を作ることができる。
同じように要素内の配列はアドレス参照になるので実体はコピーしない。

slice 配列のインデックス指定コピー

インデックスを指定してコピーできる。別の配列が作られる。
ただし、concat()と同じように要素が配列の場合はアドレス参照となるので、同じ実体を参照する。
引数省略時は全コピー(開始インデックス省略時は0、終了インデックス省略時は length の値となる)。

配列名.slice()
配列名.slice(開始インデックス)
配列名.slice(開始インデックス, 終了インデックス)

配列内の要素検索

・先頭から検索
配列名.indexOf(値)
配列名.indexOf(値, 開始インデックス)
戻り値:最初にヒットしたインデックス、ヒットしなかった場合は-1

・末尾から検索：lastIndexOf()

条件に一致する配列の要素を検索

・findIndex()
コールバック関数に値を渡し最初にtrueになったインデックスを返す

・find()
コールバック関数に値を渡し最初にtrueになった値を返す
配列名.find( コールバック関数(要素の値) )
配列名.find( コールバック関数(要素の値, 要素のインデックス) )
配列名.find( コールバック関数(要素の値, 要素のインデックス, 配列) )

・some()
コールバック関数に値を渡し、１つでも条件に合う要素があるか調べる
配列名.some( コールバック関数(要素の値) )
配列名.some( コールバック関数(要素の値, 要素のインデックス) )
配列名.some( コールバック関数(要素の値, 要素のインデックス, 配列) )
戻り値：true/false

・every()
コールバック関数に値を渡し、すべて条件に合うならtrue、ひとつでも合わないならfalse、配列が空ならtrueを返す。

join() 配列要素を文字列にして結合

配列名.join()
配列名.join(区切り文字列)

引数省略時は区切り文字がカンマになり、指定時は指定した文字列が区切り文字列になる。
空(”)を指定すると、区切り文字がない文字列になる。

例）要素が配列の場合の区切り文字はカンマになる(指定できない)
let fruit = [[‘Apple’, 120], [‘Grapes’, 80]];
console.log(fruit.join(‘ + ‘));
>>Apple,120 + Grapes,80

配列の要素が undefined や null の場合は空文字扱いで連結される。

toString() 配列を文字列に結合

カンマ区切りの文字列を返す。引数なし。

reverse() 配列を逆順にした配列を返す

同じ配列を参照していた配列も逆順になる。

sort() 並び替え

要素を文字列に変換し昇順ソートされる。コールバック関数の基準でもソートできる。
同じ配列を参照していた配列もソートされる。(実体が同じため)

//例）降順のソート、引数のfirstとsecondに配列の各要素が渡され比較され、並び替えられる
let word = ['AA', 'CC', 'BB'];

word.sort(function(first, second){
  if (first > second){
    return -1;
  }else if (first < second){
    return 1;
  }else{
    return 0;
  }
});

console.log(word);
>> ["CC", "BB", "AA"]

//例）この記述も可：昇順ソートになる、降順は return second - first; に入れ替える
no.sort(function(first, second){
  return first - second;
});

連想配列でソートキーを複数指定するなど、いろいろなパターンがあるので、詳しくは次のリファレンスを参照してください。

参考 Array.prototype.sort() – JavaScript MDN

[コラム] sortの内部処理はどうなってるの？

引数を省略すると配列の要素を文字列として昇順ソートします。

引数はcompareFn(比較関数)の結果を渡す仕様です。後に入れ替え(1)/前に入れ替え(-1)/何もしない(0)、という3パターンの処理を行っています。

参考 Array.prototype.sort() – JavaScript MDN

アルゴリズムは、ログを確認したところ挿入ソートのように見えましたが、マージソートやクイックソートを使った高速処理になっているとのことでした。

バブルソートなどを自作することもできますが、sortメソッドのほうが高速なので自作せずにメソッドを使うことをおすすめします。

参考 JavaScript for Implementing Insertion Sort Reintech media
参考 Insertion Sort in JavaScript

map() コールバック関数で配列を返す

配列の要素に順次コールバック関数の処理を行い、結果となる配列を返す。
全要素を大文字に変換するときなどに使う。

配列名.map( コールバック関数(要素の値) )
配列名.map( コールバック関数(要素の値, 要素のインデックス) )
配列名.map( コールバック関数(要素の値, 要素のインデックス, 配列) )

filter() コールバック関数の条件に合う新しい配列を返す

コールバック関数がtrueの要素だけの配列を返す。

配列名.filter( コールバック関数(要素の値) )
配列名.filter( コールバック関数(要素の値, 要素のインデックス) )
配列名.filter( コールバック関数(要素の値, 要素のインデックス, 配列) )

reduce() 要素の合計を返す

初期値を数値にできるので、初期値は0にしておくとよい

配列名.reduce( コールバック関数(合計値の保管用, 要素の値), 初期値 )
配列名.reduce( コールバック関数(合計値の保管用, 要素の値, 要素のインデックス), 初期値 )
配列名.reduce( コールバック関数(合計値の保管用, 要素の値, 要素のインデックス, 配列), 初期値 )

様々なループ処理

ループ処理はwhile/forだけでも実装できますが、イテラブルオブジェクト用のforEachなど様々な処理方法があります。

break/continueの可否や連想配列のアクセス方法などに違いがあるので注意が必要です。

while

ループの基本。カウンタやループ終了処理などを実装する必要がある。doブロックを使うことで初回のみ無条件で処理を実行することができる。

for

開始値やカウンタ、終了条件を定義することを想定したループ処理。不要ならどれも省略できる。

イテラブルオブジェクト

配列などの連続データで反復処理が可能なオブジェクトのこと。組み込みオブジェクトではArray, String, TypedArray, Map, Set, NodeListがこれに当たる。自作可能。

分割代入

複数の要素を同時に受け渡すこと。イテラブルオブジェクトから複数の要素を同時に受け渡したり、配列から複数の値を取り出すときなどに使う。

参考 分割代入 – JavaScript MDN

for…ofとfor…in

【結論】普通はofでよい

配列などのイテラブルオブジェクトの反復可能な要素を扱うことが多いでしょうから、反復可能な要素が対象で順序が保障されているofを使えばいいでしょう。

inはオブジェクトが持つ配列などの反復可能な要素でない要素や、継承した要素(※hasOwnで確認可)も含めて扱うときに使えます。

ofとinの違い

for…ofはイテラブルオブジェクトの反復可能なプロパティを扱う処理です。明示的に追加した要素を取り出すときなどに使います。

これに対してfor…inはオブジェクト自体が持つプロパティを扱う処理になっています。明示的には追加していない、オブジェクトに初めから定義してあるプロパティも列挙できます。

またfor…inはプロパティの列挙を目的とした処理なので、列挙順序が保障されておらず、順序がバラバラに列挙される恐れがあります。

そのため、配列などのイテラブルオブジェクトを扱うときはfor…of、単にオブジェクトのプロパティを扱うときはfor…inを使うべきです。

実際には、for…inでイテラブルオブジェクトを扱っても、列挙順がランダムになる訳でもないので、おおむねfor…ofと同じように使うことができます。

ですが、厳密には列挙順序が保障されておらず、この点がリスクになる恐れがあるので、意識して使い分けるべきです。

参考 for…of と for…in との違い – for…of – JavaScript MDN

for..of

イテラブルオブジェクトを指定して値を順次取り出す反復処理を行うために使う処理。分割代入可。

構文
for (variable of iterable)
  statement ← 繰り返される処理のこと

説明
iterableオブジェクトの要素が1つずつ順番通り最後までvariableに渡される

//Mapからキーと値を取得(分割代入)
const maps = new Map([
    ["key1", 1],
    ["key2", 2],
    ["key3", 3]
]);
for (const [key, value] of maps){
    console.log("key=" + key + ", value=" + value);
}
//出力
//key=key1, value=1
//key=key2, value=2
//key=key3, value=3

for..in

イテラブルオブジェクトの列挙可能なプロパティを取り出す反復処理。列挙順番は保証されないので注意(※定義した順番通りにならない可能性がある)。

//連想配列を取り出す例
let values = { v1: 100, v2: 200, v3: 300 };
for( let key in values ) {
    console.log( key + ': ' + values[key] );
}
//出力
// v1: 100
// v2: 200
// v3: 300

上記の処理ではメソッドも取得できるので意図せず取得してしまう恐れがあります。メソッドを取得しないようにするにはhasOwnPropertyを使います。

//hasOwnPropertyの使い方
for( let key in values ) {
    if( values.hasOwnProperty(key) ) {
        console.log( key + ': ' + values[key] );
    }
}

連想配列を扱うMapとオブジェクトリテラル

連想配列はキーと値をセットで保存できるデータ構造のことです。その連想配列を扱えるのがMapやSetなどのオブジェクトとオブジェクトリテラルです。

MapやSetなどはJavaScriptの記述で連想配列を定義したり格納するなどして使います。

オブジェクトリテラルはJSON形式の記述から連想配列を作り扱うことができます。

イテラブルオブジェクトの連想配列へのアクセス方法

Mapなどのオブジェクトとオブジェクトリテラルでは連想配列へのアクセス方法が違います。

//Mapなどのオブジェクトは分割代入などで取得、get()/set()メソッドでも可
for (const [key, value] of mapDate) {
    console.log('key: ' + key + ', value:' + value);
}
//オブジェクトリテラルはキーで取得
for (const litral of objLiterl) {
    if (literal.hasOwnProperty('KEY_NAME')) { //継承したプロパティを排除
        console.log('value: ' + litral['KEY_NAME']);
    }
}

例ではオブジェクトリテラルで定義するとfor…ofで取得しても定義していないプロパティが取得されてしまうのでhasOwnPropertyで排除しています。

定義や初期化

//空のオブジェクト作成
mapObject = new Map();
mapLitral = {}; // オブジェクトリテラル構文で空のオブジェクトを作成

//作成時にデータを格納
mapObject = new Map([ // Mapオブジェクトの場合
    ['key1', 1],
    ['key2', 2],
    ['key3', 3]
]);
mapLiteral = [ // オブジェクトリテラルの場合
    {'key1' : 1},
    {'key2' : 2},
    {'key3' : 3}
];

//１つの配列に複数の連想配列を格納
mapObject1 = new Map([['key11', 1], ['key12', 2]]);
mapObject2 = new Map([['key21', 3], ['key22', 4]]);
mapAll.push(mapObject1);
mapAll.push(mapObject2);
//また連想配列の値として連想配列を格納することもできる
map = new Map();
map.set('keyAry', mapObject1);

//オブジェクトリテラルは一度に複数の連想配列を格納できる
mapLiteral = [
    {'key11' : 1, 'key12' : 2},
    {'key21' : 3, 'key22' : 4}
];

上記はObjectがMapオブジェクトでLiteralがオブジェクトリテラルです。

値は整数を指定していますが、文字列も指定なども指定できます。

関数

関数は処理の共通化や簡略化、可読性の向上などのため処理をまとめて呼び出せるようにしたものです。

標準的な関数は組み込み関数としてすでに定義されているので、なにもしなくても呼び出すだけで使えます。

その他に自分で関数を定義することもできます。

基本

関数は自分で定義し、呼び出して使います。

// 例）関数の定義
function funcName( arg1, arg2, ... ){ // 引数を定義：引数は増やせる
    // 処理：全引数を使った処理を記述する
    result = arg1 + arg2;
    return result; // 返り値(result)：不要なら省略可
} // 定義は文ではないでのセミコロンは不要

// 例）関数の呼び出し
let res = funcName( 1, 2 );
console.log( res );
// ⇒ 3

そこでしか使わない関数は関数名のない無名関数として定義し処理を記述することもできます。

無名関数はアロー関数に書き換えることもできます。

参考 IIFE (即時実行関数式) – MDN Web Docs 用語集

JavaScript では関数もオブジェクトなので変数に代入して命名し呼び出すこともできます。

// 無名関数を代入する例
let addNum = new Function(  )

可変長引数

引数を動的に配列に格納できる(渡された数の要素を持つ配列として受け取る)
lengthで長さを判断。
引数の最後を可変長引数にすることもできる。

//例：length
function calcSum(...num){
  let sum = 0;
  for (let i = 0 ; i < num.length ; i++){
    sum += num[i];
  }
  return sum;
}

//例：普通の引数の最後に使う
function testFunc( arg1, arg2, ...arg3){

ミュータブルな値は内容が変えられる

ミュータブルとは値が直接変更できるという意味。変更できないことはイミュータブルという。

配列やオブジェクトはミュータブルな変数でアドレス参照となるので、関数内から変更しても変更が実体に反映される。

返り値(戻り値) return

関数やメソッドは最後に return で終わり、必要な値などを呼び出し元に渡すように設計されている。

返り値は省略可能で、省略すると undefined が返される。

関数の最後(最終行)に戻り値がない場合は return を書いてもよいが、書かなくても同じ結果になる。

複数の値を返す場合は戻り値を配列にする

例)
return [val1, val2];

配列の分割代入

配列の要素をそれぞれの変数に1行で代入することができる。
構文: [変数名1, 変数名2, …] = 配列;
変数宣言時にも可。
let [val1, val2] = aryVal;

関数の記述位置

定義と使用の位置はどちらでも正しく認識される。(使用後に定義しても動作する)
ただしこれはfunctionキーワードで定義した関数のみで、関数リテラルで定義した関数は先に定義する必要がある。
⇒ 基本的に全部先に定義しておけば間違いない。

関数はオブジェクト扱い

コードは関数オブジェクトの文字列として保存されているので、console.log([関数名])などで確認できる。

関数リテラル(無名関数/匿名関数)

1. 引数で定義して使う関数
2. アロー関数に書き換えられる
3. 他からはアクセスできないので通常名前は付けない
   ⇒名前を付けない関数を無名関数や匿名関数と呼ぶ
4. 記述には{}が必須(1行でも)
5. 変数に代入して使う(無名なため)
6. 関数リテラルを変数に代入し、別の関数の引数として渡すこともできる
   ⇒引数に直接記述することもできる

argumentsオブジェクト：引数を格納

JavaScriptでは関数もオブジェクトであり、プロパティとしてargumentsという配列風オブジェクト(array like object)を持っている。

このargumentsに引数が格納されており、arguments[1]などと記述することで引数にアクセスできる。

他にもlengthプロパティを持っており、引数の数を確認できる。

argumentsはアロー関数では使えない。アロー関数では次の項目で説明している残余引数を使う。

JavaScriptの引数は自由にいくらでも渡せるので、渡されたときのみ処理することもできる。

// 第三引数があるときだけnumに値が入る例
let num = argumets[3];

残余引数：アロー関数でも使える可変長引数

残余引数(rest parameters)は不定数の引数を配列風に扱うことができる。固定の引数と同時に定義することもできる。

アロー関数ではargumentsが使えないのでこの残余基数を使う。

// 構文
function fn( a, b, ...theArgs ) {
  // 処理
}

// アロー関数式の場合
( a, b, ...theArgs ) => 式

( a, b, ...theArgs ) => {
  // 文
}

toString 関数の定義を文字列として取得

関数や関数を代入した変数名を指定するだけでも定義されたコードを文字列として表示できるが、toString()で意識的に表示することも。

関数名.length: 引数の数

ただし、デフォルト値が設定された引数の前までの数になり、そのあとに引数があってもカウントされない。
また、可変長引数が含まれている場合、可変長引数を除いた数になる。

再起関数: 関数内で自らを関数として呼び出す関数

関数の中でそれと同じ関数を呼び出す関数を再起関数といいます。

再起関数はJavaScript入門としては難しい処理なので、さしあたり理解できなくてもいいでしょう。

再起関数を使わなくてもループなどで同等の処理が実現できるので、それほど問題はないはずです。

中級者以上になって、他人が書いた再起関数のコードを解読する必要が出てきたら、また理解にチャレンジしてみてください。

初心者はわからなくてもよいものの念のため説明しておきます。

再起関数は関数の途中で同じ処理の別の関数が呼び出され、終了条件を満たすまで、呼び出されるまでの間の処理が繰り返され、終了条件を満たすと残りの処理が順次実行されていきます。

難しい点は、呼び出されるたびに、引数の値が減算したり、引数となる配列の参照インデックスを進めたりして、終了条件を満たすように設計する点です。

さらに結果となる返り値が加算されて保存されるなど、記述していない内部の自動処理がある点も注意してください。

forEachなどもそうですが、内部で省略されている数値やインデックスの変化を、ログ表示などで確認しながらコーディングすれば、初心者でも理解しやすくなります。

また、呼び出されるたびにスタックされ関数用のメモリが増えていくので、メモリ不足(スタックオーバーフロー)にならないよう注意が必要です。

高階関数とコールバック関数

JavaScriptの関数はオブジェクトなので変数に格納したり、引数や戻り値として受け返したりできる。

高階関数：引数として受け取る、あるいは戻り値で返される関数、関数自体の引数は処理内で受け取る

※その際、関数に丸カッコ()を付け指定(省略可)すると、関数の実行結果が引数として渡され、関数が渡されないので注意

コールバック関数：関数内から呼び出される関数、高階関数の一種、非同期で処理される

例：引数を書くと処理が変わる
kokaiFunc(argFunc) ⇒ argFuncが引数として渡される
kokaiFunc(argFunc()) ⇒ argFuncの結果が引数として渡される

非同期処理とは？

まず同期とはタイミングを合わせるという意味で、「同期をとる/とらない」などという言い方で使われます。

同期をとらないことを非同期といいます。

非同期とはタイミングを合わせないということですが、非同期処理はメインの処理の終了を待たずに、並列して処理されます。

HTTPリクエストやファイルの読み書き、コールバック関数などが非同期処理されます。

JavaScriptのメインの処理は同期をとって処理されるので、１行ずつ実行され、終わると次の行が実行されます。

これに対して非同期処理では、その処理の終了を待たずにメインの処理が実行されていきます。

同期をとる必要がある、つまり、処理の終了を待ってから次の処理をする必要があるときは、明示的に終了を待つという記述が必要になることがあります。

セマフォ・オブジェクト

これは非同期処理と同期をとるために使われる概念やそれを実装したオブジェクトのことです。

JavaScriptでは定義されていないので必要に応じて作成します。Delphiなど仕様として定義されている言語もあります。

並列して動作する各処理の間で、処理のタイミングを合わせるための情報を共有する役割があります。

フラグやフェーズ(処理段階)、ステータス、時間などのデータを保持し、各処理がアクセスできるグローバルスコープなどで定義して使います。

グローバル関数

あらかじめシステム側に定義してあり、宣言せずに使える関数をグローバル関数といいます。

グローバルなのであらゆるスコープで呼び出すことができます。(どこでも使える)

即時関数

定義した直後に実行される関数のことで IIFE (Immediately Invoked Function Expression) と呼びます。

使うメリットは、呼び出す手間が減ることや、内部の変数にアクセスできないため他のグローバル変数との変数名のかぶりを気にしなくてよいことです。

// 書式1
(function() {
  // 処理
})();

// 書式２
(() => {
  // 処理
})();

// グローバルオブジェクトにアクセスする方法
(() => {
  console.log( this.property );
}).call( window );

オブジェクト

オブジェクトは数値や文字列、メソッド(関数に当たる処理)を持つ処理の集まりです。

JavaScriptの多くのデータはオブジェクトになっていて、メソッドなども持っています。

オブジェクトの基本

次はオブジェクトが持っている基本メソッドです。
・Object.hasOwnProperty()：キー(プロパティ)があるかチェック
・Object.keys()：キー配列を取り出す

連想配列から forEach で要素を取り出すサンプル
書式：配列名.forEach(function(ary){処理})

// 配列の宣言
const numbers = [1, 2, 3, 4, 5];
// forEachメソッドを使用して配列の各要素に対して処理を行う
numbers.forEach(function(number) {
  console.log(number);
});

objectNameの値を配列で取り出す例
Objecto.valuses(objectName)

entries() 連想配列のオブジェクトからキーと値を取り出す例
let ary = Object.entries(obj);
ary.forEach(function(element){
    console.log(element);
}

fromEntries Array/Mapから新しいオブジェクトを作る
例：let obj = Object.fromEntries(aryA);

freeze() オブジェクトのプロパティ追加/変更を禁止
Object.freeze(オブジェクト)
※注意１：エラーにはならないが、変更/削除されない
※注意２：オブジェクトがプロパティの場合、子オブジェクトのプロパティは変更可
子オブジェクトをfreeze()すれば変更不可にできる

assign オブジェクトをひとつにまとめる
書式：Object.assign(コピー先オブジェクト, コピー元オブジェクト1, コピー元オブジェクト2, …)
コピー先とコピー元１は同じアドレスになり、同じ内容になる（すべてまとまったオブジェクトになる）。他は変わらない。
また同じコピー元の別オブジェクトに同じプロパティ名があると、あとの値で上書きされる

空のオブジェクトを指定するとオブジェクトをコピーできる
let objNew = Object.assign({}, objA);

ブラウザオブジェクト

ブラウザオブジェクトにはダイアログボックスの表示やウィンドウサイズなどの変更、DOM操作、音声/動画などのマルチメディア、セキュリティ対策、通信など色々な機能が実装されています。

Chrome や Safari などの各ブラウザが提供するオブジェクトで、JavaScript から操作します。

実装は各ブラウザに依存しますが、おおむね同じ機能が標準化されています。

細かい部分で違いがある可能性があるものの、基本的には多くのブラウザで同じ動作をします。

とはいえ、ブラウザごとの差分を吸収しクロスプラットフォームで動作する標準化されたオブジェクトや jQuery や React などフレームワークがあるのでこちらが使われることが多くなっています。

ブラウザオブジェクトには、Window、Document、Navigator、Screenなどがあります。

consoleオブジェクト

コンソール画面へ文字列や数値を出力するオブジェクトです。

動作確認に便利なので、ある程度大きなプログラムになったら工夫して使うことで生産性を上げていきましょう。

コンソールのクリア

何かと表示が増えて見にくくなりがちなコンソール画面を、何も表示されていない状態に戻すことができます。(ただし、クリアのログは出力される)

処理の開始時にクリアしておくと見やすくなります。

書式：console.clear()

ログ(エラー)レベルごとに出力

メソッドを変えることでコンソールへの出力レベルを変えることができます。

表示はコンソールの仕様に依存しますが、エラーなら赤色で表示されるなどするので見やすくなります。

書式
console.log()：通常出力
console.info()：情報として出力
console.warn()：警告として出力
console.error()：エラーとして出力

出力のグループ化

コンソールへの出力をグルーピングすることで見やすくすることができます。

書式
console.group([ラベル])
console.groupEnd()

件式を満たさないときに出力

エラーの判定式をメソッドに含めることで、判定結果がfalseの場合のみコンソールへ出力させることができます。

console.assert(条件式, 表示する文字列やオブジェクト)

//numが1でない場合のみ出力
num = 2;
console.assert(num == 1, num);
⇒ 2

処理時間を計測

書式
console.time(ラベル)：計測の開始位置をラベルで指定
console.timeLog(ラベル)：計測途中の時間を出力
console.timeEnd(ラベル)：計測の終了位置をラベルで指定し、時間を出力

ラベルで識別するので、同じ処理には同じ文字列をラベル指定します。

カウンタ

処理した回数を表示するカウンタメソッドがあります。

引数を省略して処理回数を確認したり、ラべリングすることで特定処理をカウントすることもできます。

書式：console.count([ラベル])

メソッド/関数の呼び出し経路

どのメソッド(または関数)からどのメソッドが呼ばれたのかを確認できます。

意図した処理になっているか確認できるので、開発やデバックで役立ちます。

この呼び出し経路のことをコンピューターの世界ではスタックトレースと呼びます。

書式：console.trace([オブジェクト, …])

Mapオブジェクト

キーと値のペアを保持し、キーの追加順序も保持する連想配列オブジェクトです。値はmapObject.get(‘KEY_NAME’)で取得します。

ちなみに同じ綴りのmapメソッドは配列のメソッドで別物です。

参考 Map – JavaScript MDN

Mathオブジェクト

Mathは算術オブジェクトで次のようなことができます。

最大/最小値の処理はforループなどで自分で記述することもできますが、すでにメソッドがあるなら使ったほうが楽です。

他にも、一般的なプログラミングではあまり使いませんが、絶対値の取得や三角関数の計算などいろいろできます。

算術処理をするときは目的のメソッドがあるか調べたほうがいいです。

乱数の生成

Math.random()で0～1の間の浮動小数を生成できるので、これを加工して使います。

Math.randomで得られる乱数に整数を掛けると、0からその整数マイナス1の数字が得られるので、そこから小数点以下を削除すれば、整数の乱数を得られます。

//10～15の乱数を生成する例
rnd = Math.random() * 6; //0～5までの乱数を作る(浮動小数が返る)
num = Math.floor( rnd ); //小数点を切り捨て整数にする
num = num + 10: //最小値の10をプラス

//上記を1行で書く例
rnd = Math.floor( Math.random() * 6 + 10 );

上の例の変数はnumではなくrndを使いまわしても同じ結果になります。

浮動小数が整数に上書きされ型が変わるので、一般的なプログラミング的には別の変数を用意すべきところなので、あえて別の変数にしました。

JavaScript的には1行で書くので特に意識する必要はありません。

Math.maxやMath.max.applyではスプレッド構文を使わな方がいい

Math.max()でスプレッド構文を使ったときに配列にundefinedがあると正常に動作しません。

undefinedはArray.prototype.filter()などで排除した配列を作るなどすれば対処できます。

またスプレッド構文やMath.max.apply()は、扱う要素が膨大になると正しく動作しないので、注意が必要です。

参考 Math.max() – JavaScript MDN

Dateオブジェクト

日付、時分秒、曜日などの時間関連のデータ扱うオブジェクトです。

日時の取得や比較などに使います。国際対応で海外ユーザー向けに基準時をその国の時間に設定するときなどにも役立ちます。

細かいところは必要なときに調べて対応できればいいでしょう。

参考 Dateオブジェクト
URL：https://www.javadrive.jp/javascript/date_class/

thisの使い分け

thisは入門レベルでは深く理解する必要はないでしょう。目的のデータを参照できているか、ちゃんと確認しながらコーディングしていけばまず問題ないでしょう。

コーディングを続けていくうちに「thisってなんやねん？」という感じで疑問がわいてきてきたら、理解を深めてみてください。

ここではそんなときのためにザックリ説明しておきます。

thisはオブジェクト指向プログラミングでオブジェクト自身を表すことが多い予約語です。

JavaScriptでは文脈によっては表すものが変わるので注意が必要です。

[コラム] プロトタイプチェーン

JavaScriptの組み込みオブジェクトはオブジェクト指向で実装されています。

オブジェクトは親オブジェクトのプロパティやメソッドを継承していて、それらを使うことができます。

コードが実行されると、子に当たる自分のオブジェクトが持っていないプロパティやメソッドは、親オブジェクトが持っていないか確認していきます。

この親オブジェクトをたどっていく仕組みをプロトタイプチェーンと呼びます。

この仕組みのおかげで実装していないプロパティやメソッドも利用することができるようになっています。

DOM (Document Object Model)

DOMはWebページを作るためのAPIです。

Webページの本体のような存在で、WebページはWebブラウザがDOMとして解釈した表示や動作を行っています。

プログラミング的にはメソッド名がわかれば、データ取得や操作が行えます。

ですが、DOMを理解していないと、応用が利かずつまずきやすいので、基本はおさえておきましょう。

とはいえ、Web開発現場ではライブラリやフレームワークといったモダンJavaScriptを介してDOM操作することが多いので、一通り知っているくらいのレベルでもいいでしょう。

各オブジェクトの詳細は下の項目に挙げたリンクから確認してください。

DOMの仕組み

HTML/CSSはDOMとして解釈されて動作し、JavaScriptはDOMに対して操作を行っています。

WebブラウザはまずHTMLファイルを読み込み、書かれているタグからオブジェクトを作成します。

それぞれのオブジェクトが、文書表示や画像の取得、JavaScriptの動作など、それぞれの目的に合った処理を行うことでWebページが表示され動作しています。

オブジェクトのことをノードと呼び、ノードはツリー構造になっています。

各ノードには、ツリーの上位を親、下位を子、同列を兄弟という関係があり、それぞれを区別する概念に使います。

ノードの取得

HTMLタグから作られたノードから、それぞれのデータを取得することができます。

documentオブジェクトに要素に応じた取得メソッドがあるのでこれを使います。

取得処理は主に、１ノードをElementオブジェクトで取得する処理と、該当する全ノードをHTMLCollectionオブジェクトで取得する処理の２パターンあります。

例）IDから1つの要素を取得
// HTMLの記述
<div id="id_text">テキスト</div>

// JavaScriptの記述
let element = document.getElementById('id_text'); 
console.log(element.textContent);
⇒ テキスト

例）すべてのpタグの要素を取得
// HTMLの記述
<p>テキスト１</p>
<p>テキスト２</p>
<p>テキスト３</p>

// JavaScriptの記述
let elements = document.getElementsByTagName('p');
for (let i = 0; i < elements.length; i++){
    console.log(elements.item(i).textContent);
}

// コンソール
テキスト１
テキスト２
テキスト３

取得したElementオブジェクトやこれを内包するHTMLCollectionオブジェクトにもgetElementById()などのメソッドが実装されています。

これを使えばpタグをすべて取得したあとに、class属性でノードを絞り込むなどの処理ができます。

また、idは1つしか使えず、classはスタイルを定義する必要があります。

そのため、複数のノードを指定して取得するときはdata-XXXという書式でノードに属性を追加するテクニックがあります。

属性を付ければ特定のノードをquerySelectorで要素を取得できるようになります。
例：<div date-node-A=”1″>…</div>

querySelector()/querySelectorAll()の引数の仕様

引数のセレクタや属性を書き分けて指定する仕様になっています。

ノードの変更/追加/削除

詳細は説明しませんが、ノードの値などを変えることで、テキストや色などのHTML要素を変更することができます。

ノード自体の追加・削除もできます。

ボタン押下時にイベントハンドラを呼び出すなどすることで、DOMを操作し動的な処理を実現します。

CSSとJavaScriptでのプロパティ名の違い

同じスタイルのプロパティでは似た名前のものがありますが、違うものは違うので注意が必要です。

たとえば、JavaScriptではハイフン(-)は演算子の予約語なのでプロパティ名などには使えませんが、CSSでは使えるなどの違いがあります。
(CSS: background-color、JavaScript: backgroundColor)

StylePropertyMapでCSS要素を直接変更可能に

DOMのCSSプロパティを直に変更することもできます。これならプロパティ名の違いを気にせずスタイルを変更することができます。

オブジェクトの仕様

get系の取得メソッドによって取得できるノードタイプが違うので注意が必要です。

タイプは各ノードのはnodeTypeプロパティからも確認できます。

イベント処理

ブラウザやコンピューターが行う様々な処理をイベントと呼びます。

具体的には、マウスやキーボードの操作、Webページの読み込み完了などがイベントとして定義されています。

変化のある動的な処理の多くはイベントとして登録して実行されるようにプログラミングします。

JavaScriptではイベントハンドラ(イベントリスナー)に関連付けることで実行できるようになります。

処理は、JavaScriptで定義した関数をDOMのイベントをきっかけにボタンクリックなどで呼び出す流れになります。

イベントリスナー

inputなどのDOM要素にイベントを登録できます。そのメソッドが addEventLisener() です。

inputの属性に登録できる関数は1つだけですが、イベントリスナーを使えば1つのイベントに複数の関数を登録し、順次実行させることができます。

removeEventListener() で登録を解除することもできます。

初回のみ必要な処理が終わったら登録を解除して、その後は動作しないようにするなどの制御ができます。

イベント情報

イベントとして登録されたコールバック関数は第一引数でイベント情報を受け取ります。(※必要なければ省略可)

イベント情報は引数のオブジェクトに格納されたプロパティとして参照できます。

参考 Event – Web API MDN

参考

イベント入門 – ウェブ開発を学ぶ MDN

ネットワークプログラミング/通信処理

JavaScriptではfetchやAjax、WebSocketを使ったサーバーとの通信ができます。jQueryやその他のライブラリ/フレームワークもよく使われます。

HTTPやソケット通信にはいろいろなルール(プロトコル)があるので、うまくいかないときはそちらも調べたほうがいいです。

非同期処理と同期処理

プログラムは基本的にひとつずつ処理する同期処理を行っています。

メインの処理の他に別の処理を並行して行うことを非同期処理といいます。

非同期処理はメインのプロセスと並列処理になるので、処理の終了を待たずに処理が行えたり、別々に処理することで余っているCPUリソースを有効活用することができます。

同期処理で通信や巨大なファイルの読み込みなどの時間のかかる処理を行うと、処理が終わるまで何もできなくなります。

何もできない状態をプログラムのユーザーから見ると、操作不能でフリーズしているような状態になるので使い勝手が悪いです。

そうならないように時間のかかる処理は非同期で並行して処理し、メインの処理では「通信中」などの文字を表示したり、別の操作をできるようにします。

スレッドプログラミングの並列処理も非同期処理です。

大型掲示板のスレッドにも使われている技術で、小さな処理を大量に行うのに向いています。

並列処理を行うとマルチコアCPUの空いているCPUリソースを活用して処理速度を向上させることができます。

このようなことから、長時間かかる処理や並列処理で処理速度を上げたいときなどに非同期処理が使われています。

例外処理

システムがスローする(発生する)例外に対して何も処理しないとプログラムが強制終了してしまいます。

そのため、通常の処理で起こりうる例外には基本的にはすべて対処すべきです。

意図した処理を正常系、それ以外を異常系の処理といいます。

会員登録などで正しく登録できるパターンが正常系で、ユーザーのデータ入力不足やシステムのメモリ不足などでエラーになるのが異常系の処理です。

その異常系の処理をコーディングして実装する部分が例外処理です。

スローとキャッチ

例外が発生することをスローといい、例外を受け取ることをキャッチといいます。

例外はシステムからスローされたり、コードを書いてプログラマーがスローさせたりすることができます。

例外がスローされるとその時点でプログラム処理が中断され、キャッチブロックへジャンプして処理が継続されます。

例外発生時は処理がどこまで実行され、どこから未実行なのか分からなくなるので、例外は正しくハンドリングすべきです。

書式 try/catch/finally

try{
  (1)例外が発生する可能性がある処理
} catch(e) {
  (2)例外発生(スローされた)時の処理
} finally {
  (3)最後に必ず実行される処理
}

(1) tryブロック
目的となる正常系の処理を記述します。

(2) catchブロック
データがない場合などの想定される例外処理を記述します。
さらに例外が起きたことがわかるようにコンソールやログファイルにエラー内容を出力しておきます。
引数のeは自分で名前を付けられるのでわかりやすい名前にします。
標準的な例外はすでに定義されているのでそれを使います。
例外が複数ある場合は、さらにcatchブロックを追加して記述します。

(3)finallyブロック
開いたファイルを閉じるなど、共通する必須の処理を記述します。なければ省略可能です。

複数の例外に対応する処理

try{
  ・・・
} catch(e) {
  if ( e instanceof TypeError ) {
    // TypeError のときの処理
  } else if( e instanceof RangeError ) {
    // SyntaxError のときの処理
  } else {
    // それら以外のときの処理
  }
} 

スローされる例外もオブジェクトになっているので instanceof でどのオブジェクトであるか、つまり、どの例外であるか特定できます。

最後の else はなくてもいいですが、絶対にエラー終了させたくないときや、不安なときは記述して対処できるようにしておいてもいいです。

定義されている例外

JavaScriptで定義されている例外が次です。これらを使ってキャッチしたエラーに対処します。

これら以外でも自分でErrorオブジェクトを作ってスローすることもできます。

参考：Error – JavaScript MDN
URL：https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Error

対処すべき例外

基本的に実装した処理で起こりうる例外に対処すべきです。

実際のシステム運用では、処理とは関係ないハードディスクの容量不足も起こりえますが、それらはより上位の処理で対処すべきものです。

そのため、個々の処理で対処する必要はありません。(追伸：大量のファイルを作成するときなど、容量不足の恐れがあるときは対処してもよい)

例外は呼び出し元へスローされる

関数内で例外が処理(キャッチ)されなかった場合は、呼び出し元の関数やメインの処理へ例外がスローされます(受け渡されます)。

そのため、呼び出し元の関数などで、例外をまとめてキャッチして処理することもできます。

呼び出し元でも処理されていない場合は、プログラムが強制終了されます。

コールバック関数で例外がキャッチできない例

コールバック関数は非同期処理なので、記述上(見た目)の呼び出し元に当たる処理へは例外をスローしません。

スローされた例外はキャッチされず、プログラムを強制終了させます。

正規表現

文字列やデータから特定のパターンを照合するときなどに使うのが正規表現です。

どんなことができるか一通り頭に入れておいて、細かい実装にはAIを使うと便利です。

逆引き辞典などを使うのもいいです。

基本：コーディングの流れ

まず、正規表現オブジェクト(RegExp)に正規表現とフラグを設定して作成します。

次に目的に合ったメソッドに対象データを指定して実行します。

文字列オブジェクト(String)のメソッド(match/splitなど)に正規表現オブジェクトを渡すことでも処理できます。

このようなことから、正規表現を処理するには、正規表現の書き方、フラグの役割、各種メソッドを理解する必要があります。

// 対象文字列を用意
const str = 'Hello World';

// 1 正規表現オブジェクトの作成：全小文字にマッチする正規表現を作る

// 1.1 スラッシュ(/)で正規表現([a-z]+)を囲み、必要ならフラグ(g)を付けるやり方
const regex = /[a-z]+/g;

// 1.2 newでオブジェクトを作るやり方、正規表現([a-z]+)とフラグ(g)を引数に指定
const regex = new RegExp('[a-z]+', 'g');

// 2 処理するメソッドを実行

// 2.1 正規表現オブジェクトのメソッドを実行
const res = regex.test( str ); //testはマッチするかどうか真偽値を返すメソッド
console.log( res );
// ⇒　true

// 2.2 文字列オブジェクトのメソッドを実行
const res = str.match( regex ); //matchはマッチする文字列を返すメソッド
console.log( res );
// ⇒ "ello", "orld"

参考 RegExp – JavaScript MDN
参考 String.prototype.match() – JavaScript MDN

実装にはAIが使える

規表現には多くのルールや応用の仕方があり、習得するのに時間がかかるので、AIを使うのがおすすめです。

今はAIで質問すれば書き方がわかるので、AIが使える環境さえれば、それほど習熟していなくても対応できます。

学習では質問に必要な用語を覚えるように意識するといいです。

AIへの質問例
「JavaScriptで郵便番号にマッチする正規表現を教えて」

回答
var pattern = /^\d{3}[-]?\d{4}$/;

解説
/～/ … パターンを表すJavaScriptの区切り記号
^ … 文字列の先頭
\d{3} … 数字(0から9)で3桁
[-]? … ハイフンが0個か1個以上(ハイフン省略対応)
\d{4} … 数字で4桁
$ … 文字列の末尾にマッチ

このパターンで郵便番号と住所が混在している場合でも郵便番号を抜き出すことができます。
桁数の間違いを排除できるので^と$は付けておいたほうがいいです。

正規表現がわかったら、次はそれが正しいかテストします。テストデータがあればそえれを使いなければ自分で作ります。

テストサイトがあるので、簡単なテストではこれを使えばよいでしょう。

参考 JavaScript正規表現テスター – instant tools

あわせて読みたい

「コード生成AI」エンジニアのためのChatGPT活用法 結論からいうと、これからの時代、エンジニアを目指すなら、まずはチャットAIの使い方を学ぶべきです。 本やサイトでプログラミング言語を学ぶより前にです。先にAI活用...

JavaScriptで正規表現を使うときは主にRegExp/Stringオブジェクトを使います。

テストツールで試す

正規表現が思い通り動いているか怪しいときは、テストツールを使うと、コードを書いて実行するより早くて便利です。

正規表現に意味がわからない部分があるときは、AIに説明させて理解しておきましょう。

また、正規表現ではあらゆる文字列がマッチしない意味のないパターンを定義することができてしまいます。(※作成ミスですが)

試しにEdgeブラウザのGPT4で説明させたところ、正しく説明していました。ですが、別のAIでは説明が間違っていました。

実際にテストツールなどを使って確かめたほうがいいです。

参考 JavaScript正規表現テスター – instant tools (テストWebアプリ)
URL：https://tools.m-bsys.com/dev_tools/regexp.php

【正規表現リスト】記述/メタ文字(特殊文字)

正規表現をたまにしか使わない人が「あのカッコとか$記号は何だったっけ？」と思ったときに役立つリストです。

その前に誤解しやすいポイントを押さえておかないと、正規表現を解読できなくなるので注意が必要です。

正規表現は専用の特殊な文字と文字列を組み合わせたパターンで構成されています。

さらにそれらを元に文字列を取得したり、置換したりするメソッドがありますが、メソッドは別項で説明します。

また、この表には一般的な正規表現ルールとJavaScriptのルールが混在しているので、別言語で正規表現を扱うときは注意してください。

記号/記述	分類	説明
\ (バックスラッシュ)	文字クラス	特殊なメタ文字の記述や、メタ文字のエスケープシーケンスに使う記号 エスケープシーケンスはメタ文字の前に\を付けることで文字として扱う表記方法
/～/ (スラッシュ)	JavaScript仕様	一般的な正規表現ではなく、JavaScriptにおけるパターン定義の開始終了を表す記号、また最後にフラグを付けることができる
=, !, <, <=	論理演算子	正規表現で使われる論理演算子 =:イコール, !:否定, <:小なり, <=:小なりイコール ※+,-は演算子ではないので注意
. (ドット)	文字の指定	何でもいい1文字、但し改行文字は除く
^ (ハット,キャレット)	境界アサーション	文字列の先頭
^^	エスケープ文字	文字’^’
$ (ダラー)	境界アサーション	文字列の末尾
$$	エスケープ文字	文字’$’
* (アスタリスク)	繰り返し(数量司)	直前の文字がないか、1個以上繰り返す
.*	パターン	何でもいい0個以上の文字、末尾までマッチ
+	繰り返し(数量司)	直前の文字が1個以上繰り返す
– (ハイフン)	範囲	[]内で範囲を表す
?	繰り返し(数量司)	・直前の文字(列)が0個か1個 (最大1回までに制限できる) ・直前に半角スペースがあってもなくてもマッチ (注1) *、+、?、{} などの数量詞の後に指定すると非貪欲(出現回数が最小のものにマッチ)になる、逆に?を付けないと貪欲となり最大出現回数のものにマッチする (注2) ?の後に =、<=、< などが続くときはアサーションであって繰り返しの指定ではない、但し?!の場合はアサーションと繰り返しの両方で使うので括弧の違いなどで区別する
x{n}, x{n,}, x{n,m} (波括弧と数字)	繰り返し(数量司)	xを{}内のn回、繰り返す nのみならその回数、’n,’なら末尾まで、’n,m’ならnからm回まで
| (パイプ)	文字クラス	論理和を表し、つなげた2個以上の文字(列)のどれかにマッチ 例)ABC|DEF ⇒ ABCとDEFの両方にマッチ
[] (かどカッコ) 例) [ABC] [A-Z] [0-9] [A-Z0-9]	範囲指定(文字クラス)	・カッコ内の文字(≠文字列)のどれかにマッチ 例)[ABC] ⇒ A,B,Cのどれかが含まれる文字にマッチ ・-(ハイフン)でつなぎ範囲を表せる、数字,平仮名,カタカナなども指定可 例)[A-Z] ⇒ AからZまでのアルファベット大文字すべて ※並び順は文字コードに依存する ・連続記述可 ・^はカッコ内の2番目以降に書くとメタ文字ではなく文字として認識される
[^ABC] [^c-f]	範囲指定(文字クラス)	カッコで囲まれているもの以外にマッチ
() (まるカッコ)	範囲指定	・カッコ内の文字列や正規表現などをひとつにまとめる役割 ・カッコ内では多くの正規表現が使える
\b (バウンダリー[境界])	境界アサーション	単語の区切りを表す 次が区切り：全角/半角スペース,タブ,改行,行頭/行末
\B	境界アサーション	区切り意外を表す、主に区切りに接しない文字列の内部にマッチ
X(?=Y)	先読みアサーション	XのあとにYが続くときマッチ (※まるカッコは補足ではなく記述) 肯定先読み(Positive lookahead)
X(?!Y)	否定先読みアサーション	XのあとがY以外のときマッチ 否定先読み(Negative lookahead)
(?<=Y)X	後読みアサーション	Xの前がYのときマッチ 肯定後読み(Positive lookbehind)
(?<!Y)X	否定後読みアサーション	Xの前がY以外のときマッチ 否定後読み(Negative lookbehind)
\d (ディジット)	文字クラス	全数字にマッチ、[0-9]に相当
\D	文字クラス	数字以外にマッチ、[^0-9]に相当
\w (ワード)	文字クラス	半角英数字とアンダースコアにマッチ、[A-Za-z0-9_]に相当
\W	文字クラス	半角英数字とアンダースコア以外にマッチ、[^A-Za-z0-9_]に相当
\s (スペース)	文字クラス	ホワイトスペース1文字にマッチ、[\f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff] に相当 ホワイスペースは空白、タブ、改行、改ページ、Unicode空白文字のこと
\S	文字クラス	ホワイトスペース以外の1文字にマッチ、[^\f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff] に相当
\t (タブ)	文字クラス	水平タブにマッチ
\v (ヴァーティカルタブ)	文字クラス	垂直タブにマッチ
\r (キャリッジリターン)	文字クラス	改行(Carriage Return)にマッチ
\n (ニューライン)	文字クラス	改行(Newline)にマッチ
\f (フォームフィード)	文字クラス	改ページ(Form Feed)にマッチ
[\b] (バックスペース)	文字クラス	後退文字(Backspace)にマッチ
\0	文字クラス	Null文字にマッチ
\cX (キャレット)	文字クラス	キャレット記法の制御文字にマッチ
\xhh (ヘクサデシマル)	文字クラス	2桁の16進数(hh部分)にマッチ
\uhhhh (ユニコード)	文字クラス	4桁の16進数(hhhh部分)のUTF-16コードにマッチ
\u{hhhh}, \u{hhhhh}	文字クラス	uフラグがセットされたときに、U+hhhhかU+hhhhhのUnicode文字列にマッチ
\p (プロパティ)	文字クラス	Unicodeプロパティを元にマッチ Unicodeプロパティには絵文字、カタカナ、漢字などがある
\P	文字クラス	Unicodeプロパティ以外にマッチ
(パターン末尾の)g,i,m,y,s,u	フラグ	・JavaScriptの正規表現を処理するメソッドで、動作を指定するフラグ、複数指定可 ・意味 g (Global)：全体検索 i (Ignore Case)：大文字小文字を無視 m (Multiline)：複数行を対象 y (Sticky)：lastIndexから処理 s (Dot All)：.(ドット)が改行文字にも使える u (Unicode)：Unicodeエスケープを有効化

分類は厳密ではないので大まかなイメージと考えてください。

【逆引き】JavaScriptの正規表現

基本的なパターンは決まっているので次のサイト参考になります。

参考 form用正規表現判定_備忘 #正規表現 – Qiita
URL：https://qiita.com/fubarworld2/items/9da655df4d6d69750c06

アサーションで完全不一致パターンが作れる

/X(?<=ABC)DEF/ という正規表現は、DEFの前がABDのときマッチするという意味ですが、マッチした後に巻き戻りDEFの前にXがあるときにマッチするという矛盾した意味に解釈されます。

そのため、両方の条件を満たす文字列は作れいなので、どんな文字列にもマッチしない完全なミスマッチパターンになります。

正規表現の処理ではアサーションが先に処理されるので注意しましょう。

RegExp.replace()の$

通常の正規表現では文字列の末尾に一致するメタ文字(アサーション)ですが、replaceメソッドの場合は$記号で文字列を表すことができます。

正確には$1/$2などがキャプチャーグループにマッチしたプロパティとして定義されているので使うことができます。

jQueryのオブジェクトなどではないので注意が必要です。

正規表現の参考リンク

参考 JavaScriptの正規表現って？使い方やよく使う単語を詳解！(基本)
URL：https://techplay.jp/column/468

参考 JavaScript正規表現 Let’sプログラミング(基本を広くカバー)
URL：https://www.javadrive.jp/javascript/regexp/

参考 正規表現入門 Let’sプログラミング(般的な正規表現)
URL：https://www.javadrive.jp/regex-basic/

参考 JavaScript JavaScriptの正規表現で設定できるフラグの一覧
URL：https://www.javadrive.jp/javascript/regexp/index15.html

参考 正規表現 – JavaScript MDN (総合的な解説、ツールリンク有)
URL：https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Regular_expressions

参考 RegExp – JavaScript MDN(日本語) (正規表現オブジェクトの仕様)
URL：https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp

参考 JavaScript正規表現テスター – instant tools (テストWebアプリ)
URL：https://tools.m-bsys.com/dev_tools/regexp.php

参考 Online Regex tester and visualizer – Python, PHP, Ruby, JavaScript, Java, MySQL
URL：https://extendsclass.com/regex-tester.html#js

命名規則：変数名や関数名

命名規則を知っていると、他の人のコードを読むときやチーム開発のときに役立ちます。

キャメルはラクダのことで、ラクダのこぶのイメージからきています。

ローワーキャメルケースは最初の単語を小文字で始め、続く文字の最初を大文字にする書き方です。

アッパーキャメルケース/パスカルケースは単語の最初から大文字にする書き方です。

大文字のスネークケースは単語をすべて大文字にしてアンダースコアで区切る書き方です。

その他には命名規則といいますが、言語ごとに定められた禁止ルールがあるので、これに反しないように命名します。

JavaScriptだと最初に数字を使うことや制御文字などを使うことが禁止されていて、構文エラーになります。

それ以外であれば、仕様的には予約語や禁止ルール以外であれば自由に付けられます。

ですが、プログラミング的には一般的な命名規則やマナーがあるので、なるべくそれにのっとった名前にしたほうがいいです。

チーム開発ではプロジェクトごとに命名規則が定められていることもあるので、その場合はそれに従います。

関数やメソッドは何かしらの処理をするので、動詞を最初にすることが多いです。

単語内では、大カテゴリーから先に書くか後に書くかなど細かいルールがあることもあります。

基本的には可読性を重視して、役割にあった名前を省略せずにつけるのが業界的なトレンドです。

昔は、3～4文字にほどよく省略して、書きやすさと読みやすさの両立を目指すことが多かったです。

ですが、ネットやGitHubの普及でコードが共有され、可読性を高めるニーズが高まった影響で、省略しないスタイルに落ち着いていったのでしょう。

ハードの進化でメモリなどのリソースが潤沢になり、省略するメリットがなくなったことも、省略しないスタイルが広まった要因として考えられます。

非推奨の要注意関数など

JavaScriptは下位互換を維持するため、動作はするが非推奨になっている関数や処理パターンあります。

非推奨の関数が改善されてリスクがなくなる可能性もありますが、すでにわかっているリスクを背負う必要はないので、初めから使わないほうが賢いです。

document.writeを書き換えよう

document.writeはクロスサイトスクリプティング(XSS)の脆弱性があるのでセキュリティリスクの観点から非推奨になっています。

使っているとGoogleで警告が出るほど強く警戒されているので、できる限り書き換えておくべきです。

textContent や innerHTML でDOMを操作する方法が推奨されています。

次のようにinsertAdjacentHTMLで書き換えれば、コード修正が少なくすみます。

document.write ⇒ insertAdjacentHTML の書き換え例

//HTMLファイルのコード
<span id="id_area1"></span>
<script src="js/insert.js"></script>

//JavaScriptファイル(insert.js)のコード
const text_area1 = document.getElementById('id_area1');
text_area1.insertAdjacentHTML('afterbegin', '<div><h3>見出し</h3><p>説明</p></div>');

atob()関数

これは ASCII To Binary の略でシングルバイトのアスキーコードの文字データをバイナリデータに変換する(デコードする)関数です。

ASCIIコード以外のUTF-8などのマルチバイトコードを変換すると問題が生じることがあることがわかっています。

そのため、非推奨に近い関数として扱われることがあります。

(補足：ASCIIは正しく処理できるためか公式にはまだ非推奨ではないが、いずれそうなるのではないかという説がある)

逆にエンコードを行うbtoa関数もマルチバイトのUnicodeなどはそのままでは扱えないので１バイトずつ処理する必要があります。

メモ

CSS

CCSのどの記述がHTMLに適用されているかは開発ツール(Chrome推奨)で確認できる。

どの設定が適用されるかはセレクタで決まるので、セレクタの書式や優先順位を理解する必要がある。

2つのBootstrap

Web開発でBootstrap(ブートストラップ)といえば、Webアプリケーション(主にCSS)フレームワークである(Twitter)Bootstrapを指します。

Bootstrapは作成済のHTML/CSS/JavaScriptのセットです。このフレームワークを使うことで自分でコーディングせずにデザインや機能を実装することができます。

テック業界全体では伝統的にOSをロードするためのプログラムやプロセスのことをbootstrapと呼びます。

ソフトウェアエンジニアがOSをロードするbootstrapを開発する機会はまずないでしょうが、万が一不安なときは確認しておいたほうがいいです。

Bootstrapを使うべきか

うまく使えれば便利ですが、個人でJavaScriptの学習をするなら必要ありません。

HTML/CSS/JavaScriptを理解するのが目的なら、最初は使わず自作したほうが勉強になります。

ある程度学習できた後に、フレームワークを学んだり、Webページのデザイン性を高めるために使うならいいでしょう。

BootStrapはCSSのフレームワークに近いので、エンジニアよりもデザイナーのほうが仕事に活かしやすいスキルです。

実際の開発では、ある程度資金力のある会社はWebページのデザインはデザイナーに依頼します。

そのため、Bootstrapを使うかどうかはプロジェクトやデザイナーの方針で決まります。

スタートアップや小規模開発では、デザイナーを使わずエンジニアがWebページをデザインしつつ作成することがあります。

そんなときには、一定のデザイン性を確保できる便利なフレームワークになります。

jQueryは最新版を使おう

ある日、私のサイトで使っていたjQueryのスクロール機能が止まっていることに気付きました。

開発ツールで調べると、jQueryを読み込んだだけでエラーになっていました。

試しにjQueryを3.6から3.7にバージョンアップしてみるとエラーは出なくなり、スクロール機能も動いていました。

どうやら、jQueryの旧バージョンが未対応になっていたようです。

最新版がリリースされたら、面倒でもバージョンアップしておいたほうがいいです。

HTML/CSS/JavaScriptの見本

フロントエンド開発で一番有名なテンプレートが次の Boilerplate です。

GitHubのsrcフォルダをダウンロードして、そこから開発を始めるような使い方を

使わないファイルもあるでしょうから、必要なコードだけ参考にするのでもいいでしょう。

参考 HTML5 Boilerplate

WordPressでJavaScriptを使う方法

決まったページでしか使わない少ないコードなら次のやり方が簡単です。

アップロードファイルにはアクセス権限を正しく設定しないと読み込めないので注意しましょう。

パッケージを使うにはインストールする必要があります。

また、サイト全体で使うときは子テーマの functions.php に設定を記述します。バックアップをとってから編集しましょう。

JavaScript用のWordpressプラグインを利用して開発することもできます。

参考サイト

入門用には逆引きがおすすめです。

JavaScript逆引き Webサイト制作支援 ShanaBrian Website
URL：https://shanabrian.com/web/javascript/

JavaScript MDN
URL：https://developer.mozilla.org/ja/docs/Web/JavaScript

JavaDrive JavaScript入門(リファレンス)
URL：https://www.javadrive.jp/javascript/

JavaScript プログラミング解説
URL：https://so-zou.jp/web-app/tech/programming/javascript/

「JavaScriptで要素をドラッグして移動する簡単な方法」という記事が初耳だらけだった件
URL:https://qiita.com/www-tacos/items/5614b61d3742d6db34b7

JSer.info (JavaScript関連のニュースサイト)
URL:https://jser.info/