htmx のプログレッシブエンハンスメント思想を探る

2025年7月31日

htmx

Web 開発の世界は常に進化し続けています。新しいフレームワークやライブラリが次々と登場する中で、htmx は一つの革新的なアプローチを提示しています。それは「プログレッシブエンハンスメント」という思想です。

この記事では、htmx がどのようにして Web 開発の複雑さを解消し、開発者とユーザーの両方にとってより良い体験を提供しようとしているのかを深く探っていきます。従来の SPA（Single Page Application）とは異なる、より自然で持続可能な Web 開発の未来について考えてみましょう。

プログレッシブエンハンスメントとは何か

プログレッシブエンハンスメントは、Web アプリケーションの設計哲学の一つです。基本的な機能から始めて、ブラウザやデバイスの能力に応じて段階的に機能を拡張していくアプローチを指します。

基本理念

プログレッシブエンハンスメントの核となる考え方は以下の通りです：

基本機能の保証: JavaScript が無効でも基本的な機能が動作する
段階的な機能拡張: ブラウザの能力に応じて機能を追加
ユーザビリティの向上: より良い体験を提供できる環境では高度な機能を提供

htmx での実現方法

htmx は、この思想を HTML の属性として実装しています。以下は基本的な例です：

html<!-- 基本的なフォーム送信 -->
<form action="/submit" method="POST">
  <input type="text" name="message" required />
  <button type="submit">送信</button>
</form>

この HTML は、JavaScript が無効でも正常に動作します。htmx を追加すると：

html<!-- htmxによる拡張 -->
<form
  hx-post="/submit"
  hx-target="#result"
  hx-swap="innerHTML"
>
  <input type="text" name="message" required />
  <button type="submit">送信</button>
</form>
<div id="result"></div>

このように、基本的な HTML の構造を保ちながら、htmx の属性によって動的な機能を追加できます。

Web 開発の歴史と思想の変遷

Web 開発の歴史を振り返ると、技術の進歩と共に開発思想も大きく変化してきました。

初期の Web 開発

1990 年代から 2000 年代初期にかけて、Web は静的な HTML ページが中心でした：

html<!-- 初期のWebページの例 -->
<html>
  <head>
    <title>シンプルなWebページ</title>
  </head>
  <body>
    <h1>ようこそ</h1>
    <p>これは静的なHTMLページです。</p>
    <a href="page2.html">次のページへ</a>
  </body>
</html>

この時代は、ページ遷移が基本で、ユーザーは新しいページを読み込むたびに全体を再描画していました。

JavaScript の台頭

2000 年代後半になると、JavaScript が本格的に活用されるようになります：

javascript// 従来のJavaScriptによる動的更新
function updateContent() {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', '/api/data', true);
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      document.getElementById('content').innerHTML =
        xhr.responseText;
    }
  };
  xhr.send();
}

このアプローチは機能的なものの、コードが複雑になりがちでした。

SPA の時代

2010 年代に入ると、React、Vue、Angular などの SPA フレームワークが主流になります：

javascript// Reactコンポーネントの例
import React, { useState, useEffect } from 'react';

function TodoList() {
  const [todos, setTodos] = useState([]);

  useEffect(() => {
    fetch('/api/todos')
      .then((response) => response.json())
      .then((data) => setTodos(data));
  }, []);

  return (
    <div>
      {todos.map((todo) => (
        <div key={todo.id}>{todo.title}</div>
      ))}
    </div>
  );
}

SPA は豊富な機能を提供しましたが、複雑性とバンドルサイズの増大という課題を抱えていました。

htmx が目指す Web 開発の未来

htmx は、Web 開発の複雑さを解消し、より自然で持続可能なアプローチを提案しています。

シンプルさの追求

htmx の最大の特徴は、そのシンプルさにあります。複雑な JavaScript コードを書く必要がなく、HTML の属性だけで動的な機能を実現できます：

html<!-- htmxによるシンプルな実装 -->
<div hx-get="/todos" hx-trigger="load">
  <p>読み込み中...</p>
</div>

この一行の属性で、ページ読み込み時に自動的にサーバーからデータを取得し、表示を更新します。

サーバーサイドレンダリングの活用

htmx は、サーバーサイドレンダリングの利点を最大限に活用します：

