part.2Vue.jsこんにちは、飯田です。世間はいろんなゲームで盛り上がっていますね。普段FF14ばかりの私も久々にゲームを買いました。今回も前回に引き続きVue.jsの勉強記事となります。Part.1の続きです。今回は実際のプロジェクト上のコンテンツをVue.jsにした話を書いていきます。実際のプロジェクトでVue.jsを書いてみた。...まずは現状ピクトリンク内でVue.jsに置き換えられる静的ページやコンテンツを探すところからはじまりました。TRENDという冊子の紹介ページです。TRENDのディレクトリ構造は厳密には違いますが、だいたいこのようになっています。present.vm..(vmというのはピクトリンクで使われているVelocityというJavaテンプレートエンジンのファイル拡張子です。カオスなHTMLファイルのような感じですが、特にここで説明する必要はないので割愛します。)毎号同じレイアウトで色や画像・内容が変更されるだけなので、内容のみ異なる同じようなvmファイルがたくさん存在しています。疑問に思っていました。Routerに触れてみることにしました。Routerとはシングルページアプリケーション(SPA)を構築するために用意されているVue.jsの公式拡張ライブラリです。ルーティング制御に優れています。公式ドキュメントhttps://router.vuejs.org/ja/シングルページアプリケーション(SPA)って?単一のページで構成されているWebアプリケーションのことです。ブラウザによるページ遷移を行うことなく、単一のページの中でコンテンツを切り替えて表示します。こちらの記事が簡単にまとまっていて概要を掴むにはわかりやすいです。https://qiita.com/takanorip/items/82f0c70ebc81e9246c7aやってみるさて、今回やりたいことは以下になります。Routerをインストールしてローカルで試してみることにします。vue-router※npm5.0より前のバージョンを使っている方は–saveオプションをつけてください。ルーティング用コンポーネントの作成ルートにアクセスしたときのVueコンポーネントをIndex.vue、magazineにアクセスしたときのVueコンポーネントをMagazine.vueとし、それぞれ作成します。簡単な文章を入れているだけです。<p>これはIndex.vueです。</script>123456789<template><p>これはIndex.vueです。<p>これはMagazine.vueです。</script>123456789<template><p>これはMagazine.vueです。Routerはインストールしただけでは当然使えないので、main.jsに設定を追記します。ここも忘れずに!}).$mount('#app')ルーティングの設定について簡単に解説します。modeデフォルトでは、設定したパスにアクセスするとURLに#(ハッシュ)が含まれてしまいます。historyと設定することによって、URLから#を除くことができます。実際のプロジェクトでhistoryモードを使うにはサーバー側の設定が必要です。)pathパスの設定です。:からはじまるものはパラメータで、可変URLをマッチングするために使います。今回は:volume部分に号数の数字が入る想定でパラメータにしています。nameルートに名前をつけます。ナビゲーションの作成などに使うことができます。componentpath部分にアクセスしたときに表示するコンポーネントを設定します。この場合だと/(ルート)にアクセスしたときはIndex.vue、magazine/:volume/にアクセスしたときはMagazine.vueが表示されます。ルートコンポーネントに表示部分の追記ルートコンポーネント(この場合なら全ての親コンポーネントにあたるApp.vue)に、表示部分を追記します。(App.vueにはもともとvue-cliでプロジェクトを作成した際にすでに色々書いてありましたが、今回はわかりやすいように余計な記述を消しています。/>と記述することによって、パスと一致したコンポーネントがこの部分に表示されるようになります!最初のうちは書き忘れてなんか表示されないんだけど...?とやっていたりするので書き忘れないようにしましょう。serveでローカルサーバーを立ち上げてhttp://localhost:8080/にアクセスします。ルートにアクセスした際にIndex.vueが表示されました。次はhttp://localhost:8080/magazine/21にアクセスします。21部分は上記で説明したとおり可変パラメータにしているので、別の数字でも同じ表示になります。Routerを使うことによって、ルーティングが機能してコンポーネントの表示が切り替わることを確認できました。Router導入編でした。Part.3では実際にvolumeに対応した内容を表示することをやりたいと思います。part.1Vue.jsはじめにはじめまして、飯田です。フリューにはフロントチーム設立と同時に2018年6月に入社しました。ピクトリンクのフロント面を触っていて、現在はVue.jsを勉強しています。Vue.jsは「わかりやすい」「フロント初学者に最適」などと言われてはいますが、今までアニメーションをつけるためにふんわりjQueryを書いていた程度の私には敷居が高く、難しく感じました。そんな自分がどのような流れでVue.jsというものを学んでいるのかを少しずつ書いていこうと思います。最初にやったこと公式ドキュメントに目を通すhttps://jp.vuejs.org/v2/guide/index.htmlVueは公式ドキュメントが日本語化されているのでありがたいなあ、ととりあえず読んでみる...も、自分の知識が足りず、説明に当たり前のように出てくるカタカナの開発用語やプログラミング用語が分からず、コードを見てなにができるのかなんとなく分かっても文章自体はあまり理解できませんでした。ベースの知識があまりない状態で新しい技術を習得しようとするときのあるあるなのかもしれません。挫折しそうになってしまったので書籍に頼ることにしました。ドキュメントの内容をもっとわかりやすく書いてくれている本です。7章以降は飛ばしました。動かして学ぶ!Vue.js開発入門こちらはVue.jsの基礎中の基礎がかなり噛み砕いて説明されておりわかりやすかったです。説明にも特に難しい用語が使われていないので最後までスラスラ読めました。個人的に最初から難しい説明を読むのが嫌ならこの本から入ると良いと思います。基礎から実践アプリケーション開発まで全体を読むというよりは、わからない部分や知りたい部分のみ都度目を通しています。Router、Vuexについての説明は最初は読まずに飛ばしました。学習過程でわからないことが出てきた際に公式ドキュメントや上述の本の必要な部分を都度読み返しています。簡単なものを書いてみるまずは公式ドキュメントや本を見ながら、基礎的なものを手を動かして書いていました。私はWebページでVue.jsをどのように使えば良いのかうまくイメージができなかったので、自分が今まで書いたjQueryをVue.jsで置き換えるとどうなるかを試したりもしていました。dataを作ってそのまま表示してみるv-modelを使ってフォームに入力した内容を表示してみるv-ifを使って要素の出しわけをするv-onを使ってボタンをクリックしたときにイベントを発火させてみるv-forを使ってリストの内容を繰り返してみるそして上記がなんとなく理解できたら、実際の業務で使えそうなものを書いて動かしていました。v-if)Todoリスト(色々なものの組み合わせ。Requestで「コンポーネントに分けた方がいいよ」とレビューをいただきました。Componentについての説明をやっとここで読みました。ボタンなどの何度も使うような部品をコンポーネントとして定義し、都度呼び出すことによって簡単に使い回せるようにするイメージです。作成したHogeComponentを<hoge-component></hoge-component>部分で表示させています。コンポーネント名をケバブケースで記述することによって呼び出すことが可能です。慣れないうちは割とやりがちな注意点ちゃんと表示されないんだけど!?というときに確認すること。returnを記述するスペルミスをしていないか(プロパティ名、コンポーネント名、あらゆる場所でよくやりがち)Vueインスタンス内のcomponents:の中にコンポーネントの設定を記述するのを忘れていないかvue-cliを使ってみる※あらかじめnode.jsとnpmのインストールが必要です。この記事では省略します。ある程度の規模のプロジェクトでVue.jsの開発環境を一から構築するのは大変です。Vue.jsのアプリケーション開発に必要な環境や設定を色々と整えてくれて、雛形ファイルも用意してくれるのがvue-cliというなんかすごいやつです。試しにローカル環境で使ってみます。my-projectmy-project部分はプロジェクト名にあたるのでお好きな名前で。聞かれますがとりあえずEnter連打で良いと思います。serve作成したプロジェクトのディレクトリに移動し、ローカルサーバーを起動します。アクセスし、上記の画面が出れば起動成功です。使うときはこちらの記事を参考にさせていただきました。https://qiita.com/567000/items/dde495d6a8ad1c25fa43ファイル構造についてvue-cliを使う際は、単にHTMLファイルにVue.jsを書いていたときとは違う点が多々あります。先ほど作成したプロジェクトのディレクトリを開き、主要なファイルを見てみます。表示させたいVueファイルをどの要素内に表示するかどのVueファイルの内容をindex.htmlのどの要素内に表示させるかを設定しています。上記では#appという要素にApp.vueの内容を表示させています。60px;}</style>Vueファイルにはtemplate、script、styleがまとめて書かれています。これを単一ファイルコンポーネントと呼びます。Componentを独立した一ファイルにすることができます。vue-cliで作成したプロジェクト内のVueファイルは既にこの形になっています。公式ドキュメント(説明が難しい...)https://jp.vuejs.org/v2/guide/single-file-components.html単一ファイルコンポーネントの利点は、一ファイルにtemplate、script、styleをまとめて記述することができる点です。先ほどのsrc/App.vueをもう一度見てみます。App"/></div></template><template>タグ直下は必ずひとつのブロック要素で囲みます。(エラーになります)ここでHelloWorldという名前のコンポーネントを表示しています。{HelloWorld}}</script>name:部分は省略可能ですが、書いた方が良いと思います。ファイルパス)components:内に読み込んだコンポーネントの変数名を記述するのも忘れないようにします。60px;}</style>デフォルト言語はCSSですが、lang属性を使用することによって他の言語をサポートしてくれます(普段書き慣れているSCSSなどで書ける)scopedを付けることによって、記述したスタイルをそのコンポーネントにのみ適用させることができます。その場合は下記のように書くことができます。center;}}</style>コンポーネント同士のデータの受け渡し先ほど触れた通り、App.vueのtemplate部分で読み込んでいたコンポーネントHelloWorld部分にmsg=ではじまる謎の記述がありました。ここで、HelloWorld.vueという単一ファイルコンポーネントを読み込んでいるApp.vueを親コンポーネント、読まれているファイルであるHelloWorld.vueを子コンポーネントと呼びます。Appという文字列を渡しています。App"/>ここで、コンポーネントとして読み込んでいるsrc/components/HelloWorld.vueを見てみます。#42b983;}</style>このとき、子コンポーネントに親コンポーネント側から受け取りたいデータについて記述する必要があります。このときに使うのがpropsで、script内に以下のように書きます。ここに受け取るものとデータ型を記述する}}</script>propsを記述することで親コンポーネントから文字列を受け取ることができました。}}部分で受け取った文字列が表示されています。ここまでを表示で確認すると以下のような構造になります。単一ファイルコンポーネントを作成するときの命名規則パスカルケースかケバブケースに統一するべきとのことです。https://bit.ly/2HsGJDOちなみにピクトリンクのフロントチームではファイル名をパスカルケースに統一しています(公式ガイドに合わせています)同じ階層にあるファイルのパス指定には./必須vue-cliでファイルをimportする際、同じ階層のファイルのパス指定に./を含めないとエラーになってしまいます。Component、vue-cli、単一ファイルコンポーネント、propsについて説明してみました。Part.2では実際にプロジェクト上のコンテンツをVue.jsに直した話を書いていこうと思います。Tweet2018年09月25日フリュー主催の勉強会(京都Devかふぇ#3)を開催しました!JavaScriptVueVue.js勉強会こんにちは。ピクトリンク事業部の古川です。前回に引き続き、フリュー主催の勉強会を開催しましたのでご報告します。〜フロントエンド〜今回も合計で30名以上とたくさんの方々にご参加頂きました!これまで開催した2回はどちらもモバイルに特化した内容でしたが、今回は初のフロントエンドでしたので、はじめましての方が多かったです!勉強会の様子トップバッターは弊社の佐藤Johnより、「Vue.jsを使うようになるまで」を発表しました。Vue.jsを導入するまでに至った経緯から、Vue.jsのいいところを纏めて発表しました。様より、「Puppeteerのお話」でした。APIのライブラリで、どんなモチベーションで触り始めたか、簡単にどんなことができるかを発表してくださりました。様より、「あえてNuxtを使わずプロフィールサイトを作った話」でした。プロフィールサイトを作ってみた実体験を基に、デモを交えてVue.jsの良いところを発表してくださりました。様、そして私の4人が登壇しました。その3HTMLJavaScriptVue.jsこんばんは、フリューのジョンです。Vue.jsを社内に広める活動を頑張ってます。前回はVue.jsの基本の話、elプロパティ、dataプロパティ、methodsプロパティの話をしました。今回はVue.jsのHTML側(v-bind、v-model、v-on)の話をしていきたいと思います。今回もVue.jsはバージョン2.3.0を使用します。v-bindやv-onなどの属性を、Vue.jsでは、それぞれを「ディレクティブ」と呼んでいます。v-bindディレクティブタグ要素のattributeにdataプロパティやmethodsプロパティの結果を当てはめる(バインドする)事ができます。--></section></body></html>classやstyleの属性については、少し特殊な書き方で値をバインドすることができます。''">無理やり青い文字</p></section></body></html>v-modelディレクティブv-bindでは属性値に値を入れることができましたが、v-bindでは入れるだけではなく、監視して更新することができます。更新が走る属性値、つまり、inputやtextareaタグのvalue属性につけることでその値を監視することができます。<!--inputの中身を変更するとnameの値が変化する--><span>{{name}}</span></section></body></html>selectに対しても記述することができます。この際、初期値のvalueがselectedになることを覚えておきましょう。<!--v-on:は@にすることができます--></section></body></html>記述した関数に引数を渡すことも可能です。--></section></body></html>click以外にもkeyupなども使うことができます。v-modelとの競合に気をつけてください。補足ここまでのディレクティブを使用することで、画像を一定時間ごとに切り替えるスライドショーを作ることができます。v-modelとv-onを使い、画像を動的に追加するなどと行った処理を追加するなどができます。@click="addUrl">追加</button></section></body></html>まとめv-bind、v-on、v-modelで、データバインディングについて、大まかな説明が終わりました。これにより、簡単なアプリケーションは作れるようになりました。次回は、より複雑なアプリケーションを作成するためにv-ifなどのディレクティブについてお話したいと思います。ありがとうございました。その2HTMLJavaScriptVue.jsこんばんは、フリューのジョンです。最近Vue.jsを理解しようとVue.jsのソースコードリーディングをしています。前回はVue.jsのかんたんな使い方とjQueryとの比較、などをお話しました。今回はVue.jsの基本の話、elプロパティ、dataプロパティ、methodsプロパティの話をします。Vue.jsのバージョンは2.3.0です。Elementである必要があります。Elementを与える必要はあまり無いと思われます。コンパイル対象のルート要素に対して設定します。コンパイルとは、データのバインディング設定などを行うフェーズです。Vue.jsではルート要素以下の要素を網羅してHTMLを再構築しています。100">{{n}}</li></ul></section></body></html>dataプロパティdataプロパティはObject型、または、Object型を返すFunction型である必要があります。後で説明するコンポーネントを使う場合、dataプロパティはFunction型でなければいけないので、常にFunction型を返すようにしておくほうが妥当だと思われます。dataプロパティの値にはインスタンスからアクセスすることができます。HTML側からは直接アクセスすることが可能です。Vue.jsはこのObject型に記述されたプロパティの変更を感知することができます。感知することで画面側の再描画が走ります。'aaa'}}</span></section></body></html>このようにdataプロパティが返すObject型をいじると、再描画されているのがわかります。これは、Vue.jsがプロパティにsetterとgetterをつけており、その中で変更を検知しているためです。配列の場合は少し勝手が違います。配列の中身をいじっても更新はされません。id="vue"><!--ほげに変わらない--><p>{{messages[0]}}</p><p>{{messages[1]}}</p><p>{{messages[2]}}</p></section></body></html>もしこのような場合があれば次のように置き換えます。‘ほげ’)(https://jp.vuejs.org/v2/guide/list.html#注意事項)methodsプロパティmethodsプロパティはプロパティがFunction型のObject型である必要があります。methodsの各関数のthisはインスタンスがバインドされていますので、アロー関数を使わないようにしたほうが良いと思われます。これらの関数にはdataプロパティと同じようにアクセスすることができます。id="vue"><p>{{test()}}</p></section></body></html>また、結果を返す関数も記述ができ、内部で使用しているプロパティが変更されると再描画されます。この書き方は推奨されていません。全てのmethodsが自分が参照していないプロパティが変更されても、実行をしてしまうためです。id="vue"><p>{{test01()}}</p><p>{{test02()}}</p></section></body></html>この問題を解消したい場合はcomputedプロパティを使いましょう。computedプロパティは後々お話します。まとめVue.jsの基本のプロパティの紹介とその使い方をご紹介しました。次回は、HTML側について詳しく紹介したいと思います。ありがとうございました。