こんにちは。エンジニアのとみ(@tom_a417468)と申します。
いよいよ今年も残り1ヶ月ですね。
今年何かと話題のNuxt.js(vue.js)とLaravelを使い、お問い合わせページと管理画面を作成した時のTipsのようなものをまとめました。
これからやってみようかな、という方の参考になれば嬉しいです。
ディレクトリ構成
Nuxtで作成したLPと問い合わせフォーム画面があるプロジェクト、Laravelで作成した管理画面のプロジェクトのディレクトリを作成しました。
Gitリポジトリは同一にしています。
project/
├── lp/
└── admin/LPはNuxt.js、adminはLaravelを使用しています。
Nuxtに関しては、ほぼvueの基本機能で賄えてしまっていますが。。
開発環境
Dockerを使用しました。一つのコンテナにポートを2つ空け、どちらにアクセスしたかで表示を出し分けています。
その他
HTMLはpug、cssはsassを使いました。
vueファイル内では"template"や"style"タグで指定することで、切り替えが簡単に行えます。
pugの場合
<template lang="pug">
sassの場合
<style lang="sass">
pugは閉じタグが無く、以下のように書くと...
div.content
span.mark チェック
このように生成されます！
<div class="content">
<span class="mark">チェック</span>
</div>
コードも綺麗に書けますし、閉じタグの記述が要らないのはとても便利ですよね。
（しかし外部を含むチーム開発への導入の場合、学習コストのハードルが高くHTMLにやむなく切り替えた、という話もあるようですが...😢）
ページ構成
大まかに書くとこのような構成です。とてもシンプル。
LP
・LP
・入力画面
・確認画面
・完了画面管理画面
・ログイン
・一覧画面
・検索結果画面画面遷移
入力画面
・v-for
複数の選択項目はv-forでfor文のように出力できます。
label.radio(v-for="genderLabel in genderLabels" :key="genderLabel.id")
input(type='radio', name='gender', v-bind:value='genderLabel', v-model='data.gender')
| {{ genderLabel.value }}
（※Nuxtの最新のバージョンでは:keyの指定が必須のようです）
・import { } from ''
さらにimport、fromで外部のjsファイルから項目内容を読み込むことができます。
import { genderLabels } from '~/enums/enums.js'
importしたjsはこのような中身。
・vuelidate
vue.jsプラグインのvuelidate（https://monterail.github.io/vuelidate/）を使い、必須項目が入力されていない場合はv-ifでエラー文を表示させています。
Name: {required},
Nameが入力されない場合、p.errorが表示されます。
p.error(v-if="$v.data.Name.$error") お名前は必ずご入力下さい。
・v-model
入力画面でフォームに入力した値をv-modelに保持します。
input.input(type='text', v-model='data.Name', placeholder='名前')
確認画面
確認画面では以下のような書き方で、v-modelに保持したデータを呼び出しました。
p {{ data.Name }}
・@click、nuxt-link
@click.native（確認画面で送信ボタンをクリックする時）に、postイベントを発火（APIを送信）します。
同時に、nuxt-link(to='')で完了画面へ遷移させます。
nuxt-link(@click.native='post' to='/complete') 送信する
・axios.post
axios.postでフォームに入力した値をpostDataにまとめて、API送信します。
axios.post('http://laravelProject/api/users', postData)
Laravelプロジェクト側
ここで、APIから受け取った値をDBへインサートします。
$user = new User();$user->fill($formData)->save();
問い合わせを行ったユーザー、管理者へメール送信します。
Mail::to($user['email_address'])->send(new UserEmail($user));
管理画面
ログインの他に、閲覧・検索等の機能を持たせるため、Laravel Scaffoldパッケージを使いました。画面の生成とCRUDがコマンドで作成できて便利でした！composerで導入できます。
composer require 'laralib/l5scaffold' --dev
(特に)ハマったこと
Nuxtの起動でハマりました。開発環境ではnpm run devでの起動で充分なのですが、本番環境ではforeverコマンドを使ってアプリケーションを起動したままにしないと、しばらく経つと通信が途切れてしまいます...。
感想
初めてvue.jsを使って入力画面→確認画面へ画面遷移がとても早く"フロントを触っている"実感があり、とても楽しかったです！
個人的にはCSSアニメーションを加えて、年代問わず分かりやすく使いやすいサービスを作ってみたいなあ、と思っています。来年はもっと開発します💪
最後に
ITプロパートナーズでは、Laravel、vue.js、Nuxt.jsで開発に挑戦したいエンジニア・デザイナーを絶賛募集中です！
12月ではSIerやSESからWEBエンジニアへのキャリアチェンジをテーマにしたイベントも開催します！
採用以外でも、様々なイベントを開催予定です！もくもく会、キャリアを考える会、フリーランスの方のコミュニティ会、12月には新サービス「Graspy」のプレミア勉強会（講師陣がめちゃくちゃ豪華です！）など...ご興味のあるイベントがあれば、ぜひオフィスに遊びに来てください😄
