Git のブランチの違いまとめ

Git のブランチの違いについて理解するためにまとめました。

ブランチの種類

Git には以下の種類のブランチがある。

• ローカルブランチ
• リモートブランチ
• リモート追跡ブランチ

ローカルブランチ

ローカルブランチは、PC 内のブランチ。git branchもしくはgit checkout -bで作られる。

.git ディレクトリ内でいうと、.git/refs/headsに保存されている。

リモートブランチ

リモートブランチは、Github などのリモートリポジトリに存在するブランチで、git pushで作られる。

リモートに存在するので、.git ディレクトリ内には含まれない。

リモート追跡ブランチ

リモート追跡ブランチは、リモートブランチをローカルで追跡するためのブランチで、git push -uで作られる。

git push -u origin [branch]

このコマンドはまだリモートリポジトリに存在しないローカルブランチをリモートにプッシュするときに使うコマンドで、これによって、リモートリポジトリにorigin/branchというリモートブランチが作られ、さらにローカルブランチがそのリモートブランチを追跡するように設定される。

-uオプションは上流ブランチ（upstream branch）を設定するために使用され、これによりその後のgit pushやgit pullではリモート名（例：origin）とブランチ名（例：main）を省略することができる。

リモート追跡ブランチは.git/refs/remotes/origin/に保存されている。

以下のコマンドでリモートブランチの状態を確認できる。

git branch -r

  origin/feature/signout
  origin/feature/signup
  origin/main

origin とは

origin とは、デフォルトのリモートリポジトリの名前。ローカルリポジトリを作成した後に最初にリモートリポジトリを設定すると、origin がデフォルト名として割り当てられる。

プルリクエストでの開発のブランチの流れ

以下のプルリクエストでの開発の流れで、ブランチがどのように変更するかを確認する。

1. ローカルリポジトリが作られる
2. main ブランチから開発用のブランチを切る
3. コードが変更される
4. コードがステージに追加される
5. コードがコミットされる
6. コードがプッシュされる
7. プルリクエストが作られる
8. レビューが行われ、プルリクエストがマージされる
9. リモートリポジトリの内容をローカルに取り込む

1. ローカルリポジトリが作られる

git initでローカルリポジトリが作られる。

このときブランチは以下の状態。

• ローカルブランチ: main
• リモートブランチ: なし
• リモート追跡ブランチ: なし

2. main ブランチから開発用のブランチを切る

ローカルリポジトリが作られた状態では、main ブランチにいるので、main ブランチから開発用のブランチ（例: feature）を切り、ブランチを切り替える。

git checkout -b feature

ブランチは以下の状態。

• ローカルブランチ: feature
• リモートブランチ: なし
• リモート追跡ブランチ: なし

3. コードが変更される

コードが変更された状態ではブランチの変更はなし。

4. コードがステージに追加される

git addによってコードがステージに追加されてもブランチの変更はなし。

5. コードがコミットされる

git commitによってコードがコミットされてローカルリポジトリに保存されても、ブランチの変更はなし。

6. コードがプッシュされる

開発用のブランチをリモートリポジトリにプッシュするために以下のコマンドを実行する。

git push origin feature

このとき、origin というリモートリポジトリに、feature というリモートブランチが作られるので、ブランチは以下の状態になる。

• ローカルブランチ: feature
• リモートブランチ: origin/feature
• リモート追跡ブランチ: origin/feature

7. プルリクエストが作られる

プッシュが行われると、feature から main へのプルリクエストを作られる。

ブランチの変更はない。

8. レビューが行われ、プルリクエストがマージされる

レビューが行われるとプルリクエストを main にマージする。これによってリモートリポジトリが最新の状態になる。

このときブランチは以下の状態になる。

• ローカルブランチ: feature
• リモートブランチ: origin/main に origin/feature が統合される
• リモート追跡ブランチ: origin/main

9. リモートリポジトリの内容をローカルに取り込む

リモートリポジトリは変更されたが、ローカルには反映されていない状態のなので、リモートリポジトリの内容をローカルに取り込む必要がある。

ローカルに取り込むにはgit checkout mainで main ブランチに移動して、git fetchか、git pullを実行する。

git fetchの場合はリモートブランチの内容がリモート追跡ブランチに取り込まれるが、ローカルにはマージされていないので、以下の状態になる。

