仕組み
laravel/routes/web.phpがリクエストを受け付ける。このとき、どんな URL でも 1 つの Blade ビューを返すように設定する。- 返された Blade ビューに記述しておいた
<div id="app"></div>や<script src="{{ mix('/js/app.js') }}"></script>などにより、 Vue.js を使えるようになる。
投稿者: oki2a24
本投稿は、 Laravel 6 で Vue.js 3 を使えるようにするまでの試行錯誤の記録 – oki2a24 の続きに当たります。
方針のまとめ
.eslintrc.jsの extends について- Vue.js に関するルールは
plugin:vue/vue3-recommendedに任せる。 - 他のルールは
eslint:recommendedに任せる。 - Prettier との競合を避けるために
prettierを使う。
- Vue.js に関するルールは
- ESLint と Prettiier は別々に実行する。
導入作業のまとめ
- 依存パッケージの追加 →
npm install --save-dev eslint eslint-config-prettier eslint-plugin-vue prettier .eslintrc.jsmodule.exports = { root: true, env: { node: true, }, extends: [ "plugin:vue/vue3-recommended", "eslint:recommended", "prettier", ], rules: {}, };- .prettierrc
{ "tabWidth": 2, } package.jsonへの追加内容$ git diff laravel/package.json diff --git a/laravel/package.json b/laravel/package.json index ce4fa08..0cc621e 100644 --- a/laravel/package.json +++ b/laravel/package.json @@ -7,7 +7,9 @@ "watch-poll": "npm run watch -- --watch-poll", "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js", "prod": "npm run production", - "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js" + "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js", + "lint": "eslint --ext .js,.vue --fix --ignore-path .gitignore resources/", + "format": "prettier --write --ignore-path .gitignore resources/**/*.{js,vue}" }, "devDependencies": { "@vue/compiler-sfc": "^3.0.11", $
まとめ
- Vue.js 3 を
npm --save-dev vue@nextでインストールした。 - laravel-mix のバージョンを最新にする必要があり、それは
npm audit fix --forceで自然とそうなった。 - vue-loader もバージョンを合わせる必要があり、そのバージョンは 16 で、インストール時の指定は、
npm install --save-dev npm-loader@nextだった。 resources/js/app.jsで Vue.js 3 の方法で初期化すれば良い。- Blade テンプレートファイルで Vue.js 3 を読み込むには、
<div id="app"></div>と<script src="js/app.js"></script>を書けば良い。 - 後日追記
カスタマイズ導入方法まとめ
- Vue.js 3 に Bootstrap 5 を組込む手順メモ – oki2a24 の続きであることが前提。
yarn add sass-loader@^10 sassで依存パッケージをインストールします。ここで@^10とバージョンを指定しているのは、最新版をインストールするとビルド時にエラーが発生したため。公式ドキュメントにも注釈がある。→ Working with CSS | Vue CLIsrc/scss/custom.scssを作成し、@import "node_modules/bootstrap/scss/bootstrap";を記述する。カスタマイズ内容は、この行よりも上に書くこと。src/main.jsにimport "@/scss/custom.scss";を記述しcustom.scssを読み込む。今まで読み込んできた素の Bootstrap であるimport "bootstrap/dist/css/bootstrap.min.css";行は不要となるので削除する。
まとめ
yarn add bootstrap@next @popperjs/coresrc/main.jsに次を追加する。import "bootstrap"; import "bootstrap/dist/css/bootstrap.min.css";
こんなケースを想定してみる
ページの検索フォームに入力して検索ボタンをクリックすると AJAX で検索用 API を実行する。この時に、検索パラメータを URL のクエリパラメータとして URL へ反映することはできるのか?
また、ブラウザでの戻る、進むをクリックした時も、検索結果をページに表示するのはもちろん、 URL クエリ引数や検索フォームに検索キーワードを反映させたい。
実装方法まとめ
以下、 Vue.js 2 (Options API) での勘所です。 Compotision API でもポイントは同じで、メソッドを適宜置き換えてください。どちらの実装例も本記事にあるので、具体例を参考にするのも、良いと思います。
- ページ初回表示時は
createdメソッド内でリソースサーバからデータ取得を行う。 - 検索ボタンをクリックしたら自分のページへ URL クエリ引数つきで Vue Router の
pushを行う。例えばthis.$router.push({ name: "AboutA, query: { base: "JPY" } })となる。これによりbeforeRouteUpdateメソッドが実行され、ここでリソースサーバからデータ取得を行う。 - リソースサーバからデータ取得を行う処理 (メソッド) では次を気をつけると良い。
- 引数として、クエリパラメータを受け取る。
- メインの処理 (リソースサーバからのデータ取得) 以外に、検索フォームへ対応する URL クエリ引数の値を設定する、などの処理を行う。
読むべき公式ページ
これらの Vue Router の公式ページをしっかりと読み込んで理解できれば、本ページでやりたいことは実現できました。
コード例
こんな時に役に立つ
住所の中にどの都道府県が含まれているのかを知りたい時。
まとめ
- 最初の 1 件目のみでよければ PHP: preg_match – Manual を使う。文字列に含まれているかどうか、存在すれば一致する検索キーワードを得る、のどちらも preg_match を 1 回実行すれば得ることができる。
- 文字列中の全てが欲しいのであれば PHP: preg_match_all – Manual を使う。
- 文字列が日本語の場合、正規表現の検索パターンには
uを指定する。参考 => PHP: 正規表現パターンに使用可能な修飾子 – Manual - ちなみに、1 つの検索キーワードが含まれているかどうかを調べるだけであれば、 PHP: strpos – Manual を使った方が性能が良い。
カテゴリー
tmux 起動中に新規セッションを追加する方法
tmux 起動中に新規セッションを追加する方法
- プレフィックスキー (
C-b(Ctrl-b)) +:new
まとめ
作ったもの
docker-compose コマンドだけで環境をうまく切り替える方法
docker-compose -fオプションを使うことで、使用する YAML ファイルを取捨選択できるようになった。これを利用して、開発環境用ではボリューム共有を使い、サーバ環境用では別のサービスを追加する、といったことが可能になる。docker-compose -fオプションで毎回 YAML ファイルを指定するのはとても手間がかかるが、解決することができる。Compose の設定に用いられる環境変数のデフォルト値を.envという 環境ファイル で行うことができる。このファイルにCOMPOSE_FILEという CLI 変数 を定義し、その値に使用する YAML ファイルを指定することで-fオプションを省略することができる。- Dockerfile のマルチステージビルド を使うことによって、複数の環境を一つの Dockerfile で表現することができる。
Visual Studio Code で開発環境コンテナも使う方法
- Visual Studio Code の Remote – Containers – Visual Studio Marketplace 拡張機能で実現する。
- コマンドパレットから "Remote-Containers: Add Development Container Configuration File…" を選んで設定ファイルを自動生成するのが楽。
.devcontainer/devcontainer.jsonが独自の設定ファイル。.devcontainer/docker-compose.ymlはただの Docker Compose ファイル。.devcontainer/devcontainer.jsonと.devcontainer/docker-compose.ymlの難しい箇所は本投稿の続きに記載した。