高速Webサイトをいろいろな技術を組み合わせながら作れるという「Astro」使ってますか？
https://astro.build/

2023年1月末にAstro2.0がリリースされて、さらなる盛り上がりを見せています。

Astroは極限までJavaScriptを排除することで、Webサイトの高速化を行っています。
ゼロJSをAstroは謳っており、完全にJSを排除したサイトがデフォルトで構築できるようになっています。

また、ReactやVue、Svelteなど様々な技術を混在させてサイトを構築していくことができ、慣れ親しんだ技術を使って高速なWebサイトが構築可能です。
Astro独自の機能や配信の最適化（エッジ最適化）など、いろいろ良い機能、環境が揃っています。

### 阿部寛のホームページを超えてゆけ
[阿部寛のホームページ](http://abehiroshi.la.coocan.jp/)は言わずとしれた、超高速サイトですね。
こちらはコンテンツの殆どがHTMLで構成され、jsのコードは多少あるもののCSSすらもなく高速で表示されます。

まあ、高速化を目指してこのような構成にした訳では無いと思いますが、
Astroを使えば、このように高速なサイトを作成することが可能になります。
デザイン自体はCSSやTailwindも使えるのでイケてる感じに出来るかは自分次第です。

もう「阿部寛のホームページ」については話しません。
気になってたまらないという方は、阿部寛のホームページのさらなる高速化を目指した人もいるようなので見てみると面白いですよ。
https://nlab.itmedia.co.jp/nl/articles/2207/19/news170.html

### Astroはコンテンツにフォーカス
AstroはWebサイトを作成するもので、コンテンツにフォーカスしています。
つまりブログや記事メディアなど、いろいろな機能が盛り込まれたWebサービスを作る目的では作られていません。

出来ないこともないですが、サイトのコンテンツを重要視しています。
なので、そのコンテンツの表示を出来る限り高速に表示出来るような仕組みが整えられています。

最初にも話しましたが、Astroにはいろいろな機能や環境が揃っていますが、細かい話になるので、それは別の機会に紹介します。

ここでは、Astroをさくっとセットアップして表示ローカル環境で表示してみるというところまでを行っていきます。

### Astroインストール

今回はnpmでAstroをインストールしていきます。

```
npm create astro@latest
```

色々聞かれますが、とりあえずrecommendedのものを選択していけばいいです。

![astro install](//images.ctfassets.net/2kcyx6q7ww5g/4wXNQEskKaXL1LCH5Ai4aU/d74f9a4beba8834bb761dd57728f97e5/____________________________2023-02-02_14.39.24.png)

今回はastro-sample-appという名前でAstroプロジェクトを作成してみました。

では実際に起動してみましょう

```
cd astro-sample-app/
npm run dev
```

![astro npm run dev](//images.ctfassets.net/2kcyx6q7ww5g/JjgNsylPYqNd1PKvxaz8o/0f87c043e1c899d94996e81b4184ae0d/____________________________2023-02-02_14.41.32.png)

3000ポートで起動するので、

[http://localhost:3000/　](http://localhost:3000/)　にアクセスしてみましょう。

![astro top page](//images.ctfassets.net/2kcyx6q7ww5g/6LkrcjC0MVznt5IxEoOX3Q/8b36271368fefa6874d862cfbd4f0175/____________________________2023-02-02_14.42.41.png)

このように表示されれば成功です。

```
code .
```
vscodeとかで開いて、コード変種していきましょう。
また細かいページの作り方やReact、Vueなどの入れ方、Tailwindの入れ方は次回移行触れていきます。

Astroで作る「高速Webサイト」阿部寛のホームページを超えてゆけ

Github Codespacesはクラウド上で開発環境、クラウドIDEを提供するサービスです。

月60時間程度は無料で使えます。

[https://github.co.jp/features/codespaces
](https://github.co.jp/features/codespaces)

Githubのアカウントさえあれば、クラウドの開発環境にアクセスでき、ブラウザ上（PC上でも）でIDE（VSCode）を使って開発がすぐに始められます。

今回はVue3の環境構築を構築していきます。

### GithubでCodespacesを起動する

まずはGithubにアクセスして、Codespacesにアクセスします。

[https://github.com/
](https://github.com/)

![1](//images.ctfassets.net/2kcyx6q7ww5g/4Q7LUkw8Pbpd32aCLrDMyh/1fcad6458b164cb7a38253bdff5618b5/1.png)

今回は既存のリポジトリは使わずに、VueのインストールもCodespaces上で行うのでBlankのテンプレートを選択します。

![2](//images.ctfassets.net/2kcyx6q7ww5g/6JHFGnvpvvRWyNbv36Ywy/63069fbe6931b65bc8c5f8a9de681ebb/2.png)

数秒ほどでブラウザ上でVSCodeが起動します。よく見慣れた画面ですね。

ターミナルでコマンド実行もでき、デフォルトでPHPやNode、Ruby、Pythonなどいろいろなプログラミング言語が使用可能になっています。

![3](//images.ctfassets.net/2kcyx6q7ww5g/7B6J4k1GGI7MJlyYsB4ejk/5f5d0c5740cb7357ab13616b56fec7f4/3.png)

ターミナル上でVueをインストールしていきます。

```
npm init vue@latest .
```

「.」とすることで、リポジトリ直下にvueをインストールできます。

vueプロジェクトがインストール出来たら、npm packageをインストールしておきます
```
npm install
```

vueをこの状態で起動しても、ブラウザからアクセス出来ないのでviteの設定を変えていきます。

vite.config.jsを開いて、

```
import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  // ここを追加
  server: {
    host: true,
  }
})
```

この状態で、vueを起動します。

```
npm run dev
```

ターミナル上の http://localhost:5173 をクリックすると別タブでVueアプリケーションの画面が開きます。

今回は右下に出てきた、すべての転送されたポートを表示から、同一画面上にVueの画面を開いていきます。

![3.1](//images.ctfassets.net/2kcyx6q7ww5g/2adNhdJxege4AsYdFm8rVK/a4f744379c567aabf9f70777800a5f31/3.1.png)

ローカルアドレスの右側のボタンを押すと、

![4](//images.ctfassets.net/2kcyx6q7ww5g/2j2yIJ9MkO2hqZcJFRBWLD/49be8cffac55aeb862ab0872c7d4d6e6/4.png)

このようにVueの画面が表示されます。エディタとVueの画面を見ながら開発できます。

![5](//images.ctfassets.net/2kcyx6q7ww5g/1NOQ8TD7M4nLrzSzQRcYZz/fc0d0ead601129010b7005dd4c5f5dcc/5.png)

実際にコードを編集すると、画面リロードなしで反映されます。ｈｍｒも効いていますね。

![6](//images.ctfassets.net/2kcyx6q7ww5g/2mNMG3EThdau0b42I8S2bO/71dc5a3d6ed62bcb1f6753fce65101bc/6.png)

### Gitリポジトリを作成してコミットする

現段階ではCodespaces上でVueのアプリケーションを実行しているだけで、Gitのリポジトリは作成されていません。

この開発環境を削除すると、コードも消えてしまうのでGitリポジトリ化してコードをコミットしていきましょう。

左メニューよりGitを選択して、Publish to Githubを押します。

![7 github](//images.ctfassets.net/2kcyx6q7ww5g/4MtMlFqQHFTS6zY0GGqKq6/4955d0516a5cce0dcebda334dbffa832/7_github.png)

適当にリポジトリ名をつけて、private repositoryで作っておきます。

![8](//images.ctfassets.net/2kcyx6q7ww5g/3A2CY2cXPwmIZ7srRFra3Z/25a018f84b9196a4ff00529329e4ba18/8.png)

以下のようにメッセージが出てきたら、リポジトリ作成完了です。

![9](//images.ctfassets.net/2kcyx6q7ww5g/49xvSW9VdbfeBp2kAdBqWj/36eb6075ffe62f2b2d03fc9840b1a593/9.png)

### CodespacesをローカルPCのVSCodeで使う

ローカルPCのVSCodeでもCodespacesにアクセスできるので、そちらも使っていきましょう。
使い方は簡単で、先程作成したcodespaces選択して

![10 local](//images.ctfassets.net/2kcyx6q7ww5g/6r35NXXC1np3UYmmWlRTL3/1c45f55ef87a015eb44a3bf9da1a5730/10_local.png)

「Open in Visual Studio Code」を開きましょう。

![11](//images.ctfassets.net/2kcyx6q7ww5g/3LhZX2OHdpTUbX2PRuGNaO/c4fb1229ad49b16060bee7ae663c7224/11.png)

このように開けます。リモート上で実行するときと同様にターミナルを開いて、

```
npm run dev
```

を実行して「[http://localhost:5173](http://localhost:5173)」にアクセスできます。

![12](//images.ctfassets.net/2kcyx6q7ww5g/75i7oOhuRZQlJ8zCuUqzS5/fbbf3d518fb332e8b290e0a0980094ee/12.png)

### GitHub Codespaces 料金・無料枠の確認する

GitHub Codespacesは月60時間程度無料で使えるのですが、正確には1ヶ月あたり120コアが無料枠ととなります。

Blankのcodespaceを開くと、最小の2コアの環境が起動されます。

つまり2コアを毎時消費するので、120コア使えるということは60時間使えるということです。最小が2コアで2コア単位でスペックを強化していくことができます。

vueの開発では2コアで、今のところ十分です。

#### 使用率の確認
どのくらい月の無料枠を消費しているかを確認してみましょう。

Settingsを開いて、

![13 bill](//images.ctfassets.net/2kcyx6q7ww5g/6bwF72qtn0G19iwn5Rjpyx/40ef0ee347493898fa4d96076e857847/13_bill.png)

Billing and plansのPlans and useageを選択します。

![14](//images.ctfassets.net/2kcyx6q7ww5g/1jRf3oaZA4nMVxJigkIbkQ/d0b2dd68f530f5575fc7b2bd976654a7/14.png)

Codespacesの欄にUseage hoursとStorageがあります。

これが無料枠の消費状況です。ストレージにも容量制限がありますが、15GBもあるのでそうそう超えることは無いでしょう。

![15](//images.ctfassets.net/2kcyx6q7ww5g/7xfXalZZZGFn0k39Md0dsk/f27475fbb4c75246d8b026b7ee17ecbe/15.png)

今回は、CodespacesでVueの開発環境を構築してみましたが、かなりサクサク動作して起動までも高速でとても開発しやすいなといった印象です。

### VSCodeのプラグインをデフォルトでインストールするようにする

codespacesでプロジェクトを開いたとき、VSCodeのプラグインは何もインストールされていない状態です。

VSCodeからインストールするべき、プラグインの提案をしてくれるんですが都度インストールするのも手間なので、起動時にインストールされるように設定しておきましょう。

プロジェクト直下に

```
devcontainer/devcontainer.js
```

とファイルを作成して、extensionsにインストールしたいプラグインを入力しておきます。

```json
{
    "extensions": [
        "Vue.volar"
    ]
}
```

この状態をリポジトリにコミットしておくと、次回から起動するときにVue.volarがインストールされます。

ちなみにこのプラグインはVueの開発をサポートするプラグインなので入れておきましょう。


Github Codespacesで「Vue3」のクラウド開発環境を構築する

今回はVue 3.0の基礎的な内容を学んでいきます。
基礎的内容ですが、Vueを使っていく上でめちゃくちゃ重要な要素となっているので、しっかり抑えておきましょう。

今回はリアクティブな状態とその操作について詳しく学んでいきます。Vueのディレクティブというものについても少し触れますが、ディレクティブは次の記事でより詳しく解説・紹介していきます。

### Vueにおけるリアクティブな状態とは？

まずはVueを使うにあたって非常に重要な「リアクティブな状態」について抑えていきます。

Vueでリアクティブな状態というのは「あるデータ」が変化した時「それに関連するデータ」も合わせて変化（反応）することを意味します。

[(Vueの公式サイトではスプレッドシートの例を用いて説明](https://ja.vuejs.org/guide/extras/reactivity-in-depth.html#what-is-reactivity)しているので、ここでもスプレッドシートで説明します。

以下のような表を用意しました。

![スクリーンショット 2023-05-18 14.23.08](//images.ctfassets.net/2kcyx6q7ww5g/44htJS9l4TQBNVSA4zyLhj/f2732fb87251a65b7239281c0567e9f2/____________________________2023-05-18_14.23.08.png)

各収入金額を表にまとめたものです(個人開発者として理想的な収入体系ですね)

- 本業収入
- 副業収入
- 個人開発収入

この時、それぞれの収入の合計を算出したいとします。

以下のように3つの収入を足し合わせれば算出できます。合計収入は__それぞれの収入を参照__しているといいます。

![vuereactive](//images.ctfassets.net/2kcyx6q7ww5g/5j633OiHONwCKXuVNKp54V/efde6d52b6d3d69146f315cff5c35b97/vuereactive.gif)

Vueの言葉をかりて上記の内容を説明すると、

__本業、副業、個人開発のそれぞれの収入はリアクティブな状態（値）となっていて、それぞれ変化することで合計収入がそれに応じて変化する__

といった感じです。

以下のようにそれぞれの収入を変化させると「合計収入」もそれに応じて変化します。

![vuereactive2](//images.ctfassets.net/2kcyx6q7ww5g/56tRFt1dTdvOFGFoSLO1Rl/348a62c7096a9e8e18b8ddd979d594e1/vuereactive2.gif)

通常JavaScriptの変数で定義した値を、参照したところで参照元の値が変わったとしても、参照先は変化しません。

Vueの機能を使って、参照元をリアクティブな状態（リアクティブな値）にすることで、参照先がそれに応じて変化します。

ちなみに参照先を変更したところで、参照先には影響しません。これは参照先が参照元に依存しているだけであって、その逆の依存はないからですね。

なので先程の収入の例でいうと、
合計収入を変更したからといって「本業、副業、個人開発」の収入には変化を及ぼさないということです。
考えてみれば直感的で当たり前の話かもしれませんが、Vueでリアクティブな状態を扱う上では非常に重要な考え方となるので、理解できない場合はしっかり抑えておきましょう。

またこの考え方はVueだけではなく、他のフロントエンドフレームワークでも使われていることが多いです。リアクティブな状態というのはどういうものなのかを抑えておけば、他のフレームワークを使うときも理解が早まると思います。

### Vue 3.0でリアクティブな状態を扱うには？フォーム操作（データバインディング）
リアクティブな状態について理解できたところで、具体的にVue 3.0ではどのように記述していくのかを見ていきましょう。

#### Vue 3.0のreactiveとrefでリアクティブ化する
JavaScriptにおいて、通常変数の定義はconstやletで行いますよね？

Vueにおいてそのような変数はリアクティブではありません。

Vue 3.0でリアクティブな状態として変数を定義するには以下の2つの方法があります。

- reactive
- ref

これらはそれぞれVueが提供している関数で、値をこの関数で定義することでリアクティブ化されます。

それぞれでリアクティブ化して、表示してみます。

reactiveを使った場合

App.vue

```js
<script setup>
import { reactive } from 'vue';

const data = reactive({
  name: "sample",
})
// sampleとlogが出力される
console.log(data.name)
</script>
<template>
  {{ data.name }}
</template>
```

refを使った場合

```js
<script setup>
import { ref } from 'vue';

const data = ref({
  name: "sample"
})

// scriptタグないで値にアクセスする場合は .valueを付ける必要がある。templateタグ内では .valueは不要
// sampleとlogが出力される
console.log(data.value.name)
</script>
<template>
  {{ data.name }}
</template>
```

書き方と性質に違いがあるのですが、今回はreactiveかrefを使えばVue内でリアクティブ化出来るんだなーということだけ覚えておきましょう。

ちなみに、reactiveはプリミティブ値（文字列、数値だけとか）を持てなかったり、オブジェクトを分割代入したらリアクティビティが失われたりします。refではプリミティブ値も持てるし、分割代入してもリアクティビティは失われないという違いがあります。

この辺の違いや仕組みなどは公式サイトに詳しく記載されています。

[■https://ja.vuejs.org/guide/essentials/reactivity-fundamentals.html](https://ja.vuejs.org/guide/essentials/reactivity-fundamentals.html)

[■https://ja.vuejs.org/guide/extras/reactivity-in-depth.html](https://ja.vuejs.org/guide/extras/reactivity-in-depth.html)

[■https://ja.vuejs.org/api/reactivity-core.html](https://ja.vuejs.org/api/reactivity-core.html)

#### リアクティブな値でフォーム操作を行う（データバインディング）

どちらでもいいんですが、今回はreactive関数のみを使い説明していきます。実際にコードを書きながら慣れていってください

以下のように、入力フォームに入力した名前をリアルタイムで表示していく簡単な機能を作りました。

```js
<script setup>
import { reactive } from 'vue';

const data = reactive({
  name: "", // nameの初期値は空にしておく
})
</script>

<template>
  <div>
    <input type="text" v-model="data.name" />
  </div>
  <div>name: {{ data.name }}</div>
</template>
```

実際に以下のように動きます。リアルタイムで文字が出力されていますね。

![vue input test v-model](//images.ctfassets.net/2kcyx6q7ww5g/7vOyK71geIVan2prSKshmD/82bce3a2f2c89efef2b4bf26bd60e9ed/vueinput.gif)

リアクティブな値（今回でいうとdata.name）をinputタグと紐付けることで、このようにリアルタイムで文字が表示されていきます。入力したらそれに反応して出力されている。つまりリアクティブに動作していますね。

`リアクティブな値をinputタグと紐付ける`と言いましたが、これはv-modelで実現します。他のフォームタグに関してもv-modelで紐づけていくことが可能です。

この紐づけを「`データバインディング`」といい、`data.name`はinputタグにバインディングしていると言ったりします。
この辺の用語は聞き馴染みがないかもしれないですが、開発していたらよく出てくるので抑えておきましょう。

### リアクティブな値とデータバインディングを使ってちょっとした機能を作る

入力した文字をただ出力するだけだとあまり面白くないので、もう少し凝ったことをしてみましょう。

`名前の登録フォームと名前リスト`を作っていきます。

名前を入力して、登録ボタンを押したら名前のリストに追加されていき、名前ごとの削除ボタンを押したらリストから削除されるといった感じです。

完成イメージ↓
![vue-input-name-list](//images.ctfassets.net/2kcyx6q7ww5g/6bDotheNJJhZSxLOl9SvOO/d4150230c529243edf5e384462a1854c/vue-name-list.gif)

まずコード全体をお見せします。
```js
<script setup>
import { reactive } from 'vue';

// ①
const data = reactive({
  inputName: "",
  nameList: []
})

// ③
const addName = () => {
  data.nameList.push(data.inputName)
  data.inputName = "" // リストに名前が追加されたら入力フォームを初期化する
}
// ⑤
const deleteName = (targetName) => {
  data.nameList = data.nameList.filter(name => name !== targetName)
}

</script>

<template>
  <div>
    <input type="text" v-model="data.inputName" />
	
    <button @click="addName">登録</button>
  </div>
  <ul>
	
    <li v-for="name in data.nameList">
      {{ name }} <button @click="deleteName(name)">削除</button>
    </li>
  </ul>
</template>
```

いくつかポイントを上げて説明してきます。

- ① reactiveのオブジェクト内で名前入力とリストデータを保持
- ② @clickを使ってボタンが押された時に動く関数を指定
- ③ reactiveなnameListに値を追加、名前入力を初期化
- ④ v-forを使って名前のリストを一つずつ表示
- ⑤ 削除対象の名前以外をフィルタリングして、名前リストを上書き

vueの内容とjsの内容が混在しているので、事細かく示してみました。一つずつ見ていきましょう

#### ① reactiveのオブジェクト内で名前入力とリストデータを保持

今回はreactive関数内にオブジェクトを定義し、名前自体と名前のリストのデータを保持するようにしてみました。

```js
const data = reactive({
  inputName: "",
  nameList: []
})
```

もちろんそれぞれ分けて以下のようにしてもいいんですが、同じ機能として扱うデータなので今回はまとめました。

```js
const inputName = reactive({
  name: "",
})

const nameList = reactive({
  list: []
})
```

これはちょっと冗長なので、できるだけ機能や意味のかたまりでまとめておくのをおすすめします。

#### ② @clickを使ってボタンが押された時に動く関数を指定
これは@clickなどはディレクティブと呼ばれ、また次の記事で説明しますが、
HTMLのタグに対してVueが色々な操作を加えるものになります。

この@clickは`〇〇が押された時`ということを表し、中にJSのの関数を定義することでその関数が実行されるようになります

今回はbuttonタグにつけていますが、buttonタグじゃなくても動作します

```js
<div @click="() => { 
  // 何かしらの処理を実行
  console.log('hello vue 3.0!')
}">click</div>
```
#### ③ reactiveなnameListに値を追加、名前入力を初期化
②の@clickが実行されて、addNameという関数を定義しているので、それが実行されます。
data.nameListに入力されている名前を追加するという処理を書いています。

またnameListにinputNameを追加したあとでもinputNameに入力された文字は残ってしまうので、

`data.inputName = ""`

このようにして初期化しておきました。
ユーザーからすると、リスト追加されているのにフォームに残っていたら使い勝手が悪いですからね。

#### ④ v-forを使って名前のリストを一つずつ表示
v-forも@clickの仲間でディレクティブです。
このv-forは配列（今回はnameList）の中身を1つ1つ取り出していくものです。

nameListには文字列の名前が複数はいっているので、それらをすべて`<li>タグ`で囲まれるように出力していきます。

#### ⑤ 削除対象の名前以外をフィルタリングして、名前リストを上書き
最後に削除ですね。

削除も登録同様、@clickを押されたら削除を処理を行う関数を呼び出しているだけです。

deleteNameという関数では引数に「v-forで繰り返された特定のname」をとっています。

仮にbobの削除ボタンを押したとすると、deleteName("bob")となり、

以下が実行されます
```js
// targetNameはbob
data.nameList = data.nameList.filter(name => name !== targetName)
```

この記述は純粋なJSなので、よくわからない方はJSの配列操作について勉強すると良いです。

[■JavaScriptのメソッド(forEach,map,filter)の違い](https://qiita.com/yasu2450_tech/items/884faf1064dec163aa52)

JSの配列操作は非常に重要で使い勝手も可読性も高いので、しっかり覚えておきましょう。for文とかif文とかで頑張らないことをオススメします（[■循環的複雑度がまして、バグの混在を含む可能性が上がっていくので](https://qiita.com/yut_arrows/items/16749e02313109071338)）

Vue 3.0の基本 リアクティブな状態とディレクティブを学ぶ

## VueUseはVue.jsのcomposable集

「コンポーザブル（composable）」とは、Vue の Composition API を活用して**状態を持つロジック**をカプセル化して再利用するための関数です。

VueUseはcomposableな関数やユーティリティの集まりで、Vue.jsアプリケーションの開発をより簡単で効率的にするために提供されています。

今回はVueUseの中の関数として、3つ紹介します。


### useToggle

真偽値をトグル（切り替え）する機能を提供する関数です。

この関数を使用すると、ボタンのクリック時に状態を反転させるなどの機能が簡単に作成できます。

`useToggle`の戻り値には、`value`と`toggle`というプロパティが含まれています。



* `value`: 現在の真偽値の状態を示します
* `toggle`: 状態をトグルするための関数です

使用例を見てみましょう。


#### 使用例

この例では、ボタンがクリックされるたびに、toggle関数が呼ばれます。

toggle関数が呼ばれるごとに、保持されているvalue値がトグルされます。

value値を表示して、現在の真偽値の状態を表示しています。

```ts
<script setup lang="ts">
import { useToggle } from '@vueuse/core';
const [value, toggle] = useToggle(false);
</script>

<template>
  <div>
    <p>Is Visible: {{ value }}</p>
    <button @click="toggle()">Toggle</button>
  </div>
</template>
```

[VueUse useToggle 公式 ](https://vueuse.org/shared/useToggle/)


### useMouse

マウスの座標を取得し、リアクティブに返す関数です。

マウスの位置で画像を切り替えたりする場合などに便利な関数です。

`useMouse`の戻り値には、`x`と`y`というプロパティが含まれています。



* `x`: マウスのX座標
* `y`: マウスのY座標

使用例を見てみましょう。


#### 使用例

`useMouse`にて取得したマウスの座標を表示しています。

マウスの座標や関連するプロパティは、リアクティブな値として提供されているため、

`mouse.x`と`mouse.y`の値が変更されると、それに連動して表示されているテキストも更新されます。

```ts
<script setup lang="ts">
import { useMouse } from '@vueuse/core';
const mouse = useMouse();
</script>

<template>
  <div>
    <p> X座標: {{ mouse.x }}</p>
    <p> Y座標: {{ mouse.y }}</p>
  </div>
</template>
```

[VueUse useMouse 公式 ](https://vueuse.org/core/useMouse/)


### useCounter

カウンターを簡単に管理するための関数です。

この関数を使うと、カウンターの増減やリセットなどを簡単に実現できます。

`useCounter`の戻り値には、`count`というプロパティや、inc・dec・set・reset関数が含まれています。



* `count`: カウンターの現在の値です。
* `inc`: 指定された値だけ、カウンターの値を増やすメソッド
* `dec`: 指定された値だけ、カウンターの値を減らすメソッド
* `set`: カウンターの値を指定された値に変更するメソッド
* `reset`: カウンターを初期値にリセットするメソッド

使用例を見てみましょう。


#### 使用例

まず、`useCounter`にてカウンターの初期値を0で設定しています。

2つ増ボタンをクリックすることで、inc関数に2を渡しているため、カウンター値が2ずつ増えます。

2つ減ボタンをクリックすることで、dec関数に2を渡しているため、カウンター値が2ずつ減ります。

カウンター値は保持されているので、`count`を表示することで、増減後の値が表示されます。

```ts
<script setup lang="ts">
import { useCounter } from '@vueuse/core';
const { count, inc, dec } = useCounter(0);
</script>

<template>
  <h1>VueUse: useCounter</h1>
  <div>Count:{{ count }}</div>
  <div>
    <button @click="inc(2)">2つ増</button>
    <button @click="dec(2)">2つ減</button>
  </div>
</template>
```

[VueUse useCounter 公式 ](https://vueuse.org/shared/useCounter/)


### まとめ

使用例を見ていただきましたが、とても簡単にVueUseライブラリを利用できることが分かって頂けたかと思います。

VueUseは、Vue.jsアプリケーションで状態やロジックを管理し、コンポーネントの開発をシンプルにし、再利用性を高めてくれます。

記事内で紹介した関数は、ほんのごく一部です。

VueUseを利用することで、様々な機能が簡単に作れます！

ぜひ取り入れて、色々なアプリケーションを作成してみてください。


Vue.jsの便利機能集「VueUse」の使い方！

## AxiosとFetch APIはhttp requestを行う技術

今回のテーマであるAxiosとFetch APIはどちらもhttp requestを行う技術ですが、

Axiosはjsライブラリで、Fetch APIはネイティブで実装されているという違いがあります。

この記事では、CRUD操作において、2つの違いを解説していきます


### Axiosの使い方

まずは、Axiosの使い方についてCRUD操作を用いて解説していきます。

Axiosは、既存のHTTPクライアントの機能を簡単に利用できるようにし、さらに便利な機能や拡張性を提供することを目的として作られました。これは、従来のXMLHttpRequest（XHR）よりも使いやすい方法を提供するために作られました。


#### AxiosでのCreate操作

```js
const data = { firstName : "Taro", lastName : "Yamada" }
const url = axios.post("http://localhost:3000/user/123", data)
  //then=成功した場合の処理
  .then(() => {
    console.log(url)
  })
  //catch=エラー時の処理
  .catch(err => {
    console.log("err:", err);
  });
```


#### AxiosでのRead操作

```js
const url = axios.get("[http://localhost:3000/](http://localhost:3000/)")
  .then(() => {
    console.log("ステータスコード:", status);
  })
  .catch(err => {
    console.log("err:", err);
  });
```


#### AxiosでのUpdate操作

```js
const data = { firstName : "Taro", lastName : "Qiita" }
const url = axios.put("http://localhost:3000/user/123",data)
  .then(() => {
    console.log('データ更新:',url)
  })
  .catch(err => {
    console.log("err:", err);
  });
```


#### AxiosでのDelete操作

```js
const url = axios.delete("http://localhost:3000/user/123")
  .then(() => {
    console.log('削除ID:',url)
  })
  .catch(err => {
    console.log("err:", err);
});
```


### Fetch APIの使い方

FetchAPIはPromiseベースで、直感的でシンプルな構文を備えており、非同期操作ができます。また、リクエストやレスポンスをより細かく制御でき、新しい機能や拡張性も提供しています。


#### Fetch APIでのCreate操作

```js
fetch("https://jsonplaceholder.typicode.com/posts", {
  //リクエスト形式を指定
  method: "POST",
  //サーバに送信するデータを指定
  body: JSON.stringify({
    title: "Hello World",
    body: "My POST request",
    userId: 900,
  }),
  //サーバーにJSON形式で送信することを指定
  headers: {
    "Content-type": "application/json; charset=UTF-8",
  },
})
.then((response) => response.json())
.then((json) => console.log(json));
```


#### Fetch APIでのRead操作

```js
fetch("https://jsonplaceholder.typicode.com/posts")
  .then((response) => response.json())
  .then((json) => console.log(json));
```


#### Fetch APIでのUpdate操作

```js
fetch("https://jsonplaceholder.typicode.com/posts/1", {
  method: "PUT",
  body: JSON.stringify({
    id: 1,
    title: "My PUT request",
    body: "Updating the entire object",
    userId: 1,
  }),
  headers: {
    "Content-type": "application/json; charset=UTF-8",
  },
})
.then((response) => response.json())
.then((json) => console.log(json));
```


#### Fetch APIでのDelete操作

```js
//IDが3であるオブジェクトを削除
fetch("https://jsonplaceholder.typicode.com/posts/3", {
  method: "DELETE",
});
```


##### AxiosとFetch APIの違い

AxiosとFetch APIは、HTTPリクエストを処理するために使用される2つの異なるアプローチです。以下に、両者の違いに関する簡単な説明を示します。


##### Axios



*  Axiosは、ブラウザとNode.jsの両方で動作するHTTPクライアントライブラリ
* PromiseベースのAPIを提供し、非同期処理が可能
* 高度な機能（自動的なJSON変換、エラーハンドリングなど）が組み込まれており、直感的な使用が可能


##### Fetch API



* Fetch APIは、ブラウザに組み込まれているネイティブのJavaScript APIで、ネットワークリクエストを扱う
* FetchはPromiseベースであり、比較的シンプルな構文
* 追加の機能や設定を必要とせず、純粋なJavaScriptの機能

上記のように、CRUD操作の例では、Axiosは自動的にJSONデータを処理し、エラーハンドリングを提供するなど、使いやすいAPIを提供しています。

一方でFetch APIは、ネイティブのJavaScript APIであるため、一部の機能や設定を手動で行う必要があります。どちらを選択するかは、プロジェクトの要件や開発者の好みによります。


## この記事のまとめ



* Axiosは自動的にJSONデータを処理し、エラーハンドリングを提供するなど初めての人に使いやすい
* Fetch APIは一部の機能や設定を手動で設定できるため、自由度が高い

CRUD操作から見るAxiosとFetch APIの違いとは？

GitHub CodespacesはGitHubが提供するクラウドベースの統合開発環境(IDE)です。

[https://github.co.jp/features/codespaces](https://github.co.jp/features/codespaces)

GitHubリポジトリ内で直接コードを編集したり、ビルド、デバッグすることができます。

本記事ではGitHub Codespacesを利用したReactの環境構築方法をご紹介します。


## GitHubでCodespacesを起動する

GitHubにアクセスし、Codespacesを起動します。

[https://github.com/](https://github.com/)

![スクリーンショット 2024-01-21 14.33.03.png](https://img.implist.dev/uploads/2024/00/2024_01_21_14_33_03_d2a42fdffd.png)

今回ReactのインストールはCodespaces上で行うので、Blankのテンプレートを選択します。


![スクリーンショット 2024-01-21 14.33.08.png](https://img.implist.dev/uploads/2024/00/2024_01_21_14_33_08_6f746d0570.png)


しばらくすると、VisualStudioCodeがブラウザ上で起動します。

では、VSCode上でReactをインストールしていきましょう。



![スクリーンショット 2024-01-21 14.33.25.png](https://img.implist.dev/uploads/2024/00/2024_01_21_14_33_25_58ee90b3e4.png)

## Reactをインストールする

起動しているVSCodeのターミナルでReactをインストールします。


```
npx create-react-app
```


create-react-appをインストールするか確認されるので、yを入力し実行します。


```
Need to install the following packages:
  create-react-app@5.0.1
Ok to proceed? (y) y
```


Happy hacking!というメッセージがターミナル上に表示されていればインストール完了です。

では、Reactプロジェクトを起動してみましょう。


```
npm start
```


下記画面が表示されていれば無事成功です。(別タブで表示されます。)

![スクリーンショット 2024-01-21 14.33.54.png](https://img.implist.dev/uploads/2024/00/2024_01_21_14_33_54_b28c9d6083.png)

試しに、Learn Reactの部分を書き換えてみましょう。

ソースを書き換え、画面をリロードすることで変更が反映されていることが分かります。

![スクリーンショット 2024-01-21 14.34.00.png](https://img.implist.dev/uploads/2024/00/2024_01_21_14_34_00_dd3d6f35d2.png)


## リポジトリを作成する

現時点ではただアプリケーションを実行しているだけの状態で、開発環境を削除すればこれらのコードは消えてしまいます。

Gitのリポジトリを作成し、コミット(保存)する方法をご紹介します。

左側のメニュー欄からソース管理を選択し、Branchを発行します。

![スクリーンショット 2024-01-21 14.34.06.png](https://img.implist.dev/uploads/2024/00/2024_01_21_14_34_06_f9ddc50a1a.png)

リポジトリ名は自由に決めて問題ないです。

今回はreact-sampleという名前のリポジトリを作成します。

![スクリーンショット 2024-01-21 14.34.13.png](https://img.implist.dev/uploads/2024/00/2024_01_21_14_34_13_f1281fb045.png)

右下に以下のメッセージが表示されれば成功です。

![スクリーンショット 2024-01-21 14.34.18.png](https://img.implist.dev/uploads/2024/00/2024_01_21_14_34_18_f458b6aaf8.png)



## Codespacesをエディタで起動する

インストール済みのVSCodeでCodespacesを利用することも可能です。

先程作成したリポジトリの3点メニューから、Oprn in Visual Studio Codeを選択します。

![スクリーンショット 2024-01-21 14.34.32.png](https://img.implist.dev/uploads/2024/00/2024_01_21_14_34_32_d5253f16a4.png)


起動後は上記と同様、npm startの実行で画面を起動できます。


## GitHub Codespacesの使用率を確認する

GitHub Codespacesは無料で使用できるストレージとコア時間の使用量が決められています。

コア時間とは、例えば2コアの環境を1時間使用すると2コア時間の使用量となります。

(Blankのcodespaceは最小の2コア環境で起動します。)

使用率を確認するにはSettingsを開き、Billing and plansのPlans and useageを選択します。

![スクリーンショット 2024-01-21 14.34.37.png](https://img.implist.dev/uploads/2024/00/2024_01_21_14_34_37_5fa1b1df9a.png)

![スクリーンショット 2024-01-21 14.34.43.png](https://img.implist.dev/uploads/2024/00/2024_01_21_14_34_43_3618cd7d18.png)


Codespacesの使用率が表示されていますね。

![スクリーンショット 2024-01-21 14.34.48.png](https://img.implist.dev/uploads/2024/00/2024_01_21_14_34_48_a975ef337e.png)

使用率が75%、90%、100%になると、それぞれメールで通知されます。

使用制限の設定を構成していない場合、使用率が100%を超えるとCodespacesの使用がブロックされるので注意しましょう。


## 終わりに

ご覧いただきありがとうございました。

筆者は初めてCodespacesを利用しましたが、ストレスなくサクサクと環境構築ができました。

これから開発を始める方の手助けになれば幸いです。
