ホーム > 応用 > 【JavaScript】配列とモジュール化を扱えるようになろう！データを扱うための第一歩

【JavaScript】配列とモジュール化を扱えるようになろう！データを扱うための第一歩

投稿日：2025/03/22

最終更新日：2026/03/20

JavaScriptの基本的な文法や構文を学び、簡単な処理や動的なWebページを作れるようになったものの、「コードが長くなってしまう」「処理の流れが分かりにくい」と思ったことがあると思います。

javascriptを上達するためには単に動くコードを書くのではなく、可読性や保守性を意識した設計や、効率的な書き方を理解することが重要になります。

今回の記事では、関数やスコープの理解を深める考え方、非同期処理の基本、配列やオブジェクトを活用した実践的なテクニックなどを分かりやすく解説します。

実務でも頻繁に使われる知識を身につけることで、より複雑な処理や機能の実装が可能になります。

今回の記事では以下の項目について解説します。

JavaScriptの配列操作方法について
JavaScriptでのモジュールの扱い方

配列・オブジェクトの操作方法

JavaScriptでの配列やオブジェクト操作は、効率的なデータ処理の鍵です。配列では、map、filter、reduceを活用することで、繰り返し処理や条件抽出、集計を簡潔に実装できます。

例えば、filterで条件に合う要素を抽出し、mapで加工して表示する、といったチェーン処理はコードの可読性を大幅に向上させます。また、reduceを使えば、合計や平均値の計算、オブジェクトへの変換なども一行で行えるため、複雑な処理を効率化できます。

Yama

効率化は開発において重要です。開発は基本的に数ヶ月かかってもおかしくないためです。

今回は「map」について解説します。
文字だけではわかりにくいので実際のコードを用いてご説明いたします。

まず「テスト」というフォルダをデスクトップに作りましょう

※今までの記事をご覧いただいていた方で、もう作ってあるという方はそちらをご利用ください。また、JavaScriptファイルに前回のコードが残っているという方は全て消してください。

そのフォルダの中にJavaScriptファイルを作りましょう。ファイル名は「main.js」です

今回初めてという方はまずHTMLファイルを作成していただくことになります。それからHTMLとJavaScriptファイルを繋げましょう。それぞれのファイルはこのようになります。

HTMLファイル

                
        <!DOCTYPE html>
        <html lang="ja">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Document</title>
        </head>
        <body>
          
          <script src="./main.js"></script>
        </body>
        </html>

では早速、以下のコードを書いてみましょう。まずは「map」についてです。

                
        const scores = [100, 80, 90, 30, 50];

        const mapped = scores.map((x) => x * 2);
        console.log(mapped);

↑コードの解説

Yama

複雑のように見えるだけで実はシンプルなコードです

「const scores」で再代入できませんが、配列やオブジェクトの値の変更を可能とする「const」とその配列の名前である「scores」を定義しました。

「const mapped」は「mapped」という名前の変数を定義しました。

ではその右側についてです。この部分がこのコードのメインとなります。

「scores.map」で「scores」をmapすることを表しています。

そもそも「map」とはデータの集合に変更を加えたい時に使用されます。

今回の変更内容は「xをx * 2に変更する」といった内容です。ではxにはどんな値が入るのかというと「scores」のデータの全てが変更されます。つまり全てをかける2をする(全ての値を2倍にする)ということです。

その変更した内容には新たな変数を必要とします。そのために「mapped」という名前で変数を新たに作ったのです。

そして最後の「console.log」で、その実行結果をコンソールにて表示させるということを意味しています。

scoresの配列の中身自体は変更されることはありません。
値を変えたそのものを新たな配列へと追加しているためです。

ではこのファイルを実行してみましょう。

その前に

※前回の記事のように「テスト」フォルダを今回も使っている方は、「Live Server」を起動し、Google Chromeの開発者ツールにて実行結果を見てみましょう

実行結果

モジュール化とコードの整理

コードの整理と再利用性向上のためにはモジュール化が重要です。ESモジュール（import/export）を使うと、関数やクラスをファイルごとに分割し、必要な場所でのみ読み込むことができます。

Yama

モジュール化ができるようになるだけで将来的に
開発でコードが多すぎて困るという可能性を下げることができます。

これがどれだけ助かることかをご説明いたします。以下の例をご覧ください。

main.js

                
        //ボタン用
        const scores = [100, 80, 90, 30, 50];

        const mapped = scores.map((x) => x * 2);
        console.log(mapped);

        //フォーム用
        const scores2 = [100, 80, 90, 30, 50];

        const mapped2 = scores2.map((x) => x * 2);
        console.log(mapped);

        //画面遷移用
        const scores3 = [100, 80, 90, 30, 50];

        const mapped3 = scores3.map((x) => x * 2);
        console.log(mapped);