• ローカルブランチ: main（未マージ）
• リモートブランチ: origin/main（最新）
• リモート追跡ブランチ: origin/main（最新）

git pullの場合はマージまで行われるので、以下の状態になる。

• ローカルブランチ: main（最新）
• リモートブランチ: origin/main（最新）
• リモート追跡ブランチ: origin/main（最新）

Next.js の Image についてまとめ

Next.js で画像を表示するために使う Image コンポーネントについてまとめました。

この記事は以下の構成になっています。

• Image とは
• Image の特徴
• img タグと比較したメリット
• Image の使い方

Image とは

Image コンポーネントとは、Next.js で画像を効率的に扱うための組み込みコンポーネントです。
パフォーマンスやユーザーエクスペリエンスの向上を目的に設計されており、従来の タグでは実現しにくい機能が多く含まれている。

Image の特徴

Image コンポーネントには、以下の特徴がある。

自動的な画像最適化

• 画像を適切なフォーマット（例: WebP）に自動変換し、サイズを圧縮する
• ユーザーのデバイスや画面解像度に応じて、最適な画像サイズを提供する

遅延読み込み (Lazy Loading)

• ページロード時にすべての画像を読み込むのではなく、ユーザーがスクロールして画像が表示されるタイミングで読み込む
• ページの初期ロードを高速化し、リソースを効率的に使用する

レスポンシブデザイン対応

• Image コンポーネントは、デバイスの幅や解像度に応じて適切な画像サイズを動的に選択する
• 開発者は画像の幅と高さを指定するだけで、レスポンシブ対応が自動的に行われる

img タグと比較したメリット

Image コンポーネントは、従来の タグと比較して以下のメリットがある。

• 自動最適化
• Lazy Loading
• レスポンシブの簡単な実装
• セキュリティと信頼性

自動最適化

手動で画像を圧縮したり、最適化ツールを使う必要がない。 ユーザーの回線速度やデバイスに合わせて適切な画像が提供される。

Lazy Loading

タグで遅延読み込みを実現するには JavaScript やライブラリが必要ですが、Image では標準機能としてサポートされている。

レスポンシブ画像の簡単な実装

タグでは、複数のサイズを手動で用意する必要があるが、Image では自動で処理される。

セキュリティと信頼性

Image はデフォルトで外部リソースを制限し、安全性が高い。

Image の使い方

Image コンポーネントは以下のように使用する。

import Image from 'next/image'

export default function Example() {
  return (
    <Image
      src="/images/example.jpg"
      alt="Example Image"
      width={600}
      height={400}
    />
  )
}

以下のプロパティが必須であり、指定しないとエラーになる。

• src - 画像のパスまたは外部の URL を指定する
• alt - 画像の代替テキストを指定する
• width - 画像の幅をピクセル単位で指定する
• height - 画像の高さをピクセル単位で指定する

src には public ディレクトリ以下に配置した画像のパスを指定する。

外部の画像を使う場合

外部の画像を使う場合は、next.config.js ファイルでドメインを許可する必要がある。

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'example.com',
        port: '',
        pathname: '/account123/**',
        search: '',
      },
    ],
  },
}

この設定によって許可されたドメイン以外から画像を読み込むことはできない。

priority

priority という特定の画像を優先的に読み込むよう指示するためのプロパティを指定することで、遅延読み込みされず、初期レンダリング時にすぐ読み込まれるようになる。

import Image from 'next/image'

export default function Example() {
  return (
    <Image
      src="/images/example.jpg"
      alt="Example Image"
      width={600}
      height={400}
      priority
    />
  )
}

ファーストビューに表示される画像（ヒーローイメージやロゴ）やページの最初に重要な役割を果たす画像に指定する。

Next.js の Head についてまとめ

Next.js での Head についてまとめました。

この記事は以下の構成になっています。

• Head
• 基本的な使い方
• 全ページ共通の設定

Head

Next.js では、HTML のタグの中身を動的に操作するために、next/head モジュールが提供されている。これにより、各ページごとに異なるメタ情報やタイトル、外部リソースのリンクを簡単に設定することができる。

基本的な使い方

は通常、以下のようにページコンポーネントでインポートして使う。

import Head from 'next/head'

