SINKCAPITAL
SINKCAPITAL
company Blog
Ruby on Rails チュートリアル第3章をやってみて
techinternlearning

ほぼ静的なページの作成

■第3章
この章から本格的なサンプルアプリケーションの開発を始めるそう。以降の章で色んな機能を足していく(マイクロポスト、ログイン/ログアウト等)。つまりこの章がちゃんとできないと終わりってことか...

3.1 セットアップ

2章と同様に、新しいRailsプロジェクトの作成から

$ cd ~/environment
$ rails _5.1.6_ new sample_app
$ cd sample_app/

またGemfileの中身を置き換え、ここら辺は慣れてきましたね。 前の2つの章と同様にbundle installを実行して、Gemfileで指定したgemのインストールをする。

以下のコマンドで、roduction環境でしか使わないgemはインストールしないようにしておく。

bundle install --without production

このコマンドを実行することで、インストールなしでSQLiteが使えるようになるらしい。

ここまできたら、Gitリポジトリの初期化を行う。

$ git init
$ git add -A
$ git commit -m "Initialize repository"

その後はREADME.mdファイルを更新して、具体的な作業内容を記入する。 書き終わったら、この変更をコミット。

$ git commit -am "Improve the README"

今後もこのサンプルアプリケーションを使い続けるので、Bitbucket上にリポジトリを作成してpushしておく。

$ git remote add origin git@bitbucket.org:ユーザー名/sample_app.git
$ git push -u origin --all    

後でproduction環境にプッシュするときに悩まずに済むよう、アプリをなるべく早い段階でHerokuにデプロイしておくとよいそう。

第2章と同様にpp/controllers/application_controller.rbに以下のコードを追加

def hello
    render html: "hello, world!"
  end

config/routes.rbでルーティングの設定

root 'application#hello'

終わったら次のように変更をコミットし、Herokuにプッシュする

$ git commit -am "Add hello"
$ git push
$ heroku create
$ git push heroku master

警告は無視していいらしい。

3.2 静的ページ

この節ではRailsのアクションやビューを使って色々やっていく。Gitを使う場合は、masterブランチでずっと作業するのではなく、その都度トピックブランチを作成して作業するのがよい習慣だそう。

次のコマンドを実行して、静的なページ用のトピックブランチをチェックアウトする。

$ git checkout -b static-pages

3.2.1 静的なページの生成

このコントローラは静的なページを扱うためにしか使わないので、StaticPagesコントローラを生成する。

$ rails generate controller StaticPages home help

次に進む前に、StaticPagesコントローラファイルをGitリポジトリに追加しておく。

$ git add -A
$ git commit -m "Add a Static Pages controller"
$ git push -u origin static-pages

実際の開発ではこまめにgitにpushしておく

3.2.2 静的なページの調整

HTMLの中身を弄るだけ。割愛。

3.3 テストから始める

何らかの変更を行う際には、常に「自動化テスト」を作成して、機能が正しく実装されたことを確認する習慣を身につけることが推奨されている。

テストを行うメリットとしては ・いざというときのセーフティネットになる ・テストを作成する=その分コードを余分に書くこと。しかし正しく行えば、むしろテストがないときよりも確実に開発速度がアップ ・機能停止するバグの防止

テストを書くのに慣れていると、テストを先に書くようになるらしい。

本書における主要なテストは、コントローラテスト (この章より)、モデルテスト (第6章より)、統合テスト (第7章より) の3つ。

3.3.1 最初のテスト

サンプルアプリケーションのAboutページの作成に取りかかる。テストを先に書いて、実行が失敗することを確認して、実際のアプリケーションにコードを書く。

StaticPagesコントローラのデフォルトのテストがあって中身について説明がある。

実際にテストしてみる。

$ rails test
2 tests, 2 assertions, 0 failures, 0 errors, 0 skips

3.3.2 Red

多くのテストツールでは、テストの失敗を red 、成功したときを green で表す。

一歩目として、Aboutページ用の失敗するテストを書く。

test/controllers/static_pages_controller_test.rbに以下のコードを追加。