html<!-- サーバーサイドでレンダリングされたHTML -->
<div id="todo-list">
  <div class="todo-item">
    <span>買い物に行く</span>
    <button
      hx-delete="/todos/1"
      hx-target="closest .todo-item"
    >
      削除
    </button>
  </div>
  <div class="todo-item">
    <span>本を読む</span>
    <button
      hx-delete="/todos/2"
      hx-target="closest .todo-item"
    >
      削除
    </button>
  </div>
</div>

サーバーが完全な HTML を返すため、SEO に有利で、初期表示も高速です。

段階的な機能拡張

htmx は、ブラウザの能力に応じて機能を段階的に拡張します：

html<!-- 基本的な機能 -->
<form action="/submit" method="POST">
  <input type="text" name="message" />
  <button type="submit">送信</button>
</form>

<!-- htmxが利用可能な場合の拡張 -->
<form
  hx-post="/submit"
  hx-target="#result"
  hx-swap="innerHTML"
>
  <input type="text" name="message" />
  <button type="submit">送信</button>
</form>
<div id="result"></div>

このように、基本的な機能を保ちながら、htmx が利用可能な環境ではより良い体験を提供できます。

従来の SPA との思想的な違い

htmx と従来の SPA は、Web 開発に対する根本的な思想が異なります。

アーキテクチャの違い

SPA は、クライアントサイドでアプリケーション全体を管理します：

javascript// SPAでの状態管理の例
const app = {
  state: {
    todos: [],
    loading: false,
    error: null,
  },

  async fetchTodos() {
    this.state.loading = true;
    try {
      const response = await fetch('/api/todos');
      this.state.todos = await response.json();
    } catch (error) {
      this.state.error = error.message;
    } finally {
      this.state.loading = false;
    }
  },
};

一方、htmx はサーバーサイドで状態を管理し、必要な部分のみを更新します：

html<!-- htmxでの状態管理 -->
<div hx-get="/todos" hx-trigger="load, click from:button">
  <!-- サーバーが現在の状態をHTMLとして返す -->
</div>

データフローの違い

SPA では、クライアントとサーバー間で JSON データをやり取りします：

javascript// SPAでのデータ取得
async function getTodos() {
  const response = await fetch('/api/todos');
  const todos = await response.json();
  renderTodos(todos);
}

function renderTodos(todos) {
  const container = document.getElementById('todos');
  container.innerHTML = todos
    .map((todo) => `<div>${todo.title}</div>`)
    .join('');
}

htmx では、サーバーが直接 HTML を返します：

html<!-- htmxでのデータ取得 -->
<div hx-get="/todos">
  <!-- サーバーが直接HTMLを返す -->
</div>

サーバーサイド（例：Node.js + Express）：

javascriptapp.get('/todos', (req, res) => {
  const todos = getTodosFromDatabase();
  res.send(`
    <div id="todos">
      ${todos
        .map((todo) => `<div>${todo.title}</div>`)
        .join('')}
    </div>
  `);
});

開発者の責任の違い

SPA では、開発者が多くの責任を負います：

javascript// SPAでの複雑な状態管理
class TodoApp {
  constructor() {
    this.state = {
      todos: [],
      filter: 'all',
      loading: false,
    };
    this.bindEvents();
  }

  bindEvents() {
    document
      .getElementById('add-todo')
      .addEventListener('click', () => {
        this.addTodo();
      });

    document
      .getElementById('filter-all')
      .addEventListener('click', () => {
        this.setFilter('all');
      });
  }

  async addTodo() {
    this.state.loading = true;
    try {
      const response = await fetch('/api/todos', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          title: this.getInputValue(),
        }),
      });
      const newTodo = await response.json();
      this.state.todos.push(newTodo);
      this.render();
    } catch (error) {
      this.showError(error);
    } finally {
      this.state.loading = false;
    }
  }
}

htmx では、多くの責任をサーバーサイドに委譲します：

html<!-- htmxでのシンプルな実装 -->
<form
  hx-post="/todos"
  hx-target="#todo-list"
  hx-swap="beforeend"
>
  <input type="text" name="title" required />
  <button type="submit">追加</button>
</form>
<div id="todo-list"></div>

プログレッシブエンハンスメントの実践例

実際のプロジェクトで htmx のプログレッシブエンハンスメントを活用する例を見てみましょう。

基本的な Todo アプリケーション

まず、JavaScript なしでも動作する基本的な Todo アプリを作成します：

