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について詳しく説明していくね！

大石ゆかり

お願いします！

 

目次

1時間でできる無料体験！

 

jQueryとは

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

 

[PR] フロントエンドで副業する学習方法を動画で公開中

Ajaxとは

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

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

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

 

Ajax関数の使い方

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

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

 

コラム

コスパとタイパ、両方結果的に良くなる良くなる学び方とは？

「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ 結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。

コスパ・タイパ最適化の参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。

  • ・困ったときに、質問や相談できる相手がいるため挫折しなかった
  • ・プロとして必要なスキルのみを深く学べたので無駄がなかった
  • ・副業案件の提供と納品までのサポートがあったので目的を達成できた

安価・短期間で広く浅く学んでも意味がありません。 本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に 無料相談 に参加してみませんか？

カウンセラー・現役のプロへ、何でも気軽に無料相談可能。 30分か60分お好きな時間が選べて、かつ3回まで すべて無料で ご利用できます。
無理な勧誘は一切ない ので、お気軽にご参加ください。

今なら相談した方限定の割引・参加特典付き！ 無料相談はこちら

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

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

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

 

まとめ

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

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

 

1時間でできる無料体験！

監修してくれたメンター

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

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

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

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

 

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

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

初心者・未経験でもできる。まずはテックアカデミーに相談しよう

プログラミングを独学で学習していて、このように感じた経験はないでしょうか？

  • ・調べてもほしい情報が見つからない
  • ・独学のスキルが実際の業務で通用するのか不安
  • ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう カウンセラーやエンジニア・デザイナー があなたの相談に真摯に向き合います。

「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）

今なら参加者限定の割引特典付き！ 無料相談を予約する

記事を検索

関連するキーワード

関連する記事

JavaScriptでindexOfメソッドを使って文字列を検索する方法【初心者向け】

JavaScriptをプログラミング初心者向けに紹介した記事です。 今回は、JavaScriptでindexOfを使う方法について、テックアカデミーのメン...
JavaScript

JavaScriptにおけるtimeの利用方法について現役エンジニアが解説【初心者向け】

JavaScriptにおけるtimeの利用方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 ...
JavaScript

jQueryで要素を選択するセレクタの使い方【初心者向け】

JavaScriptのライブラリであるjQueryでセレクタの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解...
JavaScript

JavaScriptのAudioオブジェクトの使い方を現役エンジニアが解説【初心者向け】

JavaScriptのAudioオブジェクトの使い方について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。 また、入門向...
JavaScript

JavaScriptでCookieのpath属性を設定する方法を現役エンジニアが解説【初心者向け】

JavaScriptでCookieのpath属性を設定する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説...
JavaScript

JavaScriptでアンカータグのhrefを取得する方法を現役エンジニアが解説【初心者向け】

JavaScriptでアンカータグのhrefを取得する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説し...
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>   コラム コスパとタイパ、両方結果的に良くなる良くなる学び方とは？ 「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。 もちろん、時間も費用もかかることは間違いありません。 ただ
JavaScript

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オブジェクトにすることで、処理結果と結果の値を管理でき、非同期処理と他の処理を連動させることができます。   コラム コスパとタイパ、両方結果的に良くなる良くなる学び方とは？ 「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。 もちろん、時間も費用もかかることは間違いありません。 ただ 結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。 コスパ・タイパ最適化の参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。
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

jQueryのAjaxでPOST送信してPHPで受け取る方法【初心者向け】現役エンジニアが解説

