「ネットワーク系のプログラムを書いてみたい」「IPアドレスって聞いたことはあるけど仕組みがよくわからない」
この記事は、そんな方に向けて書きました。Lapis Tech Toolsに公開している IPアドレス・サブネット計算機 を題材に、「どんな問題を解決するために作ったのか」「コードはどう動いているのか」を最初から丁寧に解説します。
プログラミングの経験がなくても大丈夫です。「なぜこうしたのか？」を常に問いながら読み進めてください。
1. そもそもIPアドレスって何？
インターネットやLANに接続されているすべての機器（スマホ・PC・ルーター等）には、IPアドレスという「住所」が割り当てられています。
192.168.1.10 のように、0〜255の数字を4つドット（.）でつなげた形式が一般的です（IPv4という規格です）。
なぜ4つの数字なのか？ IPアドレスは内部的に「32桁の2進数（0と1）」で表現されています。32桁を8桁ずつ4つに区切って、人間が読みやすいよう10進数に変換したものが
192.168.1.10という形式です。コンピューターは0と1しか扱えないため、すべての情報は最終的にこの形式で処理されます。
2. サブネットとは？「ネットワークを区切る」という考え方
100台のPCが同じネットワークに接続されているとします。1台がデータを送信するたびに、他の99台全員にその通知が届いたとしたら、ネットワークは渋滞を起こしてしまいます。
これを防ぐために、大きなネットワークを**サブネット**（小さなグループ）に分割します。同じグループの中でだけ直接やり取りし、別グループへはルーターを経由する、という仕組みです。
なぜ分割が必要なのか？ 規模の大きいネットワークほど、分割しないとデータが全員に届く「ブロードキャスト」が頻発し、速度が低下します。サブネットはネットワークの「交通整理」です。
3. CIDR表記とは？「/24」の意味
192.168.1.0/24 のように、IPアドレスの後ろに /数字 がついた書き方を CIDR（サイダー）表記 といいます。
この /24 という数字は「32桁のうち、先頭24桁がネットワークを表す部分で、残り8桁がそのネットワーク内の個々の機器を表す部分」という意味です。
192.168.1.0/24 の場合
11000000.10101000.00000001.00000000
←────── ネットワーク部（24桁）──────→←機器部(8桁)→残り8桁で表せる数は 2の8乗 = 256通り。そのうち先頭（ネットワークアドレス）と末尾（ブロードキャストアドレス）は予約済みのため、実際に使えるのは254台分になります。
4. このツールが計算していること
IPアドレス・サブネット計算機 は、CIDRアドレスを入力すると以下の4つを瞬時に算出します。
| 計算結果 | 意味 |
|---|---|
| ネットワークアドレス | そのサブネットの「先頭」アドレス |
| ブロードキャストアドレス | そのサブネットの「末尾」アドレス。全員への一斉送信に使う |
| サブネットマスク | どこまでがネットワーク部かを示すマスク値 |
| 利用可能なホスト数 | 実際に機器に割り当てられるアドレスの数 |
手計算すると2進数への変換が必要で非常に面倒なこの計算を、JavaScriptで自動化しています。
5. JavaScriptのコードを見てみよう
実際の計算処理の核心部分を見てみましょう。難しそうに見えますが、やっていることはシンプルです。
// CIDR（例: 24）からサブネットマスクを計算する
function cidrToNetmask(cidr) {
// 32桁の2進数をすべて1にする（= 4294967295）
// そこから右側(32-cidr)桁を0にする
return (0xFFFFFFFF << (32 - cidr)) >>> 0;
}
// ネットワークアドレスを計算する
function calcNetworkAddress(ipNum, netmask) {
// IPアドレスとサブネットマスクの「AND演算」
return (ipNum & netmask) >>> 0;
}
// ブロードキャストアドレスを計算する
function calcBroadcast(networkAddr, netmask) {
// サブネットマスクを反転（0と1をひっくり返す）してORをとる
return (networkAddr | (~netmask >>> 0)) >>> 0;
}「&」や「|」って何？ビット演算とは
&は AND（アンド）演算、|は OR（オア）演算 といいます。これらは数字を2進数で比較して結果を返す演算子です。
- AND: 両方が1のときだけ1になる（
1 & 1 = 1、1 & 0 = 0）- OR: どちらかが1なら1になる（
1 | 0 = 1、0 | 0 = 0）サブネットマスクは「ネットワーク部が1、機器部が0」という2進数です。IPアドレスとAND演算すると、機器部が強制的に0になり、ネットワークアドレスが求まります。まるでマスク（仮面）で機器部を隠すイメージです。
6. IPアドレスを「数値」に変換する処理
JavaScriptにIPアドレスの文字列（"192.168.1.10"）をそのまま渡しても計算できません。まず数値に変換する必要があります。
function ipToNumber(ip) {
// "192.168.1.10" → [192, 168, 1, 10] に分割
const parts = ip.split('.');
// 4つの数字を組み合わせて32ビットの整数に変換
// 192を24ビット左にシフト + 168を16ビット左にシフト + ...
return ((parts[0] << 24) | (parts[1] << 16) | (parts[2] << 8) | parts[3]) >>> 0;
}
function numberToIp(num) {
// 逆の変換：32ビット整数 → "192.168.1.0" の文字列に戻す
return [
(num >>> 24) & 255,
(num >>> 16) & 255,
(num >>> 8) & 255,
num & 255
].join('.');
}なぜこんな変換が必要なのか？
コンピューターは2進数で計算するため、IPアドレスも「32ビットの整数」として扱うのが最も効率的です。文字列のまま扱おうとすると、4つのパーツそれぞれを別々に計算しなければならず、コードが複雑になります。一度数値に変換してしまえば、ビット演算で一気に計算できます。
7. UIはどう作ったか
ツールのUI（見た目・インターフェース）は、TailwindCSS というCSSフレームワークで構築しています。
例えば入力欄のスタイルはこのように書いています：
<input
type="text"
id="ip-address"
value="192.168.1.10"
class="w-full px-4 py-3 border border-gray-300 rounded-lg text-lg font-mono text-center"
/>w-full（横幅100%）、px-4 py-3（内側の余白）、rounded-lg（角を丸く）、font-mono（等幅フォント）といったクラス名をそのままスタイルとして指定できるのがTailwindCSSの特徴です。
なぜTailwindCSSを選んだのか？
通常のCSSでは、スタイル定義を別ファイルに書いてクラス名で紐付けます。小規模なツールページでは、このファイルを行き来するのが面倒です。TailwindCSSならHTMLと一箇所に書けるため、1ページあたりの制作スピードが大幅に上がります。Lapis Tech Toolsのすべてのページがこの方式で作られています。
8. なぜブラウザだけで完結するのか
このツールを使うとき、データはどこにも送信されません。あなたのブラウザ（PC・スマホ）の中だけで計算が完結します。
これは「サーバーサイド処理なし」で設計しているからです。
一般的なWebサービスの場合:
あなたのブラウザ → サーバーに送信 → サーバーで計算 → 結果を返す
Lapis Tech Toolsの場合:
あなたのブラウザ → ブラウザ内で即計算 → 即表示（通信なし）なぜこの設計にしたのか？
3つの理由があります。
- 速度: 通信の往復がないため、入力した瞬間に結果が出ます。
- プライバシー: 入力した情報がどこにも送られないため安全です。
- コスト: サーバーが不要なため、運用コストがほぼゼロです。
JavaScript（プログラミング言語）はブラウザの中で動く言語のため、このような完全オフライン動作が可能です。Lapis Tech ToolsのBase64エンコーダーやJSONフォーマッターも同じ設計思想で、すべてブラウザだけで動作します。
9. まとめ：一つのツールの中に詰まっている知識
IPアドレス計算機という一見シンプルなツールの裏側には、こんな技術が使われていました。
- コンピューターの基礎: 2進数・ビット演算（このビット演算の考え方はchmodパーミッション計算機でも使われています）
- ネットワークの知識: IP・サブネット・CIDR
- JavaScript: 型変換・ビット演算・DOM操作
- UI設計: TailwindCSSによる実装・UXの考え方
- 設計思想: ブラウザだけで完結させる理由と方法
これらはすべて、エンジニアを目指す上で必ず通る道です。「ツールを作りながら学ぶ」というアプローチは、概念が実際に動くものと結びつくため、非常に効率的な学習方法です。
実際にツールを触りながらこの記事を読み返すと、理解がさらに深まります。ぜひ試してみてください。
ツール解説シリーズ：今ここ（第1回・IP計算機） | 第2回・Base64エンコーダー | 第3回・chmod計算機 | 第4回・JSONフォーマッター | 第5回・Cronジェネレーター
関連記事
CHECK IT OUT
サブスク加入者限定の
コンテンツを配信中
- 毎月のAI・自動化トレンドレポート
- クリエイター向け業務効率化テンプレート
- ツール選定・SaaS比較まとめ（限定公開）
「これ自動化できないかな？」
そのアイデア、ITで実現できます。
業務の自動化・お客様向けツール開発・AI活用まで、クリエイター・個人事業主専門のITコンサルタントが対応します。まずは気軽にご相談ください。