正規表現

プロを目指す人のためのRuby入門を読みながら正規表現について学習しました💡
ここには本を読むにあたり参考になったサイトやメモを記録しておきます！

１．メモ

• / /で囲まれた範囲が正規表現（Regexpクラスのインスタンス）になる。
• / /gというふうに最後にg（グローバルオプション）がついたら、一致する文字列をすべて抽出する。つかない場合は最初の1件見つかったら検索終了です🙂
  

• 以下の表は、参考サイトに出てきた正規表現の一例です！
  

  正規表現	意味
  \d	1個の半角数字(0~9)
  [AB]	AまたはBのいずれか1文字 ※[ ]内は文字数制限がなく、[ABC]ならAまたはBまたはCのいずれか1文字という意味になる。 [ ] の最初に ^ が入ると否定の意味になる。
  ?	直前の文字が1文字、または無し（量指定子）
  .	任意の1文字
  +	直前の文字が1文字以上（量指定子）
  *	直前の文字が0文字以上（量指定子）
  \w	英単語を構成する文字 [a-zA-Z0-9_]（半角英数字とアンダースコア1文字）
  ^	行頭（アンカー）
  $	末尾（アンカー）
  \t	タブ文字
  \s	半角スペース、タブ文字、改行文字など目に見えない空白文字全般
  |	OR条件 ※ABC|DEFで「文字列ABC、または文字列DEF」という意味。 (ABC|DEF) のように ( ) と一緒に使われることが多い。
  \b	単語の境界（アンカー） ※\bear\b で、ear という英単語だけを検索できる

• 文字の個数を限定するときは量指定子と呼ばれるメタ文字を使う。

  • {n,m} ：直前の文字が n 個以上、m 個以下
  • {n} ：ちょうど n 文字

  例えば国内の電話番号なら、XX-XXXX-XXXX,XXX-XXX_XXXX,XXXX-XX-XXXXの3パターンと、携帯電話のXXX-XXXX-XXXXのパターンがあります。
  文字にすると、半角数字が2個～4個、ハイフン、半角数字が2個～4個、ハイフン、半角数字が4個になります。
  これを正規表現にすると、\d{2,4}-\d{2,4}-\d{4}になります🎉
  

２．参考サイト

初心者歓迎！手と目で覚える正規表現入門・その１「さまざまな形式の電話番号を検索しよう」 - Qiita

初心者歓迎！手と目で覚える正規表現入門・その２「微妙な違いを許容しつつ置換しよう」 - Qiita

初心者歓迎！手と目で覚える正規表現入門・その３「空白文字を自由自在に操ろう」 - Qiita

初心者歓迎！手と目で覚える正規表現入門・その４（最終回）「中級者テクニックをマスターしよう」 - Qiita

正規表現に該当する箇所を目で確認できるサイト

rubular.com

REST

本日はWebアプリケーション開発にあたって必要な知識のひとつであるRESTについて学習します！

目次

１．RESTとは

REST（REpresentational State Transfer）とは、Webサービスの設計モデルです。
RESTはリソース（ブログ記事や写真などのコンテンツ）を扱うための考え方であり、RESTなWebサービスは、そのサービスのURIにHTTPメソッドでアクセスすることでデータの送受信を行います。
URIとは、Uniform Resource Identifierの略で、名前または場所を識別する書き方のルールの総称をいいます。今はとりあえずURL（Uniform Resource Locator）の親カテゴリだというイメージで良さそうです！👶

２．RESTful

2-1. RESTの設計原則

RESTは設計に際し、以下の項目を設計原則とするように提言されています。
また、これらの原則に則ったWebサービスのことをRESTfulなサービスといいます。

• アドレス可能性（Addressability）
• ステートレス性（Stateless）
• 接続性（Connectability）
• 統一インターフェース（Uniform Interface）

2-2. アドレス可能性（Addressability）

ひとつめの原則は、アドレス指定可能な URI で公開されていることです。
提供する全ての情報は URI で表現される一意なアドレスを持ちます😎
例えばウェザーニュースの東京都の天気予報は、以下のURLからアクセスできます。

https://weathernews.jp/s/forecast/?area=TOKYO

URLをよく見ると、トップページからディレクトリ構成のような形で、東京都の天気予報を示していることがわかります。

2-3. ステートレス性（Stateless）

ステートレスであることというのは、セッション等の状態管理をしないで、やりとりされる情報はそれ自体で完結して解釈できることです。
リクエストに処理に必要な情報を全て含み、自己完結することです。
反対語はステートフルです。

ステートフルな会話の例（回答者が前回までの流れを記憶してる）

質問者　天気はどうですか。
回答者　いつの天気ですか。
質問者　明日です。
回答者　どこの天気ですか。
質問者　東京です。
回答者　晴れです。

