LaravelをGAE(google app engine)にデプロイするよ
適当にLaravelのプロジェクトを作成します
php artisan serve
で http://127.0.0.1:8000 にアクセスし、動作確認
GAEへのデプロイはapp.yamlで設定します
runtime: php // 言語はphp env: flex // GAEはstandardではなくflexible使うよ runtime_config: document_root: public skip_files: // ここに指定したものはGAEにアップロードされない - .env // セキュリティの観点から.envはあげない env_variables: APP_LOG: errorlog APP_KEY: YOUR_APP_KEY STORAGE_DIR: /tmp
YOUR_APP_KEYには下記コマンドで表示された値を入れてください
php artisan key:generate --show
次にcomposer.jsonのscriptsに下記を追記
gaeがcacheを読み書きできるようにして、
あらかじめキャッシュをクリアしてます
"post-install-cmd": [ "chmod -R 755 bootstrap\/cache", "php artisan cache:clear" ]
ようやくデプロイします
gcloud app deploy
これで以下にアクセスすればトップページが表示されるはずです
https://YOUR_PROJECT_ID.appspot.com
推しライブラリ date-fns.js
JavaScriptで時間とか日付と言えばmoment.jsが有名だと思います
個人的にはdate-fnsを推してます
date-fnsがmoment.jsに優っている理由はいくつかありますが、
サイズがmomentより小さいという点だけでもかなりの魅力ではないでしょうか
Add a brief comparison with Moment.js? · Issue #275 · date-fns/date-fns · GitHub
Googleのjsコーディングガイド(JS)
下記の記事でfor...ofについて言及されてました
mozillaを見てみるとfor...ofとfor...inの違いについて言及していますね
developer.mozilla.org
JSって思わぬ落とし穴とか、クセがあるから、気をつけないと
セミコロンに関してはうーん...
13 Noteworthy Points from Google’s JavaScript Style Guide
Evanさんも要らん言うてるし、Vue書く時は省力すること多いなぁ
slides.com
『Clean Coder』を読んだよ
面白いけど、どれもどこかで聞いたことあるような話ばっかだった
それでも書かれていることはどれも「せやな」って頷けるものばっかり
特に、12章の「プログラマ 対 雇用主」は耳が痛いよ〜
やることやってるからって遅刻ぐらい許して〜
スマートに書きたいし新しい技術使いたいから納期から足でるよ〜
とかとか
エンジニアの前に社会人(会社に所属している)という意識が欠落しすぎないようにしなきゃ
Vue.js のハンズオンしてきた
めっちゃ緊張した
プログラミングスクールDIVE INTO CODEさんで、同校の生徒さんにしてきたよ
資料
https://docs.google.com/presentation/d/1QP83QDXGOPZVjpNhINrgRxX-bB1KoHn2m6VMNSRonxg/edit?usp=sharing
内容
Vue.js
Vuex
Vue-router
Firebase
反省
- 2時間じゃぜんぜん時間が足りなかった あと2時間は欲しかった
- firebaseとかvuex入れるよりも、もっとVueの文法に集中すればよかった
- commitを小分けにして、コピペしやすいようにしておけばよかった
ハンズオンて難しいね
Nuxt.js の基本的な使い方
Nuxt.jsの基本機能ちょっと紹介します
vue-cliがあればすぐにプロジェクト作成できます
vue init nuxt-community/starter-template nuxt-study cd nuxt-study yarn yarn dev
localhost:3000でつながります
まず、プロジェクトルートにpagesディレクトリがあります
ここに作成したvueファイルの名前がそのままurlになります
例えば、
pages/categories/index.vue -> localhost:3000/categories //index.vueの場合、indexは省略されます
pages/categories/add.vue -> localhost:3000/categories/add
さらに動的なパラメータを含むurlを作成したい場合は_(アンダースコア)を使います
pages/categories/_id.vue -> localhost:3000/categories/:id になります
pages/categories/index.vue
pages/categories/_id.vue
それぞれを作成します
pages/categories/index.vue
localhost:3000/categories
<template> <div> categories index </div> </template>
pages/categories/_id.vue
localhost:3000/categories/:id
:idの箇所には適当な数字を入力してください
画面にその数字が表示されるはずです
<template> <div> categories {{$route.params.id}} </div> </template>
ここでルーティングのvalidationについて
idに渡ってくるものが数字だけにしたい場合もあると思います
Nuxt.jsではvalidateメソッドを使ってバリデートする事ができます
下記のコードをpages/categories/_id.vueのtemplateタグの下に追記してください
<script> export default { validate ({ params }) { return !isNaN(+params.id) } } </script>
もしバリデーションに引っかかったら404のエラーになります
_idに数字以外を入力すると、下のような画面になります
エラー画面をカスタマイズしたい場合もあると思います
次にlayoutsディレクトリを見ます
default.vueというファイルがあり、その中のtemplateタグには
これがrouter-viewの役割をしています
つまり、pages直下に作成したvueファイルが
<template> <div> <nuxt/> </div> </template>
話が戻ってlayoutsディレクトリ直下にerror.vueを作成して下記を貼り付けてください
<template> <div> <template v-if="error.statusCode === 404"> not found </template> <template v-else> server error </template> </div> </template> <script> export default { props: ['error'] } </script>
エラーが起きると、そのエラーをerrorという名前でpropsで受け取れます
したがってerrorのstatusCodeによって表示を切り替える事が可能です
次に
pages/categories/index.vue を下記のように修正
<template> <div> categories index <nuxt-link to="/categories/add"> Add Category </nuxt-link> </div> </template>
nuxt-linkをrouter-linkのようなものです
現時点では特に差があるわけではないのですが、将来的に機能が追加されるようです
参考
https://ja.nuxtjs.org/api/components-nuxt-link/
pages/categories/add.vue を作成し、下記コードを貼り付け
<template> <div> <form @submit.prevent="submitCategory"> <input type="text" v-model.trim="name"> <input type="submit" value="submit"> </form> </div> </template> <script> export default { data () { return { name: '' } }, methods: { submitCategory () { } } } </script> <|| ここでformへのバリデーションをpluginを使って実装します プロジェクトルートにpluginsディレクトリがあります puginに関する記述はこのディレクトリ以下にします 今回はVuelidateを使います [https://monterail.github.io/vuelidate/:embed:cite] まずインストール & ファイル作成 >|| yarn add vuelidate touch plugins/Vuelidate.js
plugins/Vuelidate.jsに以下をコピペ
import Vue from 'vue' import Vuelidate from 'vuelidate' Vue.use(Vuelidate)
次にプロジェクトルートにあるnuxt.config.jsに追記
module.exports = { // 下3行を追記します plugins: [ '~/plugins/Vuelidate' ], ... build: { vendor: ['vuelidate'], // この1行を追加 .... } }
上記のように
pluginの使い方は基本的に、
plugins直下に該当の設定ファイルを作成し、nuxt.config.jsで呼び込ませるという感じですね
pages/categories/add.vue に戻ります
使い方は公式をご参照ください
<template> <div> <form @submit.prevent="submitCategory"> <input type="text" v-model.trim="name" @input="$v.name.$touch()" > <p v-if="!$v.name.required && $v.name.$dirty"> // nameが未入力かつ、入力したことがある場合 name is required </p> <p v-if="!$v.name.minLength && $v.name.$dirty"> // nameが6文字より小さくかつ、入力したことがある場合 name must be at least 6 chars </p> <input type="submit" value="submit" :disabled="$v.$invalid" // validation合格しないとbuttonがdisabled > </form> </div> </template> <script> import { required, minLength } from 'vuelidate/lib/validators' // vuelidateの必要なものをimport export default { data () { return { name: '' } }, // ここでバリデーションを設定 validations: { name: { required, minLength: minLength(6) } }, methods: { submitCategory () { } } } </script>
これでバリデーション完了
次にsubmitCategoryの実装もといデータ登録に移ります
serverやdb準備するのが面倒なので横着してjson-serverを利用します
そのためにjson-serverのインストールとjsonファイルをプロジェクトルートに作成
yarn global add json-server touch category.data.json
category.data.jsonに空のcategories配列を作成しておきます
{ "categories": [] }
そしてjson-server起動
json-server --watch category.data.json --port 3001
localhost:3001にアクセスするとreourcesにcategoriesがあるはずです
json-serverにデータを送るためにaxiosを入れます
Nuxt.js向けにaxiosがあるのでそちらをインストールします
yarn add @nuxtjs/axios
次に設定ですね
nuxt.config.jsの同じ階層に下記を追記
modules: [ '@nuxtjs/axios', ],
準備できたのでsubmitCategoryメソッドを以下のように修正します
axiosをimportしなくとも利用できるようになります
実際にsubmitしてから、localhost:3001/categoriesにアクセスすると登録できているはずです
async submitCategory () { const category = { name: this.name } try { await this.$axios.$post(`http://localhost:3001/categories`, category) } catch (err) { console.log(err) } }
次に登録したデータを取得して表示します
pages/categories/index.vue を修正
<template> <div> categories index <nuxt-link to="/categories/add"> Add Category </nuxt-link> <template v-for="(category, index) in categories"> <div :key="index"> category {{index}}: {{ category.name }} </div> </template> </div> </template> <script> export default { async asyncData ({ app, req, params }) { const categories = await app.$axios.$get(`http://localhost:3001/categories`) return { categories } } } </script>
新しいキーワードとしてasyncDataがありますね
こちらはcomponentがロードされる前に、サーバからデータを取得して、
dataオブジェクトに突っ込んでくれるものです
なのでreturnしたオブジェクトがdataオブジェクトの一部かのように扱えるわけです
今回は使わないですが、reqやparamsといったものも引数で受け取れます
await使うときに async asyncDataとasyncが続くのがとてももっさく感じます
最後にmiddlewareを紹介します
ログインしていないユーザには遷移させたくないページなどがあると思いますが、
そういったルートを制御する使い方が多いかなと思います
vue-routerのbeforeEachとかと近いイメージだと思って大丈夫だと思います
touch middleware/auth.js
今回はlocalStorageにtokenというキーがなければcategories/index.vueにリダイレクする処理になっています
普通のプロジェクトならfirebaseやjwtを使うことになるのかな
export default ({ redirect }) => { if (!localStorage.getItem('token')) { console.log('test') return redirect('/categories') } }
このmiddlwwareを登録します
pages/categories/add.vue
export default { middleware: 'auth', // これだけで登録完了 data () { return { name: '' } }, ... }
これでcategories/add.vueには遷移できなくなったはずです
localStorageにtokenセットすれば遷移できるようになります
localStorage.setItem('token', 'nuxt')
まだまだ書きたいことあるけど、
疲れたのでここで終えます
お疲れさまでした
- 作者: mio
- 出版社/メーカー: シーアンドアール研究所
- 発売日: 2018/05/29
- メディア: 単行本(ソフトカバー)
- この商品を含むブログを見る
Hello Nuxt!!: Vue.jsのサーバサイドレンダリングフレームワーク
- 作者: nasum
- 発売日: 2018/04/22
- メディア: Kindle版
- この商品を含むブログを見る
Vuefireの使い方 その1
vuefireの使い方を簡単なcrud構築することで紹介します
今回は新規登録
vuefireはVue.jsでfirebaseをいい感じに使えるプラグインですね
では早速。。
今回はデザインがん無視します(Vuetifyいいよ〜)
プロジェクト作成
vue init webpack vuefire-tutorial cd vuefire-tutorial yarn dev
buildはstandalone、
vue-routerはy
あとはなんでもいいです
新規作成画面
AddPostコンポーネント作成
touch src/components/AddPost.vue // AddPost.vue作成
routingの設定
ふつうにvue-routerの書き方するだけですね
HelloWorld.vueに関する記述は消して大丈夫です
import Vue from 'vue' import Router from 'vue-router' import AddPost from '@/components/AddPost' Vue.use(Router) export default new Router({ mode: 'history', // historyモードに変更 routes: [ { path: '/add', //localhost:8080/addでアクセスできます name: 'AddPost', component: AddPost } ] })
以下をコピペしてください
src/components/AddPost.vue
<template> <div> <form @submit.prevent="addPost"> <div> <input type="text" v-model="post.title"> </div> <div> <textarea v-model="post.content"></textarea> </div> <div> <input type="submit" value="submit"> </div> </form> </div> </template> <script> export default { name: 'AddPost', data () { return { post: { title: '', content: '' } } }, methods: { addPost () { console.log('title', this.post.title) console.log('content', this.post.content) } } } </script>
inputにv-modelをあてがって、
formにsubmitイベントバインドさせています
とりあえずsubmitすればコンソール上に入力した値が表示されるはずです
firebaseプロジェクト作成
firebaseのコンソールで適当なプロジェクトを1つ作成してください
「ウェブアプリにFirebaseを追加」というところをクリックするとapikeyとか出てきます
それらをVueプロジェクトに登録します
firebase.js作成
mkdir src/config touch src/config/firebase.js
firebase vuefireのインストール
yarn add firebase vuefire
apikeyなどの登録
※ xxxxのところは各自の値を代入してください
src/config/firebase.js
import Firebase from 'firebase' const config = { apiKey: 'xxxxxxx', authDomain: 'xxxxxxx', databaseURL: 'xxxxxxx, projectId: 'xxxxxxx', storageBucket: 'xxxxxxx', messagingSenderId: 'xxxxxxx' }; const app = firebase.initializeApp(config); export default app.database()
vuefireの設定
src/main.jsに下の2行を追加してください
import VueFire from 'vuefire' Vue.use(VueFire)
AddPostの修正
src/components/AddPost.vueを以下のように修正してください
<script> import db from '@/config/firebase' // firebase(db)をimportする export default { name: 'AddPost', data () { return { post: { title: '', content: '' } } }, firebase: { posts: db.ref('posts') // postsでfirebaseのdbのpostsを参照できる }, methods: { async addPost () { try { await this.$firebaseRefs.posts.push({ // pushでデータを作成できる title: this.post.title, content: this.post.content }) // 入力欄を空にする this.post.title = '' this.post.content = '' // トップページに繊維させる this.$router.push('/index') } catch (err) { console.log('err', err) } } } } </script>
firebaseのREALTIME DATABASEの作成
テストモードで作成してください
もしくはルールを下記のように設定してください
そうでないとデータの読み書きができません
できた
長くなってきたのでとりあえず今回はここまで
編集、読み込み、削除は次回以降