Laravel9 + Vite + Inertia.js + React + TypeScriptで環境構築した際の 手順を忘れないうちに残して置きます。 ◆環境 npm 8.5.5 node v16.15.0 Laravelプロジェクトの作成 composer create-project laravel/laravel example-app example-appの部分は任意の…

今回作ったもの デザインはMUIのテンプレお借りしました。Tyvm 9+ Free React Templates - Material UI もちろん、会員登録ページなどにもお使いいただけます。 指定したバリデーションに引っかかるとこんな感じになります。 今回はvalidationライブラリを使…

前回の記事の続きです。 今回はページネーションについてのお話になります！ www.youtube.com ※この記事で使われている全ての画像はこの動画の切り抜きになります 後に続く動画、 ・8:トランザクションについて ・9:オフラインサポートについて ・10:リアル…

FirestoreのDB設計の仕方、セキュリティルールなどを学習したので 実際に作りたいアプリのDB設計を考えていきます！ 作りたいサイト 英語圏の人に向けて、日本語の俗語、 特にサブカルチャーから作られた俗語に焦点を当てた 辞書サイトを作りたいです。 サブ…

前回の記事の続きです。 今回はセキュリティルールについてのお話です！！ www.youtube.com ※この記事で使われている全ての画像はこの動画内から切り抜いたものです。 セキュリティルールについて もし、あなたがクライエントにDBへ接続するための アクセス…

前回の続きです！ 前回の動画ではデータ構造の心構えや、Map、Array、サブコレクションの違いを見ていきました。 今回は「どのようにデータを構造すればよいか」についてのお話です。 www.youtube.com ※この記事で使われている全ての画像はこの動画内から切…

前回の記事の続きです。 今回はマップ、配列、サブコレクションについてのお話です。 早速みていきましょう！！ www.youtube.com ※この記事で使われている全ての画像はこの動画内から切り抜いたものです。 はじめに マップ、配列、サブコレクションの違いに…

前回の記事の続きです。12まであるのでサクッと終わらせたいところですが こうして文字に起こしてると結構な時間がかかりますね。 今回の記事はFirestoreの料金についての動画のまとめになります。 www.youtube.com ※この記事で使われている全ての画像はこの…

前回の記事の続きになります。 www.youtube.com ※この記事で使われている全ての画像はこの動画内から切り抜いたものです。 今回の動画では、 「クエリがどのように働くのか」 について詳しく説明してくれています。 では早速見ていきましょう！ DBからデータ…

こちらの記事は公式のColud Firestoreの動画を見たただのまとめになります。 この動画は4年前のものにはなりますが、 現在作っているアプリでFirebaseのDBを使いたいと思っているので勉強してみました！ 気付かずずっと英語で見てましたがこの動画のみ日本語…

前回、前々回とFirebase Authenticationの 記事を書きましたが今回はFirebaseのDBを触っていきたいと思います。 FirebaseでDBを扱うためのサービスは2種類あります。 - Cloud Firestore Cloud Firestore は、Firebase のモバイルアプリ開発用の最新データベ…

前回の記事でFirebaseを使ってEmail/Password認証を作りました。 今回はFirebaseでGoogle認証とTwitter認証を作っていきたいと思います。 導入の部分だったり、コードは前回のものに継ぎ足して 実装していっているので前回の記事もぜひ参考にしてください。 …

以前Laravel Sanctumを使ってAPI認証を作成した時から ずっと気になっていたFirebase、やっと触ることができました嬉しいです！ 今回はFirebaseについて勉強したのでその中からReactを使った Firebaseによる認証のやり方をまとめていきたいと思います。 今回…

1つの要素を選択する3つの方法 getBy～ 要素がある場合→一致するノードを返す。 要素がない場合→エラーをthrowする。 findBy～ 要素がある場合: 一致するノードのPromiseを返す。 要素がない場合、1000ms以内に見つからな場合: 拒否される。 getByとwaitFor…

Vue.jsとLaravelで作ったプロジェクトをAWSのEC2を使って公開していたのですが、 ある時アクセスしてみると504 Gateway-timeoutエラーで表示できなくなっていました。 AWSにログインしてインスタンスを確認してみると該当のインスタンスは システム/インスタ…

GeoDB cities APIとは？ 都市データベースです。都市、地域、国のデータを公開します。 今回はこちらのAPIを使って都市の入力候補機能を実装します。 作ったもの こんな感じのシンプルな検索フォームです。 文字を入力するとそれに続く都市が出てきます。 早…

toFixedは小数点以下を指定した桁数にした「近似値」を求めるメソッドです。 toFixedメソッドは数値を文字列に変換します。 使い方 数値.toFixed([小数点の後の桁数]) 例 let num = 12.345; console.log(num.toFixed()); 結果: 12.3 console.log(num.toFixed…

PHPで勉強中、画面が真っ白！なんらかのエラーがあるのはわかるけど エラーの内容がわからない。。なんて経験を思い出したのでまとめてみました。 ブラウザにエラーを表示する .phpファイルに下記を追加すると手っ取り早くブラウザにエラーを表示できます。 …

勉強の為にPHPで作ったWebサービスをHerokuにデプロイした後 このようなエラーが発生。 session_start(): open(C:/MAMP/bin/php/var/sess_5c0c3cbde4aisjkq6i8arsuaq1bjtabf, O_RDWR) failed: No such file or directory (2) in /app/function.php on line 3…

HerokuでデプロイしたPHPアプリの exif_imagetype()を使っている部分でこのようなエラーが出てました。 Fatal error: Call to undefined function exif_imagetype()どうやらherokuはexif情報を扱うためのPHPモジュールが最初から入ってないので 入れてあげる…

ある日VirtualBoxを使ってCentOs7にheroku CLIをインストールしようとしたらこんな表示が、、 Error: No space left on device ターミナルからdf -hを使ってスペースの使用率を見てみるとなんと、とある場所のuse%が100％になっていました。 こうなると何も…