LoginSignup
9
13

More than 1 year has passed since last update.

@lyonsan

初学者がVue.jsをRailsアプリに組み込めるようになるまでの学習ロードマップ

Last updated at Posted at 2021-04-18

この記事で得られること

はじめに、この記事の目的について。
この記事は一通りRailsアプリケーションを作り終えて、次のステップとして「自分のアプリをモダンなUI/UXを実現したい！」「今っぽいイケてる技術を使ってみたい！」といった動機から、Vue.jsをRailsアプリケーションに組み込みたいと考えている人向けに、学習ロードマップを提供できたら、という狙いです。
(2021/8追記)
※記事投稿後程なくしてこのポートフォリオを使用して自社開発企業から内定をいただくことができましたが、正直技術というよりも熱意を評価された結果かなと思います。
初学者の中で技術的に抜きん出ようとお考えであれば、末尾に記載している通りこの記事でできるようになること以上に、バックエンドとの連携を意識された方が良いのでは？と思います。

以下学習で作成した成果物

私はこれから説明する学習を通して、初学者なりのポートフォリオを作成しました。
ベースはRuby on Rails、ランディングページにVue.jsを使ったアプリです。
EC2インスタンスを削除したため、代わりにGithubのソースコードでご勘弁ください。
https://github.com/lyonsan/study-repo-app

こんなレベルでも、Vue.jsを使えるようになりたい！と考えている方には助けになる記事なのではないかと思います。

この記事の対象者

  • プログラミング初学者
  • Ruby on Railsは一通り学習し、アプリケーションを作りきった。
  • JavaScriptは多少触ったことあるかな程度
  • とにかくVue.jsを入れたい
  • お金はケチりたい

学習ロードアップ

1. まずは公式！

やはり最初は公式。
日本語で書かれているのでとてもわかりやすいですし、全ての基礎知識となりますので、やっときましょう。
（自分のアプリ内で応用する時に基礎知識があることが前提となるからです。）

個人的には、「コンポーネントの詳細」の章まで一通りやってみるのかいいかと思います。そのあとは必要に応じてやっていくのが効率が良いかと。

Vue公式

2. ここからはQiita記事

まずはVue.jsのアプリ立ち上げ

つくづくQiitaの情報量には感服いたします。
まずはサクッとVue.jsアプリ立ち上げ。

2-1 立ち上げ~vue-router

こちらの記事を参考にしていただくと簡単にアプリ立ち上げができます。
またこの記事内ではSPA作成の基本となるvue-routerについて学べます！

2-2　モダンなツールを学ぶ

こちらではより見た目をかっこよくできるライブラリなどを学ぶことができます。
vue-typerとかsmooth-scrollとか今っぽくてかっこいいですよね〜

2-3　RailsにVueをいれる方法を学ぶ

こちらにはRailsをバックエンドに、Vueをフロントエンドに使ったアプリを作る方法が記載されています。
すでにRailsアプリがあって、追加でVueを入れたい!という場合には「Vue.jsでHello Vue!を表示する」という章から読んでいくのがいいかなと思います。

ここまでで私が作ったレベルのアプリならもうできてしまいますよ！
ちなみに私はここまでの学習の副産物としてポートフォリオサイトを作りました。ここでは見やすさの観点からvue-routerは使っていないですが、挙動はそれなりに今っぽい仕上がりになっているのではないかと思います。

3.Railsデータとの連携(筆者積み残し)

本当はRailsのデータと連携して、一つの機能をSPA化できたら尚良しと思っていました。
結論、devise特有のヘルパーなどのVueでの使い方など難しい点が多々あり、今後の積み残しにしていますが、
一度トライはしてみたので、その際に学習した内容をお伝えします。

3-1 いいね機能を作る

こちらではRailsをバックエンド、Vueをフロントに使っていいね機能を実装しています。
ここでデータの渡し方などを学ぶことができます。

メモアプリを作る（有料）

ここまで公式やQiitaの記事でやってきましたが、だんだん高度になってきたこともあり、情報が複雑化してきました。
そのため私はTechpitの記事を参考に、RailsとVueを使ったメモアプリ作成ハンズオン講座を買いました。
教材はこちら
こう言ったベーシックな組み合わせ技術から初めて、高度なSPAを作り込んでいくのが良いのかなと思います。

4.まとめ

正直、あまり高度なことをやれるようになるわけではありません。
しかしVueを使えるようになること、Railsに組み込むことはこの記事の学習ロードマップに沿ってやっていくことで実現できると思います。

ご意見などありましたらコメントいただけると幸いです！

5.出典

9
13
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
9
13