html<!-- 基本的なTodoアプリ -->
<!DOCTYPE html>
<html>
  <head>
    <title>Todoアプリ</title>
  </head>
  <body>
    <h1>Todoリスト</h1>

    <!-- 基本的なフォーム -->
    <form action="/todos" method="POST">
      <input
        type="text"
        name="title"
        placeholder="新しいタスク"
        required
      />
      <button type="submit">追加</button>
    </form>

    <!-- Todoリスト -->
    <ul>
      <li>
        買い物に行く
        <form
          action="/todos/1"
          method="POST"
          style="display: inline;"
        >
          <input
            type="hidden"
            name="_method"
            value="DELETE"
          />
          <button type="submit">削除</button>
        </form>
      </li>
      <li>
        本を読む
        <form
          action="/todos/2"
          method="POST"
          style="display: inline;"
        >
          <input
            type="hidden"
            name="_method"
            value="DELETE"
          />
          <button type="submit">削除</button>
        </form>
      </li>
    </ul>
  </body>
</html>

この HTML は、JavaScript が無効でも完全に機能します。

htmx による機能拡張

次に、htmx を追加して動的な機能を実装します：

html<!-- htmxを追加したTodoアプリ -->
<!DOCTYPE html>
<html>
  <head>
    <title>Todoアプリ</title>
    <script src="https://unpkg.com/htmx.org@1.9.10"></script>
  </head>
  <body>
    <h1>Todoリスト</h1>

    <!-- htmxによる動的フォーム -->
    <form
      hx-post="/todos"
      hx-target="#todo-list"
      hx-swap="beforeend"
    >
      <input
        type="text"
        name="title"
        placeholder="新しいタスク"
        required
      />
      <button type="submit">追加</button>
    </form>

    <!-- 動的に更新されるTodoリスト -->
    <ul id="todo-list" hx-get="/todos" hx-trigger="load">
      <!-- サーバーからHTMLが返される -->
    </ul>
  </body>
</html>

サーバーサイドの実装

Node.js + Express での実装例：

javascriptconst express = require('express');
const app = express();

app.use(express.urlencoded({ extended: true }));
app.use(express.json());

// メモリ内のTodoリスト（実際のプロジェクトではデータベースを使用）
let todos = [
  { id: 1, title: '買い物に行く', completed: false },
  { id: 2, title: '本を読む', completed: false },
];

// メインページ
app.get('/', (req, res) => {
  res.send(`
    <!DOCTYPE html>
    <html>
    <head>
      <title>Todoアプリ</title>
      <script src="https://unpkg.com/htmx.org@1.9.10"></script>
    </head>
    <body>
      <h1>Todoリスト</h1>
      
      <form hx-post="/todos" hx-target="#todo-list" hx-swap="beforeend">
        <input type="text" name="title" placeholder="新しいタスク" required>
        <button type="submit">追加</button>
      </form>
      
      <ul id="todo-list" hx-get="/todos" hx-trigger="load">
        ${renderTodos()}
      </ul>
    </body>
    </html>
  `);
});

// Todoリストの取得（HTMLとして返す）
app.get('/todos', (req, res) => {
  res.send(renderTodos());
});

// 新しいTodoの追加
app.post('/todos', (req, res) => {
  const { title } = req.body;
  const newTodo = {
    id: todos.length + 1,
    title,
    completed: false,
  };
  todos.push(newTodo);

  // 新しいTodoのHTMLのみを返す
  res.send(renderTodoItem(newTodo));
});

// Todoの削除
app.delete('/todos/:id', (req, res) => {
  const id = parseInt(req.params.id);
  todos = todos.filter((todo) => todo.id !== id);
  res.status(204).send();
});

// HTMLレンダリング関数
function renderTodos() {
  return todos.map((todo) => renderTodoItem(todo)).join('');
}

function renderTodoItem(todo) {
  return `
    <li id="todo-${todo.id}">
      <span class="${todo.completed ? 'completed' : ''}">${
    todo.title
  }</span>
      <button hx-delete="/todos/${todo.id}" 
              hx-target="#todo-${todo.id}" 
              hx-swap="outerHTML">
        削除
      </button>
      <button hx-put="/todos/${todo.id}/toggle" 
              hx-target="#todo-${todo.id}" 
              hx-swap="outerHTML">
        ${todo.completed ? '未完了' : '完了'}
      </button>
    </li>
  `;
}

app.listen(3000, () => {
  console.log(
    'サーバーが起動しました: http://localhost:3000'
  );
});

エラーハンドリングの実装

