// Googleの認証画面に送る処理
public function redirectToGoogle()
{
    return Socialite::driver('google')->stateless()->redirect();
}

public function handleGoogleCallback()
{
    // Googleからユーザー情報をもらう
    $googleUser = Socialite::driver('google')->stateless()->user();
    
    // このメールアドレスの人、もう登録済み？
    $existingUser = User::where('email', $googleUser->getEmail())->first();
    
    if ($existingUser) {
        // 既に登録済み → ログインさせる
        Auth::login($existingUser);
    } else {
        // 初めての人 → 新しくアカウントを作る
        $user = User::create([
            'name' => $googleUser->getName(),
            'email' => $googleUser->getEmail(),
            // ... その他の情報
        ]);
        Auth::login($user);
    }
}

// ❌ 危険：コードに直接書く
'client_secret' => 'abc123def456',

// ✅ 安全：設定ファイルで管理
'client_secret' => env('GOOGLE_SECRET'),

// ❌ 危険：何でもかんでも取得
$scopes = ['email', 'profile', 'calendar', 'drive', 'photos'];

// ✅ 安全：本当に必要な分だけ
$scopes = ['email', 'profile'];

// Stimulusの基本クラスをインポート
import { Controller } from "@hotwired/stimulus";

// Stimulusコントローラーを定義（クラス名は自由だが、ファイル名と対応させる）
export default class extends Controller {
  // HTMLのどの要素をターゲットにするか定義
  // "input"と"counter"という名前のターゲットを設定
  static targets = ["input", "counter"];

  // HTMLから渡される値を定義
  // 最小文字数(min)と最大文字数(max)を数値として受け取る
  static values = { min: Number, max: Number };

  // コントローラーがDOMに接続された時に自動実行
  // Reactの useEffect(() => {}, []) に相当
  connect() {
    this.updateCount(); // 初期表示時に文字数を更新
  }

  // 文字数カウントを更新するメソッド
  // Reactの setState() に相当する処理
  updateCount() {
    // inputTargetから現在のテキストを取得
    const text = this.inputTarget.value;
    const count = text.length;

    // counterTargetに文字数を表示
    // ReactのuseStateで状態を更新するのと同じ効果
    this.counterTarget.textContent = count;

    // 文字数に応じてスタイルを動的に変更
    // 条件によってCSSクラスを切り替え
    if (count < this.minValue) {
      this.counterTarget.className = "text-red-600"; // 文字数不足：赤色
    } else if (count > this.maxValue) {
      this.counterTarget.className = "text-red-600"; // 文字数超過：赤色
    } else {
      this.counterTarget.className = "text-green-600"; // 適切な文字数：緑色
    }
  }
}

<!-- data-controller属性でStimulusコントローラーを指定 -->
<!-- data-*-value属性で値をJavaScriptに渡す -->
<div data-controller="character-counter"
     data-character-counter-min-value="10"
     data-character-counter-max-value="2000">

  <label class="block text-sm font-medium text-gray-700 mb-2">
    面談内容 <span class="text-red-500">*</span>
  </label>

  <!-- textareaをinputターゲットとして指定 -->
  <!-- data-action属性でイベントとメソッドを紐付け -->
  <%= form.text_area :content,
        rows: 12,
        class: "w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none",
        data: {
          character_counter_target: "input",           # inputターゲットとして指定
          action: "input->character-counter#updateCount" # inputイベント時にupdateCountメソッド実行
        } %>

  <p class="mt-2 text-sm text-gray-500">
    10文字以上2000文字以内で入力してください。
    <span class="ml-2">
      <!-- counterターゲットとして指定：ここに文字数が表示される -->
      現在: <span data-character-counter-target="counter">0</span>文字
    </span>
  </p>
</div>

<!-- ① この div要素にStimulusコントローラーを接続 -->
<div data-controller="character-counter">
  <!-- この要素の中で character-counter が有効になる -->
</div>

<div data-controller="character-counter">
  <!-- ② inputターゲットとして textarea を指定 -->
  <textarea data-character-counter-target="input"></textarea>

  <!-- ③ counterターゲットとして span を指定 -->
  <span data-character-counter-target="counter">0</span>
</div>

// JavaScript側で、こうアクセスできるようになる
this.inputTarget; // ← textarea要素を取得
this.counterTarget; // ← span要素を取得

// つまり、getElementById() の代わりに、こんな感じ：
// Before: document.getElementById('my-textarea')
// After:  this.inputTarget

<div data-controller="character-counter">
  <!-- ④ inputイベントが発生したらupdateCountメソッドを実行 -->
  <textarea
    data-character-counter-target="input"
    data-action="input->character-counter#updateCount"
  ></textarea>

  <span data-character-counter-target="counter">0</span>
</div>

<div
  data-controller="character-counter"
  data-character-counter-min-value="10"
  data-character-counter-max-value="2000"
>
  <textarea
    data-character-counter-target="input"
    data-action="input->character-counter#updateCount"
  ></textarea>

  <span data-character-counter-target="counter">0</span>
</div>

// JavaScript側で、こう使える
this.minValue // ← 10 が入る（Number型に自動変換）
this.maxValue // ← 2000 が入る（Number型に自動変換）

// values定義があるから自動で型変換される
static values = { min: Number, max: Number }

<!-- 👍 同じコントローラーを別の場所で再利用 -->
<div data-controller="character-counter" data-character-counter-min-value="5" data-character-counter-max-value="500">
  <!-- コメント用のフォーム -->
</div>

<div data-controller="character-counter" data-character-counter-min-value="10" data-character-counter-max-value="2000">
  <!-- 面談記録用のフォーム -->
</div>

