<h2 id="hbec3402c22">プロパティアクセスの基本：ドット記法（<code>user.name</code>）</h2><p>オブジェクト名に.(ドット)で取り出したいKeyを指定する。</p><p>リテラルとして決まったプロパティ名しか使えない。（リテラルとは、プログラムのソースコードで直接記述される値。変数値や式の結果ではなく、それ自体が値として扱われるもの）</p><p>変数を使って動的にプロパティを参照できない。</p><pre><code class="language-javascript">const user = { name: &quot;Yamada&quot;, age: 30 };

const name = user.age
console.log(name);   // → 30
</code></pre><h2 id="h33f2b67db0">プロパティアクセスの基本：ブラケット記法（user[&quot;name&quot;])</h2><p>変数を使って動的にプロパティを参照する場合に使用される。[ ]の中は変数として扱われる。変数が定義されていなければ <strong>ReferenceError（未定義の変数）</strong> が起きます。</p><pre><code class="language-javascript">const user = { name: &quot;Yamada&quot;, age: 30 };

const key = &quot;age&quot;;
console.log(user[key]);  // → 30</code></pre><p>もしくは、オブジェクト内のnameを指定したい場合は[]のブラケットの中を&quot;name&quot;のように文字列で指定する必要がある。</p><pre><code class="language-javascript">const user = { name: &quot;Yamada&quot;, age: 30 };

console.log(user[&quot;name&quot;]);  // &quot;Yamada&quot;</code></pre><h2 id="h75a14d88d5">オブジェクトの分割代入（Destructuring Assignment）</h2><p>Javascriptの構文でReactでもよく使用される。<br>オブジェクトの分割代入は <code>{}</code> の中に書く名前と、取り出したいオブジェクトのプロパティ名が<strong>完全に一致</strong>していないと取り出せない。</p><pre><code>const user = { name: &quot;Yamada&quot;, age: 30 };
const { name } = user;

console.log(name); // &quot;Yamada&quot;</code></pre><p>userオブジェクトの中からnameプロパティを取り出して、同名の変数nameに代入する。</p><h2 id="h0ec038ee95">ネストしたプロパティの取り出し方</h2><p>入れ子（ネスト）になったオブジェクトのプロパティも、それぞれの記法で取り出し可能。</p><h3 id="hbb2b8a99d5">✅ドット記法/ブラケット記法での取り出し</h3><pre><code class="language-javascript">const user = {
  name: &quot;Yamada&quot;,
  profile: {
    age: 30,
    location: &quot;Tokyo&quot;
  }
};

//ドット記法
const age = user.profile.age;
console.log(age); // 30

//ブラケット記法
const age = user[&quot;profile&quot;][&quot;age&quot;];
console.log(age); // 30</code></pre><h3 id="h6e255fcb32">✅分割代入で取り出し</h3><pre><code class="language-javascript">// オブジェクト
const user = {
  name: &quot;Yamada&quot;,
  profile: {
    age: 30,
    location: &quot;Tokyo&quot;
  }
};

// 分割代入で取り出す
const { profile: { age } } = user;

console.log(age);      // 30</code></pre><h3 id="h9e1856efe5">ネスト部分に別名をつけることも可能</h3><p>ネストしたオブジェクト自体を別の変数に入れることも可能。</p><pre><code class="language-javascript">// オブジェクト
const user = {
  name: &quot;Yamada&quot;,
  profile: {
    age: 30,
    location: &quot;Tokyo&quot;
  }
};

// 別の変数に入れる
const { profile: userProfile } = user;

console.log(userProfile.age);      // 30
console.log(userProfile.location); // &quot;Tokyo&quot;</code></pre><h3 id="hdf639aea30">途中のプロパティが存在しない可能性がある場合（TypeScript/JS両方で注意）</h3><p><code>Optional Chaining</code> を使ってエラーを防ぐようにする。</p><p>下記ではprofileプロパティが存在しない場合、エラーにならないようにprofileのあとに?をつける。</p><pre><code class="language-javascript">const user = {
  name: &quot;Yamada&quot;,
  // profileがないかもしれない場合
};

const age = user.profile?.age; // エラーを防げる（Optional Chaining）</code></pre><h3 id="hf45abca26d">✅ まとめ</h3><table><tbody><tr><th colspan="1" rowspan="1"><p>やりたいこと</p></th><th colspan="1" rowspan="1"><p>記法</p></th><th colspan="1" rowspan="1"><p>書き方</p></th></tr><tr><td colspan="1" rowspan="1"><p>通常のネストアクセス</p></td><td colspan="1" rowspan="1"><p>ドット記法</p></td><td colspan="1" rowspan="1"><p><code>user.profile.age</code></p></td></tr><tr><td colspan="1" rowspan="1"><p>プロパティ名を変数で持っている</p></td><td colspan="1" rowspan="1"><p>ブラケット記法</p></td><td colspan="1" rowspan="1"><p><code>user[key1][key2]</code></p></td></tr><tr><td colspan="1" rowspan="1"><p>安全にアクセスしたい</p></td><td colspan="1" rowspan="1"><p>Optional Chaining</p></td><td colspan="1" rowspan="1"><p><code>user?.profile?.age</code> または <code>user[&quot;profile&quot;]?.[&quot;age&quot;]</code></p></td></tr></tbody></table>

