中嶋悟
名前：中嶋 悟（なかじま さとる） ニックネーム：サトルン 年齢：28歳 性別：男性 職業：会社員（IT系メーカー・マーケティング部門） 通勤場所：東京都千代田区・本社オフィス 通勤時間：片道約45分（電車＋徒歩） 居住地：東京都杉並区・阿佐ヶ谷の1LDKマンション 出身地：神奈川県横浜市 身長：175cm 血液型：A型 誕生日：1997年5月12日 趣味：比較記事を書くこと、カメラ散歩、ガジェット収集、カフェ巡り、映画鑑賞（特に洋画）、料理（最近はスパイスカレー作りにハマり中） 性格：分析好き・好奇心旺盛・マイペース・几帳面だけど時々おおざっぱ・物事をとことん調べたくなるタイプ 1日（平日）のタイムスケジュール 6:30 起床。まずはコーヒーを淹れながらニュースとSNSチェック 7:00 朝食（自作のオートミールorトースト）、ブログの下書きや記事ネタ整理 8:00 出勤準備 8:30 電車で通勤（この間にポッドキャストやオーディオブックでインプット） 9:15 出社。午前は資料作成やメール返信 12:00 ランチはオフィス近くの定食屋かカフェ 13:00 午後は会議やマーケティング企画立案、データ分析 18:00 退社 19:00 帰宅途中にスーパー寄って買い物 19:30 夕食＆YouTubeやNetflixでリラックスタイム 21:00 ブログ執筆や写真編集、次の記事の構成作成 23:00 読書（比較記事のネタ探しも兼ねる） 23:45 就寝準備 24:00 就寝
はじめに：AjaxとSubmitの基本を整理
ここでは Ajax と Submit の違いを丁寧に解説します。
多くの人が混同する点は「非同期かどうか」「ページの再読み込みがあるかどうか」「どんな形式のデータが返ってくるか」などです。
まず前提として伝えたいのは Ajax は非同期のデータ通信を使って画面の一部だけを更新する技術 であり、Submit は従来のフォーム送信でページ全体を再読み込みして新しいページを表示する動作 という二つの性質を持つ点です。
この違いを理解すると、ユーザー体験の設計やサーバーとのやりとり方がはっきり分かります。
次節では俗に言われる「ajax submit」の意味合いと、従来の submit との実務的な差を整理します。
この知識は、サイトを作る上で「どの場面に Ajax を使うべきか」「送信後の挙動をどう設計するか」を判断する指針になります。
伝統的なフォーム送信と Ajax の違い
従来のフォーム送信は、ユーザーが送信ボタンを押すとブラウザがサーバーへリクエストを送り、サーバーからの応答を受け取った後にページ全体が更新されるのが基本です。
これに対して Ajax では、JavaScript がリクエストを発行してサーバーとやり取りしますが、受け取ったデータをそのまま現在のページの一部に反映し、ページ全体の再読み込みは起きません。
その結果、体験はより滑らかで「局所的な更新」が可能になります。
具体的には、検索ボックスの候補表示、フォームの送信後のメッセージ表示、カートの状態更新などを瞬時に行えます。
この違いはUXとパフォーマンスの両方に影響します。
ただし Ajax を使うには「データの取り扱いに慣れる必要」があり、クライアントとサーバーの間で期待するデータ形式を揃える工夫が要ります。
またセキュリティの観点では CSRF 対策や認証情報の取扱いに細心の注意が必要です。
この章の内容を押さえることで、なぜ一部の操作が Ajax で行われるのか、そして従来の方法が still 有効な場面があるのか、が理解できるようになります。
実務での使い分けと実装のコツ
現場で Ajax と従来の Submit をどう使い分けるかは「体験してほしい UX」と「技術的な制約」の両面で決まります。
もし目的がページ全体のリロードなしで情報を更新することなら Ajax が有利です。
反対に、セキュリティ上の理由や検索エンジンのインデックスに影響する可能性を避けたい場合、従来の Submit を選ぶことも合理的です。
実装のコツとしては、まずフォームの送信をイベントリスナーで検知し、preventDefault でデフォルトの挙動を止めることから始めます。
次に FormData を作成して Ajax で送信し、サーバーからJSONやテキスト、あるいは HTML の一部を返してもらい、クライアント側で DOM を更新します。
この時のポイントは「エラーハンドリング」「ロード中の表示」「送信後の再利用可能な状態の管理」です。
また API の設計は「返すデータの形式を統一する」「成功・失敗の判定を一貫させる」ことが重要です。
初学者は fetch を使うと分かりやすく、XHR の古い書き方よりも読みやすいコードになります。
経験を積むにつれて、複数のリクエストを同時に処理するパターンや、長い処理をバックグラウンドで走らせつつ UI を更新するパターンへと発展させることができます。
サンプルコードの解説
この項目ではコードを直接載せず、考え方の整理だけを行います。
実務では「イベントの捕捉」「データの作成」「通信の実行」「応答の解釈」という四つのステップを分けて考えると理解が進みます。
第一のステップはイベントの捕捉です。送信ボタンやフォームの submit イベントを捕らえ、preventDefault によってデフォルトの挙動を止めます。
次にデータの作成です。FormData を使えばファイルも含めた送信が簡単です。
三つ目のステップは通信です。fetch を使えば非同期で送信できます。
最後のステップは応答の解釈と DOM の更新です。返ってきたデータに基づいて、エラーメッセージを表示したり、リストを追加したりします。
この四つのステップを繰り返し練習することで、 Ajax 送信の感覚が身につきます。
放課後の雑談ネタ。AjaxとSubmitを学校のイベント案内に例えると、従来の Submit は“全員の席次を一括表示する紙芝居”、Ajax は“必要な情報だけを更新するスマホアプリ”のよう。局所更新の感覚を覚えると、何気ない操作にも反応速度の差が生まれてくる。きっかけは小さな変更を丁寧に反映する技術への理解で、UXの品質はここから大きく変わる。
ITの人気記事
