f:id:ShotaNukumizu_1000:20220102101238p:plain

おはようございます。Shotaです。

今回の記事では、私がフロントエンド開発にVuejsを活用する理由について詳細に解説します。

🤔「フロントエンド開発にVueを使ってみようかな...」

🤨「フロントエンドでVueを使う目的って何だろう？」

😥「ReactかVueかどっちを使ってみようか迷ってるんだよね.....」

このように考えている方も少なくないと思いますので、今回はフロントエンド開発にReactではなくVuejsを利用する理由について詳細に解説します。

それでは早速、本題に入りましょう。

Vuejsとは
- Vuejsが実際に使われているサイト
Vuejsの優秀なポイント
一言でいうと
まとめ：個人的にはVueのほうが簡単。Reactは外部ライブラリと連携する必要があるので多少面倒

Vuejsとは

f:id:ShotaNukumizu_1000:20210924072234p:plain

Vuejsは2014年に開発されたUIを構築するためのJavaScript フレームワークです。

Vuejsの詳細について知りたい方は、以下のサイトをご覧ください。

shotanukumizu-1000.hatenablog.com

Vuejsが実際に使われているサイト

Vuejsは以下のサイトで活用されています。

新型コロナウイルス感染症対策サイト
note (ちなみにこちらはVuejsのフレームワークであるNuxtjsで開発されています)

ここからは、Vuejsの優秀なポイントに付いて詳細に解説します。

Vuejsの優秀なポイント

Vuejsの優秀なポイントは以下の通りです。

導入が簡単

再利用できるコンポーネント

直感でコードを書きやすい

それぞれ順番に解説していきます。

導入が簡単

Vuejsは導入が非常に簡単なので手早く始められます。(この部分はReactも同じです)

拡張性が高い

Vuejsはシンプルに設計されているので、他のライブラリと組み合わせるのが簡単です。既存のプロジェクトの一部にも適用できるので、途中から導入を行うことも可能です。

それだけではなく、Vuejsはアプリ開発に必要な機能をVueのライブラリだけで済ますことができます。それに対して、Reactは外部からライブラリを持ってくる必要があります。

直感でコードを書きやすい

Vueは一つのファイルにコンポーネントごとにHTML/CSS/JavaScriptを記述できます。コンポーネントごとにまとまっているので、サイトとコードの関係性をつかみやすいと思います。

<template>
  <h1>Hello, {{ getName }}</h1>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

@Component
export default class SampleComponent extends Vue {
  private name: string = 'hoge'
  get getName() {
    return this.name
  }
}
</script>

<style scoped>
h1 {
    font-size: 3.2rem;
}
</style>

Reactは、JSXと呼ばれるJavaScriptの中にHTMLファイルのタグを組み込んでコードを書いていきます。JavaScriptとHTMLが混在していてコードの構造を理解しづらいと思います。(あくまで個人的な見解)

ちなみにJSXはVueでも対応しています。

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}