ステートレスな会話の例（回答者は記憶しないため毎回完結する）

質問者　天気はどうですか。
回答者　いつの天気ですか。
質問者　明日の天気です。
回答者　どこの天気ですか。
質問者　明日の東京の天気です。
回答者　晴れです。

2-4. 接続性（Connectability）

接続性とは、情報の内部に別の情報やその情報へのリンクを含めることができることです🚗
サーバは、ハイパーメディア（ハイパーテキスト表現内のリンクとフォーム）を提供することにより、クライアントのパスを導きます。

2-5. 統一インターフェース（Uniform Interface）

これは、インターフェース（HTTPメソッドの利用）の統一がされていることです。 情報の操作は全てHTTPメソッド（GET、POST、PUT、DELETE）を利用することです😊

RESTの概要についてはこんなところです！

Railsでi18n

本日はRailsの国際化に使う i18n についてです！

目次

１．i18nとは

i18n とは、Railsのアプリケーションを多言語化してくれるものです。
internationalization（国際化・多言語化）を短縮して、iから始まって18文字挟んでnで終わることからi18nという表記になっています💡

２．書き方

ja.ymlを作成するには様々な方法があります。どれがスタンダードとかはわからないですが笑

• 自分で1から書く
• Github（svenfuchs/rails-i18n）から持ってくる
• i18n_generatorsという gem をインストールし、コンソールで$ rails g i18n jaを実行する

参考サイト

• Scaffoldとi18nを使用し簡単なアプリを作る手順
• Rails 3.2 i18n_generators メモ

３．書き方

ja.ymlの書き方（文法）は以下のとおりです。

• model

ja:
activerecord:
models:
  user: ユーザー             # モデル名
attributes:
  user:                      # モデル名
    name: 名前               # モデルの属性名 
    password: パスワード     # モデルの属性名 

• view

ja:
  user:        # コントローラ名
    index:     # アクション名
      title: ユーザー一覧　★
    show:      # アクション名
      title: ユーザーの詳細

View側（erbファイル）のほうでは、多言語化したい箇所は以下のような書き方になります。
index.html.erbを例にとると、上記の★を使いたい箇所にt('.title')と書きます😊

参考サイト

• I18nを使ってみるよ！
• [Rails3] 国際化 I18n のまとめ（その３：辞書ファイルの使い方）

Railsの教科書

いよいよ Ruby on Rails に入ります！！
テキストはRailsの教科書を使います。
とはいっても勉強会で rails のサーバを立ち上げるところまでは学習済みなので、そのあたりは割愛します🙇‍♀️

目次

１．Railsの動き

リクエストを受けたRailsアプリは、Routes → Controller → View の流れで処理を行い、レスポンスとしてHTMLを生成して返します。

ファイル	処理
Routes	リクエスト（URLとHTTPメソッド）に応じて、処理を行う先の Controller とアクションを決める対応表
Controller	処理を行って View に渡す(Ruby)
View	Webページの見た目(HTML, ERBなど)

サーバを起動した状態でhttp://localhost:3000/rails/info/routesにアクセスすると、Routesの対応表を見ることができます！

２．Webページの基本機能（CRUD）

Webページの基本機能といわれるCRUDとは、ページの新規作成（Create）、表示（Read）、更新（Update）、削除（Destroy）を指します🙂

３．renderメソッド

renderメソッドとは、viewファイルに別のviewファイルを埋め込むためのメソッドです。
埋め込む用のviewファイルをパーシャルといいます💡

<%= render 埋め込みたいファイル名, パーシャル内で使う変数名: 渡す変数 %>

パーシャルを埋め込む先のファイル名は、renderで書いた文字列の先頭に/_を付けたものになります。

• render記載：<%= render 'form', var: @var %>
• ファイル名：_form.html.erb

４．rails console

Railsにはrails consoleという機能があります。
Ruby でいう irb のように、1行ずつコードを実行することができます！
開始したいときはターミナルでrails cと入力し、終了したいときはexitです💪

短いですが今回は以上です💡

Sinatra でメモアプリ

Sinatra で簡単なメモアプリを作成しました！
課題なのでソースコードは載せられませんが💦💦

目次

１．成果

1-1. スクリーンショット

1-2. 機能

メモを新規作成・閲覧・編集・削除ができます。
トップページにはメモのタイトル一覧が表示されます。（更新順）
メモのタイトルが未入力の場合、自動的にNOTITLEというタイトルになります。

1-3. 構成

データベースを使わず、メモをtxtファイルにして保存する仕組みにしました！
ファイル名にはタイムスタンプを使い、メモごとに固有のファイル名がつくようにしました。
※ファイル名（タイムスタンプ.txt）と、トップページに表示されるメモのタイトルは別物
ディレクトリ構成は以下のとおりです。

