こんにちわ！久野です。

最近、Vue.jsの社内勉強会を開催しましたので勉強内容の振り返りを書いていこうと思います！

弊社では、フロント側では、JQueryを使用した開発をしているのですが、最近Vue.jsを導入した開発に携わりました。
今後もVue.jsを、より使いこなしていけるように、体系的に学んでみるのも、良い機会となるため、Vue.jsを題材とした社内勉強会を開催しました。

まず、第一回目の勉強会では基本的なVue.jsを利用したデータバインディングの仕方やディレクティブの種類や使い方について学びました！！！

一人で勉強するのとはまた違い、みんなで技術について会話しつつ、勉強するのもまた面白いですね！

フロッグポッドの社内勉強会では、わからないことは、わからないと気軽にオープンにでき、先輩社員からの技術的な知識も、ふんだんに共有いただけるので、非常に勉強になります。

それでは、初回のVue.js勉強会の振り返りを簡単に書いていこうと思います！

【v-ifを利用した、表示の切り替えのサンプルコード】

下記のコードでは、flagが"true"か"false"に応じて、FROG PODの文字の表示・非表示が切り替わります。

HTML

<div id ="app">
　<p v-if="flag">FROG POD<p>
</div>

JS

const app = Vue.createApp({
　data: () => ({
　// true か falseに応じて表示・非表示が変わる
　flag: true
　})
})
app.mount('#app')

【表示される画面(flagがflaseだとなにも表示されない)】

FROG POD

【v-forを使用した繰り返し表示のサンプルコード】

detaオブジェクトに登録したデータをv-forで順番に表示するサンプルコードです。

detaオブジェクトに登録した、値は順番に取り出されます。

HTML
<div id ="app">
　<ol>
　　<li v-for="frog in frogs">{{ frog }}</li>
　</ol>
</div>

JS

const app = Vue.createApp({
　data: () => ({
　　frogs: ['ケロ','ケロケロ','ケロケロケロッピ']
　})
})
app.mount('#app')

【表示される画面】

1. ケロ
2. ケロケロ
3. ケロケロケロッピ

【v-forを使用してのvalueとkeyの表示のサンプルコード】

下記のコードでは、オブジェクトに登録された、valueとkeyを同時に表示させます。

HTML

<div id ="app">
　<ol>
　　<li v-for="(value , key) in frogpod">
　　　{{ key }}; {{value}}
　　</li>
　</ol>
</div>

JS

const app = Vue.createApp({
　data: () => ({
　frogpod: {
　　adress: 'nihonbashi',
　　station: 'suitengu',
　　favorite: 'chocolate'
　}
})
})
app.mount('#app')

表示される値

1. adress; nihonbashi
2. station; suitengu
3. favorite; chocolate

初回のVue.jsの勉強会では基本的なVue.jsの使い方を学ぶことができました！

継続的に勉強していくことで、よりVue.jsを使いこなせるように勉強会楽しんでいきますー！