// auto_save_controller.js
import { Controller } from "@hotwired/stimulus";

export default class extends Controller {
  static targets = ["form", "status"];
  static values = { url: String, interval: Number };

  connect() {
    this.autoSave = setInterval(() => {
      this.save();
    }, this.intervalValue);
  }

  save() {
    // フォームデータを自動保存
    this.statusTarget.textContent = "保存中...";
    // Ajax処理...
  }
}

// search_controller.js
import { Controller } from "@hotwired/stimulus";

export default class extends Controller {
  static targets = ["input", "results"];

  search() {
    const query = this.inputTarget.value;
    if (query.length > 2) {
      // 検索API呼び出し
      this.showResults(results);
    }
  }
}

# 講師認証（AuthController）
GET  /staff/login     → staff_login（ログイン画面表示）
POST /staff/login     → staff_authenticate（認証処理）
DELETE /staff/logout  → staff_logout（ログアウト処理）

# 生徒認証（StudentsController）
GET  /student/login   → login（ログイン画面表示）
POST /student/login   → authenticate（認証処理）
DELETE /student/logout → logout（ログアウト処理）

# app/controllers/auth_controller.rb
class AuthController < ApplicationController
  def staff_authenticate
    username = params[:username]
    password = params[:password]
    
    # カスタム認証メソッドで検索
    teacher = Teacher.find_for_database_authentication(email: username)
    
    if teacher && teacher.valid_password?(password)
      # セッションに講師IDを保存
      session[:teacher_id] = teacher.id
      redirect_to staff_dashboard_path, notice: 'ログインしました'
    else
      flash.now[:alert] = 'ユーザー名またはパスワードが正しくありません'
      render :staff_login
    end
  end

  def staff_logout
    # セッションをクリア
    session[:teacher_id] = nil
    redirect_to root_path, notice: 'ログアウトしました'
  end

  private

  def current_staff_user
    @current_staff_user ||= session[:teacher_id] && Teacher.find_by(id: session[:teacher_id])
  end
end

# app/controllers/students_controller.rb
class StudentsController < ApplicationController
  def authenticate
    student_number = params[:student_number]
    password = params[:password]
    
    # カスタム認証メソッドで検索
    student = Student.find_for_database_authentication(email: student_number)
    
    if student && student.valid_password?(password)
      # セッションに生徒IDを保存
      session[:student_id] = student.id
      redirect_to student_dashboard_path, notice: 'ログインしました'
    else
      flash.now[:alert] = '生徒番号またはパスワードが正しくありません'
      render :login
    end
  end

  def logout
    # セッションをクリア
    session[:student_id] = nil
    redirect_to root_path, notice: 'ログアウトしました'
  end

  private

  def current_student
    @current_student ||= session[:student_id] && Student.find_by(id: session[:student_id])
  end
end

# app/models/teacher.rb
class Teacher < ApplicationRecord
  # ユーザー名でログインするための設定
  def self.find_for_database_authentication(warden_conditions)
    # warden_conditions = {email: "shibaguti"}
    conditions = warden_conditions.dup
    if (email = conditions.delete(:email))
      # emailキーで渡された値をuser_login_nameで検索
      where(user_login_name: email).first
    else
      # emailキー以外の場合はnilを返す
      nil
    end
  end
end

# app/models/student.rb
class Student < ApplicationRecord
  # 生徒番号でログインするための設定
  def self.find_for_database_authentication(login_conditions)
    # login_conditions = {email: "2024001"}
    search_conditions = login_conditions.dup
    if (student_number_input = search_conditions.delete(:email))
      # emailキーで渡された値をstudent_numberで検索
      where(["student_number = :student_number", { student_number: student_number_input }]).first
    else
      # emailキー以外の場合はnilを返す
      nil
    end
  end
end

# app/helpers/application_helper.rb
module ApplicationHelper
  # 現在ログインしている講師を取得
  def current_teacher
    @current_teacher ||= session[:teacher_id] && Teacher.find_by(id: session[:teacher_id])
  end

  # 現在ログインしている生徒を取得（講師方式と統一）
  def current_student
    @current_student ||= session[:student_id] && Student.find_by(id: session[:student_id])
  end

  # 講師がログインしているかチェック
  def teacher_signed_in?
    current_teacher.present?
  end

  # 生徒がログインしているかチェック（講師方式と統一）
  def student_signed_in?
    current_student.present?
  end

  # 管理者がログインしているかチェック
  def admin_signed_in?
    current_teacher&.admin?
  end

  # 現在のユーザーが管理者かどうか
  def current_user_is_admin?
    current_teacher&.admin?
  end
end

# AuthController
before_action :require_staff, only: [:staff_dashboard]

private

def require_staff
  unless current_staff_user
    redirect_to staff_login_path, alert: 'ログインが必要です'
  end
end

# StudentsController
before_action :require_student_login, only: [:dashboard]

private

def require_student_login
  unless current_student
    redirect_to student_login_path, alert: 'ログインが必要です'
  end
end

<!-- app/views/auth/staff_login.html.erb -->
<%= form_with url: staff_login_path, method: :post, local: true do |f| %>
  <%= f.text_field :username, placeholder: "ユーザー名" %>
  <%= f.password_field :password, placeholder: "パスワード" %>
  <%= f.submit "ログイン" %>
<% end %>

<!-- app/views/students/login.html.erb -->
<%= form_with url: student_login_path, method: :post, local: true do |f| %>
  <%= f.text_field :student_number, placeholder: "生徒番号" %>
  <%= f.password_field :password, placeholder: "パスワード（9999）" %>
  <%= f.submit "ログイン" %>
<% end %>

# 同じパターンなので、理解しやすく修正しやすい
# 講師用
session[:teacher_id] = teacher.id