htmx では、エラーハンドリングも宣言的に実装できます：

html<!-- エラーハンドリング付きのフォーム -->
<form
  hx-post="/todos"
  hx-target="#todo-list"
  hx-swap="beforeend"
  hx-on::after-request="if(event.detail.failed) alert('エラーが発生しました')"
>
  <input
    type="text"
    name="title"
    placeholder="新しいタスク"
    required
  />
  <button type="submit">追加</button>
</form>

<!-- エラー表示エリア -->
<div
  id="error-message"
  hx-swap-oob="true"
  style="display: none; color: red;"
></div>

サーバーサイドでのエラーハンドリング：

javascriptapp.post('/todos', (req, res) => {
  try {
    const { title } = req.body;

    if (!title || title.trim().length === 0) {
      return res.status(400).send(`
        <div id="error-message" style="color: red;">
          タスクのタイトルを入力してください
        </div>
      `);
    }

    const newTodo = {
      id: todos.length + 1,
      title: title.trim(),
      completed: false,
    };
    todos.push(newTodo);

    res.send(renderTodoItem(newTodo));
  } catch (error) {
    res.status(500).send(`
      <div id="error-message" style="color: red;">
        サーバーエラーが発生しました
      </div>
    `);
  }
});

開発者体験の向上

htmx は、開発者の体験を大幅に向上させる多くの機能を提供しています。

デバッグの容易さ

htmx には、開発を支援するデバッグ機能が組み込まれています：

html<!-- デバッグモードの有効化 -->
<script>
  htmx.logAll(); // すべてのhtmxイベントをログ出力
</script>

<!-- デバッグ情報の表示 -->
<div
  hx-get="/debug-info"
  hx-trigger="load"
  hx-indicator="#loading"
>
  <div id="loading" class="htmx-indicator">
    読み込み中...
  </div>
</div>

開発者ツールの活用

ブラウザの開発者ツールで htmx の動作を確認できます：

javascript// 開発者ツールのコンソールで実行
htmx.on('htmx:beforeRequest', function (evt) {
  console.log('リクエスト開始:', evt.detail);
});

htmx.on('htmx:afterRequest', function (evt) {
  console.log('リクエスト完了:', evt.detail);
});

htmx.on('htmx:responseError', function (evt) {
  console.error('エラー発生:', evt.detail);
});

ホットリロードの実装

開発時の効率を上げるためのホットリロード機能：

html<!-- 開発環境でのホットリロード -->
<script>
  if (location.hostname === 'localhost') {
    // 開発環境でのみ有効
    setInterval(() => {
      htmx
        .ajax('GET', '/check-updates', {
          target: 'body',
          swap: 'none',
        })
        .then((response) => {
          if (response.includes('reload')) {
            location.reload();
          }
        });
    }, 2000);
  }
</script>

型安全性の確保

TypeScript と組み合わせることで、型安全性を確保できます：

typescript// htmxの型定義
interface htmxEvent {
  detail: {
    xhr: XMLHttpRequest;
    target: HTMLElement;
    requestConfig: any;
  };
}

// カスタムイベントハンドラー
htmx.on('htmx:beforeRequest', (event: htmxEvent) => {
  const { target, requestConfig } = event.detail;

  // リクエスト前の処理
  if (target.hasAttribute('data-confirm')) {
    const confirmed = confirm(
      target.getAttribute('data-confirm') || ''
    );
    if (!confirmed) {
      event.preventDefault();
    }
  }
});

テストの容易さ

htmx は、テストが書きやすい設計になっています：

javascript// テスト例（Jest + jsdom）
describe('htmx Todo App', () => {
  beforeEach(() => {
    document.body.innerHTML = `
      <form hx-post="/todos" hx-target="#todo-list">
        <input type="text" name="title" value="テストタスク">
        <button type="submit">追加</button>
      </form>
      <ul id="todo-list"></ul>
    `;
  });

  test('新しいTodoを追加できる', async () => {
    const form = document.querySelector('form');
    const input = document.querySelector(
      'input[name="title"]'
    );

    // フォーム送信をシミュレート
    htmx.trigger(form, 'submit');

    // レスポンスをシミュレート
    await htmx.process(form);

    // 結果を検証
    const todoList = document.getElementById('todo-list');
    expect(todoList.innerHTML).toContain('テストタスク');
  });
});

パフォーマンスとユーザビリティの両立

htmx は、パフォーマンスとユーザビリティの両方を最適化する設計になっています。

