Zenn
ソーシャルデータバンク テックブログ
🎓

Vue.js初心者がプロジェクトに入ったらこうなった！学習のリアルを公開

mocchantai🍍
2025/03/07に公開
Laravel
Vue.js
学習方法
初学者
idea

こんにちは、mocchantaiです🤗

私が所属する組織には複数のプロダクトがあり、その多くは Laravelのみ または Laravel + Vue.js で開発されています。初めての配属先がLaravel中心のプロジェクトだったメンバーは、バックエンドの実装には慣れているものの、「Vue.jsは未経験で、これから試してみたい！」という人が多くいます。

そんな中、Vue.jsの経験ゼロの状態からLaravel + Vue.jsのプロジェクトにアサインされたMくん（仮名）が、どのように学習し、実務を通じてどのように成長していったのかをインタビューしました。
このインタビューは2025年2月28日に行われたものです。

これからVue.jsを触ってみたいと考えている方や、どのように学習を進めたらいいか悩んでいる方にとって、具体的な学習の流れやつまずきポイントがリアルに伝わる記事 になればと思います！

Mくんのプロフィール

  • 学部: 理工学部応用情報工学科
  • 技術経験: Laravelを少し触ったことがあるが、Vue.jsは完全に未経験
  • プログラミングを始めたきっかけ: 情報系の学科に入ったから
  • 趣味: 服、ロック系の音楽
  • インターンに入った時の知識: LaravelのMVCモデルを説明できる程度、環境構築、Gitの基本操作ができる
  • Vue.jsを触り始めた時期: プロジェクトアサイン後（2025年1月）

学習前の状態

— プログラミングを始めたのはいつ？

Mくん：「大学の授業で2024年の4月からC言語を習い始めました。」

— それまではパソコンをどれくらい使ってた？

Mくん：「Google検索とCtrl+Cくらいしかやったことなかったですね。」

— Web開発を始めたのは？

Mくん：「C言語だけだと何も作れないなと思って、7月くらいから独学でHTMLとCSSをやりました。」

— Laravelを学び始めたのは？

Mくん：「インターンに入るために10月から勉強しました。」

— インターンに入ったのは？

Mくん：「12月の後半です。」

— その時点でのLaravelの理解度は？

Mくん：「MVCの概念は説明できるくらい。環境構築も一通りできるし、基本的なコマンドも分かる。GitHubも触ったことはありました。でも実務レベルで書けるかというと…まだまだって感じでしたね。」

— Vue.jsは触ったことあった？

Mくん：「全くのゼロでした。」

— プロジェクトにアサインされる前にVueの勉強は？

Mくん：「やってなかったです。アサインされたタイミングで、Vueの勉強をするように言われました。」

— まず何から学び始めた？

Mくん：「とりあえずYouTubeの解説動画を見てみました。コードを書きながらやったほうが覚えやすいと思ったので、画面を半分にしてエディタを開きながら進めました。」

学習方法と最初の壁

— どのくらいの期間勉強した？

Mくん：「3〜5日くらいですね。1日2,3時間ずつやってました。」

— どんな動画を見た？

Mくん：「超Vue.js完全ガイド 2024 っていう動画です。Vue.jsとは何か、環境構築、PropsやEmitの基本などを学びました。」

— その後はどうした？

Mくん：「メンターに渡された練習タスクを、自分なりに考えてから分からないところをChatGPTに投げてみました。」

— 練習問題を実際に見せてください！

Mくん：「最初に渡されたのは、親子コンポーネント間のデータ受け渡しを学ぶためのシンプルなタスクでした。」

練習問題: カウンターアプリを作る

  1. ボタンを押すと数字が1ずつ増えるアプリを作成する
  2. カウントを表示するコンポーネントを作成する
  3. ボタンのコンポーネントを作成する
  4. カウントの値は親コンポーネントで管理し、Propsで渡す
  5. ボタンのクリックイベントはEmitを使って親コンポーネントに通知する

カウンターアプリのデモ動画

↓実際にMくんが書いたコード

<!-- App.vue -->
<template>
  <NumberDisplay :number="count" />
  <IncrementNumber @increment="increaseCount" />
</template>

<script>
import NumberDisplay from './components/NumberDisplay.vue'
import IncrementNumber from './components/IncrementNumber.vue'

