Zenn
Open11

抜け落ちている基礎知識を埋めていこう

初心者
AmetaAmeta

オブジェクト指向って結局何なのか。

オブジェクト指向を構成する3要素

  1. Inheritance (継承)
  2. Encapsulation (カプセル化)
  3. Polymorphism (ポリモーフィズム)

1. Inheritance

the mechanism of basing an object or class upon another object (prototype-based inheritance) or class (class-based inheritance), retaining similar implementation.

2. Encapsulation

the idea of bundling data and methods that work on that data within one unit, e.g., a class in Java. This concept is also often used to hide the internal representation, or state, of an object from the outside.

3. Polymorphism

the ability of a programming language to present the same interface for several different underlying data types. Polymorphism is the ability of different objects to respond in a unique way to the same message.

AmetaAmeta

HTML要素

header要素

header要素とはWebページ最上部のヘッダー専用のブロックレベル要素です。head要素と混同しがちなので気をつけてください。

div要素

「特定の意味が無い」要素です。汎用的に様々な用途で使うことができ、レイアウトを作成する際に重宝されます。classセレクタを付与して使用します。今後、最も使用する頻度が高いブロックレベル要素です。

footer要素

footer要素とはWebページ最下部のフッター専用のブロックレベル要素です。

CSSプロパティ

displayプロパティの考え方

https://saruwakakun.com/wp-content/uploads/2017/01/bdr44405-O4HRWW-07-min.png

positionプロパティ組み合わせ

position: relative - 現在の位置を基準に相対的な位置を決める
position: absolute - 特定の地点を基準に絶対的な位置を決める（デフォルトの基準はウィンドウ左上）
position: fixed - 要素を指定した位置に固定する

positionプロパティを指定した要素に、top/right/bottom/leftプロパティを用いることで、基準（上、下、右、左）の距離を指定することができる。

親要素にposition:relative;を指定することで、position:absolute;を指定した子要素の基準の位置を親要素に指定できる。

AmetaAmeta

Unix と Linux の違いって？

似てるところ

  • 安定性が高い
  • 黒い画面でキーボードだけ操作
  • 費用面で優遇がある（Linuxは無料。Unixは高くなってきた）
  • 企業で使われていることが多い

違うところ

Unixは企業が開発して、知的財産権が企業に属している（Unixという名前を使わなければ無料でも使える）

Linuxはオープンソースでとにかく無料だし改変も配布も自由

AmetaAmeta

クラスとインスタンスの概要を復習

クラス

クラスは、値の元となるものです。値の共通のルールを定義します。
ここで決めるルールは、共通の属性と処理（メソッド）です。

クラスを使えば、文字列が「こんにちは」や「どうも」という別々のデータを持つことができることと同じように、共通のルールを守った上で個別のデータを作ることもできます。

共通の情報をまとめ、個別の情報は各データごとに分けることで、開発・管理・保守がし易くなるという利点があります。

インスタンス

インスタンス
インスタンスとは、クラスを元にして作られるデータのことです。

インスタンスは、クラスと異なり実体を持ちます。
車の設計図の例で言えば、設計図から作られて実際に販売されている車を指します。

インスタンスメソッド

インスタンスが使用できるメソッドです。クラスに定義しておきます。
「インスタンスメソッドを定義したクラス」から生成されるインスタンスが使用できます。

インスタンスメソッドは、インスタンスごとの個別の情報（属性値）を使った処理に使用します。

インスタンスメソッドは、インスタンスから呼び出すメソッドでしたが、クラスから呼び出すメソッドもあります。

クラスメソッド

個別の情報によらず、共通の結果を返す動作を定義するクラスメソッド。クラスが使用できるメソッドです。クラスメソッドを定義したクラス自身が使用できます。クラスで共通の情報を使った処理に使用します。

initializeメソッド

インスタンスが生成された瞬間に、生成されたそのインスタンスが実行する処理を定義するインスタンスメソッドです。

AmetaAmeta

レスポンシブWebデザインの基本

画面幅によって見た目が変わるようにWEBサイトやアプリケーションのデザインを設計することをレスポンシブWebデザインと呼ぶ。現在では、ユーザーがスマホやタブレットでサイトを閲覧することが主流なため、レスポンシブ対応についての知識は必須！

Webフォント

インターネット上にデータがあり、サイト表示時にそれを読み込んで使用されるフォントを総称して「Webフォント」と呼ぶ。

GoogleFonts

Googleが提供するWebフォントのサービスです。完全無料で使用可能。
https://fonts.google.com/

メディアクエリ

メディアクエリとは、表示された画面幅に応じて適用するスタイルを切り替える機能を指す。
またメディアクエリによって規定されるスタイル適用の分岐点をブレークポイントと呼ぶ。

