Roqmwndzqdeww0waspbw

【Rails / Vue.js】Snippet アプリを作ってみよう!

【中級レベル/10時間】Ruby on Rails と Vue.js を使って自分で使えるコード保存アプリケーションを開発。Vue.js の基本的な書き方からAxiosを利用したRails APIの呼び出し、Vue.js/Vuetify を用いてモダンなUIを実現する方法までを丁寧に解説。

Railsの基礎文法の学習を終えた方の次のステップとしての「Snippetアプリ開発」

本教材は、主にRailsの基本的な文法の学習を終えた方が、次のステップとして自分用Snippetアプリを開発しながらRailsとVue.jsの学習を行えるような内容となっています。

「Snippet」とは直訳すると「断片」といった意味になるのですが、エンジニアの世界では「特定の動作をするコードの固まり」のことを指します。この Snippet を管理するアプリを実装することで、言わば、自分用のコード逆引き辞書のようなアプリを作ることができます。

今後、開発をしていく上で「あのコードの書き方なんだっけな・・・」といった場面ですかさず使うことができる Snippet アプリを作ることで、コーディング速度を向上させることもできるかと考えます。このようなモチベーションでもって、この Snippet アプリの実装を進めていきましょう!

本教材では、Rails Scaffoldを利用しており、Railsについての解説を最低限にしておりますが、RailsとVue.jsを組み合わせた開発の入門としてはぴったりの教材かと思います。




学習内容

  • Rails Scaffold を利用して爆速で CRUD 機能を実装する方法
  • Vue.js の基本的な書き方
  • Axios を利用した Rails で作成した API の呼び出し
  • Vue.js のUIライブラリ Vuetify を利用したWebアプリケーション開発
  • 自由なテキストによる検索機能の実装方法


実際に作成するサービスのイメージ



本教材を通して身につくスキル

✔︎ Vue.js に対する基礎知識
✔︎ Vue.js におけるAPI通信の基礎知識(Axios)
✔︎ Vuetify を用いた モダンなUI の実現方法


本教材の対象者

  • Rails チュートリアルなどで Rails の基本的な文法の学習を終えた方
  • 自分で使えるようなWebアプリケーションを作ってみたい方
  • Vue.js について触れてみたい方


受講するための必要なスキル

  • HTML/CSSの基礎知識がある方(必須)
  • Ruby の基礎知識がある方(推奨)
  • Ruby on rails の基礎知識がある方(推奨)


学ばないこと

Rails の Scaffold 機能を使って開発していくため、Rails の仕組みについては触れません。


本教材で質問対応可能なOSや環境

  • Mac OS


本教材の対応バージョン

下記のバージョンにおいて動作を確認しております

  • MacOS 10.14.5
  • Ruby 2.5.1
  • Ruby on Rails 5.2.3
  • SQLite 3.28.0
  • Vue.js 2.6.10
  • Vuetify 1.5


この教材を執筆した想い

手軽にモダンなUIを実現できる Vuetify を利用して、最小コストで自分が使えるWebアプリケーションが作れることを実感していただければと思っております!

自分が普段使いできるようなアプリケーションを作って、自分で使ってみることで自分なりのオリジナリティを加えながら改善していく楽しみも味わっていただければ幸いです!


この教材の執筆者


kozzy
kozzy

都内 Web系 ECサービス フロントエンド、サーバーサイドエンジニアです。Python, Ruby, PHP, JavaScript 色々な言語に浅く広く触れています。学生時は、小学生〜大学生にプログラミング教育活動を行なっていた経験があります。イベント等の企画・運営などもよくやっています。 Twitter アカウント:@kozzy0919


本教材のカリキュラム


  1章:Rails によるプロジェクトの作成
利用可能
日 購入してから

今すぐはじめる!