Vue.jsの基本とコンポーネント設計のコツ

2025年11月28日

仲村翔太

深夜のコードレビューで気づいた「設計の大切さ」

2021年の秋、私は初めて本格的なVue.jsのプロジェクトに参画した。それまではjQueryでゴリゴリ書いてたから、「フレームワーク?まあ、なんとかなるでしょ」くらいの軽い気持ちだった。

最初の2週間は順調だった。Vue.jsのチュートリアルをこなして、「お、意外と簡単じゃん」って思ってた。データバインディングとか、v-ifとか、基本的な書き方はすぐ覚えられる。

で、実際の案件で初めてコンポーネントを作った。要件は「商品一覧ページのカード表示」。簡単そうに見えた。

1つのコンポーネントに全部詰め込んだ。商品データの取得、フィルタリング、ソート、カード表示、ページネーション、モーダル表示…全部。気づいたら600行超えてた。

深夜2時、リードエンジニアからSlackが飛んできた。

「このコンポーネント、もう少し分割できないかな?今のままだと保守が厳しい」

そこから3時間、コンポーネント設計についてレクチャーを受けた。責務の分離、データフローの一方向性、再利用可能な単位…頭がパンクしそうだった。

深夜のオフィスで、ノートPCの前で頭を抱えながらコードを見つめる30代男性の線画イラスト

でもその時の学びが、今の私の基礎になってる。

あれから4年。今はVue.jsの案件を月に2～3件こなして、副業で月40万円くらい稼いでる。本業の給料と合わせると、生活にかなり余裕が出た。

この記事では、「Vue.jsって何?」っていう基礎から、「実務で通用するコンポーネント設計のコツ」まで、私が4年間で学んだことを全部話していく。

初心者の方、これからVue.jsで副業したい方、コンポーネント設計で悩んでる方。Vue.jsは、正しく使えば本当に強力なツール。需要も高いし、単価も良い。

実際、私がメンターしてる受講生の中にも、Vue.js学習を始めて半年で月15万円稼いでる人がいる。特別な才能は要らない。基礎をしっかり押さえて、正しい設計方法を知ってれば、誰でも稼げる。

なぜVue.jsが副業・実務で選ばれるのか

学習コストが他のフレームワークより圧倒的に低い

JavaScriptのフレームワークって、React、Angular、Vue.jsが三大巨頭。で、この中でVue.jsが一番学習しやすい。

私が最初にReactを触った時は、JSXの記法とか、クラスコンポーネントとか、state管理とか…「なんでこんな複雑なの?」って思った。Angularはもっと複雑。TypeScriptが必須だし、DIとか、RxJSとか、覚えること多すぎ。

Vue.jsは違う。

基本的なHTMLとJavaScriptが書ければ、すぐ始められる。公式ドキュメントも日本語で充実してるし、サンプルコードも豊富。

実際の学習期間の目安：

HTML/CSS/JavaScriptの基礎がある人：1～2ヶ月
プログラミング未経験者：3～4ヶ月

私がメンターしてる完全未経験の受講生も、3ヶ月でシンプルなTodoアプリを作れるようになった。

案件数が多くて単価も高い

Vue.jsの案件、めちゃくちゃ多い。

レバテックフリーランスでVue.jsの平均月額単価を調べると、63万円。週2～3日の副業案件でも、月30～60万円が相場。時給換算すると4,000～6,000円くらい。

クラウドワークスやランサーズでも、Vue.jsの案件は常に200件以上ある。しかも「初心者歓迎」って書いてある案件も結構ある。

私が初めて取ったVue.js案件は、「既存サイトのjQueryをVue.jsでリファクタリング」。報酬20万円、作業時間30時間。時給6,600円。正直、驚いた。

カフェの窓際で、ノートPCを開いてVue.jsのコードを書く20代女性の線画イラスト

小規模から大規模まで柔軟に対応できる

Vue.jsの一番の強みは、「プログレッシブフレームワーク」であること。

これ、どういう意味かっていうと、プロジェクト全体に一気に導入しなくても、必要な部分だけ使えるってこと。

例えば：

既存サイトの一部だけVue.jsに置き換える → OK
小規模なLP（ランディングページ）に軽く使う → OK
大規模なSPA（シングルページアプリケーション）を作る → OK