複雑なオブジェクトのデータの取り出し方をまとめ。

JavaScript基礎｜オブジェクトデータの取り出し方まとめ

<h2 id="ha5da527245">🌀名前空間の問題</h2><p>モジュールシステムで起こる名前空間の問題は、<strong>「import時に名前が衝突する可能性」</strong> のことを指す。</p><pre><code>// fileA.js
export function log() {
  console.log(&quot;Aから呼ばれた&quot;);
}

// fileB.js
export function log() {
  console.log(&quot;Bから呼ばれた&quot;);
}

// main.js
import { log } from &apos;./fileA.js&apos;;
import { log } from &apos;./fileB.js&apos;; // ←これはエラーになる
</code></pre><p>上記のfileA.jsとfileB.jsでは、それぞれ同じlogというモジュール名がついている。</p><p>そのまま、main.jsで同じ名前で呼び出すと、後者に呼び出されたほうはエラーとなってしまう。</p><h2 id="h3a992f16b2">✅衝突を防ぐには①｜ <strong>別名（エイリアス）</strong> をつけてimport</h2><p>as を使って 別名（エイリアス） にしてimportすれば回避可能。</p><pre><code>// fileA.js
export function log() {
  console.log(&quot;A&quot;);
}

// fileB.js
export function log() {
  console.log(&quot;B&quot;);
}

// main.js
import { log as logA } from &apos;./fileA.js&apos;;
import { log as logB } from &apos;./fileB.js&apos;;

logA(); // OK
logB(); // OK
</code></pre><p>上記のように同じモジュール名をasで異なる名前に変えてimportすると、衝突を回避することが可能となる。</p><h2 id="h9091973967">✅衝突を防ぐには②<strong>オブジェクトのようにまとめてimport</strong></h2><pre><code>import * as A from &apos;./fileA.js&apos;;
import * as B from &apos;./fileB.js&apos;;

A.log(); // Aから
B.log(); // Bから</code></pre><h2 id="h6356bbf039">⭐️まとめ</h2><p>命名の衝突はJSに限らず、スコープ管理がある言語全般の課題。下記ルールを覚えておくこと。</p><ul><li>ファイルごとには同名でもOK（＝モジュールスコープ）</li><li>インポート先（モジュールを使用するファイル）では名前は1つだけ使える</li><li>同じモジュール名の衝突を避けるために名前を変える（エイリアスをつける）</li></ul><h3 id="hbfffda0a6a">例</h3><p>logやuserなどの名前はよく使用される。そのため下記のように「何のlogなのか」をわかりやすくして読み込む。</p><pre><code>import { log as logFromAdmin } from &apos;./admin.ts&apos;;
import { log as logFromClient } from &apos;./client.ts&apos;;

logFromAdmin();  // admin側のログ
logFromClient(); // client側のログ</code></pre><h3 id="h1652111b59">🔍 名前のつけ方を気をつける</h3><table><tbody><tr><th colspan="1" rowspan="1"><p>オリジナル名</p></th><th colspan="1" rowspan="1"><p>エイリアス（<code>as</code>後）</p></th><th colspan="1" rowspan="1"><p>意味・意図</p></th></tr><tr><td colspan="1" rowspan="1"><p><code>User</code> from <code>admin.ts</code></p></td><td colspan="1" rowspan="1"><p><code>AdminUser</code></p></td><td colspan="1" rowspan="1"><p>管理者用のUser型</p></td></tr><tr><td colspan="1" rowspan="1"><p><code>User</code> from <code>client.ts</code></p></td><td colspan="1" rowspan="1"><p><code>ClientUser</code></p></td><td colspan="1" rowspan="1"><p>顧客用のUser型</p></td></tr><tr><td colspan="1" rowspan="1"><p><code>log</code> from <code>logger.ts</code></p></td><td colspan="1" rowspan="1"><p><code>appLogger</code></p></td><td colspan="1" rowspan="1"><p>アプリ全体のログ関数</p></td></tr></tbody></table><p></p>

モジュールシステム導入後でも、複数のモジュールから同じ名前の識別子をimportした際に起こる衝突や曖昧さを回避🔥

Javascript基礎｜モジュールシステムの名前空間問題

<h2 id="hcf83e1357e"></h2><h2 id="hdf77755a7f">JavaScriptのDOM操作できること</h2><p>JavaScriptを使うことで、HTMLの構造や中身を動的に変更することができる。<br>クリックで要素を追加したり、フォームの入力に応じて内容を書き換えたりすることが可能。</p><h2 id="h8f4c06a502">🔍 要素の取得</h2><p>要素の取得方法は<code>querySelector</code>と<code>getElementById</code>と<code>getElementsByClassName</code>の３種類がある。</p><p>それぞれ取得する際の（）の中に入れるID名やClass名の記述方法に違いがあるので要注意。間違えて入力すると要素を取得できない⚠️</p><h3 id="h14c6278578">✅ 【ID指定で1つの要素を取得】</h3><pre><code class="language-javascript">// getElementById：ID名をそのまま指定（#は不要）
const element1 = document.getElementById(&quot;my-id&quot;);

