TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript jQueryのAjax関数を利用したJavaScriptについて現役エンジニアが解説【初心者向け】
オーダーメイドコース
icon
icon
JavaScript

jQueryのAjax関数を利用したJavaScriptについて現役エンジニアが解説【初心者向け】

初心者向けにjQueryのAjax関数を利用したJavaScriptについて解説しています。Ajaxを使うと、サーバサイドと非同期通信でデータのやりとりを行うことができます。入力された郵便番号から住所を取得するサンプルで使用例を見てみましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

jQueryのAjax関数を利用したJavaScriptについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね！

大石ゆかり

どういう内容でしょうか？

田島悠介

jQueryのAjax関数を利用したJavaScriptについて詳しく説明していくね！

大石ゆかり

お願いします！

 

目次

 

jQueryとは

jQueryとは、JavaScriptをより簡単に、短い記述で使えるようにすることができるライブラリのことをいいます。

 

[PR] コーディングで副業する方法とは

Ajaxとは

Ajaxとは「Asynchronous JavaScript ＋ XML」の略です。「Asynchronous JavaScript」は非同期という意味になります。

Ajaxを使うことでサーバーサイドと非同期通信でのデータのやりとりができるようになります。例えばボタンが押されたらサーバーサイドへ情報をリクエストして、帰ってきたデータをJavaScriptで表示といったことができるようになります。

非同期とは簡単にいうと、「同時進行で処理を進めますよ」というものです。同期処理は、1つずつ処理が終わってから次の処理を進めるというものになりますが、非同期処理は1つずつの処理が終わるのを待たずに並行して処理をするものになります。

 

Ajax関数の使い方

Ajax関数の使い方を紹介します。

  $.ajax({
    url: 'リクエスト先のURL',
    dataType: 'データのタイプ',
    success: function(data) {
      // 通信成功した時の処理
    }
  })

 

jQueryでAjax通信を行うサンプルを実行してみよう

サンプルとして郵便番号検索APIを使用し、入力フォームに入力された郵便番号を元に住所を検索し、結果を表示してみます。

See the Pen
ExgNLVY by Pei (@Pei-Log)
on CodePen.

 

まとめ

  $.ajax({
    url: 'リクエスト先のURL',
    dataType: 'データのタイプ',
    success: function(data) {
      // 通信成功した時の処理
    }
  })

この形で実行することで
Ajaxとして非同期処理を実行することができます。

 

監修してくれたメンター

土田隼平（つちだしゅんぺい)

フリーのWebエンジニアです。
最近までは求人サービスや画像共有システム、ECサービスの開発・運用をやってました。

趣味はラジオ（特にオールナイトニッポンとJUNK）を聞くことや近所の散歩です。
今の最重要ミッションは「運動不足解消」です。

 

大石ゆかり

内容分かりやすくて良かったです！

田島悠介

ゆかりちゃんも分からないことがあったら質問してね！

大石ゆかり

分かりました。ありがとうございます！

 

TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。

記事を検索

関連するキーワード

関連する記事

JavaScriptのアロー関数の使い方を現役エンジニアが解説【初心者向け】

JavaScriptのアロー関数の使い方について解説します。 実際のコードをもとに解説していきますので、理解を深めていきましょう。 また、入門向けの...
JavaScript

JavaScriptの比較演算子の使い方を現役エンジニアが解説【初心者向け】

JavaScriptの比較演算子の使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 &nb...
JavaScript

JavaScriptのコードを難読化する方法を現役エンジニアが解説【初心者向け】

JavaScriptのコードを難読化する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
JavaScript

JavaScriptの即時関数とクロージャについて現役エンジニアが解説【初心者向け】

JavaScriptの即時関数とクロージャについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 &n...
JavaScript

JavaScriptで正規表現のmatchを使う方法【初心者向け】

JavaScriptで正規表現のmatchを使う方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
JavaScript

JavaScriptでtableに行追加する方法を現役エンジニアが解説【初心者向け】

JavaScriptでtableに行追加する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
JavaScript