ブレークポイント

ブレークポイントはメディアクエリによって規定されるスタイル適用の分岐点のこと。

@media (max-width: 500px){ }の場合は500pxがブレークポイント

ブレークポイントの値を何pxにするか、また何箇所ブレークポイントを置くかは制作するWebサイトの要件によって変わる。

PCとスマホのみの対応であれば、ブレークポイントは1箇所で済みますが、タブレットにも対応となると、2箇所ブレークポイントが必要になる。

AmetaAmeta

Rubyで正規表現を実現する2つのメソッド

sub

subメソッドは、文字列の指定した部分を別の文字列に置き換えるためのメソッド。
第1引数に置き換えたい文字列を指定し、第2引数に変換後の文字列を指定。また、操作したい文字列は/で囲む。

irb(main):001:0> str = "りんごを食べる"
=> "りんごを食べる"

irb(main):002:0> str.sub(/りんご/,"みかん")
=> "みかんを食べる"

「りんごを食べる」という文字列が「みかんを食べる」という文字列に置換される。

match

matchメソッドは、引数に指定した文字列がメソッドを使用した文字列に含まれているか否かをチェックするためのメソッド。含まれている場合は、指定した文字列がMatchDataというオブジェクトが戻り値で得られる。また、含まれていない場合は、戻り値としてnilが得られる。

irb(main):001:0> str = "Hello, World"
=> "Hello, World"

irb(main):002:0> str.match(/Hello/)
=> #<MatchData "Hello">

irb(main):003:0> str.match(/Good/)
=> nil

Hello World」という文字列に、「Hello」という文字列が含まれているか否かをチェックしている。

MatchData

マッチした文字列はまず、MatchDataという種類のオブジェクトで返されます。MatchDataから実際にマッチした文字列などを取り出したい場合は、以下の様に配列から最初のデータを取り出す時と同様の形で取り出すことができます。

=> "Hello, World"

irb(main):002:0> md = str.match(/Hello/)
=> #<MatchData "Hello">

irb(main):003:0> md[0]
=> "Hello"
AmetaAmeta

例外処理の実装

まず、2パターンあるよ。

  1. メインの処理に失敗したらそのときだけ別の処理を実行して、そのままメインの処理を続ける。
  2. メインの処理に失敗したらそのときだけ別の処理を実行して、メインの処理すべてをなかったことにして中止する。

begin（ビギン）

beginは、例外となりそうな箇所を囲い処理を実行できる文法。
どんな条件でも最低1回は処理を実行するため、例外処理を始めるときなどに使用する。

begin
  # 例外が起きると想定される処理
end

beginを利用して処理を実行しても、例外を捉えなければ、どのタイミングで例外処理を行うか決めることができません。

例外を捉えるためには、beginブロック内でrescueを記述する。

rescue（レスキュー）

rescueは、発生した例外を捕捉し、例外が起こった際に呼び出される条件節です。
begin以外の中にも記述できますが、主に、例外が発生しそうな部分をbeginから始まるブロックで囲み、ブロックの内部にrescueを記述して使用します。

begin
  # 数値を0で割ろうとすると、ZeroDivisionError例外が発生する
  1 / 0
rescue
  # 例外が発生した時にrescue以下の処理が呼ばれる
  puts '0で割ることはできません'
end

beginブロック内のrescueの記述の形は、ifとelseのものと同様インデントを入れる必要はなし。

raise（レイズ）

raiseは、例外を発生させることができる文法。
第一引数に発生させたい例外クラス、第二引数にエラーメッセージを記述して使用。

raise 発生させたい例外クラス, 'エラーメッセージ'

(例外クラス : NoMethodError, RuntimeError, SyntaxError, NameError...)

AmetaAmeta

Rubyの基本理念ってなに？

DRY

DRYとはDon't Repeat Yourselfの略で、「同じ情報を繰り返し定義しない」という考え方。
ここでいう情報とは、メソッドであったり、配列などのデータの集合体などをさす。
同じコードを繰り返し記述しないという捉え方で問題ありません。DRYを意識するメリットとして、可読性の向上や、コード量を減らすことによりアプリケーションの動作が早くなることがある。

CoC

CoCとはConvention Over Configurationの略で、「設定よりも規約を優先する」という考え方。
ゼロから自身で設定するのではなく「設定よりも規約を優先」して作業していたということになり、これこそがCoC。CoCを意識するメリットは、「すでに定義されている処理を利用する」ことで開発スピードが上がり質も担保できることや、規約は開発者同士の共通認識であるため可読性が向上することなどが挙げられます。

AmetaAmeta

何度目かのMVC の深層理解

Action View

