8
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

ゴルフスクールの予約システムを作ってみよう!

Last updated at Posted at 2021-04-05

ポートフォリオとして制作したゴルフスクールの予約システムの制作過程をまとめました。

尚、ポートフォリオとGitHubは下記でございます。

ポートフォリオ「ゴルフスクールの予約システム」URL
https://www.golfchamp-reservation.com/login

GitHub
https://github.com/takayuki007/golfChamp-reservation

#1、要件概要

導入

PHPのフレームワークであるLaravelを使ってゴルフレッスンの予約サイトを作ってみます。以前、作ったゴルフレッスンのサイトの予約システムです。
ゴルフレッスンサイトURL:
https://takayuki007.github.io/golfChamp/index.html

参考にしたサイトは下記です。

ZERO FUSION
https://www.zero-fusion.com/

#2、サービス概要

自分の希望日時と場所でゴルフの個人レッスンを受けるための予約が取れる。

要件定義(10分)

  • ユーザー名、メールアドレスで登録できる。
  • ユーザー名とパスワードでログインすることができる。
  • レッスン日とコーチとレッスン場所を明確に。
  • マイページでレッスンの確認。
  • PCとスマホに対応。

ページ構成(5分)

  • 新規登録ページ
  • ログインページ
  • マイページ
  • 予約ページ
  • 完了ページ

画面設計&デザイン作成

  • 新規登録ページ(PC25分)(SP10分)
  • ログインページ(PC5分)(SP5分)
  • マイページ(PC10分)(SP5分)
  • 予約ページ(PC10分)(SP5分)
  • 予約確認ページ(PC10分)(SP15分)
  • 完了ページ(PC5分)(SP5分)

DB設計(20分)

users
id id
name varchar
email varchar
password vaerchar
email_verified_at timestamp
remember_token varchar
created_at timestamp
updated_at timestamp
deleted_at timestamp
locations
id int
name varchar
address varchar
url text
created_at timestamp
updated_at timestamp
deleted_at timestamp
times
id int
time varchar
created_at timestamp
updated_at timestamp
deleted_at timestamp
coaches
id int
name varchar
created_at timestamp
updated_at timestamp
deleted_at timestamp
reservation
id int
date varchar
user_id int
location_id int
coach_id
created_at timestamp
updated_at timestamp
deleted_at timestamp

クラス設計(15分)

FLOCSSを採用

  • 全体

app

  • Foundation部分

_reset、_variables

  • Layout部分

l-wrapper、l-site-width、l-margin、l-main、l-header

  • Object部分
  • Component部分

c-btn-second、c-alert-success、c-btn-area、c-btn、c-form-check-area、c-form-check-label、c-form-group、c-form、c-from-check-input、c-heading、c-input-area、c-input、c-invalid-feedback、c-is-invalid、c-li、c-link、c-logo-link、c-logo、c-reservation-group、c-reservation-li、c-reservation-ul、c-reservation、c-text、c-title、c-ul、c-wrapper

  • Project

p-text-center

  • Utility

u-space-area、u-margin-top、u-login-link、u-color-red

環境構築(30分)

Laravelをインストールし、サーバーを起動。
参考URL:
https://readouble.com/laravel/5.8/ja/installation.html
https://teratail.com/questions/285110
https://stackoverflow.com/questions/39098717/fatal-error-unable-to-create-lock-file-bad-file-descriptor-9-while-running
https://stackoverflow.com/questions/17933882/php-bad-file-descriptor-error

#3、実装

HTMLとCSSを同時に書いていく。

  • header(PC45分)(SP10分)
  • 新規登録ページ(PC70分)(SP10分)
  • ログインページ(PC20分)(SP0分)
  • パスワードリセットリンク(PC15分)(SP0分)
  • パスワードリセット画面(PC10分)(SP0分)
  • 完了ページ(PC10分)(SP5分)
  • 予約確認ページ(PC15分)(SP5分)
  • マイページ(PC45分)(SP0分)
  • 予約ページ(PC5分)(SP5分)
  • 表示するためにコントローラーを通す(10分)

参考URL:
https://readouble.com/laravel/5.5/ja/configuration.html
https://readouble.com/laravel/5.4/ja/mix.html
https://saruwakakun.com/html-css/basic/box-shadow

