ゆるっとVue.js「明日から使えるVue.jsの話」

T.K、初の登壇

場　所：ロジカルスタジオ会議室アドリア（４F）
時　間：1月29日（火）　19:20～21:00
登壇者：Sanadiさん、okawaさん、T.K、上平さん

こんにちは、ロジカルスタジオのフロントエンドエンジニア/ブログライター/勉強会スタッフ、T.Kです。
弊社が平均月1回のペースで展開する外部向け勉強会「ゆるっとStudy」、ついに4回目となりました！
回を追う毎に、参加枠が満員になるまでの時間が
どんどん短くなっているように感じています…！
リピーターの方もちらほらいてくださり、たくさんの方に参加いただいて
スタッフ一同、感謝の気持ちでいっぱいです！

・・・・・・・・・・・・・・・

勉強会の最新情報はTwitterで見れるしゅこ！
フォロー募集中しゅこ～♡

ロジカルスタジオのconnpassページでも確認できるで！グループ参加待ってるで～！

さて、今回のテーマは？

さて、今回のテーマは？

第4回目となります今回の「ゆるっとStudy」、今回のテーマは「Vue.js」です！
前々回同様、技術を身につけるというよりは

Vueこんなことをやってみた
Vueのこんなことについて調べてみた
Vueはここがすごい！

といったことを登壇者が持ち寄り、Vue.jsに対する知見を深めよう！というのが今回の概要です。

当勉強会は

セッション
LT(Lightning Talk)
懇親会

という順番で進行していきます！
今回も、前回に引き続き、勉強会中にTwitterで感想を随時参加者の皆様に書いて頂く形で進行しました。
ハッシュタグ「#ゆるっとStudy」をツイートにつけて頂くと、それをロージーがTwitter上で拾っていきます。

いっぱいツイートして頂くとロージーが喜びます

セッション

セッションでは、登壇者が約15分、Vue.jsについてのお話をします。
今回の登壇者は

sanadiさん
okawaさん

です！

01.Vue.jsでアニメーションしよう！ by sanadiさん

まず1人目は、前々回の「ゆるっとStudy!」でも登壇してくださった、sanadiさん！
sanadiさんは、Vue.jsでアニメーションを実現する方法の数々を発表してくださいました！
以下では、sanadiさんの発表内容を要約して掲載します。
発表資料を頂いたので、そちらと併せてご覧ください！

sanadiさんの発表資料はこちら！

Twitterアカウントはこちらです！

Tweets by SANADA__AKIRA

はじめに：jQueryとVue.jsの違い

jQueryは「ある要素をどう触るかを決める」
Vue.jsは「まず全ての要素を取得して、それを触る」

Vue.jsでアニメーションを実装するには？

クラスを作ってVueで切り替え
Transitionラッパーを使う
サードパーティのアニメーションライブラリを使う

使い分け

クラスを作ってVueで切り替えは…状態が遷移する場合に使う
Transitionラッパーは…要素の有無を切り替える場合、@keyframesを使用する場合に使う
サードパーティのアニメーションライブラリは…jQueryのanimateが使いたい場合に使う

その他

JSフックを使うと、DOMの変化のタイミングを取得できる
JSフックを使って高さを取得すると、スライドインができる
transition-groupを使用するとv-forで生成した要素にアニメーションをかけられる

T.Kの感想

私はVue.jsを知る前からアニメーションに興味があったため、sanadiさんの発表は非常に興味深いものでした！
CSS3には比較的容易にアニメーションを実装できる機能（transition、animation、イージング）があるので、
Vue.jsと組み合わせると簡単にアニメーションができることは想像に難くないですよね！
JSフックはあまり使ったことがないため、今後使って行きたいと思います。

せっかくなので、私もVue.jsでアニメーションしてみました！
以下の右上のボタンをクリックしてご覧ください。

See the Pen logi-animation-by-vue by LOGICAL STUDIO PR部 (@ls_pr) on CodePen.

02.NuxtではじめるVue.js by okawaさん