Reactだと、基本的に全体をReactで作る前提になる。Angularもそう。でもVue.jsは、「この検索フォームだけVue.jsにしよう」みたいな使い方ができる。

これ、実務で超重要。クライアントによっては、「全部作り直すのは予算的に厳しい」ってケースが多い。そういう時、部分的に導入できるVue.jsは提案しやすい。

リモート案件が豊富

Vue.jsの案件は、リモートワーク可能なものが多い。

ITプロパートナーズで調べると、Vue.js案件の約7割がリモート可能。Webアプリケーション開発やSPA開発が中心だから、基本的にPCとネット環境があればできる。

私が今やってる3つの案件、全部フルリモート。本業が終わって、そのまま自宅で副業に取りかかれる。通勤時間ゼロ。この効率の良さは、副業をする上で超重要。

平日の夜2時間と土日の各5時間で、週20時間くらい。でも通勤時間がないから、本業に全く支障がない。

Vue.jsの基本を押さえる

コンポーネント設計の話に入る前に、Vue.jsの基本をさらっと押さえておく。「もう知ってるよ」って人は、次のセクションに飛んでもらってOK。

データバインディングとリアクティブシステム

Vue.jsの核心は、「データバインディング」と「リアクティブシステム」。

これ、何かっていうと、JavaScriptのデータとHTMLの表示が自動的に同期する仕組み。

jQueryだと、データを変更するたびに、DOMを手動で更新しないといけない：

// jQueryの場合（めんどくさい）
let count = 0;

$('#button').click(function() {
    count++;
    $('#count').text(count); // 手動でDOMを更新
});

Vue.jsだと、データを変えるだけで、勝手に表示が更新される：

<template>
    <div>
        <p>{{ count }}</p>
        <button @click="increment">クリック</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            count: 0
        }
    },
    methods: {
        increment() {
            this.count++; // これだけで表示も自動更新される
        }
    }
}
</script>

これ、一見地味に見えるけど、実際の開発では超便利。複雑な画面になればなるほど、その差は歴然。

私が初めてVue.jsを使った時、「なんだこれ、魔法か?」って思った。データを変えるだけで、画面が勝手に更新される。しかも複数箇所に使ってるデータでも、全部同時に更新される。

コンポーネント指向

Vue.jsは「コンポーネント指向」のフレームワーク。

コンポーネントって何かっていうと、UIの「部品」。ボタン、フォーム、カード、モーダル…こういった要素を、再利用可能な部品として作る。

レゴブロックを想像してもらうと分かりやすい。小さなブロック（コンポーネント）を組み合わせて、大きな作品（アプリケーション）を作る。

例えば、商品一覧ページを作るとき：

ProductListPage（ページ全体）
├─ SearchForm（検索フォーム）
│   ├─ TextInput（テキスト入力）
│   └─ Button（検索ボタン）
├─ ProductList（商品リスト）
│   └─ ProductCard（商品カード） × N個
│       ├─ ProductImage（商品画像）
│       ├─ ProductTitle（商品タイトル）
│       └─ AddToCartButton（カートに追加ボタン）
└─ Pagination（ページネーション）

こんな感じで、階層構造で設計する。

各コンポーネントは独立してるから、別のページでも再利用できる。例えば、ProductCardは、商品一覧ページでも、お気に入りページでも、検索結果ページでも使える。

単一ファイルコンポーネント（SFC）

Vue.jsの特徴の一つが、「単一ファイルコンポーネント」。.vueという拡張子のファイルに、HTML、CSS、JavaScriptを全部まとめて書ける。

<template>
    <!-- HTML部分 -->
    <div class="product-card">
        <img :src="product.image" :alt="product.name">
        <h3>{{ product.name }}</h3>
        <p class="price">¥{{ product.price.toLocaleString() }}</p>
        <button @click="addToCart">カートに追加</button>
    </div>
</template>

<script>
// JavaScript部分
export default {
    name: 'ProductCard',
    props: {
        product: {
            type: Object,
            required: true
        }
    },
    methods: {
        addToCart() {
            this.$emit('add-to-cart', this.product);
        }
    }
}
</script>

