Rails * Vue の歴史を辿ってみる この話を読み終えてわかること Rails * Vueの歴史ってまだまだ浅いこと Rails * Vueの情報はググってみると、やり方が２つに別れていること 初学者でも、全然戦えるフィールドであること Railsの歴史 1995(26年前) Ruby誕生、割と古くからある 割と泣かず飛ばずの言語だった 2005(16年前) RubyOnRailsが誕生 有名企業が次々採用 Airbnb twitter GitHub Rubyが注目され始めるタイミングが瞬間がここ Vueの歴史 2009年(12年前) 土台であるnode.js誕生 WEB業界に衝撃を与えた front, backの完全分業化の実現に大貢献 2014(7年前) Vue.js誕生 従来最強は Facebook製のReact(2011〜) Google製のAngular(2012〜) そこに一石投じた1人の開発者[Evan You]によって誕生 Railsさん、node.jsすげえに気づいて取り込み始める 2016年(5年前) webpackの拡張GEM、webpackerを本気でサポート開始 node.jsのplugin管理をRails上でやりやすくしようと言う試み開始 ただ、node.jsをそもそも使ってた人たちから酷評される webpackerは独自すぎて使いにくい その頃、Vueは 2016年(5年前) Vue2.0が発足 これが強烈に評判がよく、一気に普及 github上でreactやangularのstar数を追い抜く レスポンス早く、書きやすく、めちゃいいやんってなる RailsのWebpackerいらないトレンドが普及 2018年頃(3年前くらい) 脱webpacker記事が増える ならば、しっかりとfront, backを切り分けた方が良いでしょ。と言う流れに node.jsをRailsの中で組み立てるのではなく node.js環境とRails環境をそもそも分けてしっかり疎結合に そして最近のVueの動き 2020年(1年前） Vue3.0がスタート TypeScriptいいよね！の流れと仲良くするため？が強い印象 一層、バグ少なく組みやすいcomposition APIをリリース ここまでの話からわかること 2009年(12年前) WEBの世界は大きく変化があった。 2016年(5年前) Vue.jsの躍進が始まった 2018年(3年前) Rails * Vueのあるべき姿が見え始めた なのでこの分野で見たら、3年プレイヤーくらいが最年長と言う感じ ここまでの状況を踏まえて Rails * Vueって、歴史そんなに深くない この掛け算で戦ってる人達 まだ初学者の方でも、全然手の届く範囲で先駆者たちは走ってる さらにまだまだ進化は続くので、トレンドを追っていれば追い抜くのも難しくない またみんな１年生に戻るかもしれないので というわけで 初学者の方も、焦ったり、すごい人見てげんなりしなくても大丈夫 この分野に限ってはみんな若手 楽しんでたら、気がついたら追い越してるっていう可能性は全然あるので 焦らず楽しんでいきましょうー！

はじめに こんにちは！　松本　佑大（まつもと　ゆうだい）と申します！ 今回は条件分岐 v-if についてアウトプットしていきます！ V-ifとは 条件分岐v-ifを利用することによって要素に表示/非表示を切り替えることができます。 書き方 基本的な書き方は以下のようになります。 HTML <div id ="app"> <p v-if="toggle"> Good morning! </p> </div> Vue.js var app = new Vue({ el:'#app', data:{ toggle: true, } プロパティtoggle（任意）を定義し、真偽値trueorfalseを書きます。 （trueなら表示、falseなら非表示になります。） 次にp要素にvーifディレクティブを設定し、値にはプロパティtoggleを指定します。 上記にはtoggle:trueに指定してありますので、Good morning!が表示されています。 ※v-ifでは表示/非表示がdisplay:noneではなく、p要素そのものが削除される仕組みになっており、描画コストが高くなる恐れがあります。頻繁に表示/非表示を繰り返すのならばv-showディレクティブを使用することを推奨します。（別記事で解説します） まとめ ・要素にv-if="プロパティ"を指定。 ・data:{プロパティ:真偽値}を設置。 プロパティは任意になります！ 最後に 今回はv-ifについてアウトプットしました。 もし認識の仕方が間違っていましたら、コメント等頂けると幸いです。 今後ともQiitaにてアウトプットしていきます！

楽天APIの初期登録 下記のURLにアクセスしてログインする(未登録の場合は新規登録) https://webservice.rakuten.co.jp/document/ １．アプリ情報の確認をクリック ２．アプリID/デベロッパーIDを確認 これで楽天APIの準備は完了です。 Nuxt.jsで商品情報を取得し、表示する コンポーネントのStoreのactionを呼び出し index.vue <script> import { mapActions } from 'vuex' export default { // 画面描画時にstoreのfetchItemアクションを呼び出し created(){ this["item/fetchRakutenItem"]() }, methods: { 　　　　　　...mapActions(["item/feｔｃｈRakutenItem"]), }, } </script> storeで楽天APIと通信して商品情報を取得する 流れとしては以下のとおりです。 1.stateに商品データを格納する空の配列を設置 2.actionsで楽天APIと通信を行い、商品情報を取得 3.mutationsでstateのitemArrayに商品情報をセットする item.js // yarn add axios または　npm install axiosで追加しておく import axios from 'axios' export const state = () => ({ 　//空のアイテム配列を用意する Items: [], }) export const getters = {} export const mutations = { // stateのItemsにactionsから受け取った楽天商品情報をセット setRakutenItem(state,RakutenItemArray) { state.Items = RakutenItemArray }, } export const actions = { // コンポーネントから呼び出したactionsの処理 fetchRakutenItem({commit}){ // 登録した楽天APIの19桁の数字を定数に格納 const apiKey = 'アプリID/デベロッパーID' // 第一引数にURL、第2引数にAPIキーや検索ワードなどのオプション追加 axios.get('https://app.rakuten.co.jp/services/api/IchibaItem/Search/20170706', { params: { applicationId: apiKey, keyword: 'スーパーセール', hits: 30, }, }) .then((res) => { // res.data.Itemsに処品データが格納されている // 気になる場合はconsole.log(res.data)で確認してください。 let RakutenItemArray = [] res.data.Items.forEach(data => { // 表示に必要なデータを以下のItemObjに格納 const ItemObj = { itemName : data.Item.itemName, itemImage: data.Item.mediumImageUrls[0].imageUrl, itemPrice : data.Item.itemPrice } // 空の配列ItemArrayにItemObjを入れていく ItemArray.push(ItemObj) }) // mutations呼び出し // 第2引数に商品情報を格納したItemArrayを入れ、mutationsに渡す commit("setRakutenItem",RakutenItemArray) }) } } これでvuexのstateに商品情報を格納することができました。 あとはコンポーネント側でこれを表示するだけです。 stateの商品情報をコンポーネントで表示する index.vue <script> import { mapActions } from 'vuex' export default { // computedプロパティでstoreから商品情報を取得する computed: { items(){ return this.$store.item.state.items } }, created(){ this["item/fetchRakutenItem"]() }, methods: { 　　　　　　...mapActions(["item/feｔｃｈRakutenItem"]), }, } </script>

前提 Vue.js (3.x 系)で liff アプリを作成するとき、以下のように liff.init していました。 RootPage.vue <template> <router-view /> </template> <script lang="ts"> import liff from '@line/liff/dist/lib'; import { defineComponent, onMounted } from 'vue'; import { useRouter } from 'vue-router'; export default defineComponent({ name: 'RootPage', setup() { const router = useRouter(); onMounted(async () => { await liff.init({ liffId: 'xxxxxxxxx' }); if (!liff.isLoggedIn()) { await router.push({ name: 'page1', }); } else { await router.push({ name: 'page2', }); } }); }, }); </script> 通常の動作はこれで問題ありませんが、クエリパラメータを付与して liff アプリに遷移したときに問題が起こりました。 期待していた遷移の挙動 まず liff アプリに下記のようにクエリパラメータを付与してアクセスします。 https://liff.line.me/xxxxxxxxxxxxx?hoge=hoge&fuga=fuga すると、liff サーバによってエンドポイントに指定していたアドレスにリダイレクトされます。この時、もともと付与されていたクエリパラメータは URL エンコードされた状態で liff.state というパラメータ内に保持されます。これは、liff アプリにおける１次リダイレクトに相当します。（詳細は公式ドキュメントを参照してください。） https://myliffapp.com/index.html?liff.state=%3Fhoge%3Dhoge%26fuga%3Dfuga その後、Vue が起動し、前述した liff.init が呼ばれます。このとき、内部的にliff.stateパラメータを通常のクエリパラメータとして再解釈した URL にリダイレクトされます。これが、２次リダイレクトに相当するものです。 https://myliffapp.com/index.html?hoge=hoge&fuga=fuga 実際の挙動 実際にはliff.initの後、下記のような URL に遷移されてしまいました。 https://myliffapp.com/index.html?hoge なぜか第１パラメータの hoge のキーだけが残る謎挙動。頭を抱えました。 仮説 VueRouter と liff.init の両方がパスを管理しようとして衝突しているのではないか、 という仮説を立てました。。 ドキュメントにも下記のように記載があります。 liff.init()メソッドが返すPromiseオブジェクトがresolveする前に、サーバーやフロントエンド側の処理などでURLを変更しないようにしてください。 この仮説に基づき、VueRouter が動作し始める前にliff.init してみました。 結果 下記のように変更したところ、クエリパラメータが期待通りに取れるようになりました。 main.ts import liff from '@line/liff/dist/lib'; import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; async function main() { // VueRouter が動き始める前に liff.init する await liff.init({ liffId: 'xxxxxxxx' }); const app = createApp(App); app.use(router); app.mount('#app'); } main(); RootPage.vue <template> <router-view /> </template> <script lang="ts"> import liff from '@line/liff/dist/lib'; import { defineComponent, onMounted } from 'vue'; import { useRouter } from 'vue-router'; export default defineComponent({ name: 'Base', setup() { const router = useRouter(); onMounted(async () => { // ここでは liff.init しない！！ // await liff.init({ liffId: 'xxxxxxxxx' }); // この時点で正しく２次リダイレクトされ、クエリパラメータは正常に読み取れる。 if (!liff.isLoggedIn()) { await router.push({ name: 'page1', }); } else { await router.push({ name: 'page2', }); } }); }, }); </script> まとめ ネット上では onMounted 内で liff.init している例が散見されるので、同じ部分でハマっている方も多い気がします。react など他のフレームワークでも同様にパスの制御が衝突してしまう可能性があるので、liff.initのタイミングには注意したほうがよさそうです。