HTML/CSSが完了したので、PHPの処理部分に入る。

usersテーブルの作成(5分)

deleted_atのカラムを追加

参考URL:
https://qiita.com/miriwo/items/5e5a47ece1b805266246
https://qiita.com/I-201/items/bfb4c216da196247e369

ログイン機能の確認(5分)
ログイン後のヘッダー直し(10分)
ログアウト後の戻りページ直し(5分)

参考URL:
https://teratail.com/questions/259884
https://qiita.com/nekyo/items/d9413d8ae6dc9f3eb05d

ログイン処理のエラー文字を赤色にする(5分)
ログイン処理のエラー枠を赤色にする(5分)
エラーメッセージを日本語にする(5分)

参考URL:
https://qiita.com/samuraibrass/items/d71c08e144dbbf98e348

新規登録で確認メールを送信(30分)

参考URL:
https://qiita.com/nekyo/items/03e50b4d0dd6f09287d6
https://qiita.com/yutaroshimamura/items/8a89fc57bd3c73a24c32
https://www.sejuku.net/blog/72944
https://stackoverflow.com/questions/50232314/laravel-5-5-missing-required-parameters-for-route-password-request

認証メールを日本語化(60分)

参考URL:

https://webplus8.com/laravel-env-attention/
https://eigoswitch.com/eigo-regards#:~:text='Regards'%20%E3%82%92%E8%8B%B1%E8%AA%9E%E3%81%AB%E7%9B%B4%E8%A8%B3,%E3%81%AE%E5%90%8D%E5%89%8D%E3%82%92%E6%9B%B8%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82
https://teratail.com/questions/217183
https://note.com/insectchan/n/n80de3ee6722b


苦労したこと

日本語に設定したが、なかなか反映しないので見落としがあるか何度もチェックすることで時間をかけてしまいました。ただ、その原因はキャッシュが残っていたことだったので、次からはそちらも見逃さず当たりをつけられるようにしたい。


パスワードリセットメールの日本語化(15分)
コーチテーブルの作成&seederでのデータ挿入(15分)
時間テーブルの作成&seederでのデータ挿入(15分)
レッスン場所テーブル&seederでのデータ挿入(30分)

参考URL:
https://stackoverflow.com/questions/59511459/how-to-get-website-url-in-laravel-seeder
https://teratail.com/questions/864
https://qiita.com/Otake_M/items/3c761e1a5e65b04c6c0e


苦労したこと

レッスン場所のマップをURLで入れる際の型とそれに必要な方法を調べるのに手間取ってしまった。調べたいことをすぐに言葉にできるように常に意識づけをしたい。


予約画面の作成(300分)

参考URL:
http://hpscript.com/blog/php%E3%81%A7%E4%BA%88%E7%B4%84%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E3%82%92%E4%BD%9C%E3%81%8F%E3%82%8D%E3%81%862%E3%80%80%E4%BA%88%E7%B4%84%E7%94%BB%E9%9D%A2/
https://jqueryui.com/datepicker/
https://teratail.com/questions/31293
https://www.larajapan.com/2019/11/10/npm%E3%81%8B%E3%82%89%E3%83%91%E3%83%83%E3%82%B1%E3%83%BC%E3%82%B8%E3%82%92%E8%BF%BD%E5%8A%A0/
https://pointsandlines.jp/front-end/javascript/datepicker
https://stackoverflow.com/questions/43823295/uncaught-typeerror-datepicker-is-not-a-function-at-htmldocument-anonymo/43823339
https://code-kitchen.dev/html/input-date/
https://takuya0805.hatenadiary.org/entry/20131023/1382505579
https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/date


苦労したこと

カレンダーのようなUIがあれば利用者に分かりやすいと思いdatepickerを導入することにしましたが、datepickerが機能せずに苦労しました。初めはjQueryやjQuery-uiが読み込みできていないと思い、読み込み順序を確認したり、CDNで実験してみたりしましたがうまくいきませんでした。。クリックしたらアラートを出すような単純な処理を加えるときちんと反応していたので、そもそもdatepickerに問題があると思いましたが解決できませんでした。そこでinputのdateを使ってカレンダーのように表示し、登録できるようにしました。この一連の作業のため、かなり時間がかかってしまいました。


