手軽にアプリを書いてみる

近年、Web アプリケーションの開発にはフレームワークの利用が当たり前になってきました。 世界的に React というフレームワークが人気が高いですが、日本国内では Vue や Svelte といったフレームワークの導入事例を多く見るようになりました。

特に Vue は日本語コミュニティも活発で入門者にも比較的とっつきやすいと人気で、通年 COJT のソフトウェアコースでは入門者向けに Vue に触れることにしています。

ただし、React に慣れている方も多いと想定されるため、成果発表のための開発フレームワークはみなさんが自由に選んでいただいて結構です。

Vue Playground を使ってみる

Vue2 時代は、いわゆる変数と関数の書く場所が決められていた Option API が主に使われていました。Vue3 時代では関心やロジックごとに分離して書けるように Composition API が主に使われます。このあたり経緯がわからない方は Vue3 から始めることをおすすめします、そしてこの講義でも Vue3 と Composition API を扱います。

様々なフレームワークがブラウザ上で気軽にコードを書いて結果を確認できる Web サイトを公開しています。これらをPlaygroundと呼んでいます。

Vue SFC Playground

まずは触ってみることにしましょう。

<script setup>
import { ref } from "vue";

const msg = ref("Hello World!");
</script>

<template>
  <h1>{{ msg }}</h1>
  <input v-model="msg" />
</template>

Vue のシングルファイルコンポーネント（SFC）は、HTML を構成する<template>要素と、JavaScript を構成する<script>要素、さらに CSS を構成する<style>要素が一つのファイルで完結することも、初心者にはわかりやすいと言われる理由のようです。

<script setup>
import { ref } from 'vue'

const msg = ref('Hello World!')
</script>

<template>
  <h1>{{ msg }}</h1>
  <input v-model="msg" />
</template>

<style>
h1 {
  color: red
}
</style>