プログラミング備忘録【Ruby on Rails】

初学者として日々学んだことや発見をいつでも引き出せるようブログにまとめてみた。初学者のため間違った説明があった場合、コメントいただけると嬉しいです。

HTMLとCSSの細かな内容

基本設定

フォントサイズ

font-sizeのデフォルト値は、ブラウザのデフォルトフォントサイズの16pxです。 この16pxを基準に、パーセンテージで指定しています。 今回は62.5%なので、

16 * 62.5 * (1 / 100) = 10

となり、今回は10pxと指定しているのと同義です。

html {
  font-size: 10px;
}

としても良いですが、文字サイズについては pxは使わないほうが無難 です。 今後「PC」「タブレット」「スマホ」など、様々な端末に最適化して表示する為の設定をする際、絶対指定であるpxだと自在に文字サイズを変更できず不便である為です。

そして、html要素の子要素以下の文字サイズについては今回は、remという単位を使います。remというのは、html要素のfont-sizeを1 として、比率でサイズを指定するものです。

html要素のfont-sizeが10pxだった場合:1remは10px、12pxは1.2rem

html要素のfont-sizeが16pxだった場合:1remは16px、12pxは0.75rem

先程学んだ通り、html要素に対して基準となるfont-sizeの値を62.5%(10px)に指定しました。 例からもわかる通り、基準となるfont-sizeの値は62.5%(10px)とすると使い勝手が良いです。計算が直感的に行えるためです。

font-sizeの指定方法には、rem以外にもいくつかあります。 それぞれの特徴をおさえて、今回remを使用するメリットについて理解しましょう。

[font-sizeに使用できる各単位]

単位 指定方法 基準 基準が16pxの時の単位変換
rem 相対指定 html要素のfont-size 1rem = 16px
em 相対指定 親要素のfont-size 1em = 16px
% 相対指定 親要素のfont-size 100% = 16px
px 絶対指定 なし 16px = 16px

emと%は、要素が入れ子になっている場合、親要素のフォントサイズを参照します。その為、入れ子構造が深くなればなるほど、emや%でfont-sizeを指定していると、調整が難しくなってしまいます。

remは参照する場所がルート(html)なので、親要素を気にせずフォントサイズを指定することができます。

よってブラウザ側が対応している限り、可変的な要素を指定する場合は remを使用するのが便利 です。

HTML

imgにリンクを貼る

<a href="index.html">
    <img src="./images/logo.png" class="logo_image">
</a>

CSS

clearfix

・一般的に再利用性を考え、clear: bothにする

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

要素の中央配置とvertical-alignの注意点

vertical-alignが効かないパターンと、効くパターン | HPcode

・vertical-alignの前提として、ボックスの中での上下中央を指定するためのプロパティではないということを理解しておく必要があります。

要素の中央配置

1. tableの中央配置

[html]

<table class="table">
  <tr>
    <td>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Architecto cum dignissimos totam. </td>
    <td>Lorem ipsum dolor</td>
  </tr>
  <tr>
    <td>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat</td>
    <td>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat id aspernatu</td>
  </tr>
</table>

[css]

.table {
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-collapse: collapse;
}

.table th,
.table td{
  border: 1px solid rgba(0, 0, 0, 0.16);
  padding: 12px;
  vertical-align: middle;
}

f:id:keikamiguchi:20200711130018p:plain 2. desplay: inline-blockと併用して隣あっている要素同士の高さを揃える(ここでは内部要素を中央揃えにしている)

[html]

<div class="items">
  <div class="item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi officia minima quo, beatae consequatur fuga voluptatibus dignissimos error eius ullam voluptate ut! Debitis totam rem, dolorum ab quaerat fuga tempora.</div>
  <div class="item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi officia minima quo, beatae consequatur</div>
  <div class="item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi officia minima quo, beatae consequatur fuga voluptatibus dignissimos error eius ullam voluptate</div>
</div>

[css]

.item {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.16);
  display: inline-block;
  margin: 16px 0;
  padding: 8px;
  width: 30%;
  vertical-align: middle;
}

f:id:keikamiguchi:20200711125800p:plain

3. 画像の上下どちらかにある謎の隙間を消したい場合

img {
  vertical-align: top;
}

*あるいはbottomのどちらか

