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開始
スクールの自主制作の課題開始に合わせて、
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の基本ももう一回固めないとな。
やること多いけど楽しい。
* debugによく使えそうなJavaScriptのコード
console.log('hoge'); console.dir('hoge'); console.dirxml('hoge'); console.trace('hoge'); console.table('hoge');
.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アプリを日本時間化する
「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分") → 2018年11月27日 04時54分
学習のモジュール化
今日は日曜なので家で学習〜〜
- まずは、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 カリキュラムに戻って復習。
明日は、
- テストコードのとこと、
- ブログアプリのネストしたモデルのデータを送るform_for
はとりあえず、質問するなりして解決して、
非同期通信カリキュラム集中して追いあげないと。