export default function Home() {
  return (
    <>
      <Head>
        <title>ホームページタイトル</title>
        <meta name="description" content="このページの説明" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <h1>Home</h1>
    </>
  )
}

このようにそれぞれのページで個別のの設定を行うことができる。

全ページ共通の設定

全ページ共通の設定は _document.tsx ので行う。

import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html lang="en">
      <Head>
        <link rel="stylesheet" href="https://example.com/global-styles.css" />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

同じタグが複数ある場合は後からレンダリングされたものが優先されるので、全ページ共通のを設定した上で、個別のページでを使うことで効率的にの内容を設定できる。

Next.jsの _document と _app についてまとめ

Next.js の Page Router での _document.tsx、 _app.tsx の役割とコードの意味についてまとめました。

_document.tsx

_document.tsx は、Next.js アプリの HTML ドキュメント全体をカスタマイズするために使われるファイル。

主に、やタグをカスタマイズしたり、追加のメタデータや外部リンク（例えば、フォントやスタイルシート）を指定することができる。

デフォルトでは以下の内容。

import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html lang="en">
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

Htmlは、 タグをカスタマイズするためのコンポーネント。

Headは、 タグ内にカスタム要素を追加するためのコンポーネント。

Mainは、各ページコンポーネントがレンダリングされる部分で、ページで定義された内容が挿入される。

NextScriptは Next.js が自動的に挿入するスクリプト（クライアントサイドの JavaScript）をレンダリングする。

_document.tsx はサーバーサイドで読み込まれるので、サーバーサイドレンダリングの場合はリクエストごとに読み込まれるが、クライアントサイドレンダリングでは再読み込みされず、既存の HTML が使われる。

_app.tsx

_app.tsx は、Next.js アプリケーション全体のルートコンポーネント。全ページに共通の設定やレイアウト、状態管理を行うために使われる。

デフォルトでは以下の内容。

import '@/styles/globals.css'
import type { AppProps } from 'next/app'

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

import '@/styles/globals.css'によって、グローバルなスタイルが適用されている。

AppPropsは、型定義で、Component（現在のページ）と pageProps（ページごとのデータ）を指定する。

Componentは現在表示しているページのコンポーネント（pages/ 以下にあるファイル）がここに渡される。

...pagePropsは各ページに渡される初期データやプロパティ（getServerSideProps や getStaticProps から受け取るもの）が展開される。

共通の設定やレイアウトを行う場合は以下のように Component を囲む。

<Layout>
  <Component {...pageProps} />
</Layout>

<Provider>
  <Component {...pageProps} />
</Provider>

読み込み順序

以下の順序で読み込まれる。

1. _document.tsx
2. _app.tsx
3. ページコンポーネント

詳しく説明すると、以下の流れ。

1. サーバーサイドで_document.tsx が実行され、HTML ドキュメント全体が生成される
2. クライアントサイドで_app.tsx が実行され、全体の設定やレイアウトが適用される
3. ページコンポーネントがマウントされる

addEventListener の null のエラーを回避する

Rails のみのアプリで、画像アップロードページで JavaScript を使って画像のプレビューを実装した時に、他の画面ではプレビューのイベントを発火させる DOM がないので、以下のようなエラーに遭遇しました。

Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')

そこで JavaScript の addEventListener での null のチェックについてまとめました。

エラーが起きるコード例

例として、ボタンをクリックするとコンソールにログが表示される処理を JavaScript で書いて、index.html と about.html で読み込む。index.html のみボタンを作ることで、about.html で addEventListener がエラーになることを確認する。

button.js

const button = document.getElementById('button')

button.addEventListener('click', function () {
  console.log('clicked')
})

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Home</title>
  </head>
  <body>
    <button id="button">ボタン</button>
    <script src="button.js"></script>
  </body>
</html>

about.html

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

解決方法

このエラーを解決するには以下の方法がある。

• if 文を使う
• オプショナルチェーン
• 別の DOM を格納する

if 文を使う

if 文を使うことで、DOM が存在していれば addEventListener が登録されるようにする。DOM が存在していなければ null になり、if 文の条件は false となるので、addEventListener は実行されない。

const button = document.getElementById('button')

if (button) {
  button.addEventListener('click', function () {
    console.log('clicked')
  })
}

