カテゴリー
サインイン 新規登録
学習時間 10時間
難易度 中級
質問投稿
価格 ¥1,980
月額 ¥2,980
Unlimited会員はこちらの教材を含む100種類以上のUnlimited対象教材が学び放題

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

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

3.3
最終更新 2020/9
kozzy

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アプリケーション開発
  • 自由なテキストによる検索機能の実装方法

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

sample

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

✔︎ 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

この教材を執筆した想い

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

カリキュラム

Section 0 はじめに
Section 1 Rails によるプロジェクトの作成
Section 2 Vue.js で Snippet アプリを開発するために必要なことを学ぼう

講師のプロフィール

教材のレビュー

3.3
7件の評価
14%
28%
28%
28%
0%
青木大介 1年以上前
経験4年のエンジニアです。 ほぼ実装〜テストしか経験がないため、要件定義〜設計の知識をつけたいと思って購入しました。 成果物を作っていく教材ではないと言うこともありますが、1時間半ほどで終えることができました。 良いところと気になったところを挙げます。 良いところ ・教材の概要がユーザー目線に立っていて非常に分かりやすい ・一つ一つの文章が短く理解しやすい ・感情移入しやすい小説仕立てのス もっと見る
shota1234 1年以上前
良かった点 ・axiosを使用した非同期通信の実装方法が学べた ・下記外部ライブラリの存在を知れた&使い方が学べた  - Vuetify  - Google Font  - showdown.js 悪かった点 ・publicフォルダ配下にファイルを作成している(実際の開発ではファイル・フォルダをもっと切り分けていると思われる) ・後半に進むにつれてコードの行が実際の行数と対応していないので、場所 もっと見る
庄田雄貴 1年以上前
教材ではscaffold使ってたことことが残念でした。