Action Viewは、Ruby on Railsのアプリケーションにおいて、ビューの機能を実現するために必要な処理のオブジェクト。ビューファイルを1つにまとめてブラウザに表示する処理は、Action Viewによって実現される。

ヘルパーメソッド

ビューファイルにおいてERBタグを使用すれば直接Rubyの記述を書くことはできるが、DRYの視点から見ても綺麗なコードとは言えない。そのような場合のために、Ruby on RailsではHelperと呼ばれるものを使用し、ヘルパーメソッドを自作できる仕組みがある。

モジュール

モジュールとは、Rubyにおける「インスタンスを生成できないクラス」のようなもののこと。

module モジュール名

end

また、モジュールの中にはクラスを定義することも可能。

module Sample
  class Test
  end
end

この「Testクラス」は下記のようにして呼び出すことができる。

Sample::Test

クラスとモジュールの使い分けとして、具体的なオブジェクトを生成したい場合（インスタンスを生成したい場合）はクラスを使用し、処理だけ（メソッドなど）が必要な場合はモジュールを使用する。またモジュールの中にクラスを定義するメリットは、Testクラスが複数ある場合に、下記のような記述でクラスごとに区別ができること。

module Sample1
 class Test
 end
end

module Sample2
 class Test
 end
end

Sample1::Test
Sample2::Test

Action Controller

Action Controllerとは、Ruby on Railsのアプリケーションにおいて、コントローラーの機能を実現するために必要なオブジェクトのことです。

サービスクラス（service class）

コントローラー内のコードの可読性を高めるために用いる概念です。
本章で、コントローラーの処理をモデルに切り出す方法を学習しましたが、モデルに記述する処理は他にも多くあり、モデルの記述は肥大化しやすいという注意点があります。

そこで、肥大化を避ける意味でも、複雑な処理はサービスクラスに切り出していきましょう。

AmetaAmeta

セッションとクッキーの違い

「昨日ログインしたサービスを今日も利用しようとしたら、自動的にログインの状態になっていた」という経験がある。その都度ログインを行わなくて良いので便利。

このような機能が実現できるのは、セッションとクッキーという仕組みのおかげです。Webアプリケーションの使い勝手が良くなるため多くのサービスで使用されています。

##セッション
セッションとは、Webサービスにおいて情報を一時的に記憶しておく仕組みです。

よくあるショッピングサイトでもこのセッションという仕組みが利用されています。
ショッピングサイトには大抵「ユーザー」の概念があり、ログインしていると「お買い物カゴ」などに商品を追加でき、その状態を維持できるようになっています。

ユーザーの情報やお買い物カゴの情報を一時的に保存し、初回のログイン以降も保持することで、一度ショッピングサイトのページを離れても、再度アクセスした時にログインの状態やお買い物カゴの情報を維持したままショッピングが再開できます。

この仕組みにより、何度もログインする必要がなくなります。

セッションが、実際にどのようにRuby on Railsに実装されているか、コードをみてみましょう。Ruby on Railsにおいてセッションはsessionというオブジェクトにハッシュのような形で格納されます。

session

sessionは、Ruby on Railsでセッションを使用する際に使うオブジェクトです。コントローラーで使用することができ、下記のように記述すると保存ができます。

class TestsController < ApplicationController
 def index
  session[:sample] = 1
 end
end

sessionというハッシュに値を追加するような記述で使用できます。
上記の実用例にあげたショッピングサイトなどで、ユーザー情報を保持したい場合などに用いると便利です。
また、PicTweetなどのユーザー機能はdeviseというGemで実装していましたが、deviseはその内部の処理でセッションを利用してログイン機能を実現しています。
したがって、皆さんはこれまで意識することはなかったものの、すでにセッションを使用していたということになります。

次は、セッションと切り離せない知識であるクッキーについて説明します。

クッキー

クッキーとは、ブラウザが持っている、データを保存できる領域のことです。
セッションは一時的にデータを保存するという説明をしましたが、保存場所はDBではなく、ブラウザです。この、ブラウザにあるセッションの情報の保存場所のことをクッキーと呼んでいます。

CookieStore

CookieStoreとは、Ruby on Railsでセッションを用いる際の、デフォルトの保存先です。この保存先はセッションストレージと呼ぶことが一般的です。
CookieStoreでは、セッションはCookieStoreにハッシュ形式で保存されます。先ほどのsession[:sample]という記述は、ハッシュと同じ記法でしたが、これがその理由です。

また、セッションは悪意のあるユーザーが利用すると非常に厄介な項目です。
ユーザー情報をセッションを用いて一時的に保存していたら、その情報が盗まれて悪用されてしまう可能性があります。そうならないために、CookieStoreはセッションの情報を暗号化したり、また定期的にリセットしたりすることで対策をしています。