memo_app/
-main.rb
-views/
    -top.erb
    -new.erb
    -show.erb
    -edit.erb
-public/
    -style.css
    -favicon.ico
-Gemfile
-Gemfile.lock
-.gitignore

２．学んだこと

2-1. Webアプリの構造

初めてWebアプリを作ったのですが、とっても難しかったです！！😂
Ruby や HTML など個別に基礎をわかっていても、複合的になって難易度がぐっと上がりました。
というかわからないことが多すぎて何がわからないかわからない状態…💀💀
先述のディレクトリ構成についてもそうですが、Web アプリの構造の部分が見えてきたら、自分で考えながら修正したりできるようになりました。

2-2. Methodoverride

HTMLで使えるHTTPメソッドは GET と POST だけみたいです。
PATCH（更新）とDELETE（削除）を使うには Methodoverride というものを使いました💪

使用方法（PATCHの例）
１．main.rbに以下の一文を追加

enable :method_override

※4/22追記：デフォルトで enable のため書かなくても良い

２．erb内のPATCHを使いたいフォームを以下のように作成

<form action="/(場所指定)" method="POST">
<input type="hidden" name="_method" value="PATCH">

2-3. TwitterBootstrap

シンプルとはいえ見た目を少しは綺麗にしたかったので、TwitterBootstrapを導入しました！

getbootstrap.com

これを使うとStylesheetファイルを作らなくても、HTMLの class に専用の名前を指定するだけでとても簡単に綺麗なものができます。
詳しくはドットインストールで無料で体験できます😊
Bootstrapの機能以外に細かく指定したいことがあれば、別途CSSファイルを作って読み込むという形にしました。

2-4. favicon

favicon.ico というものを作らないとサーバ側でエラーが出てしまうので、作りました。
作るといってもフリー素材のアイコンをダウンロードしてpublicディレクトリに置き、 ビュー（ERB）のheadタグ内に以下の一文を書くだけです👏超簡単！

<link rel="shortcut icon" href="favicon.ico">

2-5. その他困ったときの解決法

単一のRubyファイルと違って複数のファイルを編集しているため、Webで表示したいものが表示されないときなど、どこが原因か突き止めるのが最初はとても難しかったです。
そこだけ抜粋して動作確認というのもできない場合もありました😅 そんなとき、以下の確認をとるとなんとなく原因が思い当たるようになりました。

• サーバのログを読む main.rb で puts メソッドを使うとサーバ側コンソールに表示されます。
• エラーページを最後まで読む GET まではうまくいってるみたいだなーなんてことがたまにわかりました。
• Chromeの左クリックでページのソースコードを読む ERBで書いたはずのことがちゃんと反映されてないことに気づけました。

SinatraでWebの基本を学ぶ

今回は Sinatra を使って Web の基本を学びます！
Ruby on Rails は機能が多いので、Sinatra からのほうが入りやすいそうです。

目次

１．Sinatraインストール

まず Sinatra をインストールをします。

$ gem install sinatra

同様に、関連 gem もインストールしておきます。

$ gem install sinatra-contrib
$ gem install activerecord

私は既にインストール済みですが、sqlite3を未インストールの場合ここでインストールしておいたほうが良さそうです😐

２．ディレクトリの作成

ここからは以下のサイトを参考に進めていきます！

qiita.com

まずディレクトリを作成します。ここではディレクトリ名はsinatra_sampleとします。
作成したディレクトリに移動して、bundle initを実行します。これにより bundler が使えるようになり、Gemfileというファイルが作成されます💡

Gemfile内には既に数行書かれていますが、以下の1文を追加します。

gem 'sinatra'

続いてgemのインストールを行います💪

３．アプリケーションの作成と起動

試しにRubyファイルを作成します。ファイル名はapp.rbにします。
中身は以下のように書きます✍️

書けたら、bundler で実行します。
bundle exec ruby app.rbとなります！


この状態でlocalhost:4567に接続すると、helloという文字が現れます✨
ローカルホストなのでブログリンクから飛んでも表示されませんが💦
こんなふうになります。

４．sinatra reloader

app.rbの内容を変更してブラウザを再読み込みしても、変更が反映されません。
変更を反映するには、sinatraを再起動する必要があります。
そこで再起動を簡単にするために、 sinatra reloader をインストールします！ まず起動中のアプリを閉じ、Gemfileに以下を追加します。

gem 'sinatra-contrib'

追加したら先程と同じく$ bundle installを実行します。
次にapp.rbを編集します。

再びbundle exec ruby app.rbを実行すると、localhost:4567は以下の画面になります！

今後はブラウザの再読み込みで変更が反映されます🎉

５．動かしてみる

先程のapp.rbのコードに3行追加します。path/toとか書いてあるあたりです。
ルーティングを追加しています。


この状態だと、localhost:4567/path/toが以下のように表示されます🙂