test "should get about" do
    get static_pages_about_url
    assert_response :success
  end

テストを実行すると、ちゃんと失敗しました。

$ rails test
3 tests, 2 assertions, 0 failures, 1 errors, 0 skips

3.3.3 Green

3.3.2のテスト失敗の原因はAboutページがないこと。メッセージをヒントに、ルーティングファイルを修正していく。

config/routes.rbに

get  'static_pages/about'

追記する。

修正後テストスイートしたら、今度は別のエラーが

$ rails test
AbstractController::ActionNotFound:
The action 'about' could not be found for StaticPagesController

このエラーからStaticPagesコントローラにaboutアクションがないということがわかる。app/controllers/static_pages_controller.rbにaboutアクションを追加する。

また別のエラーが。

$ rails test
ActionController::UnknownFormat: StaticPagesController#about
is missing a template for this request format and variant.

今度はテンプレートがないっぽい。Railsでは、テンプレート「ビュー」を指す。 このビューはapp/views/static_pagesディレクトリにあるので、ここにabout.html.erbというファイルを作成する。 指示通り書き換えてテストをすると、無事Greenに。

$ rails test
3 tests, 3 assertions, 0 failures, 0 errors, 0 skips

3.3.4 Refactor

開発が進むといろんなとこがごっちゃになってしまうので、こまめなリファクタリングの習慣をできるだけ早いうちに身につけた方が良いらしい。

3.4 少しだけ動的なページ

静的なページのアクションやビューをいくつか作成できたので、今度はそれをほんの少しだけ動的にしてみる。ここでの目標は、Homeページ、Helpページ、Aboutページをそれぞれ編集し、最終的にページごとに異なるタイトルを表示すること。 ここではビューのタイトルタグを変更する。titleタグは、いわゆるSEOでも重要な役割を果たす。

3つの静的ページのタイトルを 「<ページ名> | Ruby on Rails Tutorial Sample App」 という形式に変更する。<ページ名>の部分が、表示しているページに応じて、動的に変化する。

ここでは学習のために、一時的に次のようにファイル名を変更する。

$ mv app/views/layouts/application.html.erb layout_file

実際のアプリケーション開発時にはこんなことはしないらしい。

3.4.1 タイトルをテストする (Red)

assert_selectメソッドでは、特定のHTMLタグが存在するかどうかをテストする。 test/controllers/static_pages_controller_test.rbをまた書き換え。

$ rails test
3 tests, 6 assertions, 3 failures, 0 errors, 0 skips

テストするとこんな感じに。

3.4.2 タイトルを追加する (Green)

テストがパスするようにする。 ビューに色々追記してテストするとGreenに。

$ rails test
3 tests, 6 assertions, 0 failures, 0 errors, 0 skips

3.4.3 レイアウトと埋め込みRuby (Refactor)

同じコードを繰り返すことはRubyの「DRY」(Don’t Repeat Yourself: 繰り返すべからず)に反する。

重複を取り除いていく。Railsのprovideメソッドを使ってタイトルをページごとに変更していく。HTMLの中身をまた書き換え。

$ mv layout_file app/views/layouts/application.html.erb

layout_fileを元に戻しておく。 app/views/layouts/application.html.erbの中身を書き換え。 ビューのHTML構造を削除。

テストするとGreenに。

$ rails test
3 tests, 6 assertions, 0 failures, 0 errors, 0 skips

リファクタリングはどんな小さなものでもベテランは侮らないらしい。

3.4.4 ルーティングの設定

routes.rbファイルを編集。割愛。

3.5 最後に

この章で動的なコンテンツを作れた気はしないが、これからどんどん増やしていくことになるっぽい。

3.6 高度なセットアップ

追加の節。テスト用設を定する。 とりあえずmasterにブランチを変えておく。

$ cd ~/environment/sample_app
$ git branch master

3.6.1 minitest reporters

test/test_helper.rbに追記。IDE上の表記に色がつきました。 test

3.6.2 Guardによるテストの自動化