効率的な DOM 更新

htmx は、必要な部分のみを更新することで効率性を実現します：

html<!-- 部分的な更新 -->
<div id="user-profile">
  <h2>ユーザープロフィール</h2>
  <div
    id="profile-details"
    hx-get="/profile/details"
    hx-trigger="load"
  >
    <!-- プロフィール詳細が動的に読み込まれる -->
  </div>

  <div
    id="recent-activity"
    hx-get="/profile/activity"
    hx-trigger="load"
  >
    <!-- 最近のアクティビティが動的に読み込まれる -->
  </div>
</div>

キャッシュの活用

htmx は、適切なキャッシュ戦略を提供します：

html<!-- キャッシュの設定 -->
<div
  hx-get="/static-content"
  hx-cache="true"
  hx-trigger="load"
>
  <!-- 静的コンテンツはキャッシュされる -->
</div>

<div
  hx-get="/dynamic-content"
  hx-cache="false"
  hx-trigger="load, click from:button"
>
  <!-- 動的コンテンツは毎回取得 -->
</div>

遅延読み込みの実装

必要な時にのみコンテンツを読み込む遅延読み込み：

html<!-- 遅延読み込み -->
<div
  hx-get="/heavy-content"
  hx-trigger="intersect once"
  hx-indicator="#loading"
>
  <div id="loading" class="htmx-indicator">
    読み込み中...
  </div>
</div>

プログレッシブな画像読み込み

画像の段階的読み込みも実装できます：

html<!-- プログレッシブ画像読み込み -->
<div class="image-container">
  <!-- 低解像度のプレースホルダー -->
  <img src="/placeholder.jpg" alt="プレースホルダー" />

  <!-- 高解像度画像の遅延読み込み -->
  <img
    hx-get="/high-res-image"
    hx-trigger="intersect once"
    hx-swap="outerHTML"
    style="display: none;"
  />
</div>

アクセシビリティの向上

htmx は、アクセシビリティも考慮した設計になっています：

html<!-- アクセシビリティ対応 -->
<form
  hx-post="/submit"
  hx-target="#result"
  hx-indicator="#loading"
  aria-describedby="loading"
>
  <input
    type="text"
    name="message"
    aria-label="メッセージを入力"
    required
  />

  <button type="submit" aria-describedby="loading">
    送信
  </button>

  <div
    id="loading"
    class="htmx-indicator"
    role="status"
    aria-live="polite"
  >
    送信中...
  </div>
</form>

<div id="result" role="status" aria-live="polite">
  <!-- 結果がここに表示される -->
</div>

エラー状態の適切な処理

エラーが発生した場合の適切な処理：

html<!-- エラー処理 -->
<div
  hx-get="/api/data"
  hx-target="#content"
  hx-swap="innerHTML"
  hx-on::after-request="handleResponse(event)"
>
  <div id="content">
    <!-- コンテンツがここに表示される -->
  </div>

  <div
    id="error"
    hx-swap-oob="true"
    style="display: none; color: red;"
  ></div>
</div>

<script>
  function handleResponse(event) {
    const { xhr } = event.detail;

    if (xhr.status >= 400) {
      const errorDiv = document.getElementById('error');
      errorDiv.textContent =
        'エラーが発生しました。しばらく時間をおいて再試行してください。';
      errorDiv.style.display = 'block';
    }
  }
</script>

パフォーマンス監視

htmx のパフォーマンスを監視する仕組み：

javascript// パフォーマンス監視
htmx.on('htmx:beforeRequest', function (evt) {
  evt.detail.startTime = performance.now();
});

htmx.on('htmx:afterRequest', function (evt) {
  const duration = performance.now() - evt.detail.startTime;
  console.log(`リクエスト完了: ${duration.toFixed(2)}ms`);

  // パフォーマンスが悪い場合の警告
  if (duration > 1000) {
    console.warn('リクエストが遅いです:', evt.detail.path);
  }
});

まとめ

htmx のプログレッシブエンハンスメント思想は、Web 開発の未来を指し示す重要なアプローチです。従来の SPA が抱えていた複雑性の問題を解決し、より自然で持続可能な Web 開発を実現しています。

主要な利点

シンプルさ: 複雑な JavaScript コードを書く必要がなく、HTML の属性だけで動的な機能を実現
段階的機能拡張: 基本的な機能を保ちながら、ブラウザの能力に応じて機能を拡張
サーバーサイドレンダリング: SEO に有利で、初期表示が高速
開発効率: 多くの責任をサーバーサイドに委譲し、開発者の負担を軽減
アクセシビリティ: 基本的な機能は JavaScript なしでも動作