あわせてよく読まれている記事

Pythonの同期処理と非同期処理について現役エンジニアが解説【初心者向け】

Pythonの同期処理と非同期処理について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して、初心者向けに解説します。   Pythonについてそもそもよく分からないという方は、Pythonとは何なのか解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプ、Python講座の内容をもとに紹介しています。   田島悠介 今回は、Pythonに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 Pythonの同期処理と非同期処理について詳しく説明していくね！ 大石ゆかり お願いします！   目次 同期処理とは 非同期処理とは 同期処理と非同期処理を比較してみよう まとめ   同期処理とは 同期処理とは、プログラムにおいて、ある一つのタスクを実行中に他のタスクを実行したとき、先に実行中だったタスクの処理が中断する処理です。 たとえば、メインの実行文の中に特定の処理を行う関数が実行されている間は、メインの実行文の処理は中断されて関数の実行が終了したら再開する仕組みです。 図にすると、以下のようになります。 [PR] コーディングで副業する方法とは非同期処理とは 同期処理の一方で非同期処理はある一つのタスクを実行している傍らで、別のタスクを並行して実行する処理のことをいいます。 非同期処理を行なうことで時間のかかる処理や複数のタスクを同時進行で行なうときにつかうと全体の処理時間の短縮に繋がります。 こちらを図にすると以下の処理になります。 同期処理と非同期処理を比較してみよう 同期処理と非同期処理について、ここまで紹介してきましたが今度はPythonを例に同期処理と非同期処理の違いをサンプルコードで比較してみます。 今回は指定した引数の間sleepを実行するシンプルな関数を取り入れたサンプルです。 まずは、同期処理を行う例を見てみます。 import time def waiting(sec): print("======{}sec Waiting Start ========".format(sec)) time.sleep(sec) print("======{}sec Waiting Finish========".format(sec)) if __name__ == "__main__": waiting(3) waiting(2) waiting(1) こちらのサンプルを実行すると、以下の結果が出力されます。 ======3sec Waiting Start ======== ======3sec Waiting Finish======== ======2sec Waiting Start ======== ======2sec Waiting Finish======== ======1sec Waiting Start ======== ======1sec Waiting Finish======== 関数を上から順番に実行されるので、一つの処理が終わった瞬間に次の処理が実行されるようになります。 続いて非同期処理を行う場合はどうなるのかを見ていきましょう。 Pythonで非同期処理を行なう際にはasyncioを使います。先程のサンプルをasyncioを使って非同期処理にしてみます。asyncioはPythonの標準モジュールです。 import asyncio async def waiting(sec):
Python

JavaScriptのPromise.rejectメソッドの使い方を現役エンジニアが解説【初心者向け】