手動でコマンドを打ち込み、実行しなければならないめんどくささの解消のため、、Guardを使ってテストを自動的に実行させる。

Gemfileでguard gemをアプリケーション内に取り込んでるみたいなので、あとは初期化だけで動かせるっぽい。

$ bundle exec guard init

その後、Guardfileを変更。

Guard使用時のSpringとGitの競合を防ぐには、.gitignoreファイルにspring/を追加する ただし手順は以下の通り 1.ナビゲーションパネルの右上にある歯車アイコンをポチ 2.show hidden filesを選択して非表示ファイルを表示 3..gitignoreを開いて以下を末尾に追加

Guardを終了するときはCtrl+D。springが悪さをして重くなることがあるので、必要に応じてSpringをkillするといい。

感想

第3章はほぼエラーなくスムーズにやることができました。 ファイルの配置とかもだいぶ覚えてきて、このファイルならここらへんかなーみたいな感覚もちょっとずつ出てくるようになりました。 なんで動いてるのかよくわからないまま、フワフワして進んでますが、続きも頑張ります。

疑問・単語集

・短縮形

完全なコマンド短縮形
$ rails server$ rails s
$ rails console$ rails c
$ rails generate$ rails g
$ rails test$ rails t
$ bundle install$ bundle

・キャメルケースとスネークケース

単語の頭文字を大文字にしてつなぎ合わせた名前=キャメルケース 例)StaticPages 単語間にアンダースコアを加えて繋ぎ合わせた名前=スネークケース 例)static_pages_controller.rb

$rails generate controller StaticPages home help

キャメルケースでStaticPagesコントローラ名生成すると 自動でスネークケースにしたファイルstatic_pages_controller.rbを自動的に生成する。

$ rails generate controller static_pages ...

しても同じ結果になる。 Rubyの慣習の問題でキャメルケースで記述する慣習がある。

・拡張子のerbはEmbeded Rubyの略         ・元に戻す方法 コントローラを生成すると、Railsはコントローラ以外に関連したファイルを大量に生成するので、コントローラファイルを削除しただけでは元通りにならない。

$ rails destroyというコマンドを実行することで元に戻すことができる。例えば次の2つのコマンドは、自動生成と、それに対応する取り消し処理の例。

  $ rails generate controller StaticPages home help
  $ rails destroy  controller StaticPages home help

マイグレーションの変更を元に戻す方法も用意されている。

$ rails db:migrate

でマイグレーションを変更したら

元に戻したいときは、db:rollbackで1つ前の状態に戻します。

$ rails db:rollback

最初の状態に戻したいときは、VERSION=0オプションを使います。

