VIDEO LESSON

JavaScriptのString.prototype.startsWith()の使い方：引数・戻り値・実例と注意点の解説動画

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

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

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

0:00こんにちは。
0:00今回はスターツウィズを紹介します。
0:03これは、文字列が指定した文字列から始まっているかどうかを調べるメソッドです。
0:08たとえばファイル名がドラフトの下書き用接頭辞から始まるか、といった分類で活躍します。
0:14この動画では、書き方と引数と戻り値、記事の基本例であるファイル名のチェックと、
0:19開始位置を指定する境界例、大文字と小文字の区別や正規表現が使えない注意点まで、
0:23実行結果と一緒に学びます。
0:27前回のパッドスタートで文字列の見た目を整えた流れで、今回は文字列の中身を判定する基本操作を押さえましょう。
0:35真か偽かで答えが返る、とても分かりやすいメソッドです。
0:39合っているか合っていないかだけを知りたい場面に、ぴったりの道具です。
0:44まず動作環境を確認します。
0:46スターツウィズはイーエス二千十五で加わった文字列メソッドです。
0:50クロームでは四十一以降、エッジでは十二以降、ファイアーフォックスでは十七以降、
0:54サファリでは九以降で使えます。
0:58ノード・ジェイエスでは四・ゼロ・ゼロ以降に対応しています。
1:02記事の互換性情報はエムディーエヌのデータに基づく目安です。
1:06現在の主要環境ではほぼ心配ありませんが、古いブラウザーを対象にする場合は、
1:09先に対応状況を確認してください。
1:13追加の読み込みは不要で、空文字列にも関数として備わっていることを実機で確認済みです。
1:19迷ったときは、実際に使う環境で小さなコードを試してみるのが確実です。
1:24書き方を確認します。
1:25対象の文字列に続けてスターツウィズと書き、カッコの中に探したい文字列を渡します。
1:32第一引数が検索文字列、第二引数が比較を始める位置です。
1:36第二引数を省略すると、先頭のゼロ文字目から比較します。
1:41戻り値は、始まっていればトゥルー、そうでなければフォルスで、元の文字列自体は変更されません。
1:48スライドの例では、ハローがエイチイーで始まるのでトゥルー、エルオーでは始まらないのでフォルスになることを、
1:53実機で確認しました。
1:58位置はゼロから数える添字で考える点も覚えておいてください。
2:03検索文字列が対象より長い場合は、当然ながらフォルスになります。
2:08記事の基本例を見ます。
2:10ファイル名ドラフト・レポート・エムディーが、ドラフト・ハイフンという接頭辞から始まるかを調べるコードです。
2:20実行するとトゥルーと表示され、記事の期待出力と一致し、ノードの実機結果とも一致しました。
2:28記事が紹介するように、ファイル名の接頭辞や内部的な識別子を分類する場面で、
2:32そのまま使える形です。
2:36たとえば下書きだけを一覧から選び分けたり、処理を分岐させたりできます。
2:42全体の構造まで厳密に確認したい場合は、専用の解析や追加の条件と組み合わせてください。
2:50接頭辞のハイフンまで含めて調べると、似た名前との取り違えを防げます。
2:56実践的な使い方として、ファイル名の一覧を分類する例を見ます。
3:00ドラフト・エー、ファイナル、ドラフト・ビーという三つのファイル名にフィルターをかけ、
3:05ドラフト・ハイフンで始まるものだけを残しています。
3:10結果はドラフト・エーとドラフト・ビーの二件となり、実機とも一致しました。
3:16条件式にスターツウィズをそのまま渡せるのは、戻り値がトゥルーかフォルスだからです。
3:22ユーアールエルがエイチティーティーピーエスから始まるかの確認や、注文番号の頭文字での振り分けなど、
3:27接頭辞で分類する処理全般に応用できます。
3:32並び順は元の配列の順序がそのまま保たれる点も、実機で確認済みです。
3:37第二引数である開始位置の動きを確認します。
3:41ジャバスクリプトという文字列は、先頭からではスクリプトで始まりませんが、
3:46四文字目から比較するとスクリプトと一致してトゥルーになります。
3:51ハロー・ワールドで六文字目からワールドを探す例もトゥルーで、どちらも実機と一致しました。
3:59つまり第二引数は、文字列を切り出すのではなく、比較を始める場所をずらす指定です。
4:05決まった接頭辞の後ろにある部分だけを確かめたい場合に便利です。
4:10位置の数え方はゼロ始まりなので、実際に数えながら指定してください。
4:16開始位置を省略した場合は、ゼロを指定した場合と同じ動きになります。
4:21記事の境界条件の例を見ます。
4:23エービーシーという文字列を位置一から調べ、ビーで始まるかを確認するコードです。
4:29一文字目がビーなのでトゥルーとなり、実行結果は記事の期待出力とも一致しています。
4:36あわせて、検索文字列に空文字列を渡すと常にトゥルーになること、開始位置を文字列の長さより大きくするとフォルスになることも、
4:41実機で確認しました。
4:47空文字列が常に一致する点は、入力チェックで空の条件を素通りさせてしまう落とし穴になるため、
4:52空でないことの確認と組み合わせると安全です。
4:57境界の動きを先に知っておくと、想定外のトゥルーに驚かずに済みます。
5:03よく似たメソッドとの使い分けを整理します。
5:06スターツウィズが先頭を調べるのに対して、エンズウィズは末尾を調べ、インクルーズは場所を問わず含まれているかを調べます。
5:14スライドのハロー・ワールドの例では、ハローで始まること、ワールドを含むこと、
5:20ワールドで終わることの三つが、すべてトゥルーになり、実機とも一致しました。
5:26ファイルの拡張子を確認したいならエンズウィズ、キーワードがどこかに入っているかだけ知りたいならインクルーズ、
5:31というように、調べたい場所で選んでください。
5:37引数の形は三つともよく似ています。
5:39三つとも元の文字列は変更せず、真偽だけを返す点は共通しています。
5:44注意点として、大文字と小文字の扱いを見ます。
5:48スターツウィズは大小を厳密に区別します。
5:51大文字エイチで始まるハローに対して、小文字のハローを探すとフォルスになり、
5:55実機でも確認できました。
5:59利用者が入力した文字列は大小がばらつくことが多いため、そのまま比べると一致するはずのものを見逃す場合があります。
6:08大小を区別したくない場合は、両方を小文字にそろえてから比較する方法が確実です。
6:15逆に、識別子のように大小まで含めて厳密に分けたい場合は、この区別がそのまま役立ちます。
6:22目的に合わせて前処理を決めてください。
6:25ファイル名の拡張子など、大小が決まっている対象では区別が有利です。
6:30もう一つの注意点です。
6:32スターツウィズの第一引数に正規表現を渡すと、タイプ・エラーの例外が発生します。
6:37実機でも、正規表現は使えないという内容のエラーになることを確認しました。
6:43柔軟なパターンで調べたい場合は、正規表現のテストなど別の方法を選んでください。
6:48また記事も注意するように、ユーアールエルがエイチティーティーピーエスで始まることだけを根拠に、
6:53安全だと判断してはいけません。
6:57見た目が似た別ドメインも先頭は一致してしまうため、安全性の判断にはドメインの解析など追加の確認が必要です。
7:05先頭が合うことは必要条件の一つに過ぎない、と捉えるのが安全です。
7:09まとめです。
7:11スターツウィズは、文字列が指定の文字列から始まるかをトゥルーかフォルスで返すメソッドです。
7:18判断のポイントは三つです。
7:21まず、第一引数に検索文字列を指定し、戻り値で分岐できること。
7:26次に、第二引数で比較を始める位置をずらせること。
7:30そして、大文字と小文字を区別し、正規表現は渡せないことです。
7:35まずは記事の基本例と境界例を実行し、検索文字列や開始位置を一つ変えて、結果を予測してから確かめてみてください。
7:45次回のリプレイスオールと合わせると、文字列の判定と変換を組み合わせられます。
7:51お疲れさまでした。
7:53小さな判定を積み重ねることで、読みやすい分類処理が作れるはずです。

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

この動画で学べること

String.prototype.startsWith()で文字列が指定の文字列から始まるか調べる方法を解説。引数と戻り値、実行結果付きのコード、間違えやすい点、ブラウザー・Node.js対応を確認できます。

解説記事・サンプルコードを読む：JavaScriptのString.prototype.startsWith()の使い方：引数・戻り値・実例と注意点 →