Furyu
[フリュー公式]

Tech Blog

フリュー株式会社の技術ブログです

2019年10月21日

kakuda.takumi

Vue.js London 2019 参加報告会(非公式)を開催しました!

こんにちは。ピクトリンク事業部の角田です。
前回に引き続き、フリュー主催の勉強会を開催しましたのでご報告します。
前回のレポートはこちらから

京都Devかふぇ#7 〜Vue.js London 2019 参加報告会(非公式)【v-kansai共催】〜

今回は合計で約40名の方々にご参加頂きました!

今回は京都Devかふぇだけの開催ではなく関西でのVue.jsのコミュニティであるv-kansai様との共同開催となりました。
また、今回の勉強会のテーマとして、10/4(金)にロンドンのO2アリーナで開催されたVue.js London 2019の参加報告会と題しまして勉強会を開催いたしました。
ちなみにこちらが実際に行ってきた写真になります。

IMG_6494

セッション内容としては、やはり今話題のVue 3.0の話が多めで、実際にこちらのカンファレンス参加者と会話をしていてもVue 3.0の話が楽しみで参加したという方々がたくさんいました。

勉強会の様子

今回の勉強会では登壇枠で3名、LT枠で2名の方にご発表いただきました。
トップバッターは勉強会のテーマであるVue.js London 2019に参加した私、@chan_kakuzが「関西最速?Vue.js London 2019まとめ」という題で発表しました。
今回カンファレンスで話された内容から私がいくつかピックアップしてお話しさせていただきました。
2019-10-09-19-15-41

 

2番手は@Daikids2様による「Deep Dive Into Vue Composition API」です。
こちらはVue 3.0で採用されるであろうComposition APIについて実際にTodoアプリを作ってそのアプリを元にわかりやすく解説していただきました。
実際Vue.js London 2019でも9セッション中3セッションがComposition APIであるくらいVue 3.0の目玉と言えるものだと思います。

自分自身、この辺りの話はわかっていたつもりになっていた部分もあり、とても勉強になりました。
2019-10-09-19-49-49

3番手はサイボウズ株式会社の@shisama_様による「Vue.js Performance Tips」です。
@shisama_様が話された内容の中には今回のカンファレンスで話されていた内容もあり、とてもホットな話題であると感じました。
今回はフロント全般のパフォーマンスについての話もありましたが、特にVue.jsに絞って話されていました。
フロントエンドにおいてもパフォーマンスを考えることは大切であり、アプリケーションのレスポンスが遅いことでビジネスやUXなど様々な面で損失が大きいと私自身も感じています。

2019-10-09-20-04-02

続いてはLT枠です!!
LT枠では@cs_sonar様と@is_ryo様による発表がありました。
@cs_sonar様は今回のVue.jsの勉強会のために東京でVue.jsの勉強会に参加されたそうです。
ただ、初心者には厳しく、一番苦労するであろう環境構築は自分で行うという方針であったそうです。
今まではあまりフロント周りの部分は触ってこなくてもやはりVueはとっつき易い印象だったらしく、Vue.jsが大好きな自分としてはVueが好きな人が増えるのは嬉しいと感じました!

@is_ryo様はVue.jsのUIフレームワークであるVuetifyの紹介をされていました。
実際に私も個人ブログでVuetifyを利用していますが、とても便利であり、@is_ryo様のLTの発表内でも紹介があったモーダルは生のCSSで書こうとするとなかなかに苦労するところが簡単にかけたりします。モーダル以外にも便利なコンポーネントが用意されていたりと、Vue.jsを使ってるには人気のUIフレームワークであると思います。
2019-10-09-20-23-32
2019-10-09-20-30-27

懇親会の様子

IMG_20191009_204231

IMG_20191009_202151

たくさんの方が懇親会まで残っていただき、Vue.jsについて語り合うことができとても盛り上がりを感じました!!

まとめ

今回はVue.jsという日本でもとても人気のあるフレームワークをテーマに勉強会を開催させていただきました。
その結果たくさんの方にご参加いただき、様々な意見交換ができたと思っております。
今後もみなさんがワクワクするような内容をテーマに勉強会を開催していきたいと思っております!!


2019年10月2日

iida

フロント初心者がVue.jsを勉強する part.2

こんにちは、飯田です。
世間はいろんなゲームで盛り上がっていますね。普段FF14ばかりの私も久々にゲームを買いました。
今回も前回に引き続きVue.jsの勉強記事となります。
 

はじめに

この記事はフロント初心者がVue.jsを勉強する Part.1の続きです。
今回は実際のプロジェクト上のコンテンツをVue.jsにした話を書いていきます。
 

実際のプロジェクトでVue.jsを書いてみた。けれど…

まずは現状ピクトリンク内でVue.jsに置き換えられる静的ページやコンテンツを探すところからはじまりました。
 
そのひとつが、年に4回発行されるGIRLS TRENDという冊子の紹介ページです。
(余談ですがこちらの冊子は内容もデザインもとても可愛いので、ゲームセンターなどで見かけたらぜひ手にとってほしいです!)
 