# 生徒用  
session[:student_id] = student.id

# 将来、管理者認証を追加する場合も同じパターン
session[:admin_id] = admin.id

def current_admin
  @current_admin ||= session[:admin_id] && Admin.find_by(id: session[:admin_id])
end

# シンプルなセッション管理 = 高速
@current_student ||= session[:student_id] && Student.find_by(id: session[:student_id])

   student_number = params[:student_number]  # "2024001"
   student = Student.find_for_database_authentication(email: student_number)
   if student && student.valid_password?(password)
     session[:student_id] = student.id  # セッションに保存

   def current_student
     @current_student ||= session[:student_id] && Student.find_by(id: session[:student_id])
   end

# 1. セッションベース認証
session[:user_id] = user.id

# 2. カスタム認証メソッド
Model.find_for_database_authentication(email: identifier)

# 3. 統一されたヘルパーメソッド
def current_user
  @current_user ||= session[:user_id] && User.find_by(id: session[:user_id])
end

# 4. 一貫した認証チェック
before_action :require_authentication, only: [:protected_action]

# 認証機能に必要なファイルを一括生成
$ bin/rails generate authentication

# データベースにusersテーブルとsessionsテーブルを作成
$ bin/rails db:migrate

# Railsコンソール（対話モード）を起動
$ bin/rails console

# 新しいユーザーを作成（エラーが出たら例外を投げる）
store(dev)> User.create! email_address: "you@example.org", password: "s3cr3t", password_confirmation: "s3cr3t"

# bcrypt gem（パスワード暗号化ライブラリ）を有効にするため再起動
$ bin/rails server

<!DOCTYPE html>
<html>
  <!-- 省略 -->
  <body>
    <!-- ナビゲーションバー（全ページ共通のメニュー） -->
    <nav>
      <!-- ホームページへのリンク -->
      <%= link_to "Home", root_path %>
      
      <!-- ログイン済みの場合のみログアウトボタンを表示 -->
      <%= button_to "Log out", session_path, method: :delete if authenticated? %>
    </nav>

    <!-- メインコンテンツエリア -->
    <main>
      <%= yield %>  <!-- 各ページの内容がここに入る -->
    </main>
  </body>
</html>

class ProductsController < ApplicationController
  # index（一覧）とshow（詳細）は認証なしでもアクセス可能
  allow_unauthenticated_access only: %i[ index show ]
  
  # 以下省略...
end

<!-- ログイン済み の場合のみ新商品作成リンクを表示 -->
<%= link_to "New product", new_product_path if authenticated? %>

<nav>
  <!-- ホームへのリンク -->
  <%= link_to "Home", root_path %>
  
  <!-- ログイン状態によってリンクを出し分け -->
  <%= link_to "Login", new_session_path unless authenticated? %>  <!-- 未ログインの場合 -->
  <%= button_to "Log out", session_path, method: :delete if authenticated? %>  <!-- ログイン済みの場合 -->
</nav>

<h1><%= @product.name %></h1>  <!-- 商品名を表示 -->

<!-- 一覧ページに戻るリンク（誰でも表示） -->
<%= link_to "Back", products_path %>

<!-- ログイン済みの場合のみ編集・削除機能を表示 -->
<% if authenticated? %>
  <!-- 編集ページへのリンク -->
  <%= link_to "Edit", edit_product_path(@product) %>
  
  <!-- 削除ボタン（確認ダイアログ付き） -->
  <%= button_to "Destroy", @product, method: :delete, data: { turbo_confirm: "Are you sure?" } %>
<% end %>

<!-- 商品一覧ページのコード -->
<h1>Products</h1>

<div id="products">
  <% @products.each do |product| %>
    <div>
      <!-- 手動でaタグを書いている -->
      <a href="/products/<%= product.id %>">
        <%= product.name %>
      </a>
    </div>
  <% end %>
</div>

# 基本の書き方
link_to "表示する文字", "リンク先のパス"

# 例
link_to "ホームページ", "/home"
# ↓ これが以下のHTMLに変換される
# <a href="/home">ホームページ</a>

<!-- 従来の書き方 -->
<a href="/products/<%= product.id %>">
  <%= product.name %>
</a>

<!-- link_toを使った新しい書き方 -->
<%= link_to product.name, product %>

Prefix Verb   URI Pattern                     Controller#Action
products GET    /products(.:format)            products#index
product GET    /products/:id(.:format)         products#show

# Prefix が "products" の場合
products_path  # => "/products" を生成
products_url   # => "http://localhost:3000/products" を生成

# Prefix が "product" の場合
product_path(1)  # => "/products/1" を生成
product_url(1)   # => "http://localhost:3000/products/1" を生成

<%= link_to product.name, product_path(product.id) %>

<!-- この書き方 -->
<%= link_to product.name, product %>

<!-- ↓ Railsが自動でこう変換してくれる -->
<%= link_to product.name, product_path(product.id) %>

<!-- ↓ さらに具体的には -->
<%= link_to product.name, "/products/#{product.id}" %>

# 例：productのIDが5の場合
product = Product.find(5)
link_to product.name, product
# ↓ 自動的にこうなる
# <a href="/products/5">商品名</a>

<!-- 【Before】従来の書き方 -->
<h1>Products</h1>

<div id="products">
  <% @products.each do |product| %>
    <div>
      <!-- 手動でaタグとパスを書いている -->
      <a href="/products/<%= product.id %>">
        <%= product.name %>
      </a>
    </div>
  <% end %>
</div>

<!-- 【After】link_toを使った書き方 -->
<h1>Products</h1>