// querySelector：CSSセレクタ形式で指定（#が必要）
const element2 = document.querySelector(&quot;#my-id&quot;);</code></pre><p>✅ 【クラス名で複数の要素を取得】</p><pre><code class="language-javascript">// getElementsByClassName：配列っぽいHTMLCollectionが返る
const elements1 = document.getElementsByClassName(&quot;item&quot;);

// querySelectorAll：NodeListが返る。forEachが使える
const elements2 = document.querySelectorAll(&quot;.item&quot;);</code></pre><p>✅ 【タグ名で取得】</p><pre><code class="language-javascript">// getElementsByTagName：タグ名で全て取得
const divs1 = document.getElementsByTagName(&quot;div&quot;);

// querySelectorAll：CSSのようにタグ＋条件もOK
const divs2 = document.querySelectorAll(&quot;div.container&quot;);</code></pre><hr><h2 id="h486cb6e18d">➕ 要素の追加</h2><pre><code class="language-javascript">const newElement = document.createElement(&quot;タグ名&quot;);
newElement.textContent = &quot;テキスト内容&quot;;
親要素.appendChild(newElement);</code></pre><p>📝例文：</p><pre><code class="language-javascript">const list = document.querySelector(&quot;ul&quot;);
const li = document.createElement(&quot;li&quot;);
li.textContent = &quot;新しい項目&quot;;
list.appendChild(li);</code></pre><hr><h2 id="h5854d91049">❌ 要素の削除</h2><p>📝例文：</p><pre><code class="language-html">//HTML
&lt;ul id=&quot;todo-list&quot;&gt;
  &lt;li class=&quot;item&quot;&gt;やること① &lt;button class=&quot;delete-btn&quot;&gt;削除&lt;/button&gt;&lt;/li&gt;
  &lt;li class=&quot;item&quot;&gt;やること② &lt;button class=&quot;delete-btn&quot;&gt;削除&lt;/button&gt;&lt;/li&gt;
&lt;/ul&gt;</code></pre><pre><code class="language-javascript">// すべての削除ボタンを取得
const deleteButtons = document.querySelectorAll(&quot;.delete-btn&quot;);

// 各ボタンにクリックイベントを設定
deleteButtons.forEach((btn) =&gt; {
  btn.addEventListener(&quot;click&quot;, () =&gt; {
    // 親の &lt;li&gt; を削除
    btn.parentElement.remove();
  });
});</code></pre><hr><h2 id="hdbed4bb861">🔁 要素の変更</h2><ul><li>内容の書き換え：</li></ul><pre><code class="language-javascript">element.textContent = &quot;新しいテキスト&quot;;</code></pre><ul><li>属性の変更：</li></ul><pre><code class="language-javascript">element.setAttribute(&quot;class&quot;, &quot;new-class&quot;);</code></pre><ul><li>スタイルの変更：</li></ul><pre><code class="language-javascript">element.style.color = &quot;red&quot;;</code></pre><p></p>

JavaScriptでよく使うDOM操作。要素の取得方法が混乱するのでそれぞれの解説とまとめ。

JavaScript基礎｜よく使うDOM操作(HTML要素の取得・追加・削除・変更)

<h2 id="hccc10902f9">🧠 ざっくり定義</h2><table><tbody><tr><th colspan="1" rowspan="1"><p>用語</p></th><th colspan="1" rowspan="1"><p>意味（カンタンに言うと）</p></th></tr><tr><td colspan="1" rowspan="1"><p><strong>コールバック関数</strong></p></td><td colspan="1" rowspan="1"><p><strong>あとで実行される関数</strong>（引数として渡された関数）</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>高階関数</strong></p></td><td colspan="1" rowspan="1"><p><strong>関数を受け取る or 関数を返す関数</strong></p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>匿名関数</strong></p></td><td colspan="1" rowspan="1"><p><strong>名前のない関数</strong>（一時的・使い捨て）</p></td></tr></tbody></table><h2 id="hc1836c9fb7">🛠例え：<strong>ごはんを食べたあとにすること</strong>（片付け編）</h2><p>誰かに「ごはん食べ終わったら片付けてね」とお願いしたいとする。<br>このとき、「ごはんを食べ終わったら◯◯する」という処理が条件付きの実行になる。</p><h3 id="h3a098d57ee">🍽 やりたいこと（共通処理）</h3><pre><code class="language-javascript">function afterMeal(task) {
  const finishedEating = true; // ごはんを食べ終わったかどうか

  if (finishedEating) {
    task(); // ごはんを食べ終わったら、task（関数）を実行！
  }
}</code></pre><p>ここでafterMealに渡される <code>task</code> は「あとで実行する関数」＝ <strong><span class="highlight">コールバック関数</span></strong><br>この <code>afterMeal</code> は「関数を引数で受け取って実行している」＝<strong><span class="highlight">高階関数</span></strong></p><h3 id="h222e9fc380">✅ 実行してみる！</h3><p><u>🧹 例1：皿を洗う</u></p><p>関数washDishesを作成して、コールバック関数としてafterMeal関数の引数として渡す。</p><pre><code class="language-javascript">function washDishes() {
  console.log(&quot;お皿を洗う&quot;);
}

afterMeal(washDishes); // → 「お皿を洗う」と表示される</code></pre><ul><li><code>washDishes</code> は <strong><span class="highlight">コールバック関数</span></strong></li><li><code>afterMeal</code> は <strong><span class="highlight">高階関数</span></strong></li></ul><p>先ほど作成した関数afterMeal(task)のtaskに、washDishes内の処理が渡っている。afterMealの関数内で行われるtask()の処理の中身は、washDishesの処理となる。</p><p><u>🔧 例2：匿名関数でその場でお願いする</u></p><pre><code class="language-javascript">afterMeal(function () {
  console.log(&quot;テーブルをふく&quot;);
});</code></pre><p>これは <strong>名前のない関数</strong> ＝<strong><span class="highlight">匿名関数（anonymous function）</span></strong><br>その場でしか使わないから、名前はつけずに即座に実行させる。</p><h2 id="h94a0011dd4">🔁 コールバック関数 × 反復メソッド（forEach, map, filter）</h2><p>コールバック関数は下記反復メソッド内で使われたりする。</p><h3 id="h24d06b9504"><code>.forEach()</code> → 配列の各要素に繰り返し処理をする</h3><p>・戻り値なし（配列を返さない）</p><pre><code class="language-javascript">const dishes = [&quot;皿&quot;, &quot;コップ&quot;, &quot;スプーン&quot;];