オプショナルチェーン

オプショナルチェーン（?）を使うことで、if 文を使わずに済み、よりシンプルなコードになる。

const button = document.getElementById('button')

button?.addEventListener('click', function () {
  console.log('clicked')
})

別の DOM を格納する

以下のように別の DOM を格納することでエラーを回避できる。

const button =
  document.getElementById('button') || document.createElement('button')

button.addEventListener('click', function () {
  console.log('clicked')
})

ただし、この方法は実際に DOM が追加されているわけではなく、開発者にとっても誤解を招くコードになるので基本的には if 文かオプショナルチェーンを使う。

Rails の credentials まとめ

Rails の機密情報を扱う仕組みである credentials についてまとめました。

この記事は以下の構成になっています。

• credentials とは
• credentials を使う手順
  1. コマンドを実行して credentials を編集する
  2. YAML 形式で機密情報を追加する
  3. credentials の値を使用する
• credentials を使わない場合
• credentials のメリット
• credentials 注意点

credentials とは

Rails の credentials は、アプリケーションで使用する機密情報や設定情報を安全に管理する仕組み。

主に API キー、シークレットキー、パスワードなどを格納するために使われる。

これらの情報は暗号化され、config/credentials.yml.enc ファイルに保存される。credentials.yml.encファイルは暗号化された内容が記述されたファイル。ちなみに.encとは encrypted (暗号化された) を意味する。

加えて、暗号化と復号化のために、マスターキー (config/master.key) が使用される。このマスターキーは環境変数や .gitignore によって安全に管理される。

credentials を使う手順

credentials は以下の手順で使う。

1. コマンドを実行して credentials を編集する
2. YAML 形式で機密情報を追加する
3. credentials の値を使用する

1. コマンドを実行して credentials を編集する

以下のコマンドを実行すると、初回実行時には credentials を設定するためのconfig/credentials.yml.encファイルと、config/master.keyが自動で生成される。

bin/rails credentials:edit

credentials.yml.encは暗号化されており、直接編集できないのでコマンドを実行して編集する必要がある。master.key があることによって、bin/rails credentials:editで復号化できる。

2 回目以降は、以下のようにcredentials.yml.encを開くためのエディタを指定して実行する。エディタを指定しないとエラーになる。

EDITOR="vi" bin/rails credentials:edit

2. YAML 形式で機密情報を追加する

先ほどのコマンドで開かれたcredentials.yml.encはデフォルトでは以下のような内容になっている。

# aws:
#  access_key_id: 123
#  secret_access_key: 345

# Used as the base secret for all MessageVerifiers in Rails, including the one protecting cookies.
secret_key_base: 9f2f30h30ddo4jijg0898hajkdh9h...

aws:は、AWS のアクセスキーとシークレットキーなどを保存するための例として記述されている。

secret_key_baseは暗号化や署名に使うキーで、クッキーや一部のセッションデータの保護に重要。

3. credentials の値を使用する

credentials の値は以下のように使用する。

puts Rails.application.credentials.aws[:access_key_id]

credentials を使わない場合

credentials を使わない場合は環境変数が使われることが多いが、環境変数は暗号化はされない。

使い分けとしては、credentials は Rails 内部のみで使う機密情報に適しており、環境変数は Docker コンテナの設定や CI/CD パイプラインなどの、外部でも参照する必要がある値に適している。

credentials のメリット

credentials を使うことで以下のメリットがある。

• 暗号化によるセキュリティの強化
• YAML 形式によって階層構造で記述できる
• コマンド 1 つで環境ごとにファイルを分けることができる
• ライブラリなしで簡単に設定した値にアクセスできる

注意点

credentials を使う時にマスターキーが漏洩すると暗号化の意味がなくなるので、.gitignore に追加して、Git の管理から外す。

Next.js での環境変数の使い方まとめ

Next.js の環境変数の扱いについてまとめました。

この記事は以下の構成になっています。

• Next.js で環境変数を扱う手順
  1. プロジェクトのルートに.env ファイルを作成する
  2. 環境変数を設定する
  3. process.env で環境変数を使用する
• 注意点

Next.js で環境変数を使う手順

Next.js で環境変数を使う手順は以下。

