JavaScript joinメソッドの使い方

  • JavaScript
  • メソッド
最終更新日:

この記事のポイント

joinメソッドについて、初心者でも理解できるよう基本から応用まで詳しく解説していきます。

  • 配列の要素を指定した区切り文字で連結し文字列として出力する機能
  • カンマやスペースなど任意の文字列を区切り文字として設定可能な仕様
  • HTMLタグ生成やCSV出力など実際の開発現場で活用される実用技術

この記事を読むことで、joinメソッドの基本的な使い方から応用的な活用方法まで幅広く習得できます。

目次

joinメソッドとは？

joinメソッドは、配列の全ての要素を指定した区切り文字で連結し、一つの文字列として返すメソッドです。元の配列は変更されず、新しい文字列が生成される仕組みになっています。区切り文字を指定しない場合は、デフォルトでカンマが使用されます。

このメソッドは配列からCSVデータを作成したり、HTMLのリストを生成したりする際に非常に便利で、Web開発の現場では頻繁に使用されています。配列内の要素は自動的に文字列に変換されるため、数値や真偽値などの異なるデータ型が混在していても問題なく動作します。

【関連】
JavaScriptをもっと詳しく学ぶならpaizaラーニング

基本構文

joinメソッドの基本的な構文と使用例を紹介します。最もシンプルな使い方から、区切り文字を指定する方法まで段階的に説明していきます。

まず、最も基本的なjoinメソッドの使用例です。引数を指定しない場合、デフォルトでカンマが区切り文字として使用されます。

let animals = ["イヌ", "ネコ", "ウサギ"]; let result = animals.join(); console.log(result);







出力結果
イヌ,ネコ,ウサギ
次に、区切り文字を指定する場合の例です。スペースを区切り文字として指定しています。

  
let pets = ["ハムスター", "インコ", "カメ"];
let spaceJoined = pets.join(" ");
console.log(spaceJoined);

  


  







出力結果
ハムスター インコ カメ
区切り文字に空文字列を指定すると、配列の要素が区切り文字なしで連結されます。

  
let zoo = ["ライオン", "ゾウ", "キリン"];
let noSeparator = zoo.join("");
console.log(noSeparator);

  


  







出力結果
ライオンゾウキリン
実用例
joinメソッドの実用的な活用方法を具体的なサンプルコードと共に紹介します。実際の開発現場で使用される典型的な場面を想定し、それぞれの用途に応じた使い方を詳しく解説していきます。
各例では、joinメソッドがどのような場面で威力を発揮するかを理解できるよう、実践的なコード例を豊富に用意しました。これらの例を参考にすることで、自身のプロジェクトでjoinメソッドを効果的に活用できるようになります。
基本的な文字列結合
配列に格納された複数の動物名を、読みやすい形で一つの文字列として表示する基本的な例です。

  
let farmAnimals = ["ウシ", "ブタ", "ニワトリ", "ヒツジ"];
let sentence = "農場には" + farmAnimals.join("と") + "がいます。";
console.log(sentence);

  


  







出力結果
農場にはウシとブタとニワトリとヒツジがいます。
カスタム区切り文字での結合
パイプ文字を区切り文字として使用し、データベースの区切りファイル形式のような文字列を生成する例です。

  
let wildAnimals = ["クマ", "オオカミ", "キツネ", "シカ"];
let pipeDelimited = wildAnimals.join(" | ");
console.log("野生動物: " + pipeDelimited);

  


  







出力結果
野生動物: クマ | オオカミ | キツネ | シカ
HTMLリスト生成での活用
配列の各要素をHTMLのリストアイテムとして変換し、動的にリストを生成する実用的な例です。

  
let seaAnimals = ["イルカ", "クジラ", "アザラシ", "ペンギン"];
let htmlList = "<li>" + seaAnimals.join("</li><li>") + "</li>";
console.log("<ul>" + htmlList + "</ul>");

  


  