<div id="products">
  <% @products.each do |product| %>
    <div>
      <!-- link_toでスッキリ！ -->
      <%= link_to product.name, product %>
    </div>
  <% end %>
</div>

<!-- ユーザー詳細ページへのリンク -->
<%= link_to user.name, user %>
<!-- 生成される：<a href="/users/5">田中太郎</a> -->

<!-- 記事詳細ページへのリンク -->
<%= link_to article.title, article %>
<!-- 生成される：<a href="/articles/10">記事のタイトル</a> -->

<!-- カテゴリー詳細ページへのリンク -->
<%= link_to category.name, category %>
<!-- 生成される：<a href="/categories/3">技術</a> -->

# _path：相対パス（ドメインなし）
product_path(1)  # => "/products/1"

# _url：絶対URL（ドメインあり）
product_url(1)   # => "http://localhost:3000/products/1"

# Webページ内のリンク（普通はこっち）
link_to "商品詳細", product_path(product)

# メールで送るリンク（完全なURLが必要）
link_to "商品詳細", product_url(product)

<!-- 【Before】面倒な書き方 -->
<a href="/products/<%= product.id %>">
  <%= product.name %>
</a>

<!-- 【After】スッキリした書き方 -->
<%= link_to product.name, product %>

// Eloquent ORMを使用
$users = User::all();

// または Query Builder を使用
$users = DB::table('users')->get();

# Active Recordを使用
users = User.all

// Eloquent ORM
$users = User::where('age', '>=', 20)->get();

// Query Builder
$users = DB::table('users')
            ->where('age', '>=', 20)
            ->get();

# Active Record
users = User.where('age >= ?', 20)
# または
users = User.where(age: 20..)  # Ruby 2.7以降の書き方

// 新しい順（降順）
$users = User::orderBy('created_at', 'desc')->get();

// 古い順（昇順）
$users = User::orderBy('created_at', 'asc')->get();
// または 'asc' は省略可能
$users = User::orderBy('created_at')->get();

# Active Record
users = User.where('age >= ?', 20)
# または
users = User.where(age: 20..)  # Ruby 2.7以降の書き方

// 最新の注文を1件取得
$latest_order = DB::table('orders')
                  ->select('customer_id')           // customer_idカラムのみ選択
                  ->orderBy('created_at', 'desc')   // 作成日時の新しい順に並び替え
                  ->limit(1)                        // 1件だけ取得
                  ->first();                        // 結果を1つのオブジェクトとして取得

# 最新の注文を1件取得
latest_order = Order.select(:customer_id)    # customer_idカラムのみ選択
                   .order(created_at: :desc) # 作成日時の新しい順に並び替え
                   .limit(1)                 # 1件だけ取得
                   .first                    # 結果を1つのオブジェクトとして取得

$users = User::where('age', '>=', 20)
             ->where('gender', 'male')    // AND条件は where を続けて書く
             ->get();

users = User.where('age >= ? AND gender = ?', 20, 'male')
# または
users = User.where(age: 20.., gender: 'male')

$users = User::where('city', 'Tokyo')
             ->orWhere('city', 'Osaka')   // OR条件は orWhere を使う
             ->get();

users = User.where('city = ? OR city = ?', 'Tokyo', 'Osaka')
# または
users = User.where(city: ['Tokyo', 'Osaka'])  # 配列を使うとIN句になる

$count = User::where('age', '>=', 20)->count();
echo "20歳以上のユーザーは{$count}人です";

count = User.where('age >= ?', 20).count
puts "20歳以上のユーザーは#{count}人です"

// 合計（SUM）
$total_age = User::sum('age');

// 平均（AVG）
$average_age = User::avg('age');

// 最大値（MAX）
$max_age = User::max('age');

// 最小値（MIN）
$min_age = User::min('age');

# 合計（SUM）
total_age = User.sum(:age)

# 平均（AVG）
average_age = User.average(:age)

# 最大値（MAX）
max_age = User.maximum(:age)

# 最小値（MIN）
min_age = User.minimum(:age)

// INNER JOIN
$users_with_orders = User::join('orders', 'users.id', '=', 'orders.user_id')
                         ->select('users.name', 'orders.total_amount')
                         ->get();

// LEFT JOIN
$all_users = User::leftJoin('orders', 'users.id', '=', 'orders.user_id')
                 ->select('users.name', 'orders.total_amount')
                 ->get();

# INNER JOIN
users_with_orders = User.joins(:orders)
                        .select('users.name, orders.total_amount')

# LEFT JOIN
all_users = User.left_joins(:orders)
                .select('users.name, orders.total_amount')

$city_counts = User::select('city', DB::raw('COUNT(*) as user_count'))
                   ->groupBy('city')
                   ->get();

city_counts = User.select(:city, 'COUNT(*) as user_count')
                  .group(:city)

// ユニオン型の基本例
let userId: number | string;  // number型 または string型を受け入れる

// 数値を代入
userId = 12345;
console.log(userId); // 12345

// 文字列を代入
userId = "user-abc-123";
console.log(userId); // "user-abc-123"

// 動物の種類を限定する型
type AnimalType = 'dog' | 'cat' | 'rabbit' | 'hamster';

let myPet: AnimalType;

// 正しい値の代入
myPet = 'dog';     // OK
myPet = 'cat';     // OK

// 間違った値を代入しようとするとエラー
// myPet = 'elephant'; // エラー: Type '"elephant"' is not assignable to type 'AnimalType'

// 関数での活用例
function feedAnimal(animal: AnimalType): string {
    switch (animal) {
        case 'dog':
            return 'ドッグフードをあげました';
        case 'cat':
            return 'キャットフードをあげました';
        case 'rabbit':
            return 'にんじんをあげました';
        case 'hamster':
            return 'ひまわりの種をあげました';
        default:
            return '不明な動物です';
    }
}