1. プロジェクトのルートに.env ファイルを作成する
2. 環境変数を設定する
3. process.env で環境変数を使用する

1. プロジェクトのルートに.env ファイルを作成する

Next.js では環境変数はプロジェクトのルートに.env ファイルを作成して使用する。

.env ファイルは環境ごとに以下のようになる。

• .env.local - 開発者ごとのローカル専用で、全ての環境で適用され、最優先で読み込まれる
• .env.development - 開発環境専用で、npm run devでのみ読み込まれる
• .env.production - 本番環境専用で、npm run build、npm startでのみ読み込まれる
• .env.test - テスト環境専用で、npm testで読み込まれる
• .env - 全ての環境で共通の環境変数を設定するファイルで、最後に読み込まれる

以下の順序で .env ファイルを読み込み、同じ環境変数名がある場合は後から読み込まれた値が優先される。

1. .env.local
2. .env.[環境名]
3. .env

2. 環境変数を設定する

環境変数は以下のように設定する。

NEXT_PUBLIC_API_BASE_URL=https://api.example.com
API_SECRET_KEY=your_secret_key

NEXT_PUBLIC_プレフィックスがついている環境変数はクライアントでも使用可能で、ついていない環境変数はサーバーサイド専用になる。

3. process.env で環境変数を使用する

設定した環境変数は、process.envを使って読み込む。

const apiUrl = process.env.NEXT_PUBLIC_API_BASE_URL

const secretKey = process.env.API_SECRET_KEY

注意点

注意点として .env ファイルは Git のリポジトリに含めてはいけないため、.gitignore にファイル名を追加する。

.env

また、Next.js では、環境変数はビルド時に静的に取り込まれるため、ビルド後に値を変更しても反映されない。動的な値が必要な場合は、API やサーバーサイドで設定する。

Rails で環境変数を管理する方法まとめ

Rails で環境変数を扱う方法についてまとめました。

この記事は以下の構成になっています。

• 環境変数とは
• Rails での環境変数の管理
  • dotenv を使う
  • .env ファイルを作成する
  • ENV で環境変数を使う
• .env ファイルを Git の管理に含めないようにする
• .env.sample の使い方

環境変数とは

環境変数とは、システムやアプリケーションが動作する環境ごとに設定される変数のこと。

開発環境ではデータベースの接続情報、本番環境では AWS のアクセスキーや、API キーなどの公開してはいけない情報を環境変数として設定する。

環境変数を使うことでハードコーディングせずに環境に応じた設定を柔軟に切り替えることができる。

Rails での環境変数の管理

Rails では以下の流れで環境変数を管理する。

1. dotenv をインストール
2. .env ファイルを作成する
3. ENV で環境変数を使う

1. dotenv をインストール

Rails では環境変数は dotenv という gem を使って管理することができる。

dotenv は Ruby 全般で使える環境変数を管理する gem で、.env ファイルを読み込み、環境変数としてアプリケーション内で利用できるようにする。

dotenv とは別に dotenv-rails という gem もあり、こちらは Rails 向けに拡張された gem。

dotenv-rails だと、Rails 内の開発環境や本番環境ごとに.env ファイルを作成して自動的に読み込むことができる。

インストールするには Gemfile に記述してbundle installを実行する。

gem "dotenv-rails"

dotenv を使わない場合、~/.bashrc や ~/.zshrc ファイルなどを使って OS に直接環境変数を設定する必要がある。

2. .env ファイルを作成する

環境変数はプロジェクトのルートに.env というファイルを作成して管理する。

.env ファイルには、以下のように環境変数を KEY=VALUE 形式で記述する。

DATABASE_USER=username
DATABASE_PASSWORD=password

3. ENV で環境変数を使う

.env ファイルに設定した環境変数は以下のように ENV オブジェクトを使ってアクセスできる。

ENV["DATABASE_USER"]

.env ファイルを Git の管理に含めないようにする

.env ファイルには機密情報が含まれるので、Git の管理対象から外す必要がある。

そのため、.gitignore に .env を追記する。

.env

.env.sample を作成する

Git の管理から外すということは、プロジェクトをクローンしても .env ファイルが含まれないので、どんな環境変数が使われているか調べる必要がある。

そこで .env.sample という必要な環境変数をドキュメントとして共有するためのファイルを作っておくことで、それを元に.env ファイルを作ることができる。