↑こちらのコードはボタン用とフォーム用と画面遷移用で分けたいのに１つのファイルにまとめてしまっています。

これぐらいのコードの量なら問題なさそうに見えますが、これがそれぞれ200行またはそれ以上のコードを想像してみてください。

コードのエラーの原因を探したり、書き換えたい、しかしコードをまとめたい時にとても手間がかかってしまいます。

ではもっとも良い方法とはなんなのでしょうか？それが「モジュール化」です。

では実践を想定してみましょう。まずHTMLについてです。

                
        <!DOCTYPE html>
        <html lang="ja">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Document</title>
        </head>
        <body>
          
          <script type="module" src="/main.js"></script>
        </body>
        </html>

ここで注意をしていただきたいのが「script」についてです。「type="module"」を忘れずに書く必要があります。これを書き忘れるのはあるあるです。

次にjavaScriptについてです。では今後のために「components」というフォルダを作り、「buttonExample.js」,「formExample.js」, 「navigationExample.js」,「main.js」というファイルを作ります。現在フォルダはこのようになっているはずです。

それぞれのファイルに以下のコードを記述しましょう。

buttonExample.js

              
      export default function button(){
        console.log("これはボタン用です")
      }

解説

「export」と最初に記述することでその関数を他のファイルでしようすることができます。次に「default」とはこの関数をデフォルトで利用します。という意味を持っています。

今回のような1つのjavaScriptファイルに複数のimportを実行し「Live Server」を利用する場合、「default」を記述しないと以下のようなエラーが起きる可能性があります。

[Uncaught SyntaxError: The requested module './buttonExample.js' does not provide an export named 'default' ]

formExample.js

              
      export default function form(){
        console.log("これはフォーム用です")
      }

解説

buttonExampleと同様です。

navigationExample.js

              
      export default function navigation(){
        console.log("これは画面遷移用です")
      }

解説

buttonExampleと同様です。

main.js

              
      import button from "./buttonExample.js";

      button();

解説

「buttonExample.js」で書いた関数をこの「main.js」ファイルで使いたいという場合は「import」をしないといけません。

{button}とは関数名です。「from "./buttonExample.js";」とはbutton.jsが配置されてあるファイルのパスを記述しています。

そうすることでmain.jsでもbutton.jsで書いたbutton関数を利用することができます。

よくあるミス

「import」でファイルのパスを記述する際に今回の場合だと、「from "./buttonExample"」と間違えて書いてしまうミスが多々あります。正しくは「from "./buttonExample.js"」です。拡張子である「.js」まで書く必要があります。

では「formExample」と「navigationExample」も「main.js」にimportしてみましょう。

              
      import button from "./buttonExample.js";
      import form from "./formExample.js";
      import navigation from "./navigationExample.js";

      button();
      form();
      navigation();

「Live Server」を起動し、「Google Chrome」で実行結果を確認すると以下のような結果になっているはずです。

これにより、大規模プロジェクトでも依存関係を明確にし、保守性や可読性を高められます。

また、名前空間やオブジェクトを活用して関数や変数を整理することで、安全で管理しやすいコード構造を作れます。

さらに、共通機能をライブラリ化すれば、異なるプロジェクト間でも再利用が可能になり、開発効率が向上します。

モジュール化と整理技術を駆使して、拡張性が高くバグの少ないコード設計を意識することが重要です。

実際に自身の作りたいものを作ってみよう

レベルアップするための方法として、実践的なプロジェクトで学んだテクニックを総合的に活用することが重要です。

今回の場合は練習として実際に自身で何かを作ってみてください。

この章では自分で探す能力を向上させていきます。

またどうしても作りたいものが思いつかないという場合は、Todoアプリを作成してみましょう。

完璧なものを作るのではなく、できるところまでで良いので実際に作ってみてください。

Todoアプリの作り方がどうしてもわからないという方はお問い合わせフォームにてご連絡ください。

理想としては答えを見ずに作ることが1番の理想です。

まとめ

このレベルのJavaScriptができるようになると作ることができる振り幅が大きくなります。サーバーでもjavaScriptが必要となるタイミングがあるのでその時にこの言語を使えると大変便利です。またチャットアプリなどをできるようになるとどれだけ面白くなるか想像できると思います。

こんな記事を読みたいというご希望がございましたら、お問い合わせフォームにてご連絡を承っております。