console.log(feedAnimal('dog')); // 'ドッグフードをあげました'

// 一般ユーザーの型
interface RegularUser {
    type: 'regular';        // ユーザータイプを識別するフィールド
    name: string;           // ユーザー名
    email: string;          // メールアドレス
}

// 管理者ユーザーの型
interface AdminUser {
    type: 'admin';          // ユーザータイプを識別するフィールド
    name: string;           // ユーザー名
    permissions: string[];  // 権限のリスト
}

// ゲストユーザーの型
interface GuestUser {
    type: 'guest';          // ユーザータイプを識別するフィールド
    sessionId: string;      // セッションID
}

// ユニオン型でまとめる
type User = RegularUser | AdminUser | GuestUser;

// 使用例
function greetUser(user: User): string {
    switch (user.type) {
        case 'regular':
            return `こんにちは、${user.name}さん！新着メールは${user.email}に送信されます。`;
        case 'admin':
            return `管理者の${user.name}さん、ようこそ！権限: ${user.permissions.join(', ')}`;
        case 'guest':
            return `ゲストユーザーさん、ようこそ！セッション: ${user.sessionId}`;
        default:
            return '不明なユーザーです';
    }
}

// テスト用のデータ
const regularUser: RegularUser = {
    type: 'regular',
    name: '田中太郎',
    email: 'tanaka@example.com'
};

const adminUser: AdminUser = {
    type: 'admin',
    name: '管理者',
    permissions: ['read', 'write', 'delete']
};

console.log(greetUser(regularUser)); // こんにちは、田中太郎さん！新着メールは...
console.log(greetUser(adminUser));   // 管理者の管理者さん、ようこそ！権限: ...

// 基本情報の型
interface PersonalInfo {
    name: string;      // 名前
    age: number;       // 年齢
}

// 連絡先情報の型
interface ContactInfo {
    email: string;     // メールアドレス
    phone: string;     // 電話番号
}

// 住所情報の型
interface AddressInfo {
    address: string;   // 住所
    zipCode: string;   // 郵便番号
}

// インターセクション型で全ての情報を組み合わせ
type CompleteUserInfo = PersonalInfo & ContactInfo & AddressInfo;

// 使用例
const user: CompleteUserInfo = {
    // PersonalInfo のプロパティ
    name: '山田花子',
    age: 25,
    // ContactInfo のプロパティ
    email: 'yamada@example.com',
    phone: '090-1234-5678',
    // AddressInfo のプロパティ
    address: '東京都渋谷区1-2-3',
    zipCode: '150-0001'
};

// 全ての情報を表示する関数
function displayUserInfo(user: CompleteUserInfo): void {
    console.log(`名前: ${user.name}`);
    console.log(`年齢: ${user.age}歳`);
    console.log(`メール: ${user.email}`);
    console.log(`電話: ${user.phone}`);
    console.log(`住所: ${user.address} (〒${user.zipCode})`);
}

displayUserInfo(user);

// 型Aの定義
interface TypeA {
    id: number;        // 数値のID
    name: string;      // 名前
    optional?: string; // 省略可能なプロパティ
}

// 型Bの定義
interface TypeB {
    id: string;        // 文字列のID（TypeAと型が異なる）
    email: string;     // メールアドレス
}

// 型Cの定義
interface TypeC {
    name: string;      // 名前（TypeAと同じ型）
    optional: string;  // 必須プロパティ（TypeAでは省略可能）
    phone: string;     // 電話番号
}

// TypeAとTypeBのインターセクション
type AandB = TypeA & TypeB;
// この場合、idプロパティは number & string となり、
// 実際には never型になる（数値かつ文字列は存在しないため）

// TypeAとTypeCのインターセクション
type AandC = TypeA & TypeC;
// この場合は以下のような型になる：
// {
//   id: number;
//   name: string;        // 同じ型なので問題なし
//   optional: string;    // 必須側が優先される
//   email: string;
//   phone: string;
// }

// 実際に使える例
const validUser: AandC = {
    id: 123,
    name: '佐藤次郎',
    optional: '追加情報',  // 必須になる
    phone: '080-9876-5432'
};

console.log(validUser);

// プリミティブ型のインターセクション
type NumberAndString = number & string;  // これは never型になる
type StringAndBoolean = string & boolean; // これも never型になる

// never型の変数を作ってみる
let impossible: NumberAndString;

// どんな値も代入できない
// impossible = 123;      // エラー: Type 'number' is not assignable to type 'never'
// impossible = "hello";  // エラー: Type 'string' is not assignable to type 'never'
// impossible = true;     // エラー: Type 'boolean' is not assignable to type 'never'

console.log('プリミティブ型のインターセクションは実用的ではありません');

// インターフェースの継承を使った場合
interface BaseUser {
    id: number;
    name: string;
}

interface ExtendedUser extends BaseUser {
    email: string;
    createdAt: Date;
}

// インターセクション型を使った場合
type BaseUserType = {
    id: number;
    name: string;
};

type ExtendedUserType = BaseUserType & {
    email: string;
    createdAt: Date;
};

// どちらも同じような結果になる
const user1: ExtendedUser = {
    id: 1,
    name: '鈴木一郎',
    email: 'suzuki@example.com',
    createdAt: new Date()
};

const user2: ExtendedUserType = {
    id: 2,
    name: '高橋二郎',
    email: 'takahashi@example.com',
    createdAt: new Date()
};

// 実用例：APIレスポンスの型を組み合わせる
type ApiResponse<T> = {
    success: boolean;
    message: string;
};

type UserData = {
    userId: number;
    username: string;
};