reservationsテーブルの作成(10分)
予約機能の実装(45分)
マイページの実装(180分)

参考URL:
https://blog.capilano-fw.com/?p=665

登録済のユーザーしか使えないようにページの表示をルーティングで調整(10分)
不要部分の削除、必要箇所にコメントを入れる(30分)

#4、テスト(ローカル)

必要な要件はすべて実装し終えたので、テストをする。テストは単体テストと結合テストの2つを行う。単体テストは境界値テストとブラックボックステストを行う。結合テストでは、ページの遷移が正しいかなど、全体的な動作の確認を行う。

加えて、今回のテスト範囲は、PCは世界的にもっとも使われているGoogle Chrome、スマホはandroidとiOSの最新バージョンでテストをする。スマホのブラウザはSafariとGoogle Chromeにする。

尚、スマホについてはシミュレーターを使う。

単体テストケースの作成(100分)
結合テストケースの作成(10分)

単体テストの実施(240分)

機能名 No. 分類 テスト手順 想定結果 結果1 担当者1 実施日1
新規登録機能 1 異常系 名前欄、メールアドレス欄、パスワード欄、パスワード再入力欄に何も入力せず、登録ボタンを押す。 DBの登録処理は実施されず、名前欄のところに「このフィールドを入力してください」と表示される。 自分 3/26
2 異常系 名前欄に「test」を入力し、メールアドレス欄、パスワード入力欄、パスワード再入力欄は何も入力せず、登録ボタンを押す。 DBの登録処理は実施されず、メールアドレス欄に「このフィールドを入力してください」と表示される。 自分 3/26
3 異常系 名前欄に「test」を入力し、メールアドレス欄に「test@test.com」を入力し、パスワード入力欄、パスワード再入力欄は何も入力せず、登録ボタンを押す。 DBの登録処理は実施されず、パスワード入力欄にパスワードを提案される。 自分 3/26
4 異常系 名前欄に「test」を入力し、メールアドレス欄に「test@test.com」を入力し、パスワード入力欄に「aaaaaaaa」を入力し、パスワード再入力欄は何も入力せず、登録ボタンを押す。 DBの登録処理は実施されず、パスワード確認欄に「このフィールドを入力してください」と表示される。 自分 3/26
5 異常系 名前欄に「test」を入力し、メールアドレス欄に「@test.com」を入力し、パスワード入力欄に「aaaaaaaa」を入力し、パスワード最入力欄に「aaaaaaaa」を入力し、登録ボタンを押す。 DBの登録処理は実施されず、メールアドレス入力欄の下に「「@」の前の文字列を入力してください。「@test.com」は完全なメールアドレスではありません。」と表示される。 自分 3/26
6 異常系 名前欄に「a」を256文字入力し、メールアドレス欄に「test@test.com」を入力し、パスワード入力欄に「aaaaaaaa」、パスワード再入力欄に「aaaaaaaa」を入力し、登録ボタンを押す。 DBの登録処理は実施されず、名前入力欄に「名前は255文字以下のみ有効です。」の赤文字と該当入力欄が赤色で囲われる。 自分 3/26
7 異常系 名前欄に「test」を入力し、メールアドレス欄にaを256文字、その後に@a.comというメールアドレスの形式を入力し、パスワード入力欄に「aaaaaaaa」、パスワード再入力欄に「aaaaaaaa」を入力し、登録ボタンを押す。 DBの登録処理は実施されず、メールアドレス入力欄に「メールアドレスは255文字以下のみ有効です。」の赤文字と該当入力欄が赤色で囲われる。 自分 3/26
8 異常系 名前欄に「test」を入力し、メールアドレス欄に「自分のメールアドレス」と入力し、パスワード入力欄に「aaaaaaaa」を入力し、パスワード再入力欄に「aaaaaaaa」を入力し、登録ボタンを押す。 DBの登録処理は実施されず、エラーメッセージも表示されない。 自分 3/26
9 異常系 名前欄に「test」を入力し、メールアドレス入力欄に「test@test.com」と入力し、パスワード入力欄に「aaaaaaa」を入力し、パスワード再入力欄に「aaaaaaa」を入力し、登録ボタンを押す。 DBの登録処理は実施されず、パスワード入力欄下に、「パスワードは8文字以上のみ有効です」の赤文字と該当入力欄が赤色で囲われる。 自分 3/26
10 異常系 名前欄に「test」を入力し、メールアドレス入力欄に「test@test.com」と入力し、パスワード入力欄にaを256文字入力し、パスワード再入力欄にaを256文字入力し、登録ボタンを押す。 DBの登録処理は実施されず、パスワード入力欄下に、「パスワードは255文字以下のみ有効です。」の赤文字と該当入力欄が赤色で囲われる。 自分 3/26
11 異常系 名前欄に「test」を入力し、メールアドレス入力欄に「test@test.com」と入力し、パスワード入力欄に「aaaaaaaa」と入力し、パスワード再入力欄に「bbbbbbbb」と入力し、登録ボタンを押す。 DBの登録処理は実施されず、パスワード入力欄下に、「パスワードは確認用と一致させてください」の赤文字と該当入力欄が赤色で囲われている。 自分 3/26
12 正常系 名前欄に「test」を入力し、メールアドレス入力欄「自分のメールアドレス」と入力し、パスワード入力欄に「aaaaaaaa」と入力し、パスワード再入力欄に「aaaaaaaa」と入力し、登録ボタンを押す。 確認メールが送信され、そのリンクをクリックするように案内する画面が表示される。実際に届いたメールをクリックしてDBに登録される。認証されたかどうかの確認は、email_verified_atに記録される。正しく登録されれば、マイページに遷移する。 自分 3/26
ログイン機能 13 異常系 メールアドレス欄、パスワード欄に何も入力せず、ログインボタンを押す。 ログイン処理は実施されず、メールアドレス入力欄に、「このフィールドを入力してください」と表示される。 自分 3/26
14 異常系 メールアドレス入力欄に「@test.com」と入力し、パスワード欄に「aaaaaaaa」と入力し、ログインボタンを押す。 ログイン処理は実施されず、メールアドレス入力欄の下に「「@」の前の文字列を入力してください。「@test.com」は完全なメールアドレスではありません。」と表示される。 自分 3/26
15 正常系 メールアドレス入力欄「自分のメールアドレス」と入力し、パスワード入力欄に「aaaaaaaa」と入力し、っログインボタンを押す。 ログインが許可され、マイページ画面に遷移する。 三吉 3/26
パスワード変更機能 16 異常系 メールアドレス欄に「test@test.com」を入力し、送信ボタンを押す。 「ユーザーは存在しません。」と入力欄の下に表示される。 自分 3/26
17 異常系 メールアドレス入力欄に何も入力せず送信ボタンを押す。 メールアドレス入力欄の下に「このフィールドを入力してください」と表示される。 自分 3/26
18 異常系 メールアドレス欄に「@test.com」を入力し、送信ボタンを押す。 メールアドレス入力欄の下に「「@」の前の文字列を入力してください。「@test.com」は完全なメールアドレスではありません。」と表示される。 自分 3/26
19 正常系 メールアドレス入力欄「自分のメールアドレス」と入力し、送信ボタンを押す。 確認メールが送信され、そのリンクをクリックし、パスワード更新画面に遷移する。そこで、メールアドレスは「自分のメールアドレス」、パスワードは「bbbbbbbb」、パスワード確認は「bbbbbbbb」を入力し、更新する。 自分 3/26
予約機能 20 異常系 何も入力せず予約ボタンを押す DBの登録処理はされず、日時欄に「このフィールドを入力してください」と表示される。 自分 3/26
21 異常系 日時(2021/4/4)を入力し、他は何も入力せず予約するボタンを押す。 DBの登録処理はされず、日時以外の入力部分の枠が赤くなり、入力欄の下に「~必須です。」と表示される。 自分 3/26
22 異常系 時間(9:00~10:00)を入力し、他は何も入力せず予約するボタンを押す。 DBの登録処理はされず、日時欄に「このフィールドを入力してください」と表示される。 自分 3/26
23 異常系 コーチ(ホセ・トドロギ)を入力し、他は何も入力せず予約するボタンを押す。 DBの登録処理はされず、日時欄に「このフィールドを入力してください」と表示される。 自分 3/26
24 異常系 レッスン場所(日吉ゴルフ練習場)を入力し、他は何も入力せず予約するボタンを押す。 DBの登録処理はされず、日時欄に「このフィールドを入力してください」と表示される。 自分 3/26
25 異常系 日時(2021/4/4)、時間(9:00~10:00)を入力し、他は何も入力せず予約するボタンを押す。 DBの登録処理はされず、日時、時間以外の入力部分の枠が赤くなり、入力欄の下に「~は必須です。」と表示される。 自分 3/26
26 異常系 日時(2021/4/4)、コーチ(ホセ・トドロギ)を入力し、他は何も入力せず予約するボタンを押す。 DBの登録処理はされず、日時、コーチ以外の入力部分の枠が赤くなり、入力欄の下に「~は必須です。」と表示される。 自分 3/26
27 異常系 日時(2021/4/4)、レッスン場所(日吉ゴルフ練習場)を入力し、他は何も入力せず予約するボタンを押す。 DBの登録処理はされず、日時、レッスン場所以外の入力部分の枠が赤くなり、入力欄の下に「~は必須です。」と表示される。 自分 3/26
28 異常系 時間(9:00~10:00)、コーチ(ホセ・トドロギ)を入力し、他は何も入力せず予約するボタンを押す。 DBの登録処理はされず、、日時欄に「このフィールドを入力してください」と表示される。 自分 3/26
29 異常系 時間(9:00~10:00)、レッスン場所(日吉ゴルフ練習場)を入力し、他は何も入力せず予約するボタンを押す。 DBの登録処理はされず、日時欄に「このフィールドを入力してください」と表示される。 自分 3/26
30 異常系 コーチ(ホセ・トドロギ)、レッスン場所(日吉ゴルフ練習場)を入力し、他は何も入力せず予約するボタンを押す。 DBの登録処理はされず、日時欄に「このフィールドを入力してください」と表示される。 自分 3/26
31 異常系 日時(2021/4/4)、時間(9:00~10:00)、コーチ(ホセ・トドロギ)を入力し、他は何も入力せず予約するボタンを押す。 DBの登録処理はされず、日時、時間、コーチ以外の入力部分の枠が赤くなり、入力欄の下に「レッスン場所は必須です。」と表示される。 自分 3/26
32 異常系 日時(2021/4/4)、時間(9:00~10:00)、レッスン場所(日吉ゴルフ練習場)を入力し、他は何も入力せず予約するボタンを押す。 DBの登録処理はされず、日時、時間、レッスン場所以外の入力部分の枠が赤くなり、入力欄の下に「コーチは必須です。」と表示される。 自分 3/26
33 異常系 時間(9:00~10:00)、コーチ(ホセ・トドロギ)、レッスン場所(日吉ゴルフ練習場)を入力し、他は何も入力せず予約するボタンを押す。 DBの登録処理はされず、日時欄に「このフィールドを入力してください」と表示される。 自分 3/26
34 正常系 日時(2021/4/4)、時間(9:00~10:00)、コーチ(ホセ・トドロギ)、レッスン場所(日吉ゴルフ練習場)を入力し、予約するボタンを押す。 DBの登録処理が行われ、reservationテーブルに予約した内容が表示される。 自分 3/26