dishes.forEach(function(dish) {
  console.log(dish + &quot; を洗う&quot;);
});</code></pre><h3 id="hef2551f1aa"><code>.map()</code> → 配列の各要素を加工して新しい配列を作る</h3><p>変換・加工して新しい配列を作ることができ、必ず戻り値が必要となる。</p><pre><code class="language-javascript">const dishes = [&quot;皿&quot;, &quot;コップ&quot;, &quot;スプーン&quot;];

const washedDishes = dishes.map(function(dish) {
  return dish + &quot;（洗った）&quot;;
});

console.log(washedDishes);</code></pre><h3 id="hc59d0caf42"><code>.filter()</code> → 条件に合うものだけを取り出す</h3><p>条件に合う要素だけを抜き出す。戻り値はtrue/false（含めるか否か）を指定する。</p><pre><code class="language-javascript">const onlySpoons = dishes.filter(function(dish) {
  return dish.includes(&quot;スプーン&quot;);
});

console.log(onlySpoons);</code></pre><h2 id="h2b4b1803f3">📝 まとめ：JavaScriptでは「関数」を柔軟に扱えるのが特徴</h2><p>「コールバック関数」「高階関数」「匿名関数」はセットでよく使用される。</p><table><tbody><tr><th colspan="1" rowspan="1"><p>用語</p></th><th colspan="1" rowspan="1"><p>使いどころ</p></th></tr><tr><td colspan="1" rowspan="1"><p><strong>コールバック関数</strong></p></td><td colspan="1" rowspan="1"><p>イベント処理、非同期処理、反復処理など</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>高階関数</strong></p></td><td colspan="1" rowspan="1"><p>汎用的な処理の共通化、柔軟な実行制御</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>匿名関数</strong></p></td><td colspan="1" rowspan="1"><p>一時的な処理、すぐ実行して捨てたい関数に便利</p></td></tr></tbody></table>

それぞれの関数の違いを処理を通して学ぶ

JavaScript基礎｜コールバック関数・高階関数・匿名関数の違いと使いどころ

<h2 id="hcb9975e3c0"> API 通信</h2><p>JavaScriptでは、Web APIとの<strong>通信は非同期</strong>で行われる。Web API は、HTTPを使って通信するAPI のこと。</p><p>つまり、クライアント（ブラウザやアプリ）とサーバーの間でやりとりするAPI。</p><p style="text-align: start">通信は非同期のため、通信の結果（レスポンス）を使いたい場合は、<code>Promise</code> や <code>async/await</code> を使って、データ取得が完了した後に処理を行う」仕組みが必要となる。</p><p style="text-align: start">これをしないと、データ取得を待たずに次の処理に進んでしまうためデータを使う関数内で「undefined」のようにデータが見当たらないエラーとなる。</p><p style="text-align: start">データ取得には<code>Promise</code>チェーンと<code>async/await</code>がある。</p><h3 id="h147dda5722"><code>Promise</code>基本構文</h3><pre><code>const fetchPromise = fetch(
  &quot;https://api.example.com/data&quot;,
);