4. 要素の中央配置(基本的にはdesplay: flexを使用)

[html]

<div class="box-wrapper">
  <div class="box">
     <p>ダミーテキスト</p>
  </div>
</div>

[css]

.box-wrapper{
  display: table;
  height: 200px;
}
.box{
  display: table-cell;
  vertical-align: middle;
}

*なお、positionにabsoluteやfixedを指定している要素には効かないので注意

応用

バナー広告の貼り方

[html]

<div class="banner_content">
  <p>
    <a href="#"><img src=""></a>
  </p>
  <p>
    <a href="#"><img src=""></a>
  </p>
</div>

[css]

・ここではバナー広告を横並びにする場合のcssの例を記載

.banner_content {
  display: table;
}
.banner_content p {
  display: table-cell;
}

tableの無駄な隙間を無くす

・以下のようにtableのデフォルトの状態では、以下のような無駄な余白があります。 f:id:keikamiguchi:20200711144755p:plain [html]

        <table class="company">
          <tr>
            <th>商号</th>
            <td>株式会社サンプル</td>
          </tr>
          <tr>
            <th>所在地</th>
            <td>〒111-1111 東京都渋谷区</td>
          </tr>
          <tr>
            <th>設立年月日</th>
            <td>2015年1月1日</td>
          </tr>
          <tr>
            <th>資本金</th>
            <td>200万円</td>
          </tr>
          <tr>
            <th>従業員</th>
            <td>10名</td>
          </tr>
        </table>

[css]

.company{
  border-collapse: collapse;
}
.company tr{
  height: 5rem;
}
.company th{
  width: 100px;
  background-color: #B1B1B1;
  color: #fff;
  border-bottom: solid 1px #fff;
}
.company td{
  width: 560px;
  padding-left: 1rem;
  border: solid 1px #B1B1B1;
}
.company tr:last-child th {
  border-color: #B1B1B1;
}

・border-collapse: collapseを指定することで、無駄な余白を無くしています。 ・.company tr:last-child thへの指定により、最後のthとtdのズレを修正しています。 f:id:keikamiguchi:20200711144858p:plain

デザイン

上下中央配置

CSSで要素を上下や左右から中央寄せする7つの方法 | 株式会社グランフェアズ

ハッシュの「これ忘れてた!」の復習

ハッシュについて

1.ハッシュを使った繰り返し処理

currencies = { 'japan' => 'yen', 'us' => 'dollar', 'india' => 'rupee' }

currencies.each do |key, value|
  puts "#{key} : #{value}"
end
#=> japan : yen
#   us : dollar
#   india : rupee

# ----------------------------------------

currencies = { 'japan' => 'yen', 'us' => 'dollar', 'india' => 'rupee' }

currencies.each do |key_value|
  key = key_value[0]
  value = key_value[1]
  puts "#{key} : #{value}"
end
#=> japan : yen
#   us : dollar
#   india : rupee

2.異なるハッシュを結合

  • 「**」を使用する場合
h = { us: 'dollar', india: 'rupee' }
# 変数hのキーと値を**で展開させる
{ japan: 'yen', **h } #=> {:japan=>"yen", :us=>"dollar", :india=>"rupee"}
  • 「merge」を使用する場合
h = { us: 'dollar', india: 'rupee' }
{ japan: 'yen' }.merge(h) #=> {:japan=>"yen", :us=>"dollar", :india=>"rupee"}

3.想定外の引数も受け取れるようにする

def buy_burger(menu, drink: true, potato: true, **others)
  # othersはハッシュとして渡される
  puts others

  # 省略
end

buy_burger('fish', drink: true, potato: false, salad: true, chicken: false)
#=> {:salad=>true, :chicken=>false}

4.最後の引数がハッシュであれば、呼び出し元の{}は省略できる

# optionsは任意のハッシュを受け付ける
def buy_burger(menu, options = {})
  puts options
end

# ハッシュリテラルの{}を省略してメソッドを呼び出す
buy_burger('fish', 'drink' => true, 'potato' => false) #=> {"drink"=>true, "potato"=>false}

5.ハッシュと配列の相互変換

  • 配列からハッシュへ
currencies = { japan: 'yen', us: 'dollar', india: 'rupee' }
currencies.to_a #=> [[:japan, "yen"], [:us, "dollar"], [:india, "rupee"]]
  • ハッシュから配列