結合テストの実施(30分)

機能名 No. 分類 テスト手順 想定結果 結果1 担当者1 実施日1
予約機能 1 正常系 日時(2021/4/4)、時間(9:00~10:00)、コーチ(ホセ・トドロギ)、レッスン場所(日吉ゴルフ練習場)を入力し、予約するボタンを押す。 DBの登録処理が行われ、マイページに遷移しマイページに先ほど予約した内容が表示される。 自分 3/26
2 正常系 マイページの予約一覧にあるGoogleMapのリンクをクリックし、日吉ゴルフ練習場、ゴルフ・コンフォート、バーディーゴルフ、それぞれ正しい情報に遷移する。 日吉ゴルフ練習場(名古屋市中村区岩塚神明西)、ゴルフ・コンフォート(名古屋市天白区中砂町549)、バーディーゴルフ(愛西市落合町上河原1510-1)の正しい地図情報が表示される。 自分 3/26
参考URL:
https://xera.jp/entry/iphone-android-share
https://www.atmarkit.co.jp/ait/articles/0607/22/news014.html
https://qiita.com/unsoluble_sugar/items/f39bb5afae60f51ea7a4

#5、本番デプロイ

Xサーバーにデプロイする。(60分)

参考URL:
https://naoya-ono.com/blog/deploy-laravel-xserver/
https://www.xserver.ne.jp/manual/man_server_htaccess.php

  • バリュードメインでドメインを購入し、ネームサーバを設定。
  • Githubにソースコードをアップ。
  • 各種設定をする。