今回は、jQueryのAjaxでPOST送信してPHPで受け取る方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 PHPについてそもそもよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、PHPに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 jQueryのAjaxでPOST送信してPHPで受け取る方法について詳しく説明していくね！ 大石ゆかり お願いします！   目次 Ajaxとは AjaxでPOST送信する jQuery（送信側）の記述方法 PHP（受信側）の記述方法 まとめ   Ajaxとは AjaxとはHTTPプロトコル通信で、HTMLやPHPファイルからリクエスト送信をHTTPサーバに送信して、レスポンスをブラウザ側で受信する動作を非同期通信で受け取ることができる技術です。 Ajaxを使うとHTMLファイルの中の一部だけ表示更新するなどの操作を行うことができます。 例えば、ブラウザ上に表示した一覧表の内容を更新して、データベースに登録した内容をまた一覧表に反映させる時、HTMLファイルの表部分の表示だけ更新する、ということができるようになります。   [PR] フロントエンドで副業する学習方法を動画で公開中AjaxでPOST送信する Ajaxを使ってPOST送信するには、jQuery側でPOST送信するデータの定義を記述して、PHP側で受け取り側の記述をします。 （POST送信とはブラウザの入力フォームなどの内容をサーバ（PHP）に送る送信方法の一つです。）   表示結果   index.htmlのコード <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <title>jQueryのAjaxでPOST送信してPHPで受け取る方法を現役エンジニアが解説</title> </head> <body> <p>IDを入力 : <input type="text" id="main" /><button id="send">送信</button></p> <div id="return"></div> <script src="./main.js"></script> </body> </html>   解説 1行目の<!DOCTYPE html>では、HTML5で作成することを宣言しています。 2行目の<html>では、HTML文書の実装を開始することを意味しています。 3行目の<head>では、head要素の開始を意味しています。 4行目の<meta charset=”UTF-8″>では、UTF-8という文字コードで実装することを意味しています。   5行目の<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script>では、jQueryのコードを読み込んでいます。 今回、Googleが用意したCDNを利用しています。 jQueryファウンデーションが用意しているCDNの方が、最新バージョンをいち早く確実に利用することができるメリットがありますが、CDNによってはサーバが一時的に停止していることがあるので、GoogleのCDNを利用するようにしています。   6行目の<title>jQueryのAjaxでPOST送信してPHPで受け取る方法を現役エンジニアが解説</title>では、検索結果やブラウザのタブに表示されるタイトルを指定しています。 7行目の</head>ではhead要素が終了することを意味しています。 8行目の<body>では、body要素が開始することを意味しています。   9行目の<p>IDを入力 : <input type=”text” id=”main” /><button id=”send”>送信</button></p>では、IDを入力するための入力フォームを用意しています。 id=”main”とid=”send”は、それぞれJavaScriptが実装されたmain.jsで利用されるため、要素名を覚えておいていただくと理解しやすいです。   10行目の<div id=”return”></div>も、main.jsで利用される要素です。 最終的にこの位置に、main.jsで用意されたHTMLが追加表示されます。   11行目の<script src=”./main.js”></script>では、JavaScriptのコードを用意しているファイルを読み込んでいます。 必ず5行目にあるように、jQueryファイルを先に読み込んで、そのあとJavaScriptファイルを読み込んでいただくとスムーズです。   12行目の</body>では、body要素が終了することを意味しています。 13行目の</html>では、HTML文章が終了することを意味しています。   jQuery（送信側）の記述方法 jQuery ではPHPにPOSTするデータの定義と、送信結果を受け取ったあとのアクションを記述します。 記述の仕方は$.ajaxで記述する場合と、$.postメソッドを使用して記述する場合の2通りで紹介します。   $.ajaxで記述する方法 $.ajaxを利用して実装するコードを見ていきましょう。 サンプルコード（main.js）   $(function(){ $("#send").on("click", function(event){ let id = $("#main").val();
PHP

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>   コラム コスパとタイパ、両方結果的に良くなる良くなる学び方とは？ 「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。 もちろん、時間も費用もかかることは間違いありません。 ただ 結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。 コスパ・タイパ最適化の参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。
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つ目の関数を呼び出しています。 通信をおこなうような処理などを非同期におこなう場合は、処理の結果に合わせて呼び出す関数を切り替えてください。   コラム
JavaScript

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

副業したい方

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

はじめての副業コース

転職したい方

未経験から16週間で
エンジニアに

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

スキルアップしたい方

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

Pythonコース

※ 経済産業省の第四次産業革命スキル習得認定講座で、厚生労働省指定の専門実践教育訓練給付制度の対象です。条件を満たすことで支払った受講料の最大70％（最大306,460円）が給付金として支給されます。詳しくは エンジニア転職保証コース のページ内の注意事項をご確認ください。

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

1時間でできる無料体験
挫折しない学習方法とは？
TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript jQueryのAjax関数を利用したJavaScriptについて現役エンジニアが解説【初心者向け】