VIDEO LESSON

JavaScript関数・メソッド一覧：目的別に学ぶ52の個別解説の解説動画

再生時間 8:21動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00今回はジャバスクリプトの関数とメソッドの一覧を、初心者の方にも分かるように案内します。
0:08これは、主要な標準の関数とメソッドを一つずつ解説するリファレンスで、全部で五十二項目あります。
0:15各記事では、引数、戻り値、実行結果つきの実例、間違えやすい注意点を確認できます。
0:22ただし、標準機能のすべてや、画面操作、通信の道具を網羅した一覧ではありません。
0:28対象は、日常のデータ処理でよく使うものに絞られています。
0:33やりたいことから探せる、目的別の地図として使ってください。
0:37五十二という数は多く見えますが、カテゴリごとに分けると一つひとつの役割が見えてきます。
0:44最初に、呼び方の分類を押さえます。
0:47一つ目は、パースイントのように名前だけで直接呼ぶグローバル関数です。
0:52二つ目は、オブジェクトキーズのように、組み込みオブジェクトの名前に続けて呼ぶ静的メソッドです。
0:59三つ目は、配列のマップのように、実際の値に続けて呼ぶインスタンスメソッドです。
1:05ここで注意したいのは、同じインクルーズという名前でも、配列と文字列では用途や仕様が違うことです。
1:12そのため、この一覧では記事を分けて解説しています。
1:16名前が同じでも、相手の種類を確認する習慣が大切です。
1:20個別記事を開く前に、この三つの呼び方の違いを意識すると、サンプルコードの読み方がぐっと楽になります。
1:27学習は、ブラウザーとノードジェイエスのどちらでも進められます。
1:32ブラウザーでは、開発者ツールのコンソールでそのまま実行するか、エイチティーエムエルからファイルを読み込み、
1:38出力はコンソールで確認します。
1:43ノードジェイエスでは、ファイルを保存して、ターミナルでノードとファイル名を指定して実行します。
1:51個別記事の完成例は、画面操作に依存しない作りなので、どちらの環境でも試せます。
1:57ただし、機能によっては対応するバージョンが必要です。
2:02動かないときは、まず実行環境の版を確認してください。
2:06小さな例を自分で書き換えて結果を比べることが、仕様を覚える一番の近道です。
2:12最も項目が多いのが配列で、十六項目あります。
2:16役割で分けると覚えやすくなります。
2:19マップは変換、フィルターは条件に合う要素の抽出、リデュースは合計などの集計です。
2:25ファインドは最初の該当要素、ファインドインデックスはその位置を探します。
2:31サムは一つでもあるか、エブリはすべて満たすかを判定します。
2:36そのほか、切り取るスライス、削除と挿入のスプライス、並べ替えのソート、入れ子を平らにするフラットなどがあります。
2:46ソートとスプライスは元の配列を変えるので、元を残したい場合は先にコピーを作りましょう。
2:53配列の処理は、ほかのカテゴリを学ぶときも土台になるので、優先して手を動かしてください。
3:01文字列は八項目です。
3:02インクルーズは含まれるか、スターツウィズは指定の文字で始まるかを調べます。
3:10スライスは範囲の切り出し、スプリットは区切り文字で分けて配列にします。
3:16トリムは両端の空白を取り除くので、利用者の入力を整えるときによく使います。
3:23置換には二種類あります。
3:26リプレイスは最初の一致だけ、リプレイスオールは一致するすべてを置き換えます。
3:33先頭を埋めて長さをそろえるパッドスタートは、番号や日付の表示をそろえるときに便利です。
3:41目的に合わせて、検索、分割、整形で使い分けてください。
3:47オブジェクトは六項目です。
3:49キーズはキーの一覧、バリューズは値の一覧、エントリーズはキーと値の組を配列として取り出します。
3:55逆に、組の配列からオブジェクトを作り直すのがフロムエントリーズで、エントリーズと往復できる関係です。
4:03アサインは、複数のオブジェクトの項目を対象へコピーしますが、コピー先自体が書き換わる点と、
4:08内側までは深くコピーされない点に注意してください。
4:13ハズオウンは、そのオブジェクト自身がキーを持つかどうかを調べます。
4:18データの形を変える入口として、まずこの六つを押さえましょう。
4:22エントリーズで取り出して加工し、フロムエントリーズで戻す流れは、実務でもよく登場します。
4:28数値まわりは、解析、検証、丸めに分かれます。
4:32パースイントとパースフロートは、文字列の先頭から読める部分だけを数に変えます。
4:38読めなければナンになるため、結果の確認が欠かせません。
4:43ユーアールエルの部品変換では、エンコードユーアールアイコンポーネントと、
4:47その復元のデコードが組になります。
4:52検証では、ナンバーイズナンがナンかどうか、イズファイナイトが有限の数かどうかを判定します。
4:59丸めは、切り捨てのフロア、切り上げのシール、近い整数へのラウンド、そして最大値を取るマックスです。
5:07入力の変換と検証は、セットで考えてください。
5:11特にフォームの入力は文字列で届くため、変換した後に検証する順番を忘れないでください。
5:17ジェイソンは二項目ですが、実務では欠かせません。
5:21ストリンギファイは、ジャバスクリプトの値をジェイソン文字列へ変換し、保存や送信ができる形にします。
5:29パースは、その逆で、文字列を値へ戻します。
5:32通信で受け取ったデータは、たいていこのパースを通して使います。
5:37注意点は、すべての値が往復できるわけではないことです。
5:41関数やアンディファインドなどは文字列に残らず、日時も文字列のまま戻ります。
5:47変換できない形式の文字列をパースするとエラーになるため、失敗に備えた処理と合わせて使ってください。
5:55保存と通信の境界で必ず登場するので、この二つは早めに使い慣れておくと安心です。
6:01非同期処理の組み合わせは、プロミスの四項目です。
6:05オールは、複数の処理の成功結果をまとめて待ちますが、一つでも失敗すると全体が失敗になります。
6:13オールセトルドは、成功か失敗かをすべて集めるので、一部の失敗があっても全体の様子を確認できます。
6:21レースは、成功でも失敗でも最初に決着した結果を採用します。
6:26エニーは、最初に成功した結果を採用し、失敗は読み飛ばしますが、すべて失敗したときだけ失敗になります。
6:35速さが欲しいのか、全結果が欲しいのかで選ぶことが大切です。
6:40タイムアウトや複数の取得先の切り替えなど、実務の工夫はこの四つの組み合わせから生まれます。
6:48残りの三つの領域を紹介します。
6:50関数の呼び出しでは、コールとアプライが、ディスと引数を指定してその場で実行します。
6:57違いは、引数を一つずつ渡すか、配列で渡すかです。
7:01バインドは実行せず、ディスや先頭の引数を固定した新しい関数を作ります。
7:06日時では、デートナウが現在時刻をミリ秒で返し、トゥーアイエスオー文字列が日時をユーティーシーの形式で文字列化します。
7:16正規表現のテストは、一致する部分があるかどうかを真偽値で返します。
7:21入力形式の判定によく使われる道具です。
7:24この三つの領域は項目数は少ないですが、つまずきやすい場所なので、注意点を丁寧に確認してください。
7:32最後に、学ぶ順序です。
7:34まず、配列のマップとフィルター、文字列のインクルーズとスプリットを試してください。
7:41データの変換と検索は、ほかの学習の土台になります。
7:45続いて、オブジェクトとジェイソンでデータの形を変える練習をし、最後にプロミスで非同期処理を組み合わせます。
7:54途中で、関数そのものの定義やスコープが分からなくなったら、無理に進まず、
7:59入門や関数の基礎記事へ戻って確認してください。
8:04一覧は、順番に読む本というより、目的から引く辞書です。
8:08必要な項目から小さく実行して確かめる習慣を続けましょう。
8:13困ったときは、この一覧に戻って目的から探し直す使い方も覚えておいてください。
8:19お疲れさまでした。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

JavaScriptの主要52関数・メソッドを目的別に紹介。配列・文字列・オブジェクト・数値・日時・Promiseの個別記事から、実行結果付きの使い方と注意点を学べます。

解説記事・サンプルコードを読む：JavaScript関数・メソッド一覧：目的別に学ぶ52の個別解説 →