#6、テスト(本番)

本番テスト(30分)

本番環境できちんと動作するか確認する。

機能名 No. 分類 テスト手順 想定結果 結果1 担当者1 実施日1 結果2 担当者2 実施日2
新規登録機能 1 正常系 名前欄に「test」、メールアドレス入力欄「自分のメールアドレス」と入力し、パスワード入力欄に「aaaaaaaa」と入力し、パスワード再入力欄に「aaaaaaaa」と入力し、登録ボタンを押す。 確認メールが送信され、そのリンクをクリックするように案内する画面が表示される。実際に届いたメールをクリックしてDBに登録される。認証されたかどうかの確認は、email_verified_atに記録される。正しく登録されれば、マイページに遷移する。 × 自分 3/29 自分 3/29
ログイン機能 2 正常系 メールアドレス入力欄「自分のメールアドレス」と入力し、パスワード入力欄に「aaaaaaaa」と入力し、ログインボタンを押す。 ログインが許可され、マイページ画面に遷移する。 自分 3/29
パスワード変更機能 3 正常系 メールアドレス入力欄「自分のメールアドレス」と入力し、送信ボタンを押す。 確認メールが送信され、そのリンクをクリックし、パスワード更新画面に遷移する。そこで、「bbbbbbbb」を入力し、更新する。 自分 3/29
予約機能 4 正常系 日時(2021/4/4)、時間(9:00~10:00)、コーチ(ホセ・トドロギ)、レッスン場所(日吉ゴルフ練習場)を入力し、予約するボタンを押す。 DBの登録処理が行われ、マイページに遷移しマイページに先ほど予約した内容が表示される。 自分 3/29
5 正常系 マイページの予約一覧にあるGoogleMapのリンクをクリックし、日吉ゴルフ練習場、ゴルフ・コンフォート、バーディーゴルフ、それぞれ正しい情報に遷移する。 日吉ゴルフ練習場(名古屋市中村区岩塚神明西)、ゴルフ・コンフォート(名古屋市天白区中砂町549)、バーディーゴルフ(愛西市落合町上河原1510-1)の正しい地図情報が表示される。 自分 3/29