JavaScriptのPromise.rejectメソッドの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次jQueryとはAjaxとはAjax関数の使い方jQueryでAjax通信を行うサンプルを実行してみようまとめ監修してくれたメンター そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptのPromise.rejectメソッドの使い方について詳しく説明していくね！ 大石ゆかり お願いします！   はじめに JavaScriptで非同期処理を実装する際に、エラーハンドリングを行うrejectオブジェクトに関して説明をします。 現在多くのWebサイトで、以下の目的のため非同期処理を実装しています。 一部のコンテンツの表示速度改善 SPA（Single Page Application）によるUI向上 API連携 今回は非同期処理を実装する際に、大切なエラーハンドリングと注意点に関して解説します。 ぜひ実装で使えるようになりましょう。   非同期処理とは 処理には大まかに分けて以下2つの実行方式があります。 同期処理 非同期処理 まずはそれぞれの実行方式に関して説明します。 それぞれの処理方式に関して、ニュースサイトの記事を表示する例で説明します。 [1]記事タイトルを取得・表示（1秒） [2]記事の画像を取得・表示（1秒） [3]記事に対するコメントを取得・表示（3秒） [4]関連記事を取得・表示（3秒） [5]広告を取得・表示（2秒）   同期処理 1つ1つの処理が順番に行われ、1つの処理が完了するまで次の処理は実行されない処理方式です。 普段何気なくコーディングをしている処理が、この同期処理です。 [1]から[5]までの処理が順番に行われて初めてページが表示されるので、合計で1つの記事を表示するのに10秒かかる計算です。 ページ表示されるまで10秒も時間がかかると「遅い」「重い」サイトと思われてしまうデメリットがあります。 一方処理の実装方法によっては、すべてのコンテンツ（データ）の整合性を担保できるメリットがあります。   非同期処理 1つの処理が終わるのを待たずに、並列で処理を行う方法です。 [1]と[2]が完了したら一度画面をユーザーに表示させた後に[3]、[4]、[5]の処理を並列で処理させます。 まずはメインコンテンツなどを表示した後に、ユーザーに読み込み中であることを知らせた上で、サブコンテンツや広告などを順次読み込んでいきます。 ユーザーからすると記事の表示までは2秒、その後3秒後にすべてのコンテンツが表示されます。 すべてのコンテンツの表示する時間差は5秒ですが、記事を見ている間に残りのコンテンツも表示されるので、体感では8秒程早くなります。 以下イメージ図ですが、[3]から[5]が並列で処理されている状態を表しています。 今回はこの非同期処理にPromiseオブジェクトを使い、前述のrejectオブジェクトでエラーハンドリングを行う説明をします。   [PR] コーディングで副業する方法とはPromiseオブジェクトとは Promiseオブジェクトとは、非同期処理の結果と結果の値を表すオブジェクトです。 APIなどで通信するような時間のかかる処理などに非同期処理を使うことで、処理を止めずに進めることができます。 非同期で実行している処理が完了してから行いたい処理がある場合に、Promiseオブジェクトを使うことで簡潔に記述できます。 例えば、通信してデータを取得するような処理がある場合、処理が終わるまでデータがありません。 この場合、データが取得できてから、データを使う処理を行う必要があります。 このような非同期で行う処理の戻り値をPromiseオブジェクトにすることで、処理結果と結果の値を管理でき、非同期処理と他の処理を連動させることができます。   Promise.rejectとは 平たく言うと、Promiseで管理している非同期処理が失敗した時に呼ぶメソッドです。 rejectが失敗した時に呼ばれるのに対して、成功した場合はresolveというメソッドが呼ばれます。   Promise.rejectの使い方 rejectはPromiseオブジェクトのメソッドなので、以下のように記述することで使えます。 Promise.reject("失敗した理由は○○です") .then( function(successData) { //成功したとき（resolveが呼ばれたときはこちらの処理が実行されます） console.log(successData); }, function(error) { //失敗したとき（rejectが呼ばれたときはこちらの処理が実行されます） console.log(error); }); 引数は省略可能ですが、処理が失敗した理由を渡すことが多いです。 失敗の理由がわかれば、プログラムを書いた人は調査をスムーズに行うことができます。 またユーザーにはエラーメッセージなどで、一部の処理が失敗したことを伝える処理を実装することもあります。   実際に書いてみよう 以下ニュースサイトの例で、[3]以降の処理を非同期で実装するパターンです。 実装内容が多いですが、それぞれコピーして各ファイルを作成して処理の動きを見てみましょう。 ※非同期処理とわかりやすいように、各処理に2秒から3秒の待機時間を入れています。 <html> <head> <!-- css読み込み省略--> <!-- js読み込み省略--> </head> <body> <h2 class='title'>記事タイトル</h2> <div class= 'contents'> <img src="https://picsum.photos/id/237/100/100" /> <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
JavaScript

非同期処理を覚える！jQueryでajaxを利用する方法【初心者向け】

JavaScriptのライブラリであるjQueryでのAjaxの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 Ajaxを取り入れているサイトは多くあるので、覚えておくとサイト制作において便利でしょう。 非同期処理によってWebサイトのユーザー体験を上げたいという方はぜひ参考にしてみてください。 目次jQueryとはAjaxとはAjax関数の使い方jQueryでAjax通信を行うサンプルを実行してみようまとめ監修してくれたメンター そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   大石ゆかり 田島メンター！Ajaxとは何でしょうか？ 田島悠介 ページ全体を読み直さずに、ページの一部を書き換える仕組みのことだよ。 大石ゆかり そういうWebアプリ多いですよねー。 田島悠介 少し前から当たり前に使われるようになってるよね。さっそくAjaxを書いてみよう！   非同期処理とは 別の記事にて説明をしておりますので、こちらを先にご覧になることをお勧めします。 https://techacademy.jp/magazine/21141   Ajaxとは Ajax（エイジャックス）とは、「Asynchronous JavaScript And XML」の略で JavaScriptやJavaScriptのフレームワークもしくはライブラリを使用して行われる非同期処理のことです。 通常Webページの内容を変更するためには画面遷移やリロードする必要がありますが、Ajaxを使用すればリロードせずにページの内容を変更できます。 そのためサーバーの負荷軽減やリロードの時間の解消によるUX(ユーザーエクスペリエンス)の向上などが利点としてあげられます。 Ajaxが使用されているページの代表例がGoogle Mapです。 地図をドラッグするときに、ページ外の地図をリロードなしで表示できます。 JavaScriptのフレームワークはいくつかありますが、その中でも本記事ではjQueryを利用しAjaxの実装を行ってみます。   [PR] コーディングで副業する方法とはjQueryでのAjaxの書き方 Ajaxの基本となる書き方を紹介していきます。 jQueryでは$.ajaxを利用することでAjaxを使えます。 以下のようにscriptタグでjQueryのライブラリを読み込んでおき、さらにべつのscriptタグで以下のように処理を記述します。 <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script> <script> $( function() { $.ajax( { //実行する処理。 } ); } ); </script>   jQueryでの$.ajaxを実際に書いてみよう それでは実際に処理を書いてみましょう。今回はローカルにあるファイルをリロードなしで読み込んでみましょう。 ここで注意ですがChromeではローカルファイルの読み込みができないのでChrome以外のブラウザで実行するようにしてください。 //sample.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS overflow</title> <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script> <script> $(function()
JavaScript

特性を理解する！ノンブロッキングとは【初心者向け】

今回は、ノンブロッキングについて解説します。 Node.js環境下において、画面遷移せずに現在の処理状況を確認しつつ、他の処理も実行したい場合に参考にしてみてくださいね。   なお本記事は、TechAcademyのNode.jsオンライン講座の内容をもとに作成しています。   田島悠介 今回はノンブロッキングという言葉について勉強してみよう。加えて同期処理・非同期処理についても解説していくよ。 大石ゆかり 田島メンター！非同期処理というと、Promiseやasyncというパッケージがありましたよね。ノンブロッキングというのは何ですか～？ 田島悠介 ノンブロッキングと非同期処理は共通するところが多いけれど、少し違う点があるんだ。それぞれの具体的な特徴を挙げてみよう。 大石ゆかり お願いします！   ノンブロッキングとは ノンブロッキングとはNode.jsでは、ノンブロッキングI/Oとも呼ばれます。 ノンブロッキングI/Oとは、何かの処理前に、処理待ちが発生する場合、すぐに関数から何か返ってくるという処理です。 I/OとはInput/Outputの略です。日本語では、入出力を意味します。 コンピューターでは何かしらの情報をInput（入力）して、処理結果をOutput（出力）します。 この一連の流れをI/Oと呼びます。 ノンブロッキングをより理解するためには、ブロッキング処理（同期処理）、非同期処理を理解する必要があります。   ブロッキング処理（同期処理）で料理を作る ブロッキング処理と同期処理は厳密に言うと違う点も存在しますが、今回は非同期処理の説明も合わせるため同じような意味として、ブロッキング処理（同期処理）として解説します。 ブロッキング処理（同期処理）はこれまでのWebサービスでの処理方法です。 目玉焼きという料理を例に考えてみます。 処理 フライパンを火にかける ↓ 油をひく ↓ 卵を割る ↓ 水を入れる ↓ フタをする ↓ 出来上がる ↓ 皿を用意する ↓ 皿に盛りつける   解説 簡単に言うと、Aという処理を行っている間は、次のBという処理は手を付けないと言う事です。 目玉焼きという料理に例えると順番に処理をすることになります。   [PR] コーディングで副業する方法とは非同期処理で料理を作る 非同期処理は同期せずに処理を実行する方法です。 目玉焼きという料理に例えると次のようになります。 処理 フライパンを火にかける ↓ 油をひく ↓ 卵を割る ↓ 水を入れる ↓ フタをする ↓ 出来上がりの通知が来るまでの間で皿を用意する ↓ 出来上がりの通知が来たら皿に盛りつける   解説 ブロッキング処理（同期処理）との違いとして、フタをしたあと、出来上がりの通知が来るまでの間、皿を用意するという別の処理を行うことができます。 そして、自身で出来上がったかの確認をすること無く、出来上がったという通知が来てから皿に盛り付けています。 つまり、皿を用意する以外の処理が存在していれば、出来上がりの通知が来るまでの間は他の処理をすることが可能です。 田島悠介 まずは同期処理・非同期処理の特徴だね。 大石ゆかり 非同期処理は、他の処理を行っているときも並行して別の処理を行うって感じでしょうか。 田島悠介 次はノンブロッキングでの処理方法と、非同期処理との違いについて見てみよう。   ノンブロッキング処理で料理を作る ノンブロッキング処理は非同期処理と似ていますが少し違います。 目玉焼きという料理を作る過程を見ながら考えてみます。 処理 フライパンを火にかける ↓ 油をひく ↓ 卵を割る ↓ 水を入れる ↓ フタをする ↓ 数秒毎に卵に日が通っていないかチェックする ↓ 卵に火が通っていなかったので、とりあえず皿を出す ↓ 数秒毎に卵に火が通っていないかチェックする ↓ 出来上がっていたので皿に盛る   解説 ノンブロッキングもブロッキング処理（同期処理）と異なり、並行して別の処理を行うことができます。 ただ、非同期処理と異なる点として、非同期処理では目玉焼きに火が通ったかどうかは通知によって知ることができます。 ノンブロッキングでは、目玉焼きに日が通っていないかチェックする事で知ることができます。 実際のシステムでノンブロッキングは、処理がすぐできない場合、エラーが返ってきてブロック状態にさせないという処理を行います。   今回は、ノンブロッキングについて解説しました。 田島悠介 最後にノンブロッキングの特徴について解説したよ。 大石ゆかり プロセスをブロック状態にさせないから、ノンブロッキングということなんですね。 田島悠介 実際に処理を行う際の記述方法などはまた別のところで解説するので、まずは全体の流れを把握しておこう。 大石ゆかり 頭に入れておきます。ありがとうございました！   また、オンラインのプログラミングスクールTechAcademyでは、Node.jsオンライン講座を開催しています。 Node.jsを使ってWebアプリケーションを開発することができます。 現役エンジニアがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、習得することが可能です。 この記事を監修してくれた方 中本賢吾（なかもとけんご） アジマッチ有限会社　代表取締役社長 開発実績：PHPフレームワークを利用した会員制SNS・ネットショップ構築、AWSや専用サーバー下でLinuxを使用したセキュアな環境構築、人工知能を利用したシステム開発、店舗検索スマホアプリ開発など。 その他にも地域の職業プログラマー育成活動を行い、2018年には小学生がUnityで開発したオリジナルAndroidアプリをGooglePlayでリリース。ゲームで遊ぶより作ろうぜ！を合言葉に、小学生でも起業できる技術力を育成可能で有ることを証明し続けている。
Node.js

JavaScriptでの非同期のwhileループの書き方を現役エンジニアが解説【初心者向け】

JavaScriptでの非同期のwhileループの書き方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 非同期のwhileループの書き方について詳しく説明していくね！ 大石ゆかり お願いします！   目次 非同期処理とは 非同期のwhileループの書き方と注意点 実際に書いてみよう まとめ   非同期処理とは 通常、処理は一つ一つ順番に処理の完了を待って次の処理を行います。非同期処理は、これとは違い実行した処理を待たずに次の処理を実行していきます。Javascriptで非同期処理を実現するのに代表的な方法は「Promise」を使用することです。   [PR] コーディングで副業する方法とは非同期のwhileループの書き方と注意点 非同期処理は、先程も書いたとおり処理の結果を待たずに次の処理を実行してしまいます。非同期のwhile処理を作成する時は、その終了をちゃんと意識する必要あります。while分は通常で利用しても誤って無限ループにしてしまうことがあります。 同期の場合は、無限ループには入っていれば気が付きやすいですが、非同期で行うと気が付きにくくなります。また、見えないところで動いているので、大量に非同期の処理を実行してしまい、メモリを使いつくすようなこともありますので、注意しましょう。 また、例外処理を発行した時の動きも気を付ける必要があります。例外は非同期処理側では受け取れず、呼び出した側の方で例外を受ける必要があります。   実際に書いてみよう <!DOCTYPE html> <html lang="ja"> <head>   <meta charset="utf-8">   <title>closest JavaScript</title> </had> <body>   <script type="text/javascript">     console.log("1. １秒後に非同期開始");     setTimeout(() => {         console.log("3. あとから非同期処理が実行");         startTime = Date.now();         while (true) {             const diffTime = Date.now() - startTime;             //一秒後に処理を終了             if (diffTime >= 1000) {                 //必ず処理を抜けます                 console.log("4. " + diffTime + "経過後に非同期処理を抜けます");                 return;             }         }         console.log("5. ここは出力されません");     }, 1000);     console.log("2. 先に同期処理のこちらが実行される");   </script>   </body> </html>   まとめ 非同期処理は、もっと色々なことがあるのですが、まずは簡単なところから始めて利用を方法に慣れていきましょう   監修してくれたメンター 小宮山晃史（こみやまこうじ) 現在はOracle系システムの導入コンサルに勤め、仕事でコーディングをする機会は少なくなくなっているが、ライフワークで数多くの言語を勉強中。 iphoneのアプリ開発やWEBサーバの構築など幅広く挑戦しています。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。 挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
JavaScript

JavaScriptのPromiseの仕組みについて現役エンジニアが解説【初心者向け】

JavaScriptのPromiseの仕組みについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。   そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 Promiseの仕組みについて詳しく説明していくね！ 大石ゆかり お願いします！   目次 Promiseとは Promiseの動作の仕組み 実際に使ってみよう まとめ   Promiseとは 非同期処理の完了または失敗を表すオブジェクトです。 非同期処理とはなにか。非同期処理を理解するために、まずは同期処理について説明します。 同期処理とは、平たく言うと「ソースコードの上から順番に処理される」ことです。 JavaScriptは通常、ソースコードの上の行から順に処理がおこなわれます。 具体的な例を紹介します。 下記のソースを実行すると、コンソールには1つ目、2つ目、3つ目と表示されます。 console.log('1つ目'); console.log('2つ目'); console.log('3つ目'); ここで仮に2つ目の処理に時間がかかっても、3つ目の処理は2つ目の処理が終わるまで実行されません。 同期処理では、必ず順番どおりに処理がおこなわれます。 つまり、順番どおり＝同期している　となります。 これに対して非同期処理は、同期していない処理、つまり順番どおりではない処理ということになります。 具体的な例を紹介します。 下記のソースを実行すると、コンソールには、1つ目、3つ目、2つ目と表示されます。 console.log('1つ目'); setTimeout( () => console.log('2つ目'), 5000); console.log('3つ目'); setTimeoutメソッドを使って、2行目の処理を5秒後に実行するようにしています。 setTimeoutを使ったことで、非同期になり2つ目の処理の終わりを待たずに3つ目が実行されています。 同期処理だと必ず順番どおりになる代わりに、途中に大きなデータを取得するような時間のかかる処理があると、その後の処理がおこなわれないため、画面の表示がとまったり、操作できなかったりするような状態になります。 非同期処理にすることで、時間のかかる処理を待たずにその後の処理がおこなわれ、画面の表示や操作ができるようになります。   [PR] コーディングで副業する方法とはPromiseの動作の仕組み 非同期処理の後に処理をおこないたいケースがあります。 たとえば、いつ完了するかわからない通信をする処理を非同期にして、その後で通信結果を使って処理をするようなケースです。 Promiseオブジェクトを使うと、非同期処理の後に処理をおこなうことができます。 記述方法がいくつかあるので、今回は簡単なものを1つ紹介します。 new演算子を使って生成するとPromiseオブジェクトを作成できます。 作成の際は、引数に関数を渡します。 その関数の引数に2つの関数を渡します。 具体的には、下記のような記述になります。 new Promise( (functionA, functionB) => { //ここで非同期の処理をおこない、結果によって引数のどちらかの関数を呼び出す。 //1つ目の関数を呼び出すと、処理が成功したことになる。 //2つ目の関数を呼び出すと、処理が失敗したことになる。 }) 上記の例では、functionAとfunctionBという2つの関数を引数に持った関数をPromiseの引数に渡しています。 引数の関数名は自由につけられます。 1つ目の関数名には「解決する」を意味するresolve、2つ目の関数名には「拒否する」を意味するreject　という名前をつけることが多いです。 2つの関数のうちどちらかが実行され、成功か失敗かによってその後の処理がわかれます。 1つ目の関数が呼ばれた場合は、処理が成功して完了したという状態になりthenメソッド、2つ目の関数が呼ばれた場合は、処理が失敗したという状態になりcatchメソッドが実行されます。thenもcatchも引数に関数を渡します。 これで、Promiseの中でおこなわれた非同期の処理の後に、thenまたはcatchによってその後の処理が実行されます。   実際に使ってみよう 最初に紹介した非同期の例のソースを、Promiseを使ってその後の処理を作成してみます。 下記のソースを実行すると、コンソールには、1つ目、3つ目、2つ目と表示されます。 setTimeoutにより2つ目の処理の完了を待たずに（非同期）3つ目の処理がおこなわれています。 console.log('1つ目'); setTimeout( () => console.log('2つ目'), 5000); console.log('3つ目'); ここで、1つ目、3つ目、2つ目と表示された後に、なにかを表示したい場合にPromiseを使います。 console.log('1つ目'); new Promise( (success, fail) => { setTimeout( () => { console.log('2つ目'); success(); }, 5000); }) .then( () => console.log('成功した後の処理です')) .catch( () => console.log('失敗した後の処理です')); console.log('3つ目'); この処理の結果は、下記のようにコンソールに表示されます。 2つ目の後に表示が追加されていることが確認できました。 1つ目 3つ目 2つ目 成功した後の処理です 2つ目と表示する処理のsetTimeoutをPromiseに渡した関数の中で実行しています。 その後、引数の1つ目の関数であるsuccessを呼び出しているので、thenに渡した関数が実行されています。 引数の2つ目の関数であるfailを呼び出すと、catchに渡した関数が実行されることになります。 今回の例では、コンソールに出力するだけなので成功で完了として、1つ目の関数を呼び出しています。 通信をおこなうような処理などを非同期におこなう場合は、処理の結果に合わせて呼び出す関数を切り替えてください。   まとめ Promiseの仕組みと使い方を紹介しました。 Promiseの記述方法はいくつかあるのですが、まずは1つ記述方法を覚えて非同期処理の流れに慣れてください。   監修してくれたメンター 横山茂雄（よこやましげお） フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。 言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。 挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
JavaScript

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から
Webエンジニアに

Webエンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の行うリスキリングを通じたキャリアアップ支援事業の補助金対象コースです。条件を満たすことで支払った受講料の最大70％がキャッシュバックされます。詳しくは こちら のページをご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

オーダーメイドコース
TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript jQueryのAjax関数を利用したJavaScriptについて現役エンジニアが解説【初心者向け】