2020-02-04

gem deviseの導入　[Rails]

今回は、deviseの導入方法についてです。

[deviseとは]

Rubyのgem(ライブラリ)の1つです。

ユーザー新規登録・ログイン機能の実装が簡単にできます。

[インストール]

Gemfileに追記

gem 'devise'

bundle install実行

$ bundle install

依存するファイルも一緒に作成

$ rails g devise:install

Usersモデルを作成

$ rails g devise user

マイグレーションファイルを確認してみると、emailとパスワード用のカラムは自動で生成されるようになっています。

追加したいカラムがある場合は、マイグレーションファイルに追加します。

マイグレーションの実行

$ rails db:migrate

ここまでで最低限のログイン機能は実装できます。

ビューをカスタマイズしたい場合

以下のコマンドを入力

$ rails g devise:views users

生成されたファイルを編集することでカスタマイズできます。

コントローラーの作成

$ rails g devise:controllers users

deviseにはモジュールが定義されており、メール認証などの機能も実装可能です。

簡単に機能の実装ができるので、その分しっかりと意味を理解しないといけないかもしれないですね。

2020-01-31

正規表現

今回は、正規表現についてです。

私自身も理解できていない部分が多いので調べたことを記事にしたいと思います。

[正規表現とは]

文字列の集合を一つの文字列で表現する方法の一つです。

[基本的な正規表現]

文字	説明
・	任意の文字にマッチします。
＋	直前の文字が1回以上繰り返す場合にマッチします。最長一致。
＊	直前の文字が0回以上繰り返す場合にマッチします。最長一致。
？	直前の文字が0個か1個の場合にマッチします。最長一致。
＋？	直前の文字が1回以上繰り返す場合にマッチします。最短一致。
＊？	直前の文字が0回以上繰り返す場合にマッチします。最短一致。
？？	直前の文字が0個か1個の場合にマッチします。最短一致。
｜	いずれかの条件（OR条件）として使われます。
＼	直後の正規表現をエスケープします。
[...]	角括弧に含まれるいずれか1文字にマッチします。
[^...]	角括弧に含まれる文字以外にマッチします。
(...)	文字を1つのグループにまとめることができます。
{n}	直前の文字の桁数を指定できます。
{n,}	直前の文字の最小桁数のみ指定できます。
{n,m}	直前の文字の最小桁数と最大桁数を指定できます。最長一致。
{n,m}?	直前の文字の最小桁数と最大桁数を指定できます。最短一致。

[定義済みの正規表現]

文字	説明
\t	タブ
\r	改行。CR
\n	改行。LF
\d	全ての数字。
\D	全ての数字以外の文字。
\s	垂直タブ以外の全ての空白文字。
\S	全ての非空白文字。
\w	アルファベット、アンダーバー、数字。
\W	アルファベット、アンダーバー、数字以外の文字。

[特定の位置関係の正規表現]

文字	説明
^	直後の文字が行の先頭にある場合にマッチします。
$	直後の文字が行の末尾にある場合にマッチします。
\<	単語の先頭にマッチします。
\>	単語の末尾にマッチします。
\b	単語の先頭か末尾にマッチします。
\B	単語の先頭か末尾以外にマッチします。
\A	ファイルの先頭にマッチします。
\z	ファイルの末尾にマッチします。
\G	直前の一致文字列の末尾にマッチします。

[置換文字列で使える正規表現]

文字	説明
\0	一致した文字列全体に置換します。
\1 〜 \9	一致した文字列の1〜9番目に対応する文字列に置換します。
\l	次の1文字を小文字に変換します。
\L ... \E	挟まれた文字列を小文字に変換します。
\u	次の1文字を大文字に変換します。
\U ... \E	挟まれた文字列を大文字に変換します。

参考にして頂けたら幸いです。

2020-01-28

Rubyにおける「シンボル」

今回は、シンボルについてです。

Rubyにおける「シンボル」とは何なのか？

公式ドキュメントでは次のように説明されています。

　シンボルを表すクラス。シンボルは任意の文字列と一対一に対応するオブジェクトです。文字列の代わりに用いることもできますが、必ずしも文字列と同じ振る舞いをするわけではありません。同じシンボルは必ず同一のオブジェクトです。

文章を読んでもいまいち理解できません。

シンボルと文字列は見た目にはよく似ています。

ですが、両者は基本的に別物です。

シンボルは次のようにコロン( : )に続けて任意の名前を定義します(シンボルリテラル)。

：シンボルの名前

[シンボルと文字列の違い]

シンボルは、Symboljクラスのオブジェクト

文字列は、Stringクラスのオブジェクト

シンボルの特徴

シンボルはRubyの内部で整数として管理されます。表面的には文字列と同じように見えますが、その中身は整数です。そのため、2つの値が同じかどうか調べる場合、文字列よりも高速に処理できます。

次に、シンボルは「同じシンボルであれば全く同じオブジェクトである」という特徴があります。このため、「大量の同じ文字列」と「大量の同じシンボル」を作成した場合、シンボルの方がメモリの使用効率がよくなります。

シンボルの特徴をまとめると次のようになります。

表面上は文字列っぽいので、プログラマにとって理解しやすい
内部的には整数なので、コンピューターは高速に値を比較できる
同じシンボルは同じオブジェクトであるため、メモリの使用効率が良い
イミュータブルなので、勝手に値が変えられる心配がない

シンボルがよく使われるのは、ソースコード上では名前を識別できるようにしたいが、その名前が必ずしも文字列である必要はない場合です。

代表的な利用例はハッシュのキーです。ハッシュのキーにシンボルを使うと、文字列よりも高速に値を取り出すことができます。