fetchPromise
  .then((response) =&gt; {
    if (!response.ok) {
      throw new Error(HTTP error: ${response.status});
    }
    return response.json();
  })
  .then((data) =&gt; {
    console.log(data[0].name);
  });</code></pre><p>Promiseチェーンの .then() の中で取得したデータを受け取っている。「.then((〇〇) =&gt; {...}) 」の 〇〇 の名前は <code>data</code> でも <code>info</code> でも <code>result</code> でも任意の名前をつけられる。</p><hr><h3 id="hc8659dff8b"><code>async/await</code>基本構文</h3><pre><code class="language-javascript">async function getData() {
  try {
    const res = await fetch(&quot;https://api.example.com/data&quot;);
    const data = await res.json();
 
  } catch (error) {
    console.error(&quot;データ取得エラー:&quot;, error);
  }
}

getData(); // 関数を呼び出して通信を実行</code></pre><h2 id="h1058755d1e">webAPIを叩くとは？</h2><p>「webAPIを叩く」とはプログラミング上から外部とデータのやり取りをすることを指す。</p><h3 id="h91351e23da">APIを叩いてみる</h3><p>fetch( )メソッドを使用してAPIを叩く。<br>fetch( )はWindowオブジェクトにあるメソッドで、サーバー上にあるデータを取得することができる。非同期でリクエストを発行し、そのレスポンスを取得する。</p><p><span class="highlight">fetch( )をしたらpromiseオブジェクトが返ってくる。</span></p><p>promiseオブジェクトはそのままでは使用できないので、async関数を使用する。（asyncをつけたらfetchの前にawaitを置く必要がある。）</p><pre><code class="language-javascript">async function getData() {
    const res = await fetch(&quot;https://api.example.com/data&quot;);</code></pre><p>async/awaitを使用すると、受け取るデータがpromiseオブジェクトからresponseオブジェクトに変わる。</p><p>responseオブジェクトにはデータの中身と、asyncが成功したか失敗したかが含まれる。</p><p>受け取ったResponseオブジェクトを、json( )メソッドを使用してJSON形式に変換する。</p><pre><code class="language-javascript">async function getData() {
    const res = await fetch(&quot;https://api.example.com/data&quot;);
　　 const data = await res.json();
  }
}</code></pre><p>※上記ではデータ取得エラー時が入っていないため、文頭の<code>async/await</code>基本構文のtry/catchを使用する。</p><h2 id="h141674c6fb">async/await以外のAPIの叩き方</h2><h3 id="h7713a652cf">①.then( )メソッドを使う</h3><pre><code class="language-javascript">function getData(){
  fetch(&quot;https://api.example.com/data&quot;)
    .then(function(res){
      return res.json();
    })
    .then(function(users){
      console.log(users);
    })
}

getData();</code></pre><h3 id="h82d00767b1">②XMLHttpRequest()</h3><pre><code class="language-javascript">XMLHttpRequest() 

function getData() {
  const xhr = new XMLHttpRequest();
  xhr.open(&quot;GET&quot;,&quot;https://api.example.com/data&quot;);
  xhr.responseType = &quot;json&quot;;
  xhr.send();
  xhr.onload = function(){
    console.log(xhr.response);
  }
}

getData();
</code></pre><p>⚠️XMLHttpRequestは古いのであまり使用されていない。</p><h2 id="h063460226d">⭐️練習：イベント発火でAPIを叩いて取得したデータを<strong>forEachで表示させる</strong></h2><p><u>📝やりたいこと</u></p><p>・ボタンをクリックしたら、json公式サイトのusersデータの中からユーザーネームのみ取得する</p><pre><code class="language-javascript">// DOM
const button = document.getElementById(&quot;addBtn&quot;);
const lists = document.getElementById(&quot;lists&quot;);

//関数（メソッド）
function addList(user) {
  const list = document.createElement(&quot;li&quot;);
  list.innerText = user.name;
  lists.appendChild(list);        
}

async function getUsers(){
  const res = await fetch(&quot;https://jsonplaceholder.typicode.com/users&quot;);
  const users = await res.json();
  return users;
}

async function listUsers(){
  const users = await getUsers();
  users.forEach(addList);
}

//イベント
button.addEventListener(&apos;click&apos;, listUsers);</code></pre><p></p>

JavaScriptのAPI通信について。API叩くとよく聞くがその内容は？

JavaScript基礎｜API通信「webAPIを叩く」とは

<h2 id="h6754b791b7">🛠️パッケージ管理システム</h2><p>パッケージ管理システムは、<strong><span class="highlight">コードを使いやすく、効率的に管理するための仕組み</span></strong>。依存関係（dependency） の管理を簡単にするために重要。</p><p>多くのパッケージ（ライブラリ）は、他のパッケージに依存して動作している。<br>パッケージ管理システムがない場合、依存関係を自分でインストールや管理をすることになる。</p><p>例えば、AというパッケージがBとCに依存していた場合、npmはBとCも自動的にインストールしてくれる。これを手動でやるととても大変。</p><p>インストール漏れやバージョン衝突を防ぐために、パッケージ管理システムが不可欠となっている。</p><p>✅JavaScriptでは<strong>NPM</strong>（Node Package Manager）、PHPでは<strong>Composer</strong>がそれぞれパッケージ管理システムとして使用されている。</p><hr><h2 id="h943c9e3697">🧵バンドラー（Bundler）</h2><p>JavaScriptで複数のモジュールを使用する場合、一つ一つを読み込んでいると不可がかかってしまう。<br>その他にも、a.jsのファイルの値や関数を元に、b.jsを作成していた場合、a.jsを書き換えるとb.jsにバグが出る。<br>また、ファイルは上から読み込まれているため、読み込む順番を変えてもとバグが生じてしまう。</p><p>そこで、複数のファイルを一つのファイルにまとめてくれるバンドラーを使用することに。依存関係を解決してブラウザへのリクエストを減らしてパフォーマンスを上げてくれる。</p><p>現在もっとも広く使われているJavaScriptのバンドルツールが<strong><span class="highlight">Webpack</span></strong>。</p><h3 id="h99731468a9"><strong>Webpack</strong></h3><ul><li>ブラウザで読み込ませられない拡張子をバンドルしてブラウザで読み込めるようにする</li><li>依存関係を解消する</li><li>JavaScriptだけでなく、.css, .scss, .png などもまとめて扱える<p></p></li></ul><hr><h2 id="hf24424760f">♻️コンパイル</h2><p>便利な機能を使ってコーディングをした際に、書いたコードがブラウザで動かない。それをブラウザで動く形に変換することをコンパイルという。変換したコードはい通常通り、scriptタグで読み込める。<br>※ コンパイル（厳密には「トランスパイル」とも言う）とは、同じ言語間で書き換えること（例：新しいJS → 古いJS）</p><h3 id="h337926bd96">Babel</h3><p>Es2015（新しいJavaScriptの文法）で書かれたコードを、従来の環境でも動くように古いJavaScriptに変換するコンパイラ。（例：<code>let</code> や <code>async/await</code> などの新しい文法を、古い書き方（<code>var</code> や コールバック）に変えるのもコンパイルの役割）</p><p>webpackと連携して動くのが一般的。</p><hr><h3 id="hd3e4beee88">🧠ポイント</h3><p>🔄 JavaScriptの世界では「モジュール化 → バンドル → コンパイル」が定番の流れになっている。<br>npmでWebpackやBabelなどのパッケージを管理して、Webpackがファイルをまとめて、Babelが古いブラウザにも対応するように書き換えている。</p><hr><h2 id="h09fd5f226c">🔨ビルド</h2><h3 id="h9e90746738">ビルドとは「異なる環境でも同じように動くようにするための事前準備」</h3><p>JavaScriptの開発では、開発環境と本番環境でブラウザの仕様や挙動が違うことがある。そのため、どんな環境でも同じようにコードが動くようにするための事前準備が必要。この準備のことを「ビルド」と呼ぶ。</p><p><u>具体的なビルド</u></p><p>・npmで必要なツールやライブラリを管理<br>・webpackでモジュールやファイルをまとめる<br>・Babelで古いブラウザでも動くように変換（トランスパイル）する</p><p>→誰のブラウザでもちゃんと動くコードが完成🎉<br><br><strong><span class="highlight">書く時は快適コードで書く→ビルドする→ブラウザで動く</span></strong></p><h2 id="h6356bbf039">⭐️まとめ</h2><p>moduleの誕生からJavaScriptは、不便さを改善させより安定した開発ができるように進化していったことが分かった。</p><blockquote><p>フロントエンド開発は、「必要なものだけを最小構成で取り出す」ことが重要。<br>便利なツールに頼りすぎず、「なぜ必要か」を知ることが、良いコードを書く第一歩。</p></blockquote>

パッケージ管理、バンドラー、ビルドそれぞれの用語の解説と重要性のまとめ

JavaScript基礎｜パッケージ管理システム(NPM)、モジュール管理、ビルドの仕組み

<h2 id="hbad6c1280d">🌀JavaScriptのグローバル名前空間の汚染</h2><p>プロジェクトが大きくなってくると一つのファイルにたくさんのコードが溜まってしまう。<br>それを解決するために、ファイルを分けることにした。</p><p>しかし、JavaScriptの名前空間（変数の命名）は一つだけ。<br>複数ファイルで同じ名前の変数や関数を定義すると、後から読み込まれたファイルの内容で上書きされてしまう。</p><pre><code>// fileA.js
var counter = 0;

// fileB.js
var counter = 100;

console.log(counter); // どちらのcounterか分からない</code></pre><p>この名前の衝突（名前空間の衝突）を解決するために、「modules（モジュール）」が生まれた。</p><h2 id="h41b170c7b9">🚀CommonJSの登場（モジュールのはじまり）</h2><p>JavaScriptはもともとブラウザで動く言語で、ファイル間の読み込み（モジュール機能）はなかった。<br>そのため、スクリプトが増えるとさきほどの「名前空間の衝突」が発生。<br>複数人で同時作業をするには名前の重複は避けることが難しい。</p><p style="text-align: start">そこで、Node.js<strong> </strong>の登場にあわせて作られたのが<strong><span class="highlight">CommonJS</span></strong>という独自仕様のモジュールシステム。</p><h3 id="h872115c7c8">CommonJS の特徴</h3><ul><li><code>require()</code> を使ってモジュールを読み込む</li><li><code>module.exports</code> で値を外に公開する</li><li>同期的に読み込む（ファイルをその場で読み込む）</li><li>Node.js 環境で標準的に使われたモジュール形式</li></ul><pre><code class="language-javascript">// add.js
function add(a, b) {
  return a + b;
}
module.exports = add;

// main.js
const add = require(&apos;./add&apos;);
console.log(add(2, 3)); // → ５が出力される</code></pre><h3 style="text-align: start" id="h5b39aa6c31">CommonJSの制限</h3><p>IE などの旧ブラウザは ES Modules を理解できなかったため、ブラウザではそのまま使用することができない。<br>そのため、開発時にモジュールを使っても、本番では1ファイルにまとめる必要があった。→これが「<strong><span class="highlight">bundle（バンドル）</span></strong>」という</p><p>バンドルについては下記記事を参照</p><p><a href="/blogs/js-npm-module-bundler-build">JavaScript基礎｜パッケージ管理システム(NPM)、モジュール管理、ビルドの仕組み</a></p><h2 id="h858f8b2df2">❓ES Modulesの登場（モジュールの進化）</h2><p>ES2015（ES6） で JavaScript に<strong>公式のモジュール仕様</strong>が追加された。ブラウザもネイティブ対応するようになっり（IEは非対応）、<code>import</code> / <code>export</code>でブラウザでモジュールが使用できるようになった。</p><h3 id="h9379c3230f">モジュール同士のデータのやり取り</h3><p><u>1. user.js（データの定義）</u></p><pre><code class="language-javascript">// user.js
export const name = &quot;いぬ&quot;;</code></pre><p><strong>name</strong> という変数を定義し、他のモジュールでも使えるように <code>export</code>（外部公開）している</p><p><u>2. index.js（データの利用）</u></p><pre><code class="language-javascript">import { name } from &quot;./user.js&quot;;

document.body.textContent = name;</code></pre><p>user.js から <strong>name</strong> を <code>import</code>（読み込み）して利用できる。このファイルが<strong>メインの実行ファイル</strong>になる。</p><p><u>3. index.html（HTMLファイル）</u></p><p>スクリプトタグにtype=“module”といれることで、名前空間がお互いに影響しなくなる。</p><pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;ja&quot;&gt;
&lt;head&gt;
  &lt;meta charset=&quot;UTF-8&quot; /&gt;
  &lt;!-- モジュールとして読み込む --&gt;
  &lt;script type=&quot;module&quot; src=&quot;./index.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;&lt;/body&gt;
&lt;/html&gt;</code></pre><p>モジュール化したものは遅延評価を受けることになる。type=&quot;module&quot;とつけると、ブラウザは1番最後に読み込みをする。（例えhead内に記述をしたとしても最後に読み込む。）</p><h2 id="had84c50e3b">⭐️<code>import</code> の2つの書き方</h2><p>importの書き方には<strong><span class="highlight">named（名前付き）</span></strong>と<strong><span class="highlight">default（デフォルト）</span></strong>がある。</p><h3 id="h23893f3cc1">🔹 1. 名前付き（Named Export / Import）</h3><p>📝特徴：</p><ul><li>複数の値を export できる</li><li>必ず 同じ名前で import しなければならない</li></ul><p><u>animal.js</u></p><pre><code class="language-javascript">export const inu = &quot;いぬ&quot;;
export const neko = &quot;ねこ&quot;;</code></pre><p><u>main.js</u></p><pre><code class="language-javascript">import { inu, neko } from &quot;./animal.js&quot;;

document.body.innerHTML = `
  &lt;p&gt;好きな動物１：${inu}&lt;/p&gt;
  &lt;p&gt;好きな動物２：${neko}&lt;/p&gt;
`;</code></pre><h4 id="h097cb55d67">💡 ポイント</h4><ul><li><code>export const</code> で複数のデータを公開できる</li><li><code>{ inu, neko }</code> のように <strong>名前を一致させて</strong> import する</li></ul><hr><h3 id="hc1c47c5019">🔹 2. デフォルト（Default Export / Import）</h3><p>📝特徴：</p><ul><li>モジュールにつき 1つだけ export できる</li><li> import 時に 自由な名前 をつけられる</li><li>import 時に{}（中かっこ）を使わない</li></ul><p><u>favorite.js</u></p><pre><code class="language-javascript">export default &quot;ねこ&quot;;</code></pre><p><u>main.js</u></p><pre><code class="language-javascript">import ichiban from &quot;./favorite.js&quot;;

document.body.textContent = `一番好きな動物は：${ichiban}`;</code></pre><h4 id="h097cb55d67">💡 ポイント</h4><ul><li><code>export default</code> で1つだけエクスポート</li><li>import 時は <strong>好きな名前（例：ichiban）</strong> をつけてもいい</li></ul><hr><h2 style="text-align: start" id="h3f634b9461">使い分け</h2><ul><li><strong>named</strong>：いろんな関数や定数を一括管理（便利・拡張しやすい）</li><li><strong>default</strong>：ファイルの主役を1つにしたい（読みやすく保守しやすい）</li></ul><h2 id="he9b423bf1e">✅現代での主な使い方（フロントエンド）</h2><h3 id="hfa41f1e783">🔹 ブラウザ（フロントエンド）</h3><ul><li><strong>ESModules</strong> が主流（<code>&lt;script type=&quot;module&quot;&gt;</code> で読み込む）</li><li>React / Vue などの開発時は Webpack や Vite を使って モジュールをバンドル</li></ul><p><u>✔ ESModulesの使い方（ブラウザ）</u></p><pre><code class="language-html">&lt;!-- index.html --&gt;
&lt;script type=&quot;module&quot; src=&quot;./main.js&quot;&gt;&lt;/script&gt;</code></pre><pre><code class="language-javascript">// animal.js
export const name = &quot;いぬ&quot;;

// main.js
import { name } from &quot;./animal.js&quot;;
document.body.textContent = name;</code></pre><h3 id="hcf83e1357e"></h3>

JavaScriptのモジュールについて、なぜ必要なのかどのように使用するかまとめ

JavaScript基礎｜モジュールとは？必要性と使い方のまとめ

<h2 id="hec38a7c3dd">✅JavaScriptの 3つの基本ダイアログメソッド</h2><table><tbody><tr><th colspan="1" rowspan="1"><p>メソッド</p></th><th colspan="1" rowspan="1"><p>動作</p></th></tr><tr><td colspan="1" rowspan="1"><p><code>alert(s)</code></p></td><td colspan="1" rowspan="1"><p>文字列sを表示した警告ダイアログを出す。</p><p>okをおすと閉じる。</p></td></tr><tr><td colspan="1" rowspan="1"><p><code>confirm(s)</code></p></td><td colspan="1" rowspan="1"><p>文字列sを表示した確認ダイアログを出す。</p><p>okを押すとtrue、キャンセルを押すとfalse</p></td></tr><tr><td colspan="1" rowspan="1"><p><code>prompt(s, v)</code></p></td><td colspan="1" rowspan="1"><p>文字列sを表示して、値がvのダイアログを出す。</p><p>okを押すと入力された文字列が、キャンセルを押すとnullが返る</p></td></tr></tbody></table><p><u>例：飲み物の注文をダイアログで案内する</u></p><pre><code class="language-javascript">const order = prompt(&apos;注文を入力してください。&apos;, &apos;コーヒー&apos;);

if (order === null) {
  alert(&apos;またのお越しをお待ちしております&apos;);
} else {
  const takeout = confirm(`${order}ですね。店内でお召し上がりですか？`);
  if (takeout) {
    alert(&apos;席をご用意しますのでお待ちください&apos;);
  } else {
    alert(&apos;お持ち帰りですね&apos;);
  }
}</code></pre><ul><li><code>prompt</code>：お客さんに注文を聞く</li><li><code>confirm</code>：注文内容を確認し、店内か持ち帰りかを選んでもらう</li><li><code>alert</code>：結果に応じて対応を伝える</li></ul><h2 id="h0fe968b6b6">コールバック関数 × ダイアログで処理を分ける</h2><p><u>例：ユーザーに確認して、OKなら削除処理</u></p><pre><code class="language-javascript">function confirmed(fn){
  const input = window.prompt(&quot;削除しますか?&quot;);
  if (input === &quot;はい&quot;){
    fn();
  }
}

confirmed(function(){
  console.log(&quot;削除済み&quot;);
});</code></pre><h2 id="h0737170efe">✅ Windowメソッド + 関数の使いどころまとめ</h2><table><tbody><tr><th colspan="1" rowspan="1"><p>要素</p></th><th colspan="1" rowspan="1"><p>使い方</p></th><th colspan="1" rowspan="1"><p>よくある活用シーン</p></th></tr><tr><td colspan="1" rowspan="1"><p><code>alert()</code></p></td><td colspan="1" rowspan="1"><p>情報の通知</p></td><td colspan="1" rowspan="1"><p>エラーメッセージなど</p></td></tr><tr><td colspan="1" rowspan="1"><p><code>confirm()</code></p></td><td colspan="1" rowspan="1"><p>確認</p></td><td colspan="1" rowspan="1"><p>「本当に削除しますか？」など</p></td></tr><tr><td colspan="1" rowspan="1"><p><code>prompt()</code></p></td><td colspan="1" rowspan="1"><p>ユーザー入力を受け取る</p></td><td colspan="1" rowspan="1"><p>注文、名前入力など</p></td></tr><tr><td colspan="1" rowspan="1"><p>コールバック関数</p></td><td colspan="1" rowspan="1"><p>処理をあとで実行</p></td><td colspan="1" rowspan="1"><p>条件が整ったら実行など</p></td></tr><tr><td colspan="1" rowspan="1"><p>高階関数</p></td><td colspan="1" rowspan="1"><p>関数を受け取る関数</p></td><td colspan="1" rowspan="1"><p>条件付き処理のカプセル化</p></td></tr></tbody></table>

JavaScriptのよく使われるWindowのメソッドをまとめてみた

JavaScript基礎