以下のように設定する必要がある環境変数のキーと、仮のデータを設定しておく。

DATABASE_USER=your_username
DATABASE_PASSWORD=your_password

そして以下のコマンドで.env ファイルにコピーする

cp .env.sample .env

.env.sample は共有する必要があるので、.env とは違いリポジトリに含める。

IPアドレスざっくりまとめ

IP アドレスについてざっくりまとめました。

この記事は以下の構成になっています。

• IP アドレスとは
• IP アドレスのバージョン
  • IPv4
  • IPv6
• IP アドレスの種類
  • グローバル IP アドレス
  • プライベート IP アドレス
• IP アドレスの構造
  • ネットワーク部
  • ホスト部
• IP アドレスの分割方法
  • クラスフルアドレス
  • サブネットとサブネットマスク
  • CIDR
• IP アドレスの割り当て
  • 固定 IP アドレス
  • 動的 IP アドレス
• IP アドレスと NAT
• IP アドレスとドメイン
• IP アドレスと MAC アドレス
• 予約済み IP アドレス
  • ネットワークアドレス
  • ブロードキャストアドレス
  • ループバックアドレス

IP アドレスとは

IP アドレス（Internet Protocol Address）とは、ネットワーク上で通信先を識別するための一意の番号で、以下が IP アドレスの例。

192.168.0.1

IP アドレスは、例えるとネットワーク上の住所のようなもの。

IPv4 と IPv6

IP アドレスはバージョンによって IPv4 と IPv6 の 2 種類に分けられる。

IPv4

IPv4（Internet Protocol version 4）は 32 ビットで構成され、8 ビットずつをピリオドで区切って 10 進数で表記する。

IPv4 の例。

192.168.0.1

IP アドレスの範囲は、0.0.0.0 ~ 255.255.255.255 になり、アドレスの数は約 43 億個。

IPv4 が主流で使われてきたが、アドレスの数が不足する問題があるため、次に説明する IPv6 が作られた。

IPv6

IPv6（Internet Protocol version 6）は 128 ビットで構成され、16 ビットずつをコロンで区切って 16 進数で表記する。

IPv6 の例。

2001:0db8:85a3:0000:0000:8a2e:0370:7334

IPv6 の場合はアドレスの数は約 340 澗個と膨大な数になる。

Ipv4 との直接的な互換性はないため、IPv6 への完全な移行には時間がかかっている。

IP アドレスの種類

IP アドレスにはインターネットと接続するためのグローバル IP アドレスと、ローカルのネットワーク内でのみ使うプライベート IP アドレスの 2 種類に分けられる。

グローバル IP アドレス

グローバル IP アドレスは、インターネットに接続する機器に一意で割り当てられるアドレス。パブリック IP アドレスともいう。

プライベート IP アドレス

プライベート IP アドレスは、家庭や企業などのローカルネットワーク内で利用されるアドレス。

外部のネットワークからは直接アクセスできず、ルーターなどのデバイスがその間を仲介する。

ローカルのみで使うので、別のローカルのプライベート IP アドレスと同じアドレスを使っていても問題ない。

IP アドレスの構造

IP アドレスの構造はネットワークの設計者によってネットワーク部とホスト部に分けられる。

ネットワーク部

ネットワーク部はネットワークを特定する部分で、ネットワーク部が同じならそれらのコンピュータは同じネットワークに存在することになる。

ホスト部

ホスト部はネットワーク内の特定のコンピュータを識別する部分。

IP アドレスの分割方法

IPv4 では IP アドレスの枯渇問題があるので、効率よく使う必要がある。

その方法として以下のものがある。

• クラスフルアドレス
• サブネットマスク
• CIDR

クラスフルアドレス

クラスフルアドレスは以下のように IP アドレスをクラスという範囲に分けて管理する従来の方法。

クラス	アドレス範囲（先頭ビット）	ネットワーク部	ホスト部	使用例
A	0.0.0.0 ～ 127.255.255.255	8ビット	24ビット	大規模なネットワーク
B	128.0.0.0 ～ 191.255.255.255	16ビット	16ビット	中規模なネットワーク
C	192.0.0.0 ～ 223.255.255.255	24ビット	8ビット	小規模なネットワーク