他にも、オブジェクトが持っているメソッド名がシンボルで管理されたりします。

シンボルは登場する機会が多いので、Rubyがどういう用途でシンボルを使っているのか注目してみるのもいいかもしれません。

2020-01-26

HTML/CSS基礎知識

今回は、HTMLとCSSの基礎についてです。

まずは、HTML/CSSのファイルを用意します。

[HTML]

f:id:hide_engineer:20200126113812p:plain — HTMLファイル

[head要素とbody要素]

HTMLは基本的に２つの要素に分かれています。

head要素

ウェブサイトの基本情報などを記載する部分です。ブラウザ上には表示されません。

この記述によって、対応するCSSファイルを指定することができます。

hrefには、実際のファイル名を記述します。

body要素

画面上に表示したい情報を記載するところです。要素はタグに囲まれて表現されます。

タグ

HTMLにおける要素のかたまりを示す記述です。

<!DOCTYPE html>

この文章がHTML文章であることを宣言する要素です。閉じタグはありません。この要素を記述してないと、レイアウトが崩れたり、表示がされない場合があります。HTMLを書く際に必ず記載するものです。

<html>...</html>

HTML文章の始まりと終わりを示す要素です。HTMLを書く際に必ず記載するものです。

<head>...</head>

ウェブサイトの情報を記述する部分です。

<meta>

文章に関する情報を指定する時に使用します。閉じタグは必要ありません。charset="UTF-8"は文字コードを指定するもので、この記述がないと文字化けしてしまいます。

<title>...</title>

ウェブサイトのタイトルを記述するところです。ここにタイトルを記述してもウェブサイトの画面上には表示されません。ブラウザのタブに表示するタイトルとして使用されます。

f:id:hide_engineer:20200126162350p:plain — body要素

<h1>...</h1>

文章の見出しを指定するものです。見出しと判断されて文字が太く大きく表示されます。

ブロックレベル要素です。

<p>...</p>

文章の段落を表すものです。ひとかたまりの文章として認識されます。

ブロックレベル要素です。

<b>...</b>

文字を太くするための要素です。囲まれている部分だけ太文字になります。

インライン要素です。

[CSS]

CSSを使って　HTML文章を装飾していく上で基本になるのは、「セレクタ」です。セレクタは「CSSを適用したいHTML要素を選択するため」のものです。

セレクタ

セレクタの構造は、セレクタ/プロパティ/値からになっています。

f:id:hide_engineer:20200126200505p:plain — HTMLファイル

f:id:hide_engineer:20200126200529p:plain — CSSファイル

class属性

HTML要素に対して個別に名前を付けることができる機能です。

classセレクタ

HTMLで指定したclass名をセレクタとして使用することができます。

classセレクタを指定する場合は、.クラス名のような形で指定します。

id属性

class属性同様、HTML要素に対して個別に名前を付けることができる機能です。

idセレクタ

HTMLで指定したid名をセレクタとして使用することができます。

idセレクタを指定する場合は、#id名のような形で指定します。

[classとidの違い]

class

同じclass名のものを複数回使用できる
一般的なセレクタとして使用できる

同じid名のものは複数回使用できない
ある特徴的な部分などに使用する

f:id:hide_engineer:20200126202710p:plain — HTML/CSS

ブラウザで確認すると、上記のように表示されます。

HTML/CSSは奥が深いです。

実際に使いながら理解していくのが良さそうです。

2020-01-24

RGBカラー変換プログラムの作成　Ruby

今回は、RGB変換プログラムを作成していきます。

テストコードも同時に作成していきます。

📁ruby/

　📁 lib/

　　🗂rgb.rb

　📁 test/

　　🗂rgb_test.rb

RGBカラーとは、1つの色を表すためにRed、Green、Blue

R＝90、G＝35、B＝100のように10進数の整数で表現することもあれば、"#5a2364"のように2桁の16進数を3つ並べた文字列で表現されることもあります。

[RGB変換プログラムの仕様]

10進数を16進数に変換するto_hexメソッドと、16進数を10進数に変換するto_intsメソッドの2つを定義する。
to_hexメソッドは3つの整数を受け取り、それぞれを16進数に変換した文字列を返す。文字列の先頭には"#"を付ける。
to_intsメソッドはRGBカラーを表す16進数を受け取り、R、G、Bのそれぞれを10進数の整数に変換した値を配列として返す。

to_hexメソッドとto_intsメソッドの実行例

f:id:hide_engineer:20200123101433p:plain — to_hexメソッドとto_intsメソッドの実行例

[to_hexメソッドを作成]

rgb_test.rbに次のようなコードを書きます。

f:id:hide_engineer:20200123103312p:plain — rgb_test.rb

rgb.rbに次のようなコードを書きます。

rgb.rb
テストを実行し、ちゃんとパスするか確認します。

これでto_hexメソッドは完成・・・と言いたいところですが、rgb.rbのコードを見てみると、to_s(16).rjust(2, '0')が3回使われていますね。

と言うことで、リファクタリングしましょう！

r、g、bの各値を配列に入れて繰り返し処理する形に直してみます。

f:id:hide_engineer:20200123105603p:plain — rgb.rb (リファクタリング後)

上のコードでは、[r, g, b]というように引数として渡された各値を配列に入れたあと、eachメソッドを使って繰り返し処理しています。eachメソッドの内部では数値を16進数に変換した文字列を、ブロックの外で作成したhex変数に連結しています。そして最後に変数hexをメソッドの戻り値として返却しています。

これで、リファクタリング終わり！・・・ではありません。

injectメソッドを使うとさらに短くできます。