プロダクト開発日誌

技術のことなど

最新のRuby on Rails でアプリを作成

rails のInstall

bundle init

rails のgemを追加

# Gemfile
+ gem 'rails', github: 'rails/rails'

github.com

rails をInstall

bundle install --path vendor/bundle --jobs=4

rails のバージョンを確認

bundle exec rails -v
Rails 6.0.0.beta3

新アプリの作成

bundle exec rails new . -d postgresql --skip-turbolinks --skip-test

DBの作成

bundle exec rails db:create

開発用サーバの起動

bundle exec rails s

ブラウザからアクセス

http://localhost:3000/

f:id:synapse51:20190401174626p:plain 終わり

rbenvで最新のRubyバージョンをインストールする

Homebrewをアップデート

brew update

ruby-buildをアップデート

cd ~/.rbenv/plugins/ruby-build && git pull && cd -

インストールできるRubyのバージョンを確認

rbenv install --list

Rubyをインストール

rbenv install 2.6.2

ローカルのRubyのバージョンを指定

rbenv local 2.6.2
ruby -v

ざっくりHaml

Haml (HTML Abstraction Markup Lunguage)

概要

コツ

  • h1, tableなどは開始タグと閉じタグを削除し、%をタグにつける。
  • id属性、class属性、その他の属性を追加する場合は、{}でハッシュ形式
  • ifやeachなどロジック部分の行には、先頭に-
  • インデントに気をつける

準備

作業用ディレクトリの作成

$ mkdir haml_lesson; and cd haml_lesson
$ code .

Rubyのバージョンを指定

$ rbenv local 2.5.1
$ ruby -v
ruby 2.5.1p57 (2018-03-29 revision 63029) [x86_64-darwin17]

hamlのインストール

$ sudo gem update --system
$ gem install haml
$ gem list | grep haml
haml (5.0.4)

変換

大まかな流れとして、hamlファイルをhamlに通すとhtmlが出来上がる。

$ string trim '
!!!
%haml
  %body
    hello world!
'> index.haml

htmlに変換

$ haml -q index.haml index.html
# -q : シングルクォーテーションではなくダブルクオテーションを使用する

確認

$ less index.html

基本

  • !!! → <!DOCTYPE html>
  • % → 開始タグと終了タグ

属性

htmlっぽく書いたり,htmlっぽく書いたりできる

%p(class="test") hello world or %p{class: "test"} hello world
↓
<p class='test'>hello world</p>

他にもさまざまな書き方ができる

%div{id: "main", class: "test"}
%div(id="main" class="test")
%div#main.test
#main.test
↓
<div class='test' id='main'></div>

コメント

/ end body
↓
<!-- end body -->

/ コメント
  コメント
  コメント
↓
<!--
  コメント
  コメント
  コメント
-->

hamlファイルのみのコメント

-# コメント

改行

%p hello
↓
<p>hello</p>
%p
  hello
↓
<p>
  hello
</p>
%p<
  hello
↓
<p>hello</p>

Filter

:css
  .myStyle {
    color: red;
  }

↓

<style>
  .myStyle {
    color: red;
  }
</style>
:javascript
  alert(1);
  if (1) {
    alert(2);
  }

↓

<script>
  alert(1);
  if (1) {
    alert(2);
  }
</script>
%div
  :escaped
    <html>
    </html>

↓

<div>
&lt;html&gt;
&lt;/html&gt;
</div>

Rubyの評価

%p total is #{3 + 9}
↓
<p>total is 12</p>
%p= Time.now
↓
<p>2018-10-05 10:42:56 +0900</p>
- x = 10
%p= x
↓
<p>10</p>
- (1..10).each do |i|
  %p{id: "item_#{i}"} #{i}
↓
<p id='item_1'>1</p>
<p id='item_2'>2</p>
<p id='item_3'>3</p>
<p id='item_4'>4</p>
<p id='item_5'>5</p>
<p id='item_6'>6</p>
<p id='item_7'>7</p>
<p id='item_8'>8</p>
<p id='item_9'>9</p>
<p id='item_10'>10</p>

【Rails5】新しいアプリを作成し,scaffoldするまで

sampleProductを作成する

mkdir Rails5SampleApp; and cd Rails5SampleApp

Rubyのバージョンを指定する

rbenv local 2.5.1

gemをbundlerで管理して、Projectフォルダにインストールする

bundle init
echo "gem 'rails'" >> Gemfile
bundle install --path vendor/bundle --jobs=4

railsアプリを作成する

bundle exec rails new . -d postgresql --skip-turbolinks --skip-test --skip-bundle
bundle install
bin/rails db:create

サーバーを起動

bin/rails s

f:id:synapse51:20181007082214p:plain

scaffoldする

bundle exec rails generate scaffold product name:string url:string

DBのマイグレーションを行う

bundle exec rails db:migrate