次に、静的ファイルを追加します。
ルートディレクトリ配下にpublicディレクトリを作成します。
その中にthis is html file.と書かれたtest.htmlファイルを作成します。


この状態でlocalhost:4567/test.htmlを開くと以下のようになっています👀

更にapp.rbに3行追加します。


この場合、*がワイルドカードで任意の文字列が入ります。
なのでlocalhost:4567/hello/sayakaにアクセスすると、以下のようになります！

sayaka を別の名前にしても同様です。

次はビューを使ってみます。
app.rbにまた3行追加します。見づらくなってきたので、行番号を表示しました😊
16〜18行目のところです。

追加できたら、今度はディレクトリとファイルを作成します。
ディレクトリはviewsで、ファイルはerb_template_page.erbです💡💡
erb_template_page.erbの中身は以下の1行です。


この状態で、localhost:4567/erb_template_pageにアクセスすると、現在時刻が表示されます！

続いて、redcarpet という、Markdownに対応させる gem を対応させます。
Gemfileに1行追加し、$ bundle installを実行します。

gem 'redcarpet'

app.rbに3行追加します。対象箇所だけ抜粋します。


またviewsディレクトリの中にファイルを作成します。 名前はmarkdown_template_page.markdownです。
中身は以下のとおりです😎😎


これでlocalhost:4567/markdown_template_pageを見ると、以下のようになります。

Markdown の見出し#が反映されているようですね👏

先程の erb と markdown を組み合わせてみます。
※ここからリンク先サイトとは少し違います。たぶんリンク先サイトに誤りがあります。
app.rbに以下の3行を追加します。


viewsディレクトリの中にファイルを2つ作成します。
ひとつめはerb_and_md_template_page.erbで、中身は以下のとおりです🙂


ふたつめは同名のmarkdownファイルで、中身は以下のとおりです。

これでlocalhost:4567/erb_and_md_template_pageを見ると、以下のようになっています🎉🎉🎉

Sinatraの基本は以上です！

vimの基本コマンドおさらい

vimについて復習をしたので、まとめです！

目次

１．移動

コマンド	動作
i	挿入モードに切り替え
:	コマンドモードに切り替え
v	ビジュアルモードに切り替え
escキー	ノーマルモードに切り替え
l	カーソルをひとつ右へ
j	カーソルをひとつ下へ
h	カーソルをひとつ左へ
k	カーソルをひとつ上へ
G	一番最後の行に進む
gg	一番始めの行に戻る
ctrl + f	画面単位で下に進む
ctrl + b	画面単位で後ろ上に戻る
w	単語単位で下に進む
b	単語単位で後ろ上に戻る
$	行末へ進む
^	行頭へ戻る
f 文字	文字のところまで進む ;で次にジャンプ
%	対応する括弧までジャンプ

２．基本操作

コマンド	動作
x	1文字カット
dd	1行カット 3ddなら3行カット
p	貼り付け |
yy	1行コピー 3yyなら3行コピー
u	undo（一つ戻る）
ctrl + r	redo（undoの取り消し）
.（ピリオド）	直前のコマンドを実行
:e ファイル名	別のファイルを開く
=	インデントを揃える
ctrl + n	変数名、関数名を補完
ctrl+v	矩形選択

３．検索、置換

コマンド	動作
/検索語	検索語を検索
n	下方向に検索
N	上方向に検索
*	カーソル位置の単語を下方向に検索
#	カーソル位置の単語を上方向に検索
:s/置換前/置換後	1箇所の単語を置換
:s/置換前/置換後/g	行内の単語を置換
:%s/置換前/置換後/g	全体で単語を置換
:%s/置換前/置換後/gc	確認しながら全体置換

４．ウインドウ、タブ分割

コマンド	動作
:sp	上下にウインドウ分割
ctrl+w+w+...	別のウインドウへ移動
:vp	左右にウインドウ分割
:close	ウインドウを閉じる
:tabnew	新しいタブを開く
:tabe ファイル名	新しいタブで開く
gt	タブの切替
:tabclose	タブを閉じる
$ vim -p ファイル名 ファイル名 ※ターミナル操作	vim起動時からタブで開く

５．応用

コマンド	動作
gg + V + G + =	全選択でインデントを揃える
:tabdo %s/置換前/置換後	全てのタブで置換
cit	テキストを消して挿入モードにする ※解説 c/d/y 中身を削除して変更（change / delete & insert） i/a 中身か全体か t/"/)/] タグかクオーテーションか括弧か、など

６．便利な設定

コマンド	動作
:set number	行番号表示
:set nonumber	行番号非表示
:syntax on/off	コード色分けon/off
:set tabstop=4	tabキーのインデント文字数を設定
:set ignorecase	大文字小文字の区別をしない
:set noignorecase	大文字小文字の区別をする