参考URL:
https://qiita.com/takuma-jpn/items/f4e23bed778b17b52e36

#7、まとめ

全体として1725分。1人日を8時間とした場合は、3.6人日での完成でした。

現状の予約システムはユーザーに日程を確認してもらって予約する仕組みになっているため、これをシステム側で制御して間違いがないように予約ができるようにしてみたい。また、1人3コマまで予約できるようにしたり、レッスン日が過ぎたら自動で日程をマイページ側から消したり、予約の変更機能だったりをつけてより本格的にしてみたい。

#8、追記
トップページの作成、テスト&本番アップ(240分)
参考URL:
http://www.terasol.co.jp/web/4028
https://qiita.com/HiromuMasuda0228/items/6a51c2ce24c69c937092
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items

プロフィール登録、編集機能の実装&ローカルテスト&本番アップ&本番テスト(600分)
参考URL:
https://javascript.programmer-reference.com/jquery-image-preview/
https://readouble.com/laravel/5.8/ja/validation.html
https://qiita.com/koru1893/items/1d2f522e20744b03e3ad
https://blog.capilano-fw.com/?p=665#i
https://qiita.com/Eryushidate/items/27b4a699c00d06e04744

マイページにページネーションの導入(90分)
https://readouble.com/laravel/5.8/ja/pagination.html
https://qiita.com/ryu022304/items/cf35b1abd1814e722f14
https://nakox.jp/web/wordpress/wp_pager_css

コーチによる絞り込み検索機能を追加(120分)
レッスンの評価機能を追加(240分)
axiosを使ってajaxを使うのに苦労した。以前使用したコードを参考にトライしたことで解決できた。

8
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?