<style scoped>
/* CSS部分（scopedで、このコンポーネントだけに適用される）*/
.product-card {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 16px;
}

.price {
    font-size: 18px;
    font-weight: bold;
    color: #e63946;
}
</style>

1ファイルで完結してるから、管理しやすい。「このコンポーネントのスタイル変えたい」って時も、そのファイルを開けば全部そこにある。

最初は「HTML、CSS、JavaScript、全部分けた方が綺麗じゃない?」って思ってた。でも実際に使ってみると、1ファイルにまとまってる方が圧倒的に便利。

ホワイトボードの前で、コンポーネント設計の図を描きながら説明する40代男性の線画イラスト

コンポーネント設計の考え方とコツ

ここからが、この記事の核心。

コンポーネント設計って、初心者が一番つまずくところ。私もそうだった。「どこまで分割すればいいの?」「どういう基準で分ければいいの?」って、めちゃくちゃ悩んだ。

で、4年間、試行錯誤して、メンターとしても100人以上を指導してきて、ようやく「これだ!」っていう指針が見えてきた。

コンポーネント分割の基準

コンポーネントをどう分割するか。これに絶対的な正解はない。でも、指針はある。

1. 単一責任の原則

1つのコンポーネントは、1つの責任だけを持つべき。

悪い例：

<!-- ProductPage.vue（全部入り）-->
<template>
    <div>
        <!-- 検索フォーム -->
        <form>...</form>

        <!-- 商品リスト -->
        <div v-for="product in products">...</div>

        <!-- ページネーション -->
        <div>...</div>

        <!-- モーダル -->
        <div v-if="showModal">...</div>
    </div>
</template>

良い例：

<!-- ProductPage.vue（責務が分かれてる）-->
<template>
    <div>
        <SearchForm @search="handleSearch" />
        <ProductList :products="filteredProducts" @show-detail="showDetail" />
        <Pagination :total="total" @page-change="changePage" />
        <ProductDetailModal v-if="selectedProduct" :product="selectedProduct" @close="closeModal" />
    </div>
</template>

SearchFormは「検索」だけ。ProductListは「商品の表示」だけ。Paginationは「ページネーション」だけ。

こうすることで、修正が必要になった時、どこを直せばいいか一目瞭然。

2. 再利用性を意識する

「このコンポーネント、他のページでも使えそうか?」って考える。

例えば、Buttonコンポーネント。

悪い例：

<!-- SubmitButton.vue（用途が限定的）-->
<template>
    <button class="submit-button" @click="handleSubmit">
        送信する
    </button>
</template>

これだと、「送信する」ボタンにしか使えない。

良い例：

<!-- BaseButton.vue（汎用的）-->
<template>
    <button :class="['btn', `btn-${variant}`]" @click="handleClick">
        <slot></slot>
    </button>
</template>

<script>
export default {
    props: {
        variant: {
            type: String,
            default: 'primary',
            validator: value => ['primary', 'secondary', 'danger'].includes(value)
        }
    },
    methods: {
        handleClick(event) {
            this.$emit('click', event);
        }
    }
}
</script>

こうすると、こんな風に使える：

<BaseButton variant="primary" @click="submit">送信する</BaseButton>
<BaseButton variant="secondary" @click="cancel">キャンセル</BaseButton>
<BaseButton variant="danger" @click="delete">削除する</BaseButton>

汎用的なコンポーネントを作っておくと、開発速度が圧倒的に上がる。

3. 大きすぎたら分割する

経験則として、1つのコンポーネントが200行を超えたら、分割を検討する。

templateが長すぎる → 表示部分を分割
scriptが長すぎる → ロジックを別ファイル（composable）に抽出
styleが長すぎる → 共通スタイルをグローバルCSSに移動

私が最初に作った600行のコンポーネント、最終的に7つに分割した。そしたら、めちゃくちゃ読みやすくなったし、バグも見つけやすくなった。

Presentational Component と Container Component

コンポーネントを大きく2種類に分ける考え方がある。Reactから来た概念だけど、Vue.jsでも超有効。

Presentational Component（表示用コンポーネント）

