Laravel, Vue.js メモ

環境構築 laravel プロジェクト作成 node.jsインストール viteのvueインストール Laravel 10ではViteがデフォルトのビルドツールとして使用されているため、Vue CLIは必要ない。代わりに、ViteのVueプラグインを使用する。 viteでvueを使うため vitejs/plugin-vueをインストール viteの設定 vite.config.jsの設定 vueプ…Continue reading Laravel, Vue.js メモ

jQuery 親要素を取得するときの注意 parent(), parents(), closest()

結論 parentで親要素は複数取れてしまう。なのでclosestを使う。 各メソッドの違い コード例 parent() parent()メソッドは、選択した要素の直近の親要素を1つだけ取得する。 // parent()の例 // 直近の親要素を取得 console.log($(‘.child1’).parent().attr(‘class’)); // 出力: “parent1” 注意点:複数の…Continue reading jQuery 親要素を取得するときの注意 parent(), parents(), closest()

JavaScript 非同期処理 for…of と forEach

結論から言うと、for..ofは非同期処理に対応し、awaitを使うと、順次処理ができる。 forEachは非同期処理には対応しておらず、awaitを使っても、非同期に(ループの順番で)処理が開始される。この時レスポンスは待たない。 並列処理を行いたい場合、ループ処理ではなく、Promise.allを使うのが一般的である。 並列処理は、ループの時とは違い、同時に実行される。 for…o…Continue reading JavaScript 非同期処理 for…of と forEach

Vue.js prettierをインストールしたらエラーが出まくった

vueプロジェクトを作成するときにカスタム設定でprettierをインストールできるようになるが、これがWindowsだといろいろとめんどかったので消した。 改行コードやシングルクォート、カンマやセミコロンなどいろいろエラーが出る。 ESlintだけあればいいので、アンインストールする。 .eslintrc.js ファイルを開き、Prettier関連の設定を削除 .prettierrc ファイルが…Continue reading Vue.js prettierをインストールしたらエラーが出まくった

Laravelのblade内のscriptでphpからのデータを受け取る

laravelのbladeにJSを書いてその中でphpからのデータを受け取りたいとき 以下のようなデータをViewに返すとする。 値の場合 エスケープするかは自由 文字列もしくは数値として受け取れる。 配列の場合 このまま配列として扱える 連想配列の場合 PHPでは連想配列だが、JSではJsonオブジェクト扱いになる JSONを解析すれば、オブジェクトだが、配列として扱えるJSON.parseをす…Continue reading Laravelのblade内のscriptでphpからのデータを受け取る

JSから異なるサーバーのAPIへ送信 CORS(Cross-Origin Resource Sharing)

has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource LaravelのJSから異なるサーバー(異なるドメイン)のAPIへAjaxで送信したとき、以上のようなエラーが起きた。 CORSポリシー セキュリティ向上の…Continue reading JSから異なるサーバーのAPIへ送信 CORS(Cross-Origin Resource Sharing)

javascript 空配列の判定 optional chaining

オプショナルチェイニングで配列の空判定 空配列の判定で便利なものを知った。 参考 https://qiita.com/kozzzz/items/42108bc96b3a0e7c53d5 オプショナルチェイニングは、プロパティや要素にアクセスする際にnullまたはundefinedでないことを確認する構文です。 ChatGPT 以上のように ? . をつかって判定できる。 ほかの使用例 配列の要素へ…Continue reading javascript 空配列の判定 optional chaining

jqueryのセレクタでsubmit()が送信できない

質問内容↓ https://teratail.com/questions/8w2mmh6a50024e 要は、JSのsubmitとjQueryのsubmitは違うということ。 送信可能 jqueryの場合、送信不可 return falseを外せば、jqueryでも送信可能 jqueryはonsubmitイベントを通るが、jsは通らないため、return falseをいれると、jqueryではsu…Continue reading jqueryのセレクタでsubmit()が送信できない