続いて、2人目、okawaさんの登壇です！
okawaさんは、

Nuxt.jsのすすめ
Vue.jsを学ぶ上でのお話

この2点について発表をしてくださいました！
発表内容を以下に要約して掲載します。
また発表資料もいただきましたので、併せてご覧ください！

はじめに：Nuxtとは？

Nuxtとは、Vue.jsに基づいたプログレッシブフレームワーク。
モダンなwebアプリケーションを作成するのに適している。
Nuxtを使うと非常に開発しやすくなる。

Nuxtの開発環境の構築

以下をコマンドプロンプトで入力。

npx create-nuxt-app [projectName]

あとはオプションを数個設定するだけで完了。

ESLintは「ESLint Prettier」を選択。オカンかと思うくらいうるさいと感じるが、基本的な書き方を教えてくれる。

追加で入れるといいもの

プリプロセッサを追加。

Pug
Sass
Stylus

など…

特にPugはおすすめ(Vue.jsと相性が良い)。

vue-cliでも良いのでは？

Nuxtは以下の利点がある。

静的書き出しが可能
PWA化が可能
サーバーサイドレンダリング（以下、SSRと表記）が可能
拡張・方向転換が容易

なので、とりあえずNuxtで作っておくと良い。

そもそもなぜVue.jsを使うのか？Vue.jsの魅力とは？

依存性を無くすためのカプセル化を手軽にできる。

（ただしプロジェクトによって向き不向きがあるため、Vue.jsにこだわる必要はない）

Vue.jsで積極的に使うべきもの

コンポーネント化
computed
watch
transition
リアクティブディレクティブ

Vue.jsで消極的に使うべきもの

mixin
v-ref
v-el

最小限にするべきもの

data
methods

これらは、VueComponentが依存するもののみを記載したい。

T.Kの感想

「そろそろ自分で環境構築をできるようになりたい！」
と考えていた私にとってタイムリーな発表で、非常に印象的でした。
私はNuxtについて「SSRが可能」ということに大きな魅力を感じました！
やはりVue.js（というかJavascript）で作成したサイトはSEO面で不安があるもの。
SSRはその問題を解決してくれる大きな助けとなるのではないでしょうか！

また、「dataやmethodsをあまり多用しない」という話は初めて聞きました。
現時点ではVue.jsに慣れるので精一杯なので、余裕が出来てきたタイミングでそういったことも意識したいと感じました。

LT

LTでは、5~10分程度、参加者の前で発表をします。
今回は懇親会の後ではなく、セッションの前に行うことになりました！
今回の登壇は

T.K
上平さん

です！

01.Vue.jsの機能を使って色々作ってみた by T.K

毎回の勉強会で皆様の登壇を拝見していて、密かに
「すごいな…俺も登壇してみたいな…」

と感じていた私、T.K。

今回のテーマが「ゆるっとVue.js『明日から使えるVue.jsの話』」であり、
せっかくの機会だと思い、登壇してみました！

私は、弊社での勉強会でまだ話題に上がったことのないVue.jsの機能を使用し、
実際のwebサイトでよく見るものを作り、それを発表させて頂きました。
以下に私の発表内容を要約して掲載します。
発表資料はこちらです。

はじめに：今回作成したもの

ハンバーガーメニュー
スクロール量により状態が変わるヘッダー
入力内容によってエラーメッセージを出す

ハンバーガーメニュー

使用機能：@clickの使用とClassのバインディング

実際のコードはこちら

See the Pen Hamburger Menu by LOGICAL STUDIO PR部 (@ls_pr) on CodePen.

1.ボタンを押すことでisOpenの真偽値を切り替える

@click=“isOpen=!isOpen”

2.isOpen=trueの時、#wrap(関連要素を囲む要素)にクラス”active”をつける

:class=“{ active : isOpen }”

3.CSSで、

表示前：activeをつけずに記述
表示後：activeをつけて記述

ただし、フェードインの場合はCSSにて工夫が必要

スクロール量により状態が変わるヘッダー

使用する機能：mounted