見た目だけを担当
データはpropsで受け取る
自分でデータを取得しない
状態はほぼ持たない（持つとしてもUI状態だけ）

例：

<!-- ProductCard.vue -->
<template>
    <div class="product-card">
        <img :src="product.image" :alt="product.name">
        <h3>{{ product.name }}</h3>
        <p>¥{{ product.price }}</p>
        <button @click="$emit('add-cart', product)">カートに追加</button>
    </div>
</template>

<script>
export default {
    props: {
        product: Object
    }
}
</script>

Container Component（コンテナコンポーネント）

データの取得・管理を担当
APIを叩く
stateを管理する
子コンポーネントにデータを渡す

例：

<!-- ProductListContainer.vue -->
<template>
    <div>
        <ProductCard
            v-for="product in products"
            :key="product.id"
            :product="product"
            @add-cart="addToCart"
        />
    </div>
</template>

<script>
export default {
    data() {
        return {
            products: []
        }
    },
    async created() {
        // APIからデータ取得
        const response = await fetch('/api/products');
        this.products = await response.json();
    },
    methods: {
        addToCart(product) {
            // カートに追加する処理
            this.$store.dispatch('cart/add', product);
        }
    }
}
</script>

この分け方をすると、何がいいか。

Presentational Componentは再利用しやすい
テストがしやすい（propsを渡すだけでテストできる）
責務が明確になる

実際の開発では、Presentational ComponentとContainer Componentの割合は、7:3くらいになることが多い。

自宅のデスクで、コンポーネント設計に悩みながらコードを見つめる20代男性の線画イラスト

Atomic Designとの付き合い方

コンポーネント設計で必ず出てくる話題が「Atomic Design」。

Atomic Designって何かっていうと、コンポーネントを5段階に分類する手法：

Atoms（原子） - ボタン、入力欄、ラベルなど
Molecules（分子） - 検索フォーム（入力欄 + ボタン）など
Organisms（有機体） - ヘッダー、サイドバーなど
Templates（テンプレート） - ページの骨組み
Pages（ページ） - 実際のページ

これ、理論的には美しい。でも、実務で厳格に運用すると、かなりしんどい。

私も最初、Atomic Designを完璧に実装しようとして、挫折した。「これはMoleculeか?Organismか?」って悩んでる時間が無駄すぎた。

今は、もっとシンプルに考えてる：

components/
├── ui/          # 汎用的な基本コンポーネント（Atomsに近い）
│   ├── BaseButton.vue
│   ├── BaseInput.vue
│   └── BaseCard.vue
├── features/    # 機能単位のコンポーネント
│   ├── ProductCard.vue
│   ├── SearchForm.vue
│   └── UserProfile.vue
├── layouts/     # レイアウトコンポーネント
│   ├── Header.vue
│   ├── Footer.vue
│   └── Sidebar.vue
└── pages/       # ページコンポーネント（Container）
    ├── ProductList.vue
    └── ProductDetail.vue

Atomic Designの考え方は参考にするけど、厳格に分類はしない。これくらいがちょうどいい。

データフローは一方向に

Vue.jsでコンポーネント設計をする時、一番大事なのが「データフローを一方向にする」こと。

基本的なルール：

データは親から子へpropsで渡す
子から親への通知はemitで行う
孫以降の深い階層には、Vuex（状態管理）やprovide/injectを使う

悪い例：

<!-- 子コンポーネントで親のデータを直接書き換える（NG）-->
<script>
export default {
    props: {
        count: Number
    },
    methods: {
        increment() {
            this.count++; // これはダメ！propsを直接変更してる
        }
    }
}
</script>

良い例：

<!-- 子コンポーネント -->
<script>
export default {
    props: {
        count: Number
    },
    methods: {
        increment() {
            this.$emit('increment'); // 親に通知するだけ
        }
    }
}
</script>

<!-- 親コンポーネント -->
<template>
    <ChildComponent :count="count" @increment="count++" />
</template>

データフローが一方向だと、何がいいか。

バグが追いやすい（データの流れが明確だから）
予期しない副作用が起きにくい
コードが読みやすい

最初は「わざわざemitするの面倒じゃん」って思ってた。でも、プロジェクトが大きくなるにつれて、この原則の大切さが身に染みた。

