#46 Vue.js + Railsアプリ開発 アウトプット

こんにちは、hiroです。
現在転職活動中です。随時気になる企業には応募をしているものの、なかなか書類通過をして面談にこぎつける事が出来ない状況です。やはり30代で未経験からエンジニア転職をするのは簡単では無いですね！😂
今感じている事としては、以下になります。
・過去の実績有無で企業の反応が全然違う
　→間違えて職務経歴書に "チーム開発1年" を追記した瞬間、企業からの気になるが2件きました。。。笑
・ポートフォリオを完成しないと見向きもされない。

色々試行錯誤しながら応募しています。目の前の選考見送り結果で一喜一憂せず、反省と改善をしていきながらご縁のある企業さんを探していきます😃

本日もアウトプットしていきます！

＜開発内容＞
　Vue.jsとRailsを使ったメモアプリの開発
＜目　的＞
　学習したVue.jsが、Railsと組み合わせた時にどう実装するのかを確認
＜機能一覧＞
　メモ一覧機能
　・APIの実装
　　-モデルの作成
　　-ダミーデータの作成
　　-ルーティングの設定
　　-コントローラーの作成
    ・Vue.jsの実装
　　-axiosを使ってAPIを呼び出す
　メモ投稿機能
　・APIの実装
　　-ルーティングの設定
　　-コントローラーの作成
　・Vue.jsの実装
　　-投稿フォームを追加
　　-axiosを使ってAPIを呼び出す

上記内容で不明点や理解が足りない部分を抜粋して記載しました。

Webpacker

・複数のJavaScriptファイルなどを1つにまとめて出力するツール。webpackを簡単にRailsアプリケーションに統合出来るgem。
・Rails5.1から標準でサポートされているため、gem記述不要。

■ターミナル
rails webpacker:install

・webpackerをインストール

■ターミナル
rails webpacker:install:vue

・ "app/javascript/packs/hello_vue.js" "app/javascript/app.vue"が作成される。
・vueファイルだけでなくjsファイルがある理由としては、vue単体では動作せず、jsを介してvueを呼び出す仕組みのため。

webpack

・モジュールバンドラツール。モダンなJavaScript開発で必須となる仕組み。

■routes.rbファイル
Rails.application.routes.draw do 
  get 'home', to: 'home#index' 

  namespace :api, format: 'json' do   
    resources :memos, only: [:index] 
  end
end

・namespaceを使うケース　
  - URLは指定のパスにしたい　
  - ファイル構成も指定のパスにしたい
・今回 "namespace :api" と記載しているため、コントローラーを作成する際はapiディレクトリを作成する。
・format: 'json' というコードでJSON形式に指定しています。

■rails routesコマンド入力後、ターミナルに表示される内容
＜Prefix＞ 
　api_memos
＜Verb＞ 
　GET
＜URI Pattern＞   
　/api/memos(.:format)
＜Controller#Action＞ 
　api/memos#index {:format=>/json/}

・パスやコントローラーに "api" がついていることが分かる。

jbuilder

■ファイル名（app/views/api/memos/index.json.jbuilder）

・APIとしてデータを返したいとき、json形式のデータを返すことが多い。
・Railsには、このjson作成を簡単にしてくれる、jbuilderというものが備わっている。

■index.json.jbuilderファイルに記述
json.array! インスタンス変数, :キー
※今回の実装の場合：json.array! @memos, :title, :description

・メモの情報は複数で配列のデータになるため、配列を回してデータを返したい場合は "array!メソッド" を利用する。

本日も最後まで読んで頂き、ありがとうございました！🙇‍♂️

※本日時点で学習した内容を備忘目的で投稿しております。各項目を全て網羅している内容では無いため、「駆け出しが張り切ってアウトプットしてるな〜」程度で温かい目で読んで頂けると幸いです😇

■参考教材Udemy　
Rails × Vue.js でメモアプリを作成しながらモダンな開発を学ぼう！