export default {
  components: {
    NumberDisplay,
    IncrementNumber,
  },
  data() {
    return {
      count: 0,
    }
  },
  methods: {
    increaseCount() {
      this.count++
    },
  },
}
</script>

<!-- NumberDisplay.vue -->
<template>
  <div>
    <p>Count: {{ number }}</p>
  </div>
</template>

<script>
export default {
  props: {
    number: {
      type: Number,
      required: true,
    },
  },
}
</script>

<!-- IncrementNumder.vue -->
<template>
  <button @click="emitIncrement">Increment</button>
</template>

<script>
export default {
  methods: {
    emitIncrement() {
      this.$emit('increment')
    },
  },
}
</script>

Mくん：「この課題をやったことで、PropsとEmitの基本的な流れ を理解できました。」

— つまずいた部分は？

Mくん：「PropsとEmitの使い方ですね。YouTubeでは説明されていたけど、実際に書こうとするとどう使えばいいか分からなかったです。あと v-bind と v-on の違いも分からなかったです。」

— どうやって解決した？

Mくん：「ChatGPTに聞いたり、メンターに相談したりして理解しました。メンターに v-bind は変数を渡す、v-on はイベントを渡すっていう説明を受けて、やっと分かりました。」

実務での学び

— 最初に渡されたタスクは？

Mくん：「ワクマネのVueコンポーネントの修正タスクです。事前学習では2つのコンポーネントのデータ受け渡しだけ練習していたので、複数コンポーネント間でのデータの流れが難しかったです。」

— どこで特につまずいた？

Mくん：「data() の初期値の扱いと created() の役割が分からなかったですね。あと try-catch も初めて見たので、エラー処理の概念自体が新鮮でした。」

— どうやって学んだ？

Mくん：「ChatGPTに聞きながらやりました。ブログ記事（ZennやQiita）も何回も読んで、少しずつ理解していきました。」

— 公式ドキュメントは使った？

Mくん：「周りの先輩からは見たらわかるよ！ってよく言われたけど、見方が分からなくて、あまり使わなかったですね。あと、知らない単語で説明されてさらにわからなくなるので難しかったです。ChatGPTのほうがその場で聞けるので使いやすかったです。」

学習後の現在

— 今はVue.jsをどのくらい使えるようになった？

Mくん：「0→1で作れって言われたら無理だけど、簡単な機能だったら調べながら作れるレベルです。」

— Vue.jsを学びたい人に何かアドバイスはある？

Mくん：「とにかくアウトプットを増やすことですね。YouTubeで概要を掴んだら、すぐに小さなアプリを作ってみる。その後、プロジェクトのコードを読んで、少しずつ理解を深めていくのが一番効率的だと思います。」

Vue.js学習のステップ

Mくんの経験をもとに、Vue.js未経験者がスムーズに学ぶためのステップをまとめてみました！

ステップ1: Vue.jsの概要を知る

ステップ2: 小さなアプリを作る

  • YouTubeで学んだことを実践するために シンプルなアプリを作る
  • 例: 「ボタンを押すと数字が1ずつ増えるアプリ」
  • コンポーネントの分割を学ぶ（ボタンと表示を別のコンポーネントに分ける）
  • PropsとEmitのデータ受け渡しを試す

ステップ3: 実際のプロジェクトに入る

  • 既存のコードを読んで、どのように書かれているのか把握する
  • まずは 小さな修正タスク をこなしながら、コードベースに慣れる
  • メンターや先輩のアドバイスを受けながら、適切な書き方を学ぶ

ステップ4: エラー対応とデバッグの習慣をつける

  • console.log を活用して、データの流れを追う
  • エラーが出たらブラウザの検証ツールのNetworkタブでリクエストを確認

ステップ5: Laravelとの連携を学ぶ

  • フロントエンド側だけでなく、 LaravelのAPIとVue.jsを組み合わせる
  • 既存のAPIを使ってデータを取得し、Vueのコンポーネントで表示する
  • axios を使ってAPIリクエストを試す

読んでくれてありがとうございました🙌
少しでもVue.jsを始めるハードルが下がったと感じてもらえたら嬉しいです！
Mくんも協力してくれてありがとうございました！

ソーシャルデータバンク テックブログ
ソーシャルデータバンク テックブログ

ソーシャルデータバンク株式会社の開発チームです。インフラ、品質、UI/UX、DevOpsなど様々な活動に取り組んでいます。

Discussion