実務で失敗しないコンポーネント設計のポイント

ここからは、私が4年間でハマった失敗談と、その解決策を共有する。

propsは明示的に型を指定する

初心者がよくやる失敗：

<script>
export default {
    props: ['user', 'isActive', 'count']
}
</script>

これ、動くことは動く。でも、バグの温床になる。

正しい書き方：

<script>
export default {
    props: {
        user: {
            type: Object,
            required: true
        },
        isActive: {
            type: Boolean,
            default: false
        },
        count: {
            type: Number,
            default: 0,
            validator: value => value >= 0
        }
    }
}
</script>

こうすると：

型が間違ってたら警告が出る
必須項目が渡されてなかったら警告が出る
不正な値が渡されたら警告が出る

デバッグが圧倒的に楽になる。

共通ロジックはcomposableに抽出する

Vue 3から入った「Composition API」を使うと、ロジックを簡単に再利用できる。

例えば、フォームのバリデーションロジック：

// composables/useFormValidation.js
import { ref, computed } from 'vue';

export function useFormValidation(rules) {
    const errors = ref({});
    const touched = ref({});

    const validate = (field, value) => {
        if (rules[field]) {
            const error = rules[field](value);
            errors.value[field] = error;
            return !error;
        }
        return true;
    };

    const isValid = computed(() => {
        return Object.values(errors.value).every(error => !error);
    });

    return {
        errors,
        touched,
        validate,
        isValid
    };
}

こうすると、どのコンポーネントでも使える：

<script setup>
import { useFormValidation } from '@/composables/useFormValidation';

const { errors, validate, isValid } = useFormValidation({
    email: (value) => {
        if (!value) return 'メールアドレスを入力してください';
        if (!/@/.test(value)) return '有効なメールアドレスを入力してください';
        return null;
    },
    password: (value) => {
        if (!value) return 'パスワードを入力してください';
        if (value.length < 8) return 'パスワードは8文字以上で入力してください';
        return null;
    }
});
</script>

同じロジックを複数のコンポーネントで書くのは、完全に時間の無駄。composableに抽出しよう。

コンポーネントに外側のmarginやpositionを持たせない

これ、超重要なんだけど、意外と知られてない。

悪い例：

<style scoped>
.product-card {
    margin: 16px; /* コンポーネント自身がmarginを持ってる */
}
</style>

こうすると、このコンポーネントを別の場所で使う時に、margin: 16pxが邪魔になる。

良い例：

<!-- ProductCard.vue -->
<style scoped>
.product-card {
    /* margin や position は持たない */
    border: 1px solid #ddd;
    padding: 16px;
}
</style>

<!-- 親コンポーネント側でmarginを指定 -->
<template>
    <div class="product-list">
        <ProductCard 
            v-for="product in products"
            :key="product.id"
            :product="product"
        />
    </div>
</template>

<style scoped>
.product-list {
    display: grid;
    gap: 16px; /* ここでmarginを制御 */
}
</style>

コンポーネントは、中身の見た目だけを担当。配置は親に任せる。これが鉄則。

よくあるアンチパターン

1. 深すぎるpropsバケツリレー

<!-- 5階層下のコンポーネントにpropsを渡すために、途中のコンポーネント全部にpropsを書く -->
GrandParent.vue → Parent.vue → Child.vue → GrandChild.vue → GreatGrandChild.vue

これ、めちゃくちゃ面倒。3階層以上になったら、Vuexかprovide/injectを使おう。

<!-- GrandParent.vue -->
<script>
export default {
    provide() {
        return {
            currentUser: this.user
        }
    }
}
</script>

<!-- GreatGrandChild.vue -->
<script>
export default {
    inject: ['currentUser']
}
</script>

2. コンポーネントが肥大化してる

1つのコンポーネントが500行超えてたら、完全に分割のタイミング。

私の経験則：

100行以下：理想的
100～200行：許容範囲
200～300行：分割を検討
300行以上：今すぐ分割

3. computed と methods の使い分けができてない

<script>
export default {
    data() {
        return {
            firstName: 'Taro',
            lastName: 'Yamada'
        }
    },
    methods: {
        // これはダメ！computedで書くべき
        fullName() {
            return this.firstName + ' ' + this.lastName;
        }
    }
}
</script>