array = [[:japan, "yen"], [:us, "dollar"], [:india, "rupee"]]
array.to_h #=> {:japan=>"yen", :us=>"dollar", :india=>"rupee"}

6.ハッシュの初期値を設定

・使う時がきた際に参照(167/5.6.8)

シンボルについて

1.シンボルの特徴

  • 表面上は文字列だが内部的には整数なので、高速で処理ができる
  • メモリの使用効率が良い
  • イミュータブル

2.シンボルの用途(名前で識別したいが、必ずしも文字列である必要がない場合)

  • ハッシュのキー
  • オブジェクトのメソッド

...etc

3. "文字列: 値"の形式で書くと、キーがシンボルになる

hash = { 'abc': 123 } #=> {:abc=>123}

モジュールの基本について

モジュール使い方

1.継承は使えないが共通の処理を持たせたい場合

・同じ機能を持たせたいが、is-aの関係が成り立たない場合など

1.include(ミックスイン):モジュール内のメソッドをインスタンスメソッドとして呼び出せるようにする

module Loggable

  private

  def log(text)
    puts "[LOG] #{text}"
  end
end

class Product
  include Loggable

  def title
    log 'titke is called.'
    'A great movie'
  end
end

2.extend:モジュール内のメソッドをクラスメソッドとして呼び出せるようにする

module Loggable
  def log(text)
    puts "[LOG] #{text}"
  end
end

class Product
  extend Loggable
  #省略
end

Product.log('Hello')

2.名前空間

・大規模なプログラムでクラス名が重複する恐れがある場合

class User
  #省略
end

module Admin
  class User
    #省略
  end
end

Admin::User.new('Alice')

↓モジュールがすでに定義されている場合は、ネスト不要

module Admin
  #省略
end

class Admin::User
  #省略
end

Ruby入門

1.Webアプリケーションについて

全体像

f:id:keikamiguchi:20200623160404p:plain

・結論としてRubyを使用することで、データベースサーバーの利用が可能になる

Webサーバーのみで提供できるサービス

  • 静的なWebサイト(現在はほとんど見かけない)

データベースサーバーを使うことでなにができるか?

  • ユーザー登録
  • 日記投稿
  • 写真投稿 ...etc

まとめ
データベースサーバーを使うことで様々なデータを扱えるようになる

Ruby on Railsの処理の流れ

f:id:keikamiguchi:20200719172449p:plain
例えば、Blogというデータの中で、サーバに保存されている情報すべてを取り出そうとすると、以下のような流れになります。
f:id:keikamiguchi:20200719172459p:plain

クラスについて

1.クラスの基本

クラスとは

・例えとしてはよく「設計図」だとか、「たい焼きを作る鋳型(いがた)」などが上げられます。
たい焼きを想像していただきたいのですが、鋳型は同じものを何度でも複製できますよね。要するにクラスという「鋳型」の役割を果たすものを使うことで、同じであったり類似するコードを書く必要がなくなります。よって記述量を減らしたり、メンテナンス性を上げることができます。

アトリビュートとは

オブジェクトの付帯情報(例:userインスタンスの名前や年齢など)

インスタンス変数とは

・同じインスタンスの内部で共有される変数で、@で始まる
・外部から参照、変更するにはアクセサメソッドを定義する必要がある
・参照はメソッドの戻り値をインスタンス変数にする
・変更はname=(value)のように「=」で終わるメソッドを定義することで、valueの引数を使って変更できる。

class User
	省略

        #参照用メソッド
        def name
                @name
        end

        #変更用メソッド
	def name = (value)
		@name = value
	end
end

user.name = “佐藤”

↓アクセサメソッドの定義面倒だよね?

class User
	attr_accessor :name
	省略
end

これを定義するだけで、@nameへの読み書きが自由にできるようになる。(nameに@がつかない点がポイント:内部で勝手に@をつけてくれる)
読み取り専用:attr_reader
書き込み専用:attr_writer
複数定義可能:attr_accessor :name, :address

インスタンスメソッドとクラスメソッドの違い(p218)

インスタンス情報を扱いたいかどうかで使い分けられる。
「呼び出し方」
インスタンスメソッド:インスタンス名.インスタンスメソッド
def メソッド名
・クラスメソッド:クラス名.クラスメソッド
def self.メソッド名

