最先端技術即席実装(SSJ)

最先端技術即席実装(SSJ)

いかに時間をかけないで、最新技術を使いこなすかを目標にした活動記録

Ruby on Rails 最速習得 | 何ができれば"できる"と主張できるのか

背景・目的

ベンチャー界隈で生活していると、「エンジニアが足りない」の次によく聞く「Railsできる人が欲しい」。

はたして何ができればRailsができると言えるのだろう。
実は下記が2つさえできれば、jsライブラリやcssを駆使して "かっこよいWebアプリをRailsで作った" という実績を残すことができるのでは…?と考えた。

  1. DB読み書き
  2. UIを思い通りに変更

事前準備

OSXRuby入っている前提でお話します。version無視してとにかく導入。

$ gem install rails --no-ri --no-rdoc # railsインストール
$ rails new appname #appnameというアプリを作成
$ cd appname #ディレクトリ移動
$ bin/rails s #起動

localhost:3000にアクセス。はい起動。Yay!
f:id:tetsuyaimagawa:20170429144456p:plain

scaffold(DB読み書き部分勝手に作ってくれるやつ)を作成する

$ bin/rails generate scaffold ScaffoldTest name:string point:integer #作成
$ bin/rails db:migrate RAILS_ENV=development #DB使うのに必要なコマンド
$ bin/rails s #起動

localhost:3000/scaffold_tests にアクセス。はい起動。

f:id:tetsuyaimagawa:20170429150349p:plain

New Scaffoldを押すと

f:id:tetsuyaimagawa:20170429150538p:plain

新しいデータ追加ができて

f:id:tetsuyaimagawa:20170429150537p:plain

最初の画面に反映されます。

f:id:tetsuyaimagawa:20170429150527p:plain

サンプルを魔改造してUIのいろはを学ぶ

UI(見た目)を思い通りにするにはサンプルを参考にするのが一番です。
例えば下記のページから参考書のサンプルが手に入ります。
github.com
※私は以前にこの本を読んだことがありますので…&ちょっと古いですがサンプルを利用する際はぜひ本もお買い求め下さい…

起動すると下記のような画面が表示されます。サイドバーや背景色の設定方法等は、もうソースを覗けば分かりそうですね。
f:id:tetsuyaimagawa:20170429151844p:plain

例えばヘッダーはどこで設定しているのか、というのを見たいときは

$ find . -type f -print | xargs grep "ニュース"

と入れると、どのファイルに"ニュース"という単語が含まれるか表示されます。

./app/controllers/admin/articles_controller.rb:      redirect_to [:admin, @article], notice: "ニュース記事を登録しました。"
./app/controllers/admin/articles_controller.rb:      redirect_to [:admin, @article], notice: "ニュース記事を更新しました。"
./app/views/admin/articles/edit.html.erb:<% @page_title = "ニュース記事の編集" %>
./app/views/admin/articles/index.html.erb:<% @page_title = "ニュース一覧" %>
./app/views/admin/articles/index.html.erb:<p>ニュースがありません。</p>
./app/views/admin/articles/new.html.erb:<% @page_title = "ニュース記事の新規登録" %>
./app/views/admin/top/index.html.erb:  <li><%= link_to "ニュース記事管理", :admin_articles %></li>
./app/views/articles/index.html.erb:<% @page_title = "ニュース一覧" %>
./app/views/articles/index.html.erb:  <p>ニュースがありません。</p>
./app/views/shared/_header.html.erb:&nbsp;|&nbsp; <%= menu_link_to "ニュース", :articles %>
./app/views/shared/_sidebar.html.erb:<h2>最新ニュース</h2>
./config/locales/ja.yml:      article: ニュース記事

_header.html.erb というファイルが怪しいので覗いてみると、案の定ヘッダーの設定方法が見れました。

f:id:tetsuyaimagawa:20170429153511p:plain

headerはどこから読まれているのかを、検索しているとlayoutsというフォルダがあり、どうやらレイアウトの設定はここで行っていることがわかりました。

f:id:tetsuyaimagawa:20170429153522p:plain

こんな感じで、サンプルを作成していくタイプの本を買って、サンプルを分析・改造していくと素早く学べます。

まとめ

最速学習にはサンプル魔改造というゴリゴリトップダウンアプローチが推奨されるが、バグが起こったときに対処できないので、基礎は作りながら学んでいきましょう。
ちなみに次は「Swiftできる人が欲しい」にお答えします。

2017 3Q時点で最新の参考書はこれらしい。