値を返すだけならcomputed、処理を実行するならmethods。

正しい書き方：

<script>
export default {
    computed: {
        fullName() {
            return `${this.firstName} ${this.lastName}`;
        }
    }
}
</script>

computedはキャッシュされるから、パフォーマンスも良い。

カフェで、クライアントとノートPCを見せながら副業案件の打ち合わせをする30代女性の線画イラスト

Vue.jsで副業案件を獲得するために

ここまで、Vue.jsの基本とコンポーネント設計について話してきた。最後に、「実際にどうやって稼ぐか」を解説する。

必要なスキルセット

Vue.jsだけできても、正直、案件は取りづらい。

最低限必要なスキル：

HTML/CSS の実務レベル知識
JavaScript（ES6以降）の理解
Vue.js の基本構文
Git/GitHub の基本操作
npm/yarn の使い方

あると有利なスキル：

TypeScript
Nuxt.js（Vue.jsのフレームワーク）
Vuex（状態管理）
バックエンド言語（PHP、Ruby、Node.jsなど）
REST API / GraphQL の理解

特に、バックエンドの知識があると単価が跳ね上がる。

私の場合：

Vue.jsだけ：時給4,000円
Vue.js + PHP：時給6,000円
Vue.js + PHP + インフラ：時給8,000円

フルスタックで対応できると、クライアントからの需要が全然違う。

ポートフォリオの作り方

副業案件を取るために、ポートフォリオは必須。

私が初めて作ったポートフォリオ：

Todoアプリ（基本中の基本）

Vue.js の基本機能を一通り使う
LocalStorageでデータ永続化
ドラッグ&ドロップで並び替え
GitHubで公開
デモサイトをNetlifyで公開

天気予報アプリ（API連携）

OpenWeatherMap APIを使用
位置情報から現在地の天気を表示
5日間の予報を表示
ローディング状態の実装

ECサイトのモックアップ（実務に近い）

商品一覧・詳細ページ
ショッピングカート機能
Vuexで状態管理
Vue Routerでページ遷移

これだけで、初案件を取れた。

ポートフォリオを作る時のコツ：

完璧を目指さない（80%の完成度で公開）
GitHubのREADMEをちゃんと書く
デモサイトを必ず用意する
使った技術スタックを明記する
なぜこの実装をしたか、設計の意図を書く

案件獲得の具体的な方法

1. クラウドソーシング（初心者向け）

最初はクラウドワークスかランサーズがおすすめ。

狙い目の案件：

予算：5～15万円
納期：2週間以上
「初心者歓迎」と書いてある
Vue.jsの部分的な実装

私が最初に取った案件の提案文：

お世話になります。Vue.jsを使った開発案件、拝見いたしました。

【自己紹介】
WebエンジニアとしてjQuery/PHPで3年の実務経験があり、
最近Vue.jsの学習を始めました。

【ポートフォリオ】
以下のアプリケーションを個人開発しています。
- Todoアプリ：https://...
- 天気予報アプリ：https://...
GitHub：https://github.com/...

【提案内容】
貴社の要件を拝見し、以下の対応が可能です。
・既存jQueryコードのVue.js移行
・コンポーネント設計
・レスポンシブ対応

【スケジュール】
要件定義：3日
実装：10日
テスト・修正：4日
合計：2週間以内に納品可能

初回のオンライン打ち合わせは無料です。
ご検討のほど、よろしくお願いいたします。

この提案文で、5件提案して2件採用された。

2. エージェント（経験者向け）

実務経験が1年以上あるなら、エージェントを使うべき。単価が全然違う。

おすすめのエージェント：

レバテックフリーランス（案件数多い、週3日～）
ITプロパートナーズ（リモート案件豊富）
Midworks（フルリモート可能）

エージェントのメリット：

営業不要（案件を紹介してくれる）
単価が高い（月40～80万円）
契約手続きを代行してくれる
継続案件が多い

私がエージェントに登録したのは、Vue.js経験1年経ってから。

面談で聞かれたこと：

Vue.jsの実務経験年数
担当したプロジェクトの規模
使える技術スタック
週何日稼働できるか

