ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
プレミアム会員
法人でのご利用
レッスン一覧
プレミアム会員
法人でのご利用
ログイン
運営からのお知らせ
2023/01/26
NEW
週刊ドットインストール(2023/01/26号)を更新しました!
PREMIUM
PHPでTodo管理アプリを作ろう 非同期通信編
クラス編で作ったTodo管理アプリを、JavaScriptの非同期通信を使って書き換えていきます。
0%
このレッスンをはじめる前に
このレッスンを進めるには前提知識が必要です。先に以下のレッスンを完了しておきましょう。
PHP入門 基礎文法編
(全34回)
PREMIUM
PREMIUM
0%
PHP入門 ビルトイン関数編
(全32回)
PREMIUM
PREMIUM
0%
PHP入門 オブジェクト編
(全26回)
PREMIUM
PREMIUM
0%
PHP入門 ウェブ開発編
(全34回)
PREMIUM
PREMIUM
0%
PHP入門 データベース編
(全19回)
PREMIUM
PREMIUM
0%
PHPでTodo管理アプリを作ろう 関数編
(全25回)
PREMIUM
PREMIUM
0%
PHPでTodo管理アプリを作ろう クラス編
(全14回)
PREMIUM
PREMIUM
0%
動画レッスン一覧
(30)
質問と回答
(41)
未完了
#01 アプリを使いやすくしていこう
(02:20)
無料公開中
クラス編までの振り返り
現在の実装における問題点
未完了
#02 fetch()を使ってみよう
(01:56)
無料公開中
フォルダ構成の確認
fetch()
未完了
#03 fetch()でデータを送信してみよう
(01:36)
無料公開中
URLSearchParams()
必要なパラメータの設定
未完了
#04 カスタムデータ属性を設定しよう
(02:16)
無料公開中
カスタムデータ属性の設定
id、tokenの取得
コードの整理
未完了
#05 JavaScriptでページを書き換えよう
(02:44)
無料公開中
toggle()メソッドの変更
doneクラスの付け替え
未完了
#06 非同期処理について理解しよう
(02:33)
同期処理
非同期処理
非同期処理の利点
未完了
#07 CSSのセレクタを工夫してみよう
(01:28)
CSSセレクタによる実装
動作確認
未完了
#08 削除処理を書き換えていこう
(01:54)
削除処理の書き換え
CSSの整理
未完了
#09 削除処理を完成させよう
(01:47)
fetch()
Todoの削除
未完了
#10 Purge処理を書き換えていこう
(02:20)
Purge処理の書き換え
スタイルの整理
未完了
#11 チェックされたTodoを削除しよう
(01:56)
Todoの一括削除
未完了
#12 token関連のコードを整理しよう
(02:27)
token関連のコードを整理
動作確認
未完了
#13 id関連のコードを整理しよう
(02:24)
id関連のコードを整理
動作確認
未完了
#14 追加処理について見ていこう
(02:39)
追加処理の流れ
未完了
#15 then()で値を受け取ろう
(02:14)
then()
response.json()
結果の取得
未完了
#16 フォームにイベントを設定しよう
(02:09)
イベントリスナーの追加
preventDefault()
fetch()
未完了
#17 JSON形式でデータを送信しよう
(01:53)
lastInsertId()
header()
json_encode()
未完了
#18 JSONデータを取得していこう
(01:58)
response.json()
JSONデータの取得
未完了
#19 非同期処理の流れを確認しよう
(02:22)
入力値のクリア
focus()
処理順の確認
未完了
#20 Todoを追加していこう
(01:24)
addTodo()
必要な要素の確認
未完了
#21 必要な要素を作っていこう
(02:06)
必要な要素の作成
未完了
#22 li要素をページに追加しよう
(02:09)
li要素の組み立て
ul要素への追加
未完了
#23 不具合を修正していこう
(02:23)
処理順の確認
不具合の修正
未完了
#24 イベントの伝播を活用しよう
(02:51)
イベントの伝播
要素に応じた条件分岐
未完了
#25 イベントを動作させていこう
(01:59)
イベント処理の修正
動作確認
未完了
#26 複数ウィンドウでの挙動を確認しよう
(02:47)
複数ウィンドウでの挙動確認
対処すべき2つのパターン
未完了
#27 Todoが削除されたか調べよう
(02:49)
Todoのチェック
header('HTTP', true, 404)
HTTP status code
未完了
#28 通信エラーに対処していこう
(02:40)
response.ok
catch()
Errorオブジェクト
未完了
#29 最新のチェック状態を取得してみよう
(02:25)
チェック状態の取得
JSONデータの送信
未完了
#30 Todoのチェック状態を修正しよう
(02:28)
JSONデータの取得
UIの更新
#01 アプリを使いやすくしていこう
PHP は JavaScript を学習してから始めた方が良いですか?
2022年6月9日
#02 fetch()を使ってみよう
JavaScript の fetch と PHP の fetch は同じ意味なのですか?
2022年1月27日
todos テーブルが存在していないというエラーが出ます
2022年1月27日
#03 fetch()でデータを送信してみよう
<form action="?action=purge" ... の「 ? 」はなんですか?
2022年2月18日
#05 JavaScriptでページを書き換えよう
exit を残すのはなぜですか?
2022年11月20日
toggle とはどのファイルに書かれているメソッドなのですか?
2022年3月2日
header の処理を消してしまっても良いのですか?
2022年1月27日
#06 非同期処理について理解しよう
fetch() メソッドが index.php にリクエストを送信するプロセスについて教えて下さい
2022年6月3日
fetch() が実行されると index.php の処理が全て実行されるという認識であっていますか?
2022年2月28日
#11 チェックされたTodoを削除しよう
li.remove(); ではなく、 checkbox.parentNode.remove(); としても問題ないですか?
2022年11月9日
checked 属性の挙動について教えて下さい
2022年1月27日
#13 id関連のコードを整理しよう
親要素の dataset.id を使用した場合の挙動の違いを教えてください
2022年1月27日
#16 フォームにイベントを設定しよう
document.querySelector('input[name="title"]'); と書いても問題ありませんか?
2022年10月28日
#17 JSON形式でデータを送信しよう
echo は画面出力以外にも使えるのですか?
2022年11月20日
id をキーとして内容を id とする、とはどういうことですか?
2022年5月24日
#18 JSONデータを取得していこう
セレクタを input[name="title"] のようにしてはいけませんか?
2022年11月9日
fetch() メソッドに繋がれている then メソッドが呼ばれるタイミングを教えてください
2022年11月20日
処理中で then がどのように呼び出されるのかを教えて下さい
2022年8月23日
then() のレスポンスは echo の実行結果という理解で問題ありませんか?
2022年5月24日
return response.json(); はどこに返しているのですか?
2022年1月27日
ID はどこに送信しているのですか?
2022年1月27日
JSON 形式でデータを送信したらエラーになってしまいます
2022年1月27日
echo したものが画面に表示されないのはなぜですか?
2022年1月27日
#19 非同期処理の流れを確認しよう
focus() とはどのような状態のことですか?
2022年1月27日
#22 li要素をページに追加しよう
新しい Todo を、一つ前の Todo の下に追加することはできますか?
2022年6月3日
「ブラウザをリロード」とはなんですか?
2022年3月24日
#23 不具合を修正していこう
HTMLにリストが記載されているのはなぜですか?
2022年6月10日
fetch の中の title が空の文字列にならないのはなぜですか?
2022年1月27日
#24 イベントの伝播を活用しよう
li の上位である ul でイベントを設定する事で解決される、とはどういうことですか?
2022年6月9日
#26 複数ウィンドウでの挙動を確認しよう
別々のウィンドウで Purge、削除をした場合の挙動について教えて下さい
2022年1月27日
#27 Todoが削除されたか調べよう
header() の第 2 引数について詳しく教えて下さい
2022年11月24日
ddd を削除すると、if (empty($id)) は true になりませんか?
2022年10月28日
#28 通信エラーに対処していこう
fetch や then がたくさんあって理解できません
2022年6月10日
Chrome の Console に 404 エラーが記録されますが、問題ないですか?
2022年1月27日
#30 Todoのチェック状態を修正しよう
このアプリを応用すれば、メッセージアプリや掲示板も作ることができますか?
2022年10月28日
場合分けのアルゴリズムを学習するにはどうすればよいですか?
2022年4月4日
CSRF 対策のトークンはどこに格納してもいいのですか?
2022年1月27日
2 つのウィンドウを開いている場合、片方を更新した時にもう一方も最新の状態にするにはどうすればいいですか?
2022年1月27日
PHP を使って作成したサイトを Web で公開するにはどうすればよいですか?
2022年1月27日
PHP の学習が終わったら、次に何を学習すればよいですか?
2022年1月27日
title が 2 回送信されないのはなぜですか?
2022年1月27日
次におすすめのレッスン
Laravel 8入門 基本機能編
(全22回)
PREMIUM
PREMIUM
0%
Laravel 8入門 データベース編
(全13回)
PREMIUM
PREMIUM
0%
Laravel 8入門 CRUD処理編
(全20回)
PREMIUM
PREMIUM
0%
Laravel 8入門 リレーション編
(全16回)
PREMIUM
PREMIUM
0%
ギャラリー
このレッスンについて
最終更新日
2021年2月19日
バージョン情報
Chrome 88 / Visual Studio Code 1.53.2
関連キーワード
(10)
Webサービス
(7)
上級者向け
(17)
PHP
(63)
MySQL
(30)
Docker
(12)
JavaScript
(142)
Webサービス構築
(15)
SQL
(8)
データベース
(20)
非同期通信
(1)
このレッスンを共有する