GIRLS TRENDのディレクトリ構造は厳密には違いますが、だいたいこのようになっています。
色々突っ込みたいのですが現状それぞれのvolumeでディレクトリが切られていて、その中にファイルが2つセットでたくさんある感じになっています…

(vmというのはピクトリンクで使われているVelocityというJavaテンプレートエンジンのファイル拡張子です。ちょっとカオスなHTMLファイルのような感じですが、特にここで説明する必要はないので割愛します。)
 
毎号同じレイアウトで色や画像・内容が変更されるだけなので、内容のみ異なる同じようなvmファイルがたくさん存在しています。
まずは深く考えずに最新号のindex.vmをVue.jsに置き換えてPull Requestを出しつつも、せっかくVue.jsを使うのに似たようなファイルをどうにかまとめられないのか? と疑問に思っていました。
 
結果的に『Vue Routerを使ってみると良いかも』とレビューをもらい、Vue Routerに触れてみることにしました。
 

Vue Routerとは

シングルページアプリケーション(SPA)を構築するために用意されているVue.jsの公式拡張ライブラリです。
ルーティング制御に優れています。
 
公式ドキュメント
https://router.vuejs.org/ja/
 

シングルページアプリケーション(SPA)って?

単一のページで構成されているWebアプリケーションのことです。
ブラウザによるページ遷移を行うことなく、単一のページの中でコンテンツを切り替えて表示します。
こちらの記事が簡単にまとまっていて概要を掴むにはわかりやすいです。
https://qiita.com/takanorip/items/82f0c70ebc81e9246c7a
 

やってみる

さて、今回やりたいことは以下になります。
 
・URLをシンプルにし、volumeに対応した内容を表示させたい
→ magazine/21/ならvol.21のindexの内容を、magazine/22/ならvol.22のindexの内容を表示したい
・毎回レイアウトは同じなので1つのコンポーネントを使いまわして内容だけ変えたい
 
前回vue-cliで作成したプロジェクトにVue Routerをインストールしてローカルで試してみることにします。
 

インストール

※npm5.0より前のバージョンを使っている方は–saveオプションをつけてください。
 

ルーティング用コンポーネントの作成

ルートにアクセスしたときのVueコンポーネントをIndex.vue、magazineにアクセスしたときのVueコンポーネントをMagazine.vueとし、それぞれ作成します。
とりあえず簡単な文章を入れているだけです。

 

main.jsに設定の追記

Vue Routerはインストールしただけでは当然使えないので、main.jsに設定を追記します。

ルーティングの設定について簡単に解説します。

mode

デフォルトでは、設定したパスにアクセスするとURLに#(ハッシュ)が含まれてしまいます。
historyと設定することによって、URLから#を除くことができます。
ただ実際のプロジェクトでhistoryモードを使うにはサーバー側の設定が必要です。
詳しくはこちらを参照してください(私はサーバー側の知見がないのでこのへんもゆくゆくは知りたいですね! )

path

パスの設定です。
:からはじまるものはパラメータで、可変URLをマッチングするために使います。
今回は:volume部分に号数の数字が入る想定でパラメータにしています。

name

ルートに名前をつけます。
ナビゲーションの作成などに使うことができます。

component

path部分にアクセスしたときに表示するコンポーネントを設定します。
この場合だと/(ルート)にアクセスしたときはIndex.vue、magazine/:volume/にアクセスしたときはMagazine.vueが表示されます。
 

ルートコンポーネントに表示部分の追記

ルートコンポーネント(この場合なら全ての親コンポーネントにあたるApp.vue)に、表示部分を追記します。
(App.vueにはもともとvue-cliでプロジェクトを作成した際にすでに色々書いてありましたが、今回はわかりやすいように余計な記述を消しています。)

<router-view />と記述することによって、パスと一致したコンポーネントがこの部分に表示されるようになります!
最初のうちは書き忘れてなんか表示されないんだけど…?とやっていたりするので書き忘れないようにしましょう。(実体験)
 

実際にアクセスしてみる

上記が終わったら、前回と同じように

でローカルサーバーを立ち上げてhttp://localhost:8080/にアクセスします。

FireShot Capture 018 - my-project - localhost

このような表示になったら成功です! ちゃんとルートにアクセスした際にIndex.vueが表示されました。
 
次はhttp://localhost:8080/magazine/21にアクセスします。
21部分は上記で説明したとおり可変パラメータにしているので、別の数字でも同じ表示になります。
 

FireShot Capture 019 - my-project - localhost

Magazine.vueが表示されました!
これでVue Routerを使うことによって、ルーティングが機能してコンポーネントの表示が切り替わることを確認できました。
 

まとめ

今回はどういう経緯でVue Routerに触れることになったかの話とVue Router導入編でした。
Part.3では実際にvolumeに対応した内容を表示することをやりたいと思います。