登録したら、すぐに月単価50万円（週2日稼働）の案件を紹介された。時給換算で1.5万円。クラウドソーシングの3倍以上。

単価を上げる戦略

最初は相場より安くてもいい。実績を積むことを優先。

私の単価遷移：

開始時（経験半年）：時給4,000円
6ヶ月後（経験1年）：時給6,000円
1年後（経験1.5年）：時給8,000円
現在（経験4年）：時給12,000円

単価を上げるコツ：

1. 専門性を出す

「Vue.jsができます」じゃなくて、
「Vue.js + TypeScript + Nuxt.jsでの大規模SPA開発が得意です」

専門性があると、単価は1.5～2倍になる。

2. 付加価値を提供する

コーディングだけじゃなくて：

設計書も書ける
テストコードも書ける
パフォーマンス最適化もできる
チームメンバーのレビューもできる

これができると、リードエンジニアとして扱われて、単価が跳ね上がる。

3. 継続案件を確保する

単発より継続の方が、収入が安定する。

継続案件につながる行動：

納期より早く納品する
コードの品質を高く保つ
レスポンスを早くする
提案型で仕事をする

私の継続案件：

A社：月額20万円（月次サイト更新）
B社：月額30万円（新機能開発）
C社：月額15万円（保守運用）

合計：月65万円の安定収入

これが副業収入の8割を占めてる。

自宅のデスクで、Vueアプリが正常に動作して満足そうに微笑む40代男性の線画イラスト

よくある質問（FAQ）

Q1: Vue.jsは独学でも習得できますか?

できる。私も独学だった。

おすすめの学習順序：

公式ドキュメントのチュートリアル（1週間）
Udemy等のオンライン講座（2～3週間）
簡単なアプリを3つ作る（1ヶ月）
技術記事を読む（Qiita、Zenn）
実務案件にチャレンジ

合計2～3ヶ月で、初案件が取れるレベルになる。

Q2: ReactとVue.js、どっちを学ぶべき?

案件数はReactの方が多い。でも、Vue.jsの方が学習しやすい。

私の考え：

初心者 → Vue.js
すでにReactやってる → そのまま続ける
両方やりたい → Vue.jsから始めて、慣れたらReact

どちらも「コンポーネント指向」という考え方は同じだから、1つマスターすれば、もう1つも習得しやすい。

Q3: Vue 2とVue 3、どっちを学ぶべき?

今から学ぶなら、絶対Vue 3。

理由：

Vue 2は2024年末でサポート終了
Vue 3の方が高速
Composition APIが使える
TypeScriptとの相性が良い

ただし、実務案件ではまだVue 2も多い。なので、両方の違いを理解しておくといい。

Q4: Nuxt.jsも学んだ方がいい?

Vue.jsの基本を押さえてから、Nuxt.jsに進むのがおすすめ。

Nuxt.jsは、Vue.jsのフレームワーク。SSR（サーバーサイドレンダリング）や、ルーティング、状態管理などが最初から組み込まれてる。

Nuxt.jsができると、案件の幅が広がる。特に、SEOが重要なサイトやメディアサイトの案件で重宝される。

Q5: コンポーネント設計って、最初から完璧にできますか?

無理。誰でも最初は失敗する。

私も最初は、1つのコンポーネントに全部詰め込んだり、逆に分割しすぎて逆に複雑になったり、散々失敗した。

大事なのは：

失敗しても後から直せる
レビューをもらう
リファクタリングを恐れない

最初から完璧を目指さなくていい。まずは動くものを作って、徐々に改善していく。

Q6: 本業が忙しくても副業できますか?

できる。私も本業はフルタイムで働いてる。

私の稼働時間：

平日夜：2時間 × 5日 = 10時間
土日：5時間 × 2日 = 10時間
合計：週20時間

これで月40万円くらい稼いでる。

フルリモートだから、通勤時間ゼロ。これが大きい。

Q7: 実務未経験でも案件取れますか?

取れる。でも、ポートフォリオは必須。

完全未経験でも、ポートフォリオがしっかりしてれば、初心者向け案件は取れる。

