アプリを作ろう(1)：Vue/Nuxtのすすめ
・簡単にアプリを作りたいならVue/Nuxtがオススメ
・Sampleアプリの例とソースコード
これからこのnoteではVue/Nuxtを使ったアプリケーションの作り方を掲載していきます。アプリを作りたい、プログラミングを勉強したいという人に向けて、初心者でも分かるように簡単かつ分かりやすさを心がけて説明していきます。
どんなアプリがどれくらいで作れるのか
まずは下記のサイトを見てください。
https://shindoi2021.netlify.app/
カレンダーを選択して、Taskのところにメッセージを打ち込むとタスクが入力されます。
続けて入力していくと日付でソートされますし、×ボタンで消すこともできます。
簡易版なのでリロードすると消えてしまいますが、それほど苦も無く保存させることもできます。
このアプリのソースコードはこれぐらいです。
UIに関する部分が次のコードになります。
<template lang="pug">
v-app
v-container
v-card
v-card-title.indigo.white--text.text-h3 Scheduler
v-row.pa-5
v-col(cols="12", md="4")
v-date-picker(v-model="date", color="indigo")
v-col(cols="12", md="8")
v-text-field(v-model="task", label="Task", @change="add")
template(v-slot:prepend)
v-chip.indigo(dark) {{ date }}
v-list(dense)
v-fade-transition(group, mode="out-in")
div(v-for="s in schedules", :key="s.id")
v-list-item
v-list-item-icon
v-chip.indigo(dark) {{ s.date }}
v-list-item-content {{ s.task }}
v-list-item-action
v-btn(icon, @click="remove(s.id)")
v-icon mdi-close
v-divider
</template>続いてプログラムの部分は下記の通りです。
<script lang="ts">
import { defineComponent, ref } from "@vue/composition-api";
export default defineComponent({
setup() {
const date = ref<string>(new Date().toISOString().slice(0, 10));
const task = ref<string>("");
const schedules = ref<{ id: number; date: string; task: string }[]>([]);
let id = 0;
const add = () => {
schedules.value.push({ id: id++, date: date.value, task: task.value });
schedules.value.sort((a, b) => (a.date < b.date ? -1 : 1));
task.value = "";
};
const remove = (removeid: number) => {
schedules.value = schedules.value.filter((n) => n.id !== removeid);
console.log(schedules.value, removeid);
};
return {
date,
task,
schedules,
add,
remove,
};
},
});
</script>
<style lang="sass">
.v-move
transition: transform 1s
</style>これだけのコードで上記のアプリは動いています。
すべてのソースは下記のGitHubで公開しています。
https://github.com/shindoi2021/schedular
いろいろファイルがありますが基本的にはデフォルトの設定ファイルばかりで、必要な上記のコードはpages/index.vueのファイルになります。
このアプリを見ただけでも、
「時刻を入れてスケジュールしたい」
「繰り返しの予定を入れたい」
「予定のタイトルと中身を入れたい」
「会議室名を入れたい」
「アラームを鳴らしたい」
などなど、いろんな要望が出てきます。
ローコード・ノーコードツールであれば全てに答えられるかどうかは分かりません。
できることもあれば、できないこともあったりします。簡単にできるだけ、選択肢は狭まります。
しかし、Vue/Nuxtでプログラミングするということは、これらの要望に全て応えることができます。
Vue/Nuxtで出来ないことがあるとすると、それはほとんどの場合Web上ではできないことと言っていいでしょう。
Vue/Nuxtは従来のHTML/JavaScript/CSS/Apache/Nginxを使った手法から見れば十分にローコードなので選択肢が狭まっていることは確かですが、それでもほとんどのことはできてしまいます。
次回からはVue/Nuxtでのアプリの作り方を一歩ずつ説明していきます。