出力結果
<ul><li>イルカ</li><li>クジラ</li><li>アザラシ</li><li>ペンギン</li></ul>
CSV形式データの作成
カンマ区切りのCSV形式データを作成する例です。データをExcelなどで読み込める形式に変換できます。

  
let birdNames = ["スズメ", "ツバメ", "カラス", "ハト"];
let csvHeader = "番号,動物名";
let csvData = birdNames.map((bird, index) => `${index + 1},${bird}`);
console.log(csvHeader + "\n" + csvData.join("\n"));

  


  







出力結果
番号,動物名
1,スズメ
2,ツバメ
3,カラス
4,ハト
パンくずリスト生成での応用
Webサイトのパンくずリストを動的に生成する実用例です。矢印記号で階層を表現しています。

  
let categories = ["動物", "哺乳類", "イヌ科", "イヌ"];
let breadcrumb = categories.join(" > ");
console.log("現在位置: " + breadcrumb);

  


  







出力結果
現在位置: 動物 > 哺乳類 > イヌ科 > イヌ
数値配列の文字列変換
数値で管理されている動物の個体数を、見やすい文字列形式で表示する例です。joinメソッドが自動的に型変換を行います。

  
let animalCounts = [3, 7, 12, 5, 8];
let animals = ["ウマ", "ヤギ", "アヒル", "ガチョウ", "シチメンチョウ"];
let countReport = animals.map((animal, i) => `${animal}:${animalCounts[i]}匹`);
console.log(countReport.join(", "));

  


  







出力結果
ウマ:3匹, ヤギ:7匹, アヒル:12匹, ガチョウ:5匹, シチメンチョウ:8匹
空要素を含む配列の処理
空要素やundefinedを含む配列でjoinメソッドを使用した場合の動作を確認する例です。

  
let mixedArray = ["コアラ", "", "カンガルー", undefined, "ワラビー"];
let result = mixedArray.join(" - ");
console.log("結果: " + result);

  


  







出力結果
結果: コアラ -  - カンガルー -  - ワラビー
複数行テキストの生成
改行文字を区切り文字として使用し、複数行にわたるテキストを生成する実用的な例です。

  
let animalFacts = [
  "サル：手先が器用で道具を使える",
  "ゾウ：記憶力が良く長生きする",
  "イルカ：高い知能を持ち言語を理解する"
];
let factList = animalFacts.join("\n");
console.log("動物の豆知識:\n" + factList);

  


  







出力結果
動物の豆知識:
サル：手先が器用で道具を使える
ゾウ：記憶力が良く長生きする
イルカ：高い知能を持ち言語を理解する
まとめ
joinメソッドは配列の要素を文字列として連結する機能です。基本的な使い方から応用的な活用まで、さまざまな場面で威力を発揮する汎用性の高いメソッドといえます。
joinメソッドの活躍する場面
    

  • HTMLタグの動的生成やDOM要素の作成時における効率的な文字列構築
    • 

  • CSV形式やTSV形式などのデータエクスポート機能の実装における区切り文字制御
    • 

  • ユーザーインターフェースでの表示用文字列作成や可読性向上のための整形処理
    • 

重要なポイント
    

  • 元の配列を変更せずに新しい文字列を生成するため安全にデータ処理が可能
    • 

  • 区切り文字を自由に指定できるため柔軟性が高く幅広い出力形式に対応可能
    • 

  • 数値や真偽値など異なるデータ型が混在していても自動的に文字列変換される
    • 

joinメソッドを習得することで、配列データの表示や出力処理が格段に効率化されます。実際の開発では、ユーザーへの情報表示やデータのエクスポート機能など、多くの場面でその有用性を実感できるでしょう。このメソッドの特性を理解し、適切に活用することで、より読みやすく保守性の高いコードを書くことが可能になります。
レベルを更に上げたい方はpaizaプログラミングスキルチェックへ





























  1. paizaラーニングトップ
  2. リファレンス
  3. JavaScriptのリファレンス記事一覧
  4. JavaScript joinメソッドの使い方