私がメンターしてる受講生で、完全未経験からVue.js学習を始めて、4ヶ月で初案件（報酬8万円）を取った人がいる。

ポートフォリオに3つアプリを作って、GitHubとデモサイトを用意したら、クラウドワークスで採用された。

Q8: エラーが出た時、どうやって解決してますか?

私のエラー解決フロー：

エラーメッセージをちゃんと読む（意外と解決策が書いてある）
Vue.jsの公式ドキュメントで検索
Google検索（日本語 + 英語）
Stack Overflow
GitHub Issues
コミュニティで質問（Discord、Slack）

大体、1～3で9割のエラーは解決する。

わからないことは恥ずかしいことじゃない。検索力は、エンジニアにとって超重要なスキル。

まとめ：次に取るべき一歩

ここまで読んでくれてありがとう。

Vue.jsの基本から、コンポーネント設計、副業での稼ぎ方まで、私が4年間で学んだことを全部詰め込んだ。

最後に、重要なポイントをまとめる：

Vue.jsが選ばれる理由

学習コストが低い（1～2ヶ月で基本習得）
案件数が多い（常に200件以上）
単価が高い（時給4,000～8,000円）
リモート案件が豊富（7割がリモート可）
小規模から大規模まで柔軟に対応

コンポーネント設計の核心

単一責任の原則（1コンポーネント = 1責務）
データフローは一方向（親→子はprops、子→親はemit）
Presentational と Container で役割を分ける
200行超えたら分割を検討
外側のmarginやpositionは持たせない

副業で稼ぐために

ポートフォリオは3つ以上作る
クラウドソーシングで実績を積む
1年経ったらエージェントに登録
バックエンドも学んで単価を上げる
継続案件を確保して収入を安定させる

学習ロードマップ

1ヶ月目：公式チュートリアル + 基礎学習
2ヶ月目：簡単なアプリを3つ作る
3ヶ月目：ポートフォリオを整えて案件応募
6ヶ月目：月10万円達成
1年目：月30万円達成

もしあなたが「プログラミングで副業したい」「収入を増やしたい」「手に職をつけたい」って思ってるなら、Vue.jsは最高の選択肢の一つ。

需要は高い、単価は高い、リモートで働ける、将来性がある。こんなに条件が揃ってる技術は、他にない。

最初の一歩を踏み出すのは勇気がいる。私もそうだった。でもその一歩が、1年後の月40万円の副業収入につながってる。

わからないことがあったら、一人で抱え込まないで。コミュニティに参加したり、技術記事を読んだり、メンターを見つけたり。

Vue.jsは、あなたのキャリアを変える力がある。

それじゃ、頑張って！

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

この記事を書いたエンジニア

仲村翔太 DevOpsエンジニア

DevOpsに強い自動化オタク系エンジニア。効率を極めるのが好きで、CI/CDの改善に情熱を持つ。論理的で落ち着いたタイプだが、仲間へのサポートは積極的。家では猫2匹と暮らし、気分転換に読書を楽しむ。堅実な技術力で信頼されている。

この著者の記事一覧へ

Vue.jsの基本とコンポーネント設計のコツ

深夜のコードレビューで気づいた「設計の大切さ」

なぜVue.jsが副業・実務で選ばれるのか

学習コストが他のフレームワークより圧倒的に低い

案件数が多くて単価も高い

小規模から大規模まで柔軟に対応できる

リモート案件が豊富

Vue.jsの基本を押さえる

データバインディングとリアクティブシステム

コンポーネント指向

単一ファイルコンポーネント（SFC）

コンポーネント設計の考え方とコツ

コンポーネント分割の基準

Presentational Component と Container Component

Atomic Designとの付き合い方

データフローは一方向に

実務で失敗しないコンポーネント設計のポイント

propsは明示的に型を指定する

共通ロジックはcomposableに抽出する

コンポーネントに外側のmarginやpositionを持たせない

よくあるアンチパターン

Vue.jsで副業案件を獲得するために

必要なスキルセット

ポートフォリオの作り方

案件獲得の具体的な方法

単価を上げる戦略

よくある質問（FAQ）

まとめ：次に取るべき一歩

この記事を書いたエンジニア

関連記事

副業プログラミングのライター紹介