ネットワーク部とホスト部が固定されているため、接続するホスト数に対して過剰な IP アドレスが割り当てられることがあり、とても非効率。

サブネットとサブネットマスク

サブネットはネットワークをさらに小さなネットワークに分割して、効率的な IP アドレスの利用を実現するための仕組み。

具体的には、ネットワーク部を増やしてホスト部を増やすこと。

サブネットによって、ネットワークに接続する台数に応じたネットワークを構築することができる。

サブネットマスクは IP アドレスのネットワーク部はビットを 1、ホスト部はビットを 0 で表して、ネットワーク部とホスト部を区切る役割を持つ数値。

クラスのようにネットワーク部とホスト部を固定せずに自由に設定が可能。

例えば 192.168.1.0 のサブネットマスクが 255.255.255.0 である場合、2 進数は以下のようになる。

11111111.11111111.11111111.00000000

ネットワーク部は 1 が 24 個あるので 24 ビット、つまり192.168.1の部分がネットワーク部ということになる。

CIDR

CIDR（Classless Inter-Domain Routing）は IP アドレスの末尾に /プレフィックス長 を追加する表記法。

プレフィックス長は、ネットワーク部のビット数を表す。サブネットマスクの表記より簡潔に表現できる。

例えば、192.168.1.0/16 という IP アドレスがあるとすれば、ネットワーク部が 16 ビット、つまり、192.168の部分がネットワーク部ということになる。

IP アドレスの割り当て

アドレスを割り当てるには、固定 IP アドレスと DHCP を使った動的 IP アドレス の 2 つの方法がある。

固定 IP アドレス

固定 IP アドレスはその名の通り、IP アドレスを固定する方法で、常に同じアドレスを必要とする機器に使われる。

動的 IP アドレス

動的 IP アドレスは一定の期間だけ自動的に割り当てられる IP アドレスのこと。

通常 DHCP（Dynamic Host Configuration Protocol）サーバーによって管理され、一般ユーザーの端末（PC、スマホなど）に使われることが多い。

DHCP（Dynamic Host Configuration Protocol）サーバーとは、ネットワーク内のデバイスに自動的に IP アドレスを割り当てる役割を担うサーバー。

DHCP サーバーによって、ネットワーク管理者が手動で重複を避けつつ、IP アドレスを設定する手間を省略することができる。

IP アドレスと NAT

NAT（Network Address Translation）は、プライベート IP アドレスとグローバル IP アドレスを変換する技術。

これによって、1 つのグローバル IP アドレスで、複数のデバイスがインターネットに接続できるようになる。

IP アドレスとドメイン

IP アドレスはコンピュータが使うもので、実際の Web サイトなどでは IP アドレスに対応した文字列であるドメインが使われる。

この IP アドレスとドメインを対応させる仕組みが DNS。

IP アドレスと MAC アドレス

IP アドレスと混同しやすいものに MAC アドレスがある。

MAC アドレス（Media Access Control Address）とは、製造時にデバイスのネットワークインターフェース（NIC）に物理的に割り当てられるアドレス。

MAC アドレスは00:1A:2B:3C:4D:5Eのように、48 ビットのアドレスで 16 進数で表記され、前半の 24 ビットが製造業者のアドレスを示し、後半の 24 ビットがデバイス固有のアドレスになる。

ローカルネットワーク内でデバイスを一意に識別するために使われ、どのデバイスがどのパケットを受け取るかを特定する。

ローカルネットワークでは ARP（Address Resolution Protocol）というプロトコルを使って、IP アドレスから MAC アドレスを特定する必要がある。

予約済み IP アドレス

以下のようなあらかじめ決められている予約済み IP アドレスも存在する。

• ネットワークアドレス
• ブロードキャストアドレス
• ループバックアドレス

ネットワークアドレス

ネットワークアドレスはホスト部が全て 0 のアドレスで、ネットワーク自体を指す。

ブロードキャストアドレス

ブロードキャストアドレスはホスト部が全て 1 のアドレスで、ネットワーク内のすべてのホストに一斉にデータを送信する時に使う。

ループバックアドレス

ループバックアドレスは自分自身を指す IP アドレスで、一般的に 127.0.0.1 が使用される。

このアドレスは localhost とも呼ばれる。