// ユニオン型とインターセクション型を組み合わせ
type UserApiResponse = ApiResponse<UserData> & {
    data: UserData | null;  // 成功時はUserData、失敗時はnull
};

const successResponse: UserApiResponse = {
    success: true,
    message: 'ユーザー情報を取得しました',
    data: {
        userId: 100,
        username: 'testuser'
    }
};

const errorResponse: UserApiResponse = {
    success: false,
    message: 'ユーザーが見つかりません',
    data: null
};

node --version
npm --version

# 新しいディレクトリを作成
mkdir my-first-graphql
cd my-first-graphql

# package.jsonを作成
npm init -y

# 必要なパッケージをインストール
npm install apollo-server-express express graphql
npm install --save-dev nodemon

// server.js
const { ApolloServer, gql } = require('apollo-server-express');
const express = require('express');

// GraphQLのスキーマを定義（どんなデータがあるかを決める設計図）
const typeDefs = gql`
  # ユーザーという型を定義
  type User {
    id: ID!          # IDは必須項目（!マークで必須を表す）
    name: String!    # 名前は文字列で必須
    email: String!   # メールアドレスも文字列で必須
    age: Int         # 年齢は整数（必須ではない）
  }

  # クエリ（データを取得する処理）を定義
  type Query {
    # すべてのユーザーを取得する
    users: [User!]!  # User型の配列を返す、必須
    
    # 特定のIDのユーザーを取得する
    user(id: ID!): User  # IDを受け取って、Userを返す（見つからない場合はnull）
  }
`;

// サンプルデータ（本来はデータベースから取得）
const sampleUsers = [
  { id: '1', name: '山田太郎', email: 'yamada@example.com', age: 25 },
  { id: '2', name: '田中花子', email: 'tanaka@example.com', age: 30 },
  { id: '3', name: '佐藤次郎', email: 'sato@example.com', age: 22 }
];

// リゾルバー（実際にデータを取得する処理）
const resolvers = {
  Query: {
    // すべてのユーザーを返す関数
    users: () => {
      console.log('全ユーザーが要求されました');
      return sampleUsers;
    },
    
    // 特定のユーザーを返す関数
    user: (parent, args) => {
      console.log(`ID: ${args.id} のユーザーが要求されました`);
      // 配列から指定されたIDのユーザーを探す
      return sampleUsers.find(user => user.id === args.id);
    }
  }
};

// サーバーを起動する関数
async function startServer() {
  // Apollo Serverを作成
  const server = new ApolloServer({ 
    typeDefs,    // スキーマ定義
    resolvers    // データ取得処理
  });

  // Expressアプリを作成
  const app = express();
  
  // Apollo Serverを開始
  await server.start();
  
  // ExpressアプリにApollo Serverを統合
  server.applyMiddleware({ app });

  const PORT = 4000;
  
  // サーバーを起動
  app.listen(PORT, () => {
    console.log(`🚀 GraphQLサーバーが起動しました！`);
    console.log(`📍 GraphQL Playground: http://localhost:${PORT}${server.graphqlPath}`);
  });
}

// サーバーを起動
startServer().catch(error => {
  console.error('サーバー起動エラー:', error);
});

// server.js
const { ApolloServer, gql } = require('apollo-server-express');
const express = require('express');

// これは以下と同じ意味
// const apolloServerExpress = require('apollo-server-express');
// const ApolloServer = apolloServerExpress.ApolloServer;
// const gql = apolloServerExpress.gql;

const { ApolloServer, gql } = require('apollo-server-express');

// GraphQLのスキーマを定義（どんなデータがあるかを決める設計図）
const typeDefs = gql`
  # ユーザーという型を定義
  type User {
    id: ID!          # IDは必須項目（!マークで必須を表す）
    name: String!    # 名前は文字列で必須
    email: String!   # メールアドレスも文字列で必須
    age: Int         # 年齢は整数（必須ではない）
  }

  # クエリ（データを取得する処理）を定義
  type Query {
    # すべてのユーザーを取得する
    users: [User!]!  # User型の配列を返す、必須
    
    # 特定のIDのユーザーを取得する
    user(id: ID!): User  # IDを受け取って、Userを返す（見つからない場合はnull）
  }
`;

// 普通の文字列だとこうなる（読みにくい！）
const typeDefs = "type User { id: ID! name: String! }";

// テンプレートリテラルなら読みやすい
const typeDefs = gql`
  type User {
    id: ID!
    name: String!
  }
`;

// 型の表記方法
String     // 文字列（nullの可能性あり）
String!    // 文字列（必須、nullは不可）
[String]   // 文字列の配列（配列自体がnullの可能性あり）
[String!]  // 文字列の配列（配列内の要素はnull不可、配列自体はnullの可能性あり）
[String!]! // 文字列の配列（配列内の要素もnull不可、配列自体もnull不可）

// 具体例
users: [User!]!
// ↑ これは「User型の配列で、配列内にnullは入らず、配列自体もnullではない」という意味

// User型の定義
type User {
  id: ID!      // 必須
  name: String! // 必須
  email: String! // 必須
  age: Int     // オプショナル（nullの可能性あり）
}

// この場合、以下のデータは全て有効なUser型
const validUsers = [
  { id: "1", name: "山田", email: "yamada@example.com", age: 25 },     // ageあり
  { id: "2", name: "田中", email: "tanaka@example.com", age: null },   // ageがnull
  { id: "3", name: "佐藤", email: "sato@example.com" }                // ageがundefined
];

// でも、以下は無効（User型ではない）
const invalidData = [
  null,        // これはUser型ではない
  undefined,   // これもUser型ではない
  "文字列"      // これもUser型ではない
];