「selfの例外的特徴」
1.メソッド内でセッターメソッドを呼び出す場合はselfを必ず付ける!

def rename_to_bob
  self.name = 'Bob'
end

2.インスタンスメソッド内のselfには、クラスではなくインスタンスが入る!
(235/7.5.2)
3.インスタンスメソッドからクラスメソッドを呼び出す場合は、self.メソッドではなくクラス名.メソッドで呼び出す!
(237/7.5.3)

2.クラスの継承

class DVD < Product

親クラスのメソッド呼び出し(ここでは例としてinitializeメソッドを使用)

・親と子で引数が同じ場合(243/7.6.5)

class DVD < Product
  def initialize(name, price)
    super
  end
end

・親と子で引数の数が異なる場合は親に渡したい引数を明示する必要がある

class DVD < Product
  def initialize(name, price, running_time)
    super(name, price)
    @running_time = running_time
  end
end

メソッドのオーバーライド

子クラスにオーバーライドしたいメソッドを再定義するだけ

3.応用

メソッドの公開レベル3つ

・public:デフォルト
・private:クラス内部のみだが、レシーバを指定した呼び出しができない(インスタンスを特定した処理ができない)
2.継承すれば呼び出すことができ、オーバーライドできてしまう
3.クラスメソッドはprivate外!クラスメソッドをprivateにするには別の設定が必要(250/7.7.4)
4.privateはメソッドなので「private :fizz, :buzz」と設定することもできる(なおこの場合、private以下に書かれたメソッドはprivateにならない)(251/7.7.6)
・protected:外部に公開せず、レシーバ付きでメソッドを呼び出したい場合(インスタンスを特定した処理ができる)

様々な変数

1.定数について
https://github.com/JunichiIto/ruby-book-codes/blob/master/sample-codes/chapter_07/code_7.03.05.rb

  • 「クラス名::定数名」で外部から参照でき、再代入も自由にできる
  • 必ずクラス構文の直下で定義すること
  • 再代入を防止する「.freeze」メソッドの使い方には注意が必要(255/7.8.1/7.8.2)

2.クラスインスタンス変数
クラス直下やクラスメソッド内で@で始まる変数
クラスごとに独立して管理されるので、継承による変更の影響を受けない

3.クラス変数
@@で始まる変数で、クラスインスタンス変数と逆に親子間やクラスメソッドとインスタンスメソッド間でも共有される。

「==」と「===」の違い

・「===」はcase文のwhen節で内部的に使われており、マッチャーの役割を果たしている
Rubyの===演算子についてまとめてみた|TechRacho(テックラッチョ)〜エンジニアの「?」を「!」に〜|BPS株式会社

モンキーパッチ(270/7.10.6)

・言語の組み込みクラスやライブラリ(=パッケージ)、その他外部ライブラリ(gem)の挙動を、メソッドを加えたり、オーバーライドさせたりすることで機能を拡張すること。実際の開発現場ではgemなどに軽微な不具合や要件に合わない挙動がある場合などに使用されることがある。なお、エイリアスメソッドを定義してからモンキーパッチを当てる方法はモジュールとprependを使って書き換えることができる(8.9.4参照)

特異メソッド(=クラスメソッド)

・特定のオブジェクトにのみメソッドを定義したい場合に有効(272/7.10.7)

ダックタイピングとは

・受け取る引数の型を制限しない特徴のことで、「引数がどのようなオブジェクトであれ、 メソッドを呼び出せれば良い」と割り切ることで、コードの柔軟性が向上します。またこれは、動的型付け言語と静的型付け言語のうち動的型付け言語に特徴的な型付けの作法であり、静的型付け言語では引数の型を指定する必要があります。また、動的型付け言語にはダックタイピングと同様引数が異なる型である場合に対応すべく、メソッドオーバーロードといった機能があります。
動的型付け言語と静的型付け言語の違いとは? | じゃぱざむ

jQueryでつかった機能まとめ

ページ読み込みから指定時間後(ここでは3秒後)にページ遷移

$(window).load(function() {
  setTimeout(function(){
    window.location.href = '/';
  }, 3000);
});

jQueryでsubmitを実行

$(function() {
  $('button').click(function() {
    $('form').submit();
  });
});