RailsでのTurbo概要まとめ

Rails の Hotwire の概要 についてまとめました。

• Hotwire とは
• Turbo とは
• Turbo の主要機能
• Stimulus とは
• Hotwire の導入

Hotwire とは

Hotwire（HTML Over The Wire）は、Turbo と Stimulus という 2 つのライブラリで構成される、シンプルで高速な Web アプリ開発を目指すフレームワーク。

Rails7 からは、従来の Webpacker ではなく、Hotwire と Importmap で JavaScript を管理するようになっている。

Hotwire は Rails に依存しているわけではないので、Rails 以外でも使える。

Turbo とは

Turbo とは、Hotwire によって提供される、ページ全体のリロードなしでページ更新を行う仕組み。

従来の Rails アプリであれば JavaScript や Ajax が必要だった非同期のページ更新を、ほとんど JavaScript を使わずに実現できる。

Turbo によって SPA のようなアプリを作ることができるが、サーバーが JSON ではなく HTML をレスポンスして、サーバーサイドでレンダリングを行うことで、従来の Rails のやり方の延長でモダンな Web アプリを作ることができる。

Turbo の主要機能

Turbo には以下の 3 つの主要な機能がある。

• Turbo Drive
• Turbo Frames
• Turbo Streams

Turbo Drive

Turbo Drive はリンクやフォームをクリックした際に、ページのリロードを防ぎ、SPA のように非同期でページを更新する機能。

具体的には、リンクやフォームのリクエストを fetch による非同期リクエストに置き換えたり、HTML を全て更新するのではなく、body タグのみを更新したりする。

Turbo が有効であれば、特別な設定なしにリンクやフォーム送信が Turbo Drive によって処理される。

Turbo Drive は後述の Rails4 から 6 までデフォルトで含まれていた Turbolinks とほぼ同じ機能。

Turbolinks はページ全体のリロードを避けることで、高速なページ遷移を提供するライブラリ。

Turbo Frames

Turbo Frames は、ページ内の特定の領域をフレームとして定義し、フレーム内だけを部分的に更新できる機能で、Turbo Drive の部分置換版。

<turbo-frame></turbo-frame>で囲むことで一部分だけを更新することができる。

Turbo Streams

Turbo Streams は、複数の箇所を同時に変更したり、WebSocket を使ってサーバーからのリアルタイムなデータ更新をクライアントに自動で反映させる機能。

Stimulus とは

Stimulus は Hotwire に含まれる軽量な JavaScript フレームワークで、動的な UI 要素を簡単に制御するために使われる。

具体的には、HTML 内に記述するカスタム属性（data-*）を基に動的な UI 制御を行う。

以下はボタンをクリックした時にメソッドを実行する例。

<div data-controller="hello">
  <!-- クリック時にhelloコントローラのgreetメソッドを実行する -->
  <button data-action="click->hello#greet">Click me</button>
</div>

JavaScript ファイルはsrc/controllers/hello_controller.jsとして、data-controller の値と、JavaScript のファイル名を同じにする。

import { Controller } from '@hotwired/stimulus'

export default class extends Controller {
  greet() {
    alert('Hello, Stimulus!')
  }
}

Hotwire の導入

Hotwire は Rails7 ではデフォルトで導入されているので特に設定する必要はないが、新しく導入する場合は以下の手順で行う。

1. Turbo と Stimulus の gem をインストールする
2. Turbo をセットアップする
3. Stimulus をセットアップする
4. サーバーを再起動する

1. Turbo と Stimulus の gem をインストールする

以下のコードを Gemfile に記述してbundle installを実行して gem をインストールする。

gem 'turbo-rails'
gem 'stimulus-rails'

2. Turbo をセットアップする

以下のコマンドを実行して Turbo をセットアップする。

rails turbo:install

このコマンドによって Turbo を Rails プロジェクトに組み込む設定が行われ、デフォルトで Turbo が動作するようにアプリ全体に適用される。

3. Stimulus をセットアップする

以下のコマンドを実行して Stimulus をセットアップする。

rails stimulus:install

このコマンドによって Stimulus を Rails プロジェクトに組み込む設定が行われる。

4. サーバーを再起動する

以下のコマンドで Rails のサーバーを再起動する。

rails s