RailsにVue.js導入のテストをしてみる

Railsアプリに、
JSの比較的新しいフレームワークであるVue.jsを組み込んでみよう
ということを計画していてその準備中。

そのための新しいRaisプロジェクトを立ち上げる前に、
今日はすでに自分で作っていたRailsのブログアプリに、
部分的に導入してみて挙動を確認してみた。

まずは、JS周りのファイルを管理してくれるgem 'webpacker'を入れて、$bundle install

gem 'webpacker', github: 'rails/webpacker'

webpacker、そしてVue.jsのファイルをインストール

$ rails webpacker:install

$ rails webpacker:install:vue

自動でたくさんファイルができるので、
それらを編集していく。

JSファイルのコンパイルはこのコマンド。

$ bin/webpack-dev-server

コンパイラとVueのバージョン不一致でエラーが出たら、Vueのバージョンを上げてあげる。

yarn upgrade vue

せっかくなのでVue.jsで簡単なTODOリストを。

このTODOリストのコンポーネント自体は、
ドットインストールのVue.jsのレッスンのもの。

Image from Gyazo



ただ、
チェックボックスCSSがうまく当たらない関係で見えない。
このアプリ、実験的にいろんなライブラリとかCSSフレームワークとか
いろいろ入れ込んでるからかな。
あと、ローカルストレージもサイレントになっててデータが保存されないけど。
その辺はこれからの課題ということで。まあ、とにかくRailsに組み込む流れは確認できた。

Vue.js開始

スクールの自主制作の課題開始に合わせて、

Vue.jsの勉強始めた。

カリキュラム外のことや応用的なことで、
自分のやりたいことをということだったので、
ずっとやりたかったJavaScriptフレームワークの勉強をこの機会に。

フロントサイドのフレームワークはトレンドの移り変わりが激しくて、、
まあとりあえず現在の3強「Angular」「React」「Vue.js」に絞って。


Angular」は、

  • 最近人気に陰りが出てきたのかな?って感じの声を聞くことが多かった
  • フルスタックで大規模開発に向いているから自分の目的とちょっと違う
  • 新言語TypeSciptの習得も含め学習コストも高め 、、、ということでまず却下。

React」は、

  • Angularに比べて学習コストが低く、スモールスタートがしやすく
  • 人気も安定してる雰囲気でライブラリも多いが
  • 個人的にJSとHTMLのテンプレートのファイルの分割配置に違和感があった 、、、すぐ慣れるかな?

Vue.js」は、

  • 小規模開発には一番向いていて、こちらもスモールスタートしやすく
  • コンポーネント記述は基本的にJSとHTMLが独立しているらしく分かりやすそう
  • 実際に学習コスト低いと言われている(日本語ガイドあり)

ということで「Vue.js」をとりあえず始めることに。
決め手は、ドットインストールで「React」と「Vue.js」実際に書いてみて、

「Vue.js」が親しみやすそうかなと思ったから。

(「Angular」は書いてないけど、、)
特に「React」に比べて、JSのロジック/HTMLのテンプレート/CSSのスタイルが、
コンポーネントごとに分離して管理されてる感が。これの方がいいかなと。


初めてのJSフレームワークだし、
スピード重視で成長したい
早くJSに慣れたいっていうのがあるから
分かりやすそうなのから始めるのがいいかなと。
公式に日本語版のガイドがあるのも、
情報検索に無駄に時間取られることが減りそうだと思われる。

1日でドットインストール2つのコースをバーっとやって、
終わっ他時にはもう「Vue.jsだな」って気持ちだったので、
その場ですぐAmazonで書籍1冊注文。
こんな決断力自分の中じゃ異例。

JavaScriptの基本ももう一回固めないとな。
やること多いけど楽しい。

.methods メソッド

オブジェクトに対して使えるメソッドを一覧表示してくれる
「methods」メソッド

例えば、配列 (array) を作ってみる!

puts "数字を入力してください"
input = gets.to_i
array = -5..input

配列の範囲指定に使える「..」の書き方か思い出しつつ

これを、

p array.methods.sort

順番を昇順にする「sort」メソッドとかも思い出しつつ、
(「methods」メソッドでもちろん出る)

pで出力すると、
MacBook-Pro:desktop me$ ruby t.rb
数字を入力してください
5
------------------出力結果----------------------------
[:!, :!=, :!~, :<=>, :==, :===, :=~, :__id__, :__send__, :all?, :any?, :begin, :bsearch, :chunk, :chunk_while, :class, :clone, :collect, :collect_concat, :count, :cover?, :cycle, :define_singleton_method, :detect, :display, :drop, :drop_while, :dup, :each, :each_cons, :each_entry, :each_slice, :each_with_index, :each_with_object, :end, :entries, :enum_for, :eql?, :equal?, :exclude_end?, :extend, :find, :find_all, :find_index, :first, :flat_map, :freeze, :frozen?, :grep, :grep_v, :group_by, :hash, :include?, :inject, :inspect, :instance_eval, :instance_exec, :instance_of?, :instance_variable_defined?, :instance_variable_get, :instance_variable_set, :instance_variables, :is_a?, :itself, :kind_of?, :last, :lazy, :map, :max, :max_by, :member?, :method, :methods, :min, :min_by, :minmax, :minmax_by, :nil?, :none?, :object_id, :one?, :partition, :private_methods, :protected_methods, :public_method, :public_methods, :public_send, :reduce, :reject, :remove_instance_variable, :respond_to?, :reverse_each, :select, :send, :singleton_class, :singleton_method, :singleton_methods, :size, :slice_after, :slice_before, :slice_when, :sort, :sort_by, :step, :taint, :tainted?, :take, :take_while, :tap, :to_a, :to_enum, :to_h, :to_s, :trust, :untaint, :untrust, :untrusted?, :zip]

