---

React.jsよりも見やすそうという理由でVue.jsを採用しましたが、さらにそのフレームワークであるNuxt.jsというのがあるみたいなのでそっちを採用しよう･･････って思ったんですが、Vue.jsが動かせないのにそのフレームワークに手を出すのはどうなのか、って気もしてきたのでやっぱVue/jsから手を出すことにしました。
というのも、僕みたいにLaravel、つまりPHPをAPIサーバーとして使い、フロントビューをVue.jsで実装する、というタイプの場合はそこまでフレームワークの優位性はないみたいです。
SSR(サーバーサイドレンダリング)をする際には大きな効力を発揮するみたいですが、Apacheしか現状使う予定のない僕には縁のない話です。もっと速度が必要になってから考えればいいかなって思ってます。

ということで、具体的にVue.jsを使うにはどーしたらって話ですね。


この間の記事でAPI認証に関してはなんとなーくわかったので、その実装ですね。
ただclient_idってこれそもそもどこから取得してくるんですかね･･････？最初からわかってるハズがないので、ハードコーディングするのはおかしい話です。

たぶんこれ･･････こことか参照しても思うんですが、client_idってのはuser_idとは違う、アプリケーションに固有なIDっていう意味のidなのでハードコーディングできるんだと思います･･････。
謎にuser_idというカラムもあったんですが、気にしないほうがいいかなって結論です･･････。
callback_urlっていうところからもそれはわかる気がします。とりあえずそういうものだと認識して開発を進めることにしましょう。



さて、実はこの記事を書くにあたってハローワールドにめっちゃ苦労したので、そこの理解からおさらいです。



とりあえず何も考えずにLaravelをインストールします。
その後になにをすればいいかはここを参照にいろいろ入れていきます。コレ自体は簡単です。


で、僕がよくわからなかったところがココなんですけど、どうやらhttp://localhost:8000でないとVueファイルとして読み込まれないみたいなんですよね。
え、npm dev runでビルドして表示させてる、っていう理解じゃないの？？？npmサーバーじゃないと動かないんだったら、それSSRでは･･････？？？？？？


そう思って調べてみると、gzipという形式に圧縮して読み込ませる、っていうのが見つかりました。これがいわゆる、僕が思っている「ビルド」のことなんだと思うことにします(笑)


でもやっぱり気持ち悪いのでいろいろ調べてみたんですけど、有用な情報は見つかりませんでした。サーバー周りのことを勉強とかしたくないので、観念してこのまま進めます(笑)



とはいえ、このハマりポイントさえ脱すれば、あとは書いてあるとおりにやればいいって感じではあります。



出来上がったファイルはこんな感じになりますね。最終的に。
で、気になるのがスクリプト部分ですね。どうやらページが読み込まれた瞬間に実行されるようにするには、こんな感じに書けばいいらしい。これでコンソールに文字が表示されますね。いいサンプルです。

そのへんのライフサイクルに関してはこんなページで解説されてますね。



この比較表がとてもわかりやすい。



ってことで、ハローワールドができたので次回こそ認証APIの実装ですね。
と、その前にAPI経由でのデータの受け取りとかやってからにしましょうかね。楽しみですね。