Vue3(SFC)でアプリを作成するために最低限必要なJavaScriptの知識をまとめてみた。
Vue3のscript setup(以下SFC)を使うようになってから、
圧倒的にコードが開発が楽になりました。
Webアプリを開発するという観点でみれば、JavaScriptも絞って学習すれば、
かなり学習コストが抑えられるのではないでしょうか？
最近、社内教育に携わる事が多く、しかも組み込み系ばかりでWeb系はずぶの素人という方が多く、
非常に苦労しました。
ただよくよく考えば、JavaScriptで教えることは大きく分けて3つです。
何はともあれ、オブジェクト
これは、最も基本ではないでしょうか？
さすがに、これを知らないと何もできないかなと
基本的な代入とか変数とかは、さすがに皆いい大人なので、ご自分で確認してもらってます。
皆さん素人ではないので。
例えば、こんな連想配列があったとします。
<script setup>
import { reactive } from 'vue'
const fetchData = reactive([
{name:"taro",age:"32"},
{name:"jiro",age:"22"},
])
</script>
<template>
<ul>
<li v-for="(item,i) in fetchData" :key="i">
名前：{{ item.name }}/年齢：{{ item.age }}
</li>
</ul>
</template>
JavaScriptではオブジェクトというと関数も代入できるため、
完全な値ではないです。そこが、初心者🔰には非常にややこしいのですが、
一旦は値だけが入ったものと考えることにします。
keyとvalueが一つになったものをデータセットとして扱うことが多いです。
そのため、例のようにv-forといったvueにおけるfor文でループ処理をして
画面に表示させることが多いです。
アロー関数
実際のvue案件のコードを見ると、あまり下記のような関数の書き方はみません。
function add(num1,num2){
return num1 + num2
}
初心者はJsの教科書みるとfunction~ってあるのになんで？？
ってなるかもしれませんが、Vue3になってからは、ほぼこの記述方法は
しないんじゃないかなと思ってます。
<script setup>
import { vue } from 'vue'
const result = ref(0)
const add = (num1,num2) => {
result.value = num1 + num2
}
</script>
<template>
<div>{{ result }}</div>
<button @click="add(1,2)">add</button>
</template>
ボタンを押すと結果がresultに表示さるという感じです。
関数式を使わずにアロー関数を使用すると非常にスッキリかけますね。
配列へのメソッド(forEach/filter/map ...etc)
いわゆるpushとかunshiftとかはググるればさすがにわかるので、
その辺は良しとして、forEachやfilterなどのメソッドです。
各メソッドの詳しい内容も探せばいくらでも詳しいサイトがあるので
省きますが、例えばオブジェクトの部分で上げた例で30歳以上のデータのみを
表示したいとします。
<script setup>
import { reactive, computed } from 'vue'
const fetchData = reactive([
{name:"taro",age:"32"},
{name:"jiro",age:"22"},
])
const filteredData = computed(()=> fetchData.filter((e)=>Number(e.age) > 30))
</script>
<template>
<ul>
<li v-for="(item,i) in filteredData" :key="i">
名前：{{ item.name }}/年齢：{{ item.age }}
</li>
</ul>
</template>
その場合は、filterメソッドを使えば非常に早いです。
バックエンドから取得してきた値を、画面に必要な形にするというのは
良くやるかと思います。
filterやらmapなどのメソッドはかなり使うので、ここは抑えてほしい部分です。
おわりに
いかがでしたでしょうか？
あくまで、私の独断と偏見です。
たかだか2年目のひよっこエンジニアですので、諸先輩方アドバイスをいただけましたら
泣いて喜びます。
ここに書いたのは必要最低限の知識ですが、自分がど素人から入ったときは何から手を付けていいのか分からず非常に大変でした。また、現場の先輩方も全然教えてくれ、、、、とはいえませんが、
ここに紹介した分だけでも理解していれば、あんなに苦労しなかったのになあと思っています。
Discussion