実際のコードはこちら

See the Pen Header-changed by a state of Scrolling by LOGICAL STUDIO PR部 (@ls_pr) on CodePen.

1.mountedでイベントリスナーを追加し、スクロール・読み込み時にスクロール位置を取得

2.ハンバーガーメニュー同様にクラスをバインディング

3.変化後の状態をCSSで記述

入力内容によってエラーメッセージを出す

使用する機能：computed

実際のコードはこちら

See the Pen Validator with Error Message by LOGICAL STUDIO PR部 (@ls_pr) on CodePen.

1.computedでエラーメッセージを作成

2.マスタッシュでエラーメッセージを表示

3.エラーメッセージに応じてクラスをバインディングし、CSSで見た目を変える

ちなみに、ウォッチャー(watch)を使用すると以下のようなコードとなります。
（後述の理由により、こちらも掲載します）

See the Pen validator with watch by LOGICAL STUDIO PR部 (@ls_pr) on CodePen.

登壇しての感想

初めての登壇でしたが、伝わるように発表する難しさを実感しました。
参加者の反応を伺う余裕もありませんでしたが、次回の登壇時は克服します。

02.Nuxt.jsとNetlifyではじめるJAMSTACK by 上平さん

今回最後の登壇は、上平さん！
上平さんは、NuxtとNetlifyでJAMSTACKを始めよう！というテーマで発表してくださいました。
以下に、発表内容を要約して掲載します。
発表資料を頂きましたので、併せてご覧くださいませ！

はじめに：Nuxtとは

Vue.jsでのウェブ制作に必要な設定やモジュールをあらかじめ用意したもの。
静的なランディングページから複雑な企業向けwebアプリケーションの作成まで、幅広く使用できる。
様々な機能があるが…

今回注目する機能

静的ファイルの生成

Nuxtで作成したアプリケーションをビルドし、HTMLを作成する。
→静的ホスティングサービスで動かせる。

Netlifyの使用

Netlifyは、静的なサイトを超高速で提供できるサービス。
FTPが不要になる。
以下の３つのプランがある。

スターター
プロ
ビジネス

プロプランがおすすめ（個人使用でも）。

JAMstackの使用

JAMstackは、

JavaScript
API
Markup

を組み合わせたWebアプリケーションアーキテクチャ。
事前にビルドし、全て静的コンテンツとしてホスティングする。

CMSの機能を足したい場合は、

contentful
microCMS

などのHeadless CMSを使用する。

T.Kの感想

日々、新しい技術が開発されているのだなぁと感じました。
こういった技術は自ら動いて知識を習得しないと絶対に知り得ないものなので（実際Vue.jsもそうでした）、

勉強会
業務

等で、使える技術を増やしていこうと思います！

個人的おすすめはハンズオン形式の勉強会です。その場で手を動かすため、確実に技術を得られます！
弊社ではハンズオン形式の勉強会も行っています。今後もどんどん開催しますので、ぜひご参加ください！

過去のハンズオン勉強会はこちら↓

ゆるっとVue.js勉強会 Vue.jsハンズオン「ToDoリストを作ろう」

ゆるっとVue.js勉強会 Vue.jsハンズオン「Vue.jsでSPAを作ろう」

懇親会

最後は、皆様お待ちかねの、懇親会！
お菓子やお酒を囲みつつ、参加者同士で今回の勉強会の感想や技術、その他いろいろについて語らい合います。
私自身、あまり同業の方とお話する機会が少ないため、非常に貴重な時間だと感じています！
今回もフロントエンドエンジニアや、バックエンドエンジニア、ソフトウェアエンジニアの方まで、
様々な業種の方とお話させて頂き、大変みのりのあるものとなりました！

そして今回、私の発表について、２番目に登壇してくださったokawaさんより

「バリデータではcomputedよりwatchを使うべきではないか？」

というご意見を頂きました。
理由は「computedは算出プロパティのため」とのことでした。
こういった感想を頂くことができるのも、懇親会（と登壇）の魅力だと感じています！