実践的な価値

htmx は、理論的な思想だけでなく、実践的な価値も提供しています。実際のプロジェクトで活用することで、開発効率の向上、メンテナンス性の改善、ユーザー体験の最適化を同時に実現できます。

未来への示唆

Web 開発の未来において、htmx のプログレッシブエンハンスメント思想は重要な役割を果たすでしょう。技術の進歩と共に、より多くの開発者がこのアプローチの価値に気づき、採用していくことが期待されます。

htmx は、Web 開発の複雑さを解消し、開発者とユーザーの両方にとってより良い体験を提供する革新的なソリューションです。プログレッシブエンハンスメントの思想を理解し、実践することで、より持続可能で効率的な Web 開発を実現できるでしょう。

htmx のプログレッシブエンハンスメント思想を探る

プログレッシブエンハンスメントとは何か

基本理念

htmx での実現方法

Web 開発の歴史と思想の変遷

初期の Web 開発

JavaScript の台頭

SPA の時代

htmx が目指す Web 開発の未来

シンプルさの追求

サーバーサイドレンダリングの活用

段階的な機能拡張

従来の SPA との思想的な違い

アーキテクチャの違い

データフローの違い

開発者の責任の違い

プログレッシブエンハンスメントの実践例

基本的な Todo アプリケーション

htmx による機能拡張

サーバーサイドの実装

エラーハンドリングの実装

開発者体験の向上

デバッグの容易さ

開発者ツールの活用

ホットリロードの実装

型安全性の確保

テストの容易さ

パフォーマンスとユーザビリティの両立

効率的な DOM 更新

キャッシュの活用

遅延読み込みの実装

プログレッシブな画像読み込み

アクセシビリティの向上

エラー状態の適切な処理

パフォーマンス監視

まとめ

主要な利点

実践的な価値

未来への示唆

関連リンク

htmxの記事Htmx

htmx のプログレッシブエンハンスメント思想を探る

htmx で多段階ウィザードフォームを実装するコツ

htmx と Alpine.js でインタラクティブな UI を作る

htmx の history 拡張で快適な SPA ライク体験を実現

htmx で始める WebSocket 連携：ライブ UI の構築術

htmx で実装するリアルタイム検索とオートコンプリート

記事Article

アクセシビリティ重視！React アニメーションと WCAG 対応の勘所

Nuxt で実践！SEO 対策とメタタグ管理のベストプラクティス

htmx のプログレッシブエンハンスメント思想を探る

Tauri でマルチウィンドウアプリを実現する方法

TypeScript でセキュアな認証・認可を実装するベストプラクティス

Svelte で API 通信を極める：fetch 活用ガイド

ブログBlog

フロントエンドエンジニアの成長戦略：コーチングで最速スキルアップする方法

失敗を称賛する文化はどう作る？アジャイルな組織へ生まれ変わるための第一歩

「アジャイル導入した」と言いたいだけの上司を黙らせる、失敗しないための根回し術

アジャイルソフトウェア開発宣言から 20 年以上。今、私たちがアジャイルをどう捉え直すべきか

バイブコーディング×アクセシビリティ：誰もが開発できる社会を目指して

“思いつき”がそのまま動く！バイブコーディングによるプロトタイピング術

書籍レビューReview

今の自分に満足していますか？『持たざる者の逆襲 まだ何者でもない君へ』溝口勇児

ついに語られた業界の裏側！『フジテレビの正体』堀江貴文が描くテレビ局の本当の姿

愛する勇気を持てば人生が変わる！『幸せになる勇気』岸見一郎・古賀史健のアドラー実践編で真の幸福を手に入れる

週末を変えれば年収も変わる！『世界の一流は「休日」に何をしているのか』越川慎司の一流週末メソッド

新しい自分に会いに行こう！『自分の変え方』村岡大樹の認知科学コーチングで人生リセット

科学革命から AI 時代へ！『サピエンス全史 下巻』ユヴァル・ノア・ハラリが予見する人類の未来

今の自分に満足していますか？『持たざる者の逆襲　まだ何者でもない君へ』溝口勇児

科学革命から AI 時代へ！『サピエンス全史下巻』ユヴァル・ノア・ハラリが予見する人類の未来