🤦

Laravel6+Vue-CLI 最短SPA環境構築と私の大きな勘違い

5 min read

はじめに

環境構築は色んな記事があるけど、色々ありすぎて分かんない。
よくみるとなんかちょっとずつ違うし。
自分なりの「これやればパーフェクト環境構築!開発待ったなし!」って記事が欲しくて調べてました。
するとそもそも私自身の中で大きな勘違いがあったので、環境構築と合わせてそれも簡単に紹介したいと思います。

今回構築するSPA環境はフロントエンドをVue.js、バックエンドをLaravelで実装を行う想定で構築します。
VueプロジェクトはVue-CLI[1]を使って構築します。Dockerは使いません。

構築な大まかな流れは以下の通り。

1.Laravelプロジェクトの構築
2.Vueプロジェクトの構築

Let's 環境構築。

開発環境

  • macOS Monterey 12.0.1
  • Laravel Framework 6.20.6

1.Laravelプロジェクトの構築

はじめにバックエンド側のLaravelプロジェクトの構築を行なっていきます。

Composerのインストール

Laravelをインストールするためには、先にComposerというソフトをインストールする必要があります。
Laravelには元からたくさんのソフトが入っています。
一部のソフトのバージョンが古くて動かない、ってことが無いように、うまいこと動くためのバージョン調整を図ってくれるのがComposerらしいです。

インストールは以下のサイトから。

https://getcomposer.org/

インストールが終わったら確認を行なっておきましょう。
コマンドプロントで以下を入力してバージョンが表示されたら完了です。

$ composer -v
   ______
  / ____/___  ____ ___  ____  ____  ________  _____
 / /   / __ \/ __ `__ \/ __ \/ __ \/ ___/ _ \/ ___/
/ /___/ /_/ / / / / / / /_/ / /_/ (__  )  __/ /
\____/\____/_/ /_/ /_/ .___/\____/____/\___/_/
                    /_/
Composer version 2.1.5 2021-07-23 10:35:47

Laravel6のインストール

インストールしたComposerを使ってLaravelでプロジェクトを作成していきましょう。
今回は sample_laravel という名前で作成していきます。
以下のコマンドでLaravelがインストールされます。

composer create-project laravel/laravel sample_laravel "6.*"

もしTokenが求められた場合はこっちを参考にしてください。

https://zenn.dev/maotouying/articles/0cfaa54ea6883f

インストールが完了したら、インストールしたフォルダの中で、(この場合はsample_laravelフォルダ)のコマンドプロンプトで以下を入力してみましょう。

$ php artisan serve

入力後Chromeなどのブラウザで http://localhost:8000 にアクセスして、Laravel起動画面が表示されれば完了です。

2.Vueプロジェクトの構築

次にはフロントエンド側としてVueプロジェクトを構築します。

Vue-CLIのインストール

はじめに書いた通り今回はVue-CLIを使ってVueプロジェクトの構築を行います。
Vue-CLIをインストールしましょう。
コマンドプロントで以下のコマンドを入力します。

$ npm install -g @vue/cli

実行が完了したらインストールが完了したか確認しましょう。
以下のコマンドでバージョンが表示されればインストール完了です。

$ vue --version
@vue/cli 4.5.15

新規Vueプロジェクトを構築

インストールしたVue-CLIを使って新規Vueプロジェクトを構築します。
vue create {project-name} で新規プロジェクトを作成できます。
今回はsample_vueという名前で作成してみましょう。

$ vue create sample_vue

実行するとdefault と Manually select features の選択が表示されます。
今回は機能を選択したいので Manually select features を選択します。
上下キーで選択してEnterで確定します。

Vue CLI v3.2.1
? Please pick a preset: (Use arrow keys)
default (babel, eslint)
 ❯  Manually select features

「Manually select features」を選択すると、以下の画面になります。

? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i
> to invert selection)
❯◉ Choose Vue version
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◉ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◉ Unit Testing
 ◯ E2E Testing

上から順に「1」〜「9」キーでチェックのON/OFFが出来ます。
また、「a」キーで全選択・全解除、「i」キーでチェックのON/OFFの反転をすることが出来ます。
今回は上記の通り、項目を選択してEnterで進みます。

? Choose a version of Vue.js that you want to start the project with (Use arrow 
keys)
❯ 2.x 
  3.x (Preview) 

次はVue.jsのバージョンを2系、3系のどちらを使用するか確認されます。
現時点では3系はまだPreviewですので「2.x」を選択します。

残りの質問は全てEnterを押してデフォルトの設定で進めて構いません。

? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter, Unit
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Mocha
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No

パッケージのインストールが完了したらコンパイルしてブラウザにアクセスできるか確認してみましょう。
作成した sample_vue フォルダに入り以下のコマンドを実行します。

$ npm run serve

http://localhost:8080 にアクセスして以下の画面が表示されたらプロジェクト作成は完了です。

私の大きな勘違い:LaravelとVue.jsの連携について

ここまででLaravelのページが立ち上がり、Vue.jsのページが立ち上がった訳ですが、私はこのそれぞれに対して大きな勘違いをしていました。
私はそれぞれの準備ができた後なんらかの連携作業が必要だと考えていました。
Vue.jsがLaravelから情報を引っ張ってくるために。
LaravelがVue.jsへ情報を引き渡すために。
しかしそれがそもそも間違いだった様です。

それぞれは別々に立ち上げさえしとけば環境構築は終わり。
Laravelには必要な情報を処理させ、Vueで欲しい情報があったらLaravelから取り寄せる。
それで十分。たったこれだけ。なんて単純。

なので環境構築はこれで終わりです。

まとめ

私は今回の勘違いで随分と時間を無駄にしてしまいました。
知っている人からすればなんでそんなことでと思われるかも知れませんが。

また、今回は最短環境構築ということでDockerは使いませんでしたが、やはりDockerで構築できるととても便利です。
なぜならそれぞれ立ち上げも必要が無し。コマンド一つで準備完了です。
これも別の記事としていつかまとめたいです。

おわり

*参考

脚注
  1. CLIはCommnad Line Interfaceの略で、コマンドラインを使ってvue.jsで開発を行うための前準備を支援してくれるツールです。開発はプロジェクトという単位で行います。 ↩︎

Discussion

ログインするとコメントできます