p出力でなくて

puts array.methods.sort.reverse

↑のようにputs出力であれば、

MacBook-Pro:desktop me$ ruby t.rb
数字を入力してください
3
-----------------出力結果----------------------
zip
untrusted?
untrust
untaint
trust
to_s
to_h

〜(中略)〜

bsearch
begin
any?
all?
__send__
__id__
=~
===
==
<=>
!~
!=
!

「reverse」メソッドで降順にしつつ、
このように出力される!

これからわかることは、

putsは、

引数のオブジェクトを改行を加えて出力。
返り値は「nil

pは、

引数のオブジェクトをわかりやすく標準出力。
メソッドが配列に入ってるとこれで知れたり。デバッグとか。
返り値も返す。

とにかくまずは「methods」メソッドをぶつけて、

使えそうなやつを見つける。

すぐそのメソッドをそのまま検索にかけ

リファレンスなどで正しい使い方を確認。

実際に使って出力を見てみる。

どんなメソッドが使えそうかな?という感覚と

すぐリファレンスで使い方を探すスピード。

「methods」メソッド早く知っときたかった。

「rake notes」コマンド

Rails内のアノテーション(OPTIMIZE , FIXME , TODO 等)を
抽出する際の、「rake notes」コマンド。
デフォルト対応しているファイル以外にもスコープを広げるには?

Rakefile」に以下のように追記。

hamlであれば、

SourceAnnotationExtractor::Annotation.register_extensions("haml") {
 |tag| /\/\/\s*(#{tag}):?\s*(.*)$/ }


jbuilderであれば、

SourceAnnotationExtractor::Annotation.register_extensions("jbuilder") {
 |tag| /\#\s*(#{tag}):?\s*(.*)$/ }


拡張子」名と、抽出のための「正規表現」の部分は必要に応じて編集。

Railsアプリを日本時間化する

「config/application.rb」に

「time_zone(L10)」「active_recordのtime_zone(L11)」にまつわる下2行を追記。
 これにより、アプリの中の時間とDBの時間がどちらも日本時間になる。

module ChatSpace
  class Application < Rails::Application
    config.generators do |g|
      g.stylesheets false
      g.javascripts false
      g.helper false
      g.test_framework false
    end
    config.i18n.default_locale = :ja
    config.time_zone
    config.active_record.default_timezone = :local
  end
end

ちなみに、(L9)はエラーメッセージの日本語化の指定の奴。


ビューの表示箇所では、以下のようにstrftimeメソッドで見た目を調整できる。

updated_at.strftime("%Y-%m-%d %H:%M")
→ 2018-11-27 04:54
updated_at.strftime("%Y年%m月%d日 %H時%M分")
→ 201811270454

学習のモジュール化

今日は日曜なので家で学習〜〜

  • まずは、Railsのテストコードのカリキュラムの続き

 テストコード書くの時間かかるけど、
 モデル・コントローラーの役割とか確認になるし
 ほとんど英文として読めるコードなので、勉強になるし嫌いじゃない。
 しかし、カリキュラム通りに作業しても、
 テストコードでファイルに無いデータを呼び出そうとする一節がありエラー😤
 (エラーコードに、それはできないよと書いてある
 カリキュラムのままのコードじゃ無理じゃね?ってことで、
 明日、スクールで聞こうということで保留にして次の学習に。

  • 次は、jQueryとか非同期通信とかの導入(やっときたか)

 ここでまた、カリキュラム通りに進めていくも
 gemの導入の場面でエラー発生😌
 エラー文見てると、

An error occurred while installing mysql2 (0.4.4), and Bundler cannot continue.
Make sure that `gem install mysql2 -v '0.4.4'` succeeds before bundling.

どうやらここなので、Google全文検索して解決法に出会う。
コマンドラインでこれを打つと、

$ bundle config --local build.mysql2 "--with-ldflags=-L/usr/local/opt/openssl/lib --with-cppflags=-I/usr/local/opt/openssl/include"

いけた!!


 学習再開。練習アプリ、Pictweetのコメント非同期化をやって。

  • その後は、もう一回基礎のJavaScript / jQuery カリキュラムに戻って復習。

明日は、

  1. テストコードのとこと、
  2. ブログアプリのネストしたモデルのデータを送るform_for

はとりあえず、質問するなりして解決して、
非同期通信カリキュラム集中して追いあげないと。