// [User!]! の意味を分解すると...

// 1. User! → 「User型のオブジェクトで、nullではない」
//    ✅ { id: "1", name: "山田", email: "yamada@example.com", age: 25 }
//    ✅ { id: "2", name: "田中", email: "tanaka@example.com", age: null }
//    ❌ null
//    ❌ undefined

// 2. [User!] → 「User型のオブジェクトの配列で、配列内にnullは含まない」
//    ✅ [user1, user2, user3]
//    ❌ [user1, null, user3]  // 配列内にnullがある
//    ✅ []  // 空配列はOK

// 3. [User!]! → 「上記の配列で、配列自体もnullではない」
//    ✅ [user1, user2, user3]
//    ✅ []  // 空配列
//    ❌ null  // 配列自体がnull

// 様々なパターンの例
type Query {
  // パターン1: 配列もUser型も必須
  allUsers: [User!]!        // 必ず配列が返る、中身は必ずUser型
  
  // パターン2: 配列は必須だが、User型はnullの可能性あり
  someUsers: [User]!        // 必ず配列が返る、中身はUser型かnull
  
  // パターン3: 配列自体がnullの可能性あり
  maybeUsers: [User!]       // 配列かnull、配列の場合は中身は必ずUser型
  
  // パターン4: 全てがnullの可能性あり
  optionalUsers: [User]     // 配列かnull、配列の場合は中身もnullの可能性あり
}

// 実際のレスポンス例
{
  "allUsers": [
    { "id": "1", "name": "山田", "email": "yamada@example.com", "age": 25 },
    { "id": "2", "name": "田中", "email": "tanaka@example.com", "age": null }
  ],
  "someUsers": [
    { "id": "1", "name": "山田", "email": "yamada@example.com", "age": 25 },
    null,  // これはOK
    { "id": "3", "name": "佐藤", "email": "sato@example.com", "age": null }
  ],
  "maybeUsers": null,  // 配列自体がnullでもOK
  "optionalUsers": [
    { "id": "1", "name": "山田", "email": "yamada@example.com", "age": 25 },
    null   // これもOK
  ]
}

// サンプルデータ（本来はデータベースから取得）
const sampleUsers = [
  { id: '1', name: '山田太郎', email: 'yamada@example.com', age: 25 },
  { id: '2', name: '田中花子', email: 'tanaka@example.com', age: 30 },
  { id: '3', name: '佐藤次郎', email: 'sato@example.com', age: 22 }
];

// リゾルバー（実際にデータを取得する処理）
const resolvers = {
  Query: {
    // すべてのユーザーを返す関数
    users: () => {
      console.log('全ユーザーが要求されました');
      return sampleUsers;
    },
    
    // 特定のユーザーを返す関数
    user: (parent, args) => {
      console.log(`ID: ${args.id} のユーザーが要求されました`);
      // 配列から指定されたIDのユーザーを探す
      return sampleUsers.find(user => user.id === args.id);
    }
  }
};

// リゾルバー関数の引数
function myResolver(parent, args, context, info) {
  // parent: 親のリゾルバーからの結果（今回は使わない）
  // args: クエリで渡された引数（user(id: "1") の "1" など）
  // context: 全リゾルバーで共有するデータ（認証情報など）
  // info: クエリの詳細情報（高度な使い方で使用）
}

// 実際の使用例
user: (parent, args) => {
  console.log('受け取った引数:', args); // { id: "1" }
  return sampleUsers.find(user => user.id === args.id);
}

// 【スキーマ】= 「外部への約束・インターフェース」
type Query {
  user(id: ID!): User  // 「IDを受け取ってUserを返しますよ」という約束
}

// 【リゾルバー】= 「約束を実現する実際の処理」
const resolvers = {
  Query: {
    user: (parent, args) => {
      // args.id でスキーマで定義した引数にアクセス
      return sampleUsers.find(user => user.id === args.id);
    }
  }
};

// スキーマで色々な引数パターンを定義できる
type Query {
  # 引数なし
  users: [User!]!
  
  # 引数1つ
  user(id: ID!): User
  
  # 引数2つ
  userByEmail(email: String!, domain: String!): User
  
  # オプショナル引数
  searchUsers(name: String, minAge: Int): [User!]!
}

// リゾルバーでは全部同じパターン
const resolvers = {
  Query: {
    // 引数なし → args は空オブジェクト {}
    users: (parent, args) => {
      console.log(args); // {}
      return sampleUsers;
    },
    
    // 引数1つ → args は { id: "値" }
    user: (parent, args) => {
      console.log(args); // { id: "1" }
      return sampleUsers.find(user => user.id === args.id);
    },
    
    // 引数2つ → args は { email: "値", domain: "値" }
    userByEmail: (parent, args) => {
      console.log(args); // { email: "test@example.com", domain: "example.com" }
      return sampleUsers.find(user => 
        user.email === args.email && user.email.endsWith(args.domain)
      );
    },
    
    // オプショナル引数 → 指定されなかった引数はundefined
    searchUsers: (parent, args) => {
      console.log(args); // { name: "山田", minAge: undefined } など
      let result = sampleUsers;
      
      if (args.name) {
        result = result.filter(user => user.name.includes(args.name));
      }
      
      if (args.minAge !== undefined) {
        result = result.filter(user => user.age >= args.minAge);
      }
      
      return result;
    }
  }
};

// もしJavaScriptの関数のように直接引数を受け取る場合...
const badExample = {
  Query: {
    user: (id) => { /* ... */ },           // 引数1つ
    userByEmail: (email, domain) => { /* ... */ }, // 引数2つ
    searchUsers: (name, minAge) => { /* ... */ }   // オプショナル引数は？
  }
};

// 問題点：
// 1. 引数の数がバラバラで統一性がない
// 2. オプショナル引数の扱いが難しい
// 3. 将来的に引数を追加する時に既存コードが壊れる

// GraphQLの方式なら...
const goodExample = {
  Query: {
    // 全て同じパターン！統一性がある
    user: (parent, args) => { /* args.id */ },
    userByEmail: (parent, args) => { /* args.email, args.domain */ },
    searchUsers: (parent, args) => { /* args.name, args.minAge */ }
  }
};

// メリット：
// 1. 全てのリゾルバーが同じ形
// 2. 引数の追加/削除が簡単
// 3. ツールでの自動生成がしやすい

// こんなクエリが来た場合
query {
  user(id: "1") {
    name
    posts {      # ←ここでparentが活躍！
      title
    }
  }
}

// スキーマ定義
type User {
  id: ID!
  name: String!
  posts: [Post!]!  # ←このpostsリゾルバーでparentを使う
}

// リゾルバー
const resolvers = {
  Query: {
    user: (parent, args) => {
      return sampleUsers.find(user => user.id === args.id);
    }
  },
  User: {
    // User型のpostsフィールドのリゾルバー
    posts: (parent, args) => {
      // parent は上のuserリゾルバーが返したUserオブジェクト
      console.log(parent); // { id: "1", name: "山田太郎", email: "..." }
      
      // そのユーザーの投稿を取得
      return samplePosts.filter(post => post.authorId === parent.id);
    }
  }
};

// サーバーを起動する関数
async function startServer() {
  // Apollo Serverを作成
  const server = new ApolloServer({ 
    typeDefs,    // スキーマ定義
    resolvers    // データ取得処理
  });

  // Expressアプリを作成
  const app = express();
  
  // Apollo Serverを開始
  await server.start();
  
  // ExpressアプリにApollo Serverを統合
  server.applyMiddleware({ app });

  const PORT = 4000;
  
  // サーバーを起動
  app.listen(PORT, () => {
    console.log(`🚀 GraphQLサーバーが起動しました！`);
    console.log(`📍 GraphQL Playground: http://localhost:${PORT}${server.graphqlPath}`);
  });
}

// applyMiddleware を実行すると...
server.applyMiddleware({ app });

// 以下のようなルートが自動的に作られる
// GET /graphql  → GraphQL Playground画面
// POST /graphql → GraphQLクエリの実行

// サーバーを起動
startServer().catch(error => {
  console.error('サーバー起動エラー:', error);
});

{
  "name": "my-first-graphql",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "start": "node server.js",
    "dev": "nodemon server.js"
  },
  "dependencies": {
    "apollo-server-express": "^latest",
    "express": "^latest",
    "graphql": "^latest"
  },
  "devDependencies": {
    "nodemon": "^latest"
  }
}

npm run dev

# 左側のエディタに以下を入力
query {
  users {
    id
    name
    email
  }
}

{
  "data": {
    "users": [
      {
        "id": "1",
        "name": "山田太郎",
        "email": "yamada@example.com"
      },
      {
        "id": "2",
        "name": "田中花子",
        "email": "tanaka@example.com"
      },
      {
        "id": "3",
        "name": "佐藤次郎",
        "email": "sato@example.com"
      }
    ]
  }
}

query {
  user(id: "1") {
    name
    email
    age
  }
}

{
  "data": {
    "user": {
      "name": "山田太郎",
      "email": "yamada@example.com",
      "age": 25
    }
  }
}

query {
  users {
    name
    # emailやageは取得しない
  }
}

{
  "data": {
    "users": [
      { "name": "山田太郎" },
      { "name": "田中花子" },
      { "name": "佐藤次郎" }
    ]
  }
}

query {
  user(id: "999") {
    name
    email
  }
}

{
  "data": {
    "user": null
  }
}

GET /api/users/123

// REST APIの場合、複数回のリクエストが必要
// 1. まずユーザー情報を取得
fetch('/api/users/123')
  .then(response => response.json())
  .then(user => {
    console.log(user); // { id: 123, name: "山田太郎", email: "yamada@example.com" }
    
    // 2. 次にそのユーザーの記事を取得
    return fetch(`/api/users/${user.id}/posts`);
  })
  .then(response => response.json())
  .then(posts => {
    console.log(posts); // [{ id: 1, title: "記事1" }, { id: 2, title: "記事2" }]
  });

// GraphQLクエリの例
const query = `
  query {
    user(id: 123) {
      name          # 名前だけ欲しい
      posts {       # ユーザーの投稿も一緒に取得
        title       # タイトルだけ欲しい
      }
    }
  }
`;

// 1回のリクエストで全て取得
fetch('/graphql', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ query })
})
.then(response => response.json())
.then(data => {
  console.log(data);
  // 結果：
  // {
  //   "data": {
  //     "user": {
  //       "name": "山田太郎",
  //       "posts": [
  //         { "title": "記事1" },
  //         { "title": "記事2" }
  //       ]
  //     }
  //   }
  // }
});

# 名前とメールアドレスだけ欲しい場合
query {
  user(id: 123) {
    name
    email
    # ageやphoneNumberは取得しない
  }
}

# ユーザー情報、投稿、コメントを一度に取得
query {
  user(id: 123) {
    name
    posts {
      title
      comments {
        content
        author {
          name
        }
      }
    }
  }
}

# GraphQLでは型が明確に定義される
type User {
  id: ID!           # IDタイプ、必須
  name: String!     # 文字列、必須  
  age: Int          # 整数、オプショナル
  posts: [Post!]!   # Post型の配列、必須
}

type Post {
  id: ID!
  title: String!
  content: String!
  author: User!
}