$ rails db:migrate VERSION=0
社内ドキュメントにNotionを導入して感じた事
櫻井 裕司
2022/04/02 櫻井 裕司
tech
社内ドキュメントをNotionに寄せることで見えてきたメリット・デメリットをまとめていきたいと思います。また使う中で感じたいくつかの要望もまとめていこうと思います。
「BIツール」活用 超入門 Google Data Portalではじめるデータ集計・分析・可視化 第3章 BIツールに関する知識をつける
白井 透
2022/03/31 白井 透
techinternlearningpersonal
【「BIツール」活用 超入門 Google Data Portalではじめるデータ集計・分析・可視化 第3章】現在長期インターンをさせてもらっているSinkCapitalさんの方で、データ系の業務に携わることになりそうなのですが、それの準備期間として紹介していただいた本をまとめていきたいと思います。
「BIツール」活用 超入門 Google Data Portalではじめるデータ集計・分析・可視化 第2章 さまざまな分析をしてみよう
白井 透
2022/03/30 白井 透
techinternlearningpersonal
【「BIツール」活用 超入門 Google Data Portalではじめるデータ集計・分析・可視化 第2章】現在長期インターンをさせてもらっているSinkCapitalさんの方で、データ系の業務に携わることになりそうなのですが、それの準備期間として紹介していただいた本をまとめていきたいと思います。
「BIツール」活用 超入門 Google Data Portalではじめるデータ集計・分析・可視化 第1章 分析ダッシュボードを作ってみよう
白井 透
2022/03/29 白井 透
techinternlearningpersonal
【「BIツール」活用 超入門 Google Data Portalではじめるデータ集計・分析・可視化 第1章】現在長期インターンをさせてもらっているSinkCapitalさんの方で、データ系の業務に携わることになりそうなのですが、それの準備期間として紹介していただいた本をまとめていきたいと思います。
Ruby on Rails チュートリアル第14章をやってみて & まとめ
白井 透
2022/02/20 白井 透
techinternlearning
【Ruby on rails 第14章】インターン先の方から、「これやっとけば、だいぶいい感じだよ!」と言われたので、Ruby on railsのチュートリアルをやってみたいと思います。
Ruby on Rails チュートリアル第13章をやってみて
白井 透
2022/02/20 白井 透
techinternlearning
【Ruby on rails 第13章】インターン先の方から、「これやっとけば、だいぶいい感じだよ!」と言われたので、Ruby on railsのチュートリアルをやってみたいと思います。
Ruby on Rails チュートリアル第12章をやってみて
白井 透
2022/02/19 白井 透
techinternlearning
【Ruby on rails 第12章】インターン先の方から、「これやっとけば、だいぶいい感じだよ!」と言われたので、Ruby on railsのチュートリアルをやってみたいと思います。
Ruby on Rails チュートリアル第11章をやってみて
白井 透
2022/02/19 白井 透
techinternlearning
【Ruby on rails 第11章】インターン先の方から、「これやっとけば、だいぶいい感じだよ!」と言われたので、Ruby on railsのチュートリアルをやってみたいと思います。
Ruby on Rails チュートリアル第10章をやってみて
白井 透
2022/02/18 白井 透
techinternlearning
【Ruby on rails 第10章】インターン先の方から、「これやっとけば、だいぶいい感じだよ!」と言われたので、Ruby on railsのチュートリアルをやってみたいと思います。
Ruby on Rails チュートリアル第9章をやってみて
白井 透
2022/02/16 白井 透
techinternlearning
【Ruby on rails 第9章】インターン先の方から、「これやっとけば、だいぶいい感じだよ!」と言われたので、Ruby on railsのチュートリアルをやってみたいと思います。
Ruby on Rails チュートリアル第8章をやってみて
白井 透
2022/02/14 白井 透
techinternlearning
【Ruby on rails 第8章】インターン先の方から、「これやっとけば、だいぶいい感じだよ!」と言われたので、Ruby on railsのチュートリアルをやってみたいと思います。
Ruby on Rails チュートリアル第7章をやってみて
白井 透
2022/02/14 白井 透
techinternlearning
【Ruby on rails 第7章】インターン先の方から、「これやっとけば、だいぶいい感じだよ!」と言われたので、Ruby on railsのチュートリアルをやってみたいと思います。
Ruby on Rails チュートリアル第6章をやってみて
白井 透
2022/02/13 白井 透
techinternlearning
【Ruby on rails 第6章】インターン先の方から、「これやっとけば、だいぶいい感じだよ!」と言われたので、Ruby on railsのチュートリアルをやってみたいと思います。
Ruby on Rails チュートリアル第5章をやってみて
白井 透
2022/02/12 白井 透
techinternlearning
【Ruby on rails 第5章】インターン先の方から、「これやっとけば、だいぶいい感じだよ!」と言われたので、Ruby on railsのチュートリアルをやってみたいと思います。
Ruby on Rails チュートリアル第4章をやってみて
白井 透
2022/02/11 白井 透
techinternlearning
【Ruby on rails 第4章】インターン先の方から、「これやっとけば、だいぶいい感じだよ!」と言われたので、Ruby on railsのチュートリアルをやってみたいと思います。
Ruby on Rails チュートリアル第2章をやってみて
白井 透
2022/02/07 白井 透
techinternlearning
【Ruby on rails 第2章】インターン先の方から、「これやっとけば、だいぶいい感じだよ!」と言われたので、Ruby on railsのチュートリアルをやってみたいと思います。
Ruby on Rails チュートリアル第1章をやってみて & 自己紹介
白井 透
2022/02/07 白井 透
techinternlearningpersonal
【Ruby on rails 第1章】インターン先の方から、「これやっとけば、だいぶいい感じだよ!」と言われたので、Ruby on railsのチュートリアルをやってみたいと思います。
Nuxt上でのd3を利用した散布図の作成方法
櫻井 裕司
2021/10/29 櫻井 裕司
techdataAnalytics
クリック可能な散布図をNuxtjs上で作成する場合にd3.jsが汎用性が高く便利でした。利用するにあたって難しかった点などを備考録としてまとめています。
アクセスログを可視化しGAのデータを直感的に理解できる型態にする試み(ネットワーク型)
櫻井 裕司
2021/09/05 櫻井 裕司
techdataAnalytics
ビジネスに活きる分析を進める上で弊社では「理解できる」ことを重要と考えており、特に直感的理解は可視化を進める上で特に重要だと考える内容の一つです。弊社では様々なお客様のデータ分析を進める上で常により示唆の大きい可視化を追求しており、今回はその中で最近試みているネットワーク側の可視化についてまとめたいと思います。
代表櫻井による特別講演会が白陵高等学校で開かれました
櫻井 裕司
2021/07/31 櫻井 裕司
eventpersonal
2021年の夏に兵庫県の私立白陵高等学校において、代表櫻井による特別講演会を開催いたしました。今振り返って高校の頃の自分に伝えたいことについてお話しました。
Nuxtで動的ページを随時追加する場合にNot Foundとなる
櫻井 裕司
2021/05/31 櫻井 裕司
tech
Nuxtで動的ページを登録する方法はありますが、登録後に随時コンテンツが追加される際はNot Foundとなってしまうので、そう言った際の対処方法について
GKEをやめてCloud Runを始めてみました
櫻井 裕司
2021/04/19 櫻井 裕司
tech
firebaseで構築したシステムの裏で動かすバッチの負荷が大きく、cloud functionsで終わらなかったためCloud Runを利用してみました。動作確認までの知見等を雑多にまとめてみました。
AWSをやめてfirebaseを使い始めて感じたメリットやデメリットとそれの対応策(LT登壇内容)
櫻井 裕司
2021/03/26 櫻井 裕司
techeventpersonal
みそかつウェブ・GDG Nagoya主催の「around firebase」とCloud Native Nagoya主演の「Cloud Native Nagoya」にてfirebaseのLTをさせていただきました。そこで会話させていただいたfirebaseを使い始めて感じたメリット・デメリットについてまとめています。
PWA+SPAのwebアプリ作成にnuxtjs+firebaseがめちゃ便利だった
櫻井 裕司
2021/01/16 櫻井 裕司
tech
PWA+SPAのwebアプリを作る際にnuxt.js+firebaseを合わせて利用すると便利だったので知見を書き留めています
s3のhostingでPWAを導入する方法
櫻井 裕司
2020/12/19 櫻井 裕司
tech
アプリ作成時にpwaが比較されることが多かったですが、実際にpwaを実装した経験がなかったため今回自社サイトをPWA化してみました。
dockerでseleniumを動かしてみる(chrome_headless)
櫻井 裕司
2020/12/06 櫻井 裕司
tech
seleniumの相談をいただくことが増えたため、seleniumの勉強もかねてdockerでの実行テストを行いました
THE DECKのイベントにお邪魔させていただきました
本林 秀和
2020/12/05 本林 秀和
eventpersonal
大学コンソーシアム大阪のイベント@The DECK にお邪魔してきました
flutter(dart)を触ってみた感想
櫻井 裕司
2020/11/18 櫻井 裕司
tech
android向けアプリへの対応も考慮してflutter(dart)を触ってみたので、感想をまとめておこうと思います。理解が深まっていく中で定期的にまとめていければと思います。
代表本林による特別講演会が滝高校で開かれました
本林 秀和
2020/11/07 本林 秀和
eventpersonal
2020年11月7日(土)愛知県の私立滝高校において、代表本林による特別講演会を開催いたしました。IT業界やデータサイエンスについてお話しました。
AWS・GCPを選ぶ際の観点
櫻井 裕司
2020/10/28 櫻井 裕司
tech
AWSかGCPを選ぶ際の観点について書き留めておこうと思います
CloudFormationとterraformの比較
櫻井 裕司
2020/10/04 櫻井 裕司
tech
AWS CloudFormationとterraformの両方を使ってみて感じた違いをまとめてみました。
iosのcallkit周りでできること
櫻井 裕司
2020/08/24 櫻井 裕司
tech
新規事業を検討する上でios(swift)の電話周りでできることを調査したため、調査結果をブログとして残しています。
【個人ブログ】CTOの株運用ブログ_順調な滑り出し
櫻井 裕司
2020/07/19 櫻井 裕司
personalstock
長年放置してた株に少し手を出してみました。自分なりに少し情報整理と分析と予想をしたので記事にしてみます。
総務省特定サービス産業実態調査のデータ分析
櫻井 裕司
2020/07/18 櫻井 裕司
techdataAnalytics
総務省がAPIで市場データを公開しており、分析技術向上と市場感を養うことを目的に定期的に分析を行なっていこうと思います。今回は「特定サービス産業実態調査」について見ていこうと思います。
「お絵かきつみ木バトル」をリリースしました
櫻井 裕司
2020/07/12 櫻井 裕司
techapp
タスク管理を二次元的に行うアプリ「お絵かきつみ木バトル」をリリースしました。SinkCapitalはデータコンサルですが、知見蓄積のため様々な媒体での実験的開発を行っています
総務省工業統計調査のデータ分析
櫻井 裕司
2020/07/11 櫻井 裕司
techdataAnalytics
総務省がAPIで市場データを公開しており、分析技術向上と市場感を養うことを目的に定期的に分析を行なっていこうと思います。今回は「工業統計調査」について見ていこうと思います。
総務省サービス産業動向調査のデータ分析
櫻井 裕司
2020/07/08 櫻井 裕司
techdataAnalytics
総務省がAPIで市場データを公開しており、分析技術向上と市場感を養うことを目的に定期的に分析を行なっていこうと思います。初回は「サービス産業動向調査」について見ていこうと思います。
【個人ブログ】CTOが個人的に株をはじめました
櫻井 裕司
2020/07/08 櫻井 裕司
personalstock
長年放置してた株に少し手を出してみました。自分なりに少し情報整理と分析と予想をしたので記事にしてみます。
タスク管理アプリ「タスククロス」をリリースしました
櫻井 裕司
2020/04/08 櫻井 裕司
techapp
タスク管理を二次元的に行うアプリ「タスククロス」をリリースしました。SinkCapitalはデータコンサルですが、知見蓄積のため様々な媒体での実験的開発を行っています
【terraform】gcpでcicd環境を構築する方法
櫻井 裕司
2020/01/04 櫻井 裕司
tech
企業サイトはAWSを利用しているのですが、要件によってはGCPの方が適している場合もあるため、GCPでのcicd構築も行いました。AWSと比較しつつ説明しているため是非ご参考にしてみてください。
【合格体験記】GCP_Cloud_Archtectに受かりました
櫻井 裕司
2019/12/23 櫻井 裕司
personalqualification
Google Professional Cloud Architectに合格したので、勉強法別のコスパをまとめてみました。
AWSでサブドメインなし(wwwなし)からサブドメインあり(wwwあり)へのリダイレクト設定
櫻井 裕司
2019/12/23 櫻井 裕司
tech
もともと企業サイトがサブドメインありで公開していたが、サブドメインなしでもエラーなく接続できるように設計。terraformで作成しているので是非ご参考ください。
マークダウンで記事を書けるようにしてみた
櫻井 裕司
2019/12/16 櫻井 裕司
tech
ホームページのブログをマークダウンを使用してかけるようにしました。gatsbyなどもありますが、今回はお手製cicd+pythonを使用してライトに作成しました。
Copyright © SinkCapital 2022