アラフォーからのプログラミングとデザイン

大人から始めたプログラミングとデザインについてのあれこれ

Railsチュートリアル復習中:アセットパイプライン

f:id:simpledancer:20171218162611p:plain

footerを追加しました。

どうも単語だけが一人歩きしている感が否めない(私の中で)

アセットパイプラインについて今日は調べながら進めていきたいと思います。

すごく完結に書かれている記事がありました。

www.transnet.ne.jp

Ruby on Railsにはアセットパイプラインという機能が実装されています。その役割をひと言で説明すると、Web画面上の色塗りを楽にする機能です。

 比喩として”色塗り”と言っていますが、具体的にはWebブラウザに画面のデザインを認識させるためにHTMLに紐付くCSSやJavaScript、Imageファイルを記述・作成することです。

 

 アセットパイプラインとはWebの画面上の色塗り(CSSやJavaScript、Imageファイルを記述・作成)を楽にする機能ということですね!

アセットパイプライン・3つの主要な機能

アセットディレクトリ

 Railsのアセットパイプラインでは、静的ファイルを目的別に分類する、標準的な3つのディレクトリが使われています。

app/assets: 現在のアプリケーション固有のアセット

lib/assets: あなたの開発チームによって作成されたライブラリ用のアセット

vendor/assets: サードパーティのアセット

 マニフェストファイル

静的ファイル (アセット) を上記の場所へそれぞれ配置すれば、マニフェストファイルを使って、それらをどのように1つのファイルにまとめるのかをRailsに指示することができます。なお、実際にアセットをまとめる処理を行うのはSprocketsというgemです。また、マニフェストファイルはCSSとJavaScriptには適用されますが、画像ファイルには適用されません。 

 プリプロセッサエンジン

必要なアセットをディレクトリに配置してまとめた後、Railsはさまざまなプリプロセッサエンジンを介してそれらを実行し、ブラウザに配信できるようにそれらをマニフェストファイルを用いて結合し、サイトテンプレート用に準備します。Railsはどのプリプロセッサを使うのかを、ファイル名の拡張子を使って判断します。最も一般的な拡張子は、Sass用の.scss、CoffeeScript用の.coffee、埋め込みRuby (ERb) 用の.erbです。 

 

railsguides.jp

いやー、読んでるだけでは結構意味不明で眠たくなってきました。なのでコードを書きながら理解していこうと思います。

ただ、前になんとなくザーッとやっていた時よりも

コードを書きながら説明を読みながらじっくりやっていくとちょっとずつではありますが紐解けてきた部分もあるのかな。。

言語化するのが難しいです。

 

続きます。

 

 

Railsチュートリアル復習中:Bootstrapの読み込み

f:id:simpledancer:20171217160937p:plain

今日もデザインの部分です。

Bootstrapについて少し触れていきます。

Udemyで今年最大のセール実施中。対象のオンラインコースが全て¥1200!学ぶなら今!

Bootstrap

Bootstrap - Wikipedia

BootstrapウェブサイトWebアプリケーションを作成するフロントエンドWebアプリケーションフレームワークである。 タイポグラフィフォームボタンナビゲーション、その他構成要素やJavaScript用拡張などがHTML及びCSSベースのデザインテンプレートとして用意されている。

まずはgemfileに

gem 'bootstrap-sass', '3.3.7'

を追加します。

f:id:simpledancer:20171217161754p:plain

 そして$ bundle install してBootstrapを読み込みます。

 

カスタムCSSファイルを作るためにコマンドに

$ touch app/assets/stylesheets/custom.scss を打ち込んでファイルを作ります。

ファイル内に

@import "bootstrap-sprockets";
@import "bootstrap";

を記述。

 サーバーを起動させると前回はこれ↓

f:id:simpledancer:20171216134138p:plain

 からの↓

f:id:simpledancer:20171217162959p:plain

とBootstrapを読み込むだけでずいぶんサイトらしくなりました。

CSSファイルは最終的にこういう感じ。↓

 

@import "bootstrap-sprockets";
@import "bootstrap";
/* universal */

body {
padding-top: 60px;
}

section {
overflow: auto;
}

textarea {
resize: vertical;
}

.center {
text-align: center;
}

.center h1 {
margin-bottom: 10px;
}
/* universal */

body {
padding-top: 60px;
}

section {
overflow: auto;
}

textarea {
resize: vertical;
}

.center {
text-align: center;
}

.center h1 {
margin-bottom: 10px;
}
/* header */

#logo {
float: left;
margin-right: 10px;
font-size: 1.7em;
color: #fff;
text-transform: uppercase;
letter-spacing: -1px;
padding-top: 9px;
font-weight: bold;
}

#logo:hover {
color: #fff;
text-decoration: none;
}

f:id:simpledancer:20171217163955p:plain

ロゴを設定しボタンを中央寄せになりました。

参考

Bootstrap 3 Tutorial

getbootstrap.com

今日は短いけど、これだけ!(出先でwifiの電池がやばい)

 

Railsチュートリアル復習中:サイトのデザインを整えていく

f:id:simpledancer:20171216134138p:plain

今でやっと真ん中くらいまできたかな?今日はUIの部分のところです。

ビットコインについても調べたい今日この頃ですが、とりあえずRailsチュートリアル復習日記を続けます。

HTML5

 RailsはデフォルトでHTML5を使います (と書いてHTML5であることを宣言します)。ただHTML5は比較的新しく、一部のブラウザ (特に旧式のInternet Explorer) ではHTML5のサポートが不完全である場合があります。そのため、次のようなJavaScriptのコード (通称: HTML5 shim (or shiv))3を使ってこの問題を回避します。

他のコードはとりあえず置いておいて、まずはこれ

<!--[if lt IE 9]>

  <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js">

  </script>

<![endif]-->

<!--[if It IE 9]>は Microsoft Internet Explorer (IE) のバージョンが9より小さい場合 (if lt IE 9) にのみ、囲まれている行を実行します。

 Firefox、Chrome、Safariなどの他のブラウザに影響を与えずに、IEのバージョンが9未満の場合にのみHTML5 を読み込める

mayonez.jp

改めてHTML5を勉強するときの参考に。

埋め込みRuby

simpledancer.hatenablog.com

link_toヘルパー

リンクの生成のためにRailsヘルパー link toを使います。

link_toの第1引数はリンクテキスト第2引数はURL。 

<li><%= link_to "Home", '#' %></li>
<li><%= link_to "Help", '#' %></li>
<li><%= link_to "Log in", '#' %></li>

※今はリンク先はとりあえず# に置いている。

Bootstrapのcssを追加するとこれらのコードが

Railsが埋め込みRubyを評価しレイアウトを描画すると次にように置きかわる(上のコードはul class~のところ省略してる)

 <ul class="nav navbar-nav navbar-right">
    <li><a href="#">Home</a></li>
    <li><a href="#">Help</a></li>
    <li><a href="#">Log in</a></li>
  </ul>

 

 imagetagヘルパー

f:id:simpledancer:20171216141151p:plain

この画像をダウンロード!

それをassetsのimageフォルダに入れる。

コマンドで取得する場合は

$ curl -o app/assets/images/rails.png -OL railstutorial.jp/rails.png   で!

image_tagヘルパーを使うとRailsが該当する画像を探し出して(アセットパイプライン)くれる。

simpledancer.hatenablog.com

自分の理解用なのでちょっと省略しすぎかもしれません。。

とりあえずここまででざっくりとしたサイトのデザインが現れました。↓

 

f:id:simpledancer:20171216134138p:plain

時間がきてしまったので、続く!

simpledancer.hatenablog.com

 

Railsチュートリアル復習中:failuresの修正をする

f:id:simpledancer:20171215123502p:plain

今日は時間がなくてとりあえず進めていたところ、ターミナルにcommand not foundが続きすぎていろいろググったけど見つからない。

Pathを通してみたけどダメだし。bundle installもしてみたし。。。

時間が迫ってきたので一旦gitにpushして中断することにしました。

rails testしたら 1failuresと出た

0errorsだけど1failuresと出ました。

何か、もう時間ないんだけど。

よく見ると

f:id:simpledancer:20171215123840p:plain

<Ruby on Rails Sample App>と <Ruby on Rails Tutorial Sample App>のTutorialの文字が入っているか否か

と言う失敗のようでした。

controllerのファイルを開き修正をしました。

f:id:simpledancer:20171215124213p:plain

も一度rails testしてみました。

f:id:simpledancer:20171215124305p:plain

赤字が緑に変わり、failuresがなくなりました!

command not foundのところはまた明日やります。

そういえば以前自分でteratail に質問してたな。。。

simpledancer.hatenablog.com

 teratail は日本語で質問 できるので時々使います。

Railsチュートリアル復習中:配列について

f:id:simpledancer:20171214133013p:plain

Railsチュートリアル、今日は文法のところを立ち還りました。

ちなみに昨日通知がきていたのですがUdemy 人気のコースが安くなってました!

こちらは私も購入済み!:Rubyで作る! ビットコイン自動売買システム  

simpledancer.hatenablog.com

splitメソッド

 文字列を自然に変換した配列を得ることができる

>> "foo bar baz".split # 文字列を3つの要素を持つ配列に分割する

=> ["foo", "bar", "baz"]

※splitで文字列を区切って配列にするときにはデフォルトで空白が使われる

他の文字を指定して区切ることもできる。

>> "fooxbarxbazx".split('x')

=> ["foo", "bar", "baz"]

要素のアクセス

railstutorial.jp

配列の要素は0から始まります。配列の要素にアクセスするには[ ]を使う

>> a = [42, 8, 17]

=> [42, 8, 17]

>> a[0] # Rubyでは角カッコで配列にアクセスする

=> 42

>> a[1]

=> 8

>> a[2]

=> 17

>> a[-1] # 配列の添字はマイナスにもなれる!

=> 17 

その他比較演算子、メソッドも同じように使うことができる。

 >> a # 配列「a」の内容を確認する

=> [42, 8, 17]

>> a.last

=> 17

>> a.last == a[-1] # == を使って比較する

=> true

破壊的メソッド

配列の内容を変更したい場合は、そのメソッドに対応する「破壊的」メソッドを使います。破壊的メソッドの名前には、元のメソッドの末尾に「!」を追加したものを使うのがRubyの慣習です。

 >> a

=> [42, 8, 17]

>> a.sort! #ソートする

=> [8, 17, 42]

>> a

=> [8, 17, 42]

sort!メソッドは、配列の要素をソートします。レシーバ自身を変更するメソッドです。戻り値はレシーバ自身です。sortメソッドと同様に順序の比較には<=>演算子が使われます。

ref.xaio.jp

その他

  • pushメソッド(要素の追加)
  • joinメソッド(連結する)

範囲オブジェクト 

www.rubylife.jp

 >> 0..9

=> 0..9

>> 0..9.to_a # 9に対してto_aを呼んでしまっている

NoMethodError: undefined method `to_a' for 9:Fixnum

>> (0..9).to_a # 丸カッコを使い、範囲オブジェクトに対してto_aを呼びましょう

=> [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

 

配列の要素を取り出す

>> a = %w[foo bar baz quux] # %wを使って文字列の配列に変換

=> ["foo", "bar", "baz", "quux"]

>> a[0..2] #0番目から2番目の要素まで取り出す

=> ["foo", "bar", "baz"] 

-1を使うと、配列の長さを知らなくても配列の最後の要素を指定することができ、これにより配列を特定の開始位置の要素から最後の要素までを一度に選択することができます。 

 >> a = (0..9).to_a

=> [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

>> a[2..(a.length-1)] # 明示的に配列の長さを使って選択

=> [2, 3, 4, 5, 6, 7, 8, 9] >> a[2..-1] # 添字に-1を使って選択

=> [2, 3, 4, 5, 6, 7, 8, 9]

文字列の場合の範囲オブジェクト

 >> ('a'..'e').to_a

=> ["a", "b", "c", "d", "e"]

 

配列はRubyの文法を勉強し始めた時になんとなくこんな感じ〜といったように勉強してただけなので細かく見ていくと、あ、なんだそういうことだったのね、というメソッドがたくさんあるのに気づいたのでした。

simpledancer.hatenablog.com

 

 

Railsチュートリアル復習中:オブジェクトについて調べてみる。

f:id:simpledancer:20171213122936p:plain

canvaで描いてみた!

simpledancer.hatenablog.com

オブジェクトについて

オブジェクトと聞くと、ざわっとしてしまいます。

しかしなんでも正体を知ると怖くなくなる(はず)

なのでまずは

オブジェクトとは:Rubyでは、あらゆるものがオブジェクトです(←は??)文字列やnilですらオブジェクトです。

オブジェクトが何をするのか:オブジェクトとは (いついかなる場合にも) メッセージに応答するものです。

オブジェクト (プログラミング) - Wikipedia

よくわからなさMAXな説明です。

Railsチュートリアルでは lengthメソッド、emptyメソッドを使って説明しています。

legthメソッド

文字列の文字数を返すメソッドです。

f:id:simpledancer:20171213114118p:plain

 このように.lengthすることで6(文字)という値を返してくれます。

qiita.com

emptyメソッド

空の文字列や配列に対してtrueを返すメソッド。それ以外はfalseといった真偽値を返すメソッドです。

empty?メソッドの末尾にある疑問符にご注目ください。Rubyでは、メソッドがtrueまたはfalseという論理値 (boolean) を返すことを、末尾の疑問符で示す慣習があります。 論理値は、特に処理の流れを変更するときに有用です。

empty - リファレンス - - Railsドキュメント

shiro-16.hatenablog.com

techracho.bpsinc.jp

nilもオブジェクト

nilとは何も存在してない状態

Rubyの標準メソッド。nilの場合のみtrueを返し、それ以外はfalseを返す。nilとfalseを判別したい場合などに、==演算子を使わずに書ける。

そしてチュートリアルでは

Rubyにおいてnilは特別なオブジェクトです。Rubyのオブジェクトのうち、オブジェクトそのものの論理値がfalseになるのは、false自身とnilの2つしかありません。なお、「!!」(「バンバン (bang bang)」と読みます) という演算子を使うと、そのオブジェクトを2回否定することになるので、どんなオブジェクトも強制的に論理値に変換できます。 

ちなみにnilを.emptyするとNo methodErrorというエラーが帰ってきます。

f:id:simpledancer:20171213121310p:plain

nilオブジェクトはempty?メソッドには対応していません。ただし文字列に変えるto_sメソッドをnilに使うとempty?メソッドにtrueで答えます。

まとめ

チュートリアルだけを見ていると???が飛び交いますが、同時にいろんな記事や情報をググりながら進めていく方がいいと思いました。

チュートリアルは言い回しが難しいものが多いし簡潔では無いものが多いからです。

オブジェクトとは

1.アイデンティティを持っている
2.メッセージを受け取る
3.内部状態を持つ

オブジェクトとは自分が何者か知っていて、名前を持ち、メッセージを受け取ってなんらかの処理を施す、内部状態を持つとは、例えば,
Integerは大きさをもつ、Stringは長さをもち、Arrayは格納する箱を持つ具合に、、、

qiita.com

 

Railsチュートリアル復習中:ヘルパーについて

組み込みヘルパー

f:id:simpledancer:20171212213649p:plain

app/views/layouts/application.html.erbのファイル内のこの部分↑

ここではRailsの組み込み関数stylesheet_link_tag を使って、application.cssをすべてのメディアタイプを使えるようにしています (メディアタイプには、コンピュータの画面や印刷画面なども含まれます)。 

http://wa3.i-3-i.info/word1193.html

組み込み関数について解体してくださってるブログ↑

カスタムヘルパー

 Railsのビューでは膨大な数の組み込み関数が使えますが、それだけでなく、新しく作成することもできます。新しく作ったメソッドはカスタムヘルパー と呼ばれます。

f:id:simpledancer:20171212220450p:plain

 ページタイトルが正しく表示されない問題を解決するために、full_titleというヘルパーを作成することにします。full_titleヘルパーは、ページタイトルが定義されていない場合は基本タイトル「Ruby on Rails Tutorial Sample App」を返し、定義されている場合は基本タイトルに縦棒とページタイトルを追加して返します

 ヘルパーを作成するとよりシンプルなコードになります。

 <title><%= yield(:title) %> | Ruby on Rails Tutorial Sample App</title>

<title><%= full_title(yield(:title)) %></title>

になります。

 このヘルパーを定義することで、Homeページにこれまで表示されていた余分な「Home」という単語を表示せず、基本タイトルのみを正しく表示することもできるようになります。

あれ?

f:id:simpledancer:20171212222021p:plain

3failures,1errorsって出てます。

間違いなく進めたはずなのに。。。

と、testフォルダの更新ができていませんでした。

f:id:simpledancer:20171212222825p:plain

この後1failersが残りました。。なんだろう。

続く!

errorは消えました!

 

Railsチュートリアル復習中:Guardの自動化

f:id:simpledancer:20171211165209p:plain

引き続きチュートリアルです。

この辺り、全く記憶にないのできっと飛ばしてしまっていたんだと思います。

 rails testコマンドを使うとき、テストをしようとする度にエディタからコマンドラインに移動して、手動でコマンドを打ち込み、実行しなければならないという点が面倒ではありませんでしたか。この不便さを取り除くために、Guardを使ってテストを自動的に実行させるようにしてみましょう。Guardは、ファイルシステムの変更を監視し、例えばstatic_pages_test.rbファイルなどを変更すると自動的にテストを実行してくれるツールです。具体的には、「home.html.erbファイルが変更されたらstatic_pages_controller_test.rbを自動的に実行する」といったことをGuardで設定することができます。

simpledancer.hatenablog.com

 Guardの設定

guardのgemをすでにインストールされているのでそれを初期化する

$ bundle exec guard init 

そしてguardfileを編集します。

 

長くなるのでチュートリアルの3.45を参照

railstutorial.jp

 Guard使用時のSpringとGitの競合を防ぐには、.gitignoreファイルにspring/ディレクトリを追加

# Ignore Spring files.

/spring/*.pid 

Springのプロセスが起動したまま多数残留すると、テストのパフォーマンスが低下してしまうことがあります。テストの実行が異常に遅くなってきたと感じたら、プロセスをチェックし、必要に応じてSpringをkillするとよいでしょう 

 springについては前も書いたのでちょっと省略

simpledancer.hatenablog.com

新しいターミナルに

bundle exec guard

コマンドを実行。

Guardを終了する際もctrl+dで終了できます。

これでセットアップ終了。お疲れ様でした。

Railsチュートリアル復習中:埋め込みRuby

f:id:simpledancer:20171210200218p:plain

出張から帰ってきました。(新幹線の中では睡魔に負けてしまった!)

洗濯物を一通り済ませ、今日も勉強を続けます。

家だと寝てしまいそうなので近所のカフェでコードをぽちぽちしてたのだけれど今日は異様に眠いです。

どうやら運動はしてないけど移動って心身が変に疲れます。。

あくびが止まらん。。

今日はRailsチュートリアルで埋め込みRubyの所をやってます。

埋め込みRuby

コードの重複はRubyのDon't Repeat yourself の概念に反します。

別々のファイル内に重複するコードを一括で取り除きます。

まずRailsチュートリアルの流れに沿ってやっていきます。

Railsのprovideメソッドを使ってタイトルをページごとに変更します。 

<% provide(:title, "Home") %> 

 上のコードでは「<% ... %>」という記法が使われており、その中からRailsのprovideメソッドを呼び出しています。メソッドの引数では、"Home"という文字列と:titleというラベルを関連付けています。

そしてタイトルの部分では、上の記法と連携する「<%= ... %>」というよく似た記法を使い、その中でRubyのyieldメソッドを呼び出しています。このメソッドによって、テンプレートのその部分に実際のタイトルが挿入されます。

<title><%= yield(:title) %> | Ruby on Rails Tutorial Sample App</title>

 

 

2つのERBの違い

<%.....%>と書くと中のコードを実行するが出力されない。

<%= ......%>と等号を書くとテンプレートの部分に実行結果が表示される。

 

この2つのコードを前に作ったabout,help,homeページのhtml.erbのファイルに書きます。

今日は睡魔がやばいので一旦ここで止めます!

参考

www.rubylife.jp

www.sejuku.net

Railsチュートリアル復習中:テストを行う重要性

f:id:simpledancer:20171209142407p:plain

とりあえず順番通りに進めています。今日はテストのことについて。

 アプリケーションを開発しながらテストスイート (Test Suite) をみっちり作成しておけば、いざというときのセーフティネットにもなり、それ自体がアプリケーションのソースコードの「実行可能なドキュメント」にもなります。テストを作成するということは、その分コードを余分に書くことになりますが、正しく行えば、むしろテストがないときよりも確実に開発速度がアップします。テストが揃っていれば、バグを追うために余分な時間を使わずに済むためです。そんなふうにうまくいくとは信じられない人もいるかもしれませんが、一度でもテスト作成が上達すれば間違いなくこのとおりになります。だからこそ、テスト作成の習慣をできるだけ早いうちに身につけることが重要なのです。

 テストを行うメリット

確かにテストを行うのって余分にかかなきゃいけないしめんどくさいけれど。。

メリットがあるから行うわけです。

 1 テストが揃っていれば、機能停止に陥るような回帰バグ (Regression Bug: 以前のバグが再発したり機能の追加/変更に副作用が生じたりすること) を防止できる

2 テストが揃っていれば、コードを安全にリファクタリング (機能を変更せずにコードを改善すること) ができる。

3 テストコードは、アプリケーションコードから見ればクライアントとして動作するので、アプリケーションの設計やシステムの他の部分とのインターフェイスを決めるときにも役に立つ。

 テストを書くタイミング

 上の3つのメリットは、テストを先に書かなくても得ることができますが、それでもテスト駆動開発 (TDD) という手法をいつでも使えるようにしておけば、間違いなく多くの場面で役に立ちます。テストの手法やタイミングは、ある意味テストをどのぐらいすらすら書けるかで決まると言ってよいでしょう。たいていの開発者は、テストを書くのに慣れてくるとテストを先に書くようになります。その他にも、アプリケーションのコードと比べてテストがどのぐらい書きにくいか、必要な機能をどのぐらい正確に把握しているか、その機能が将来廃止される可能性がどのぐらいあるかによっても異なってくるでしょう。

ということですが 以下がテストを書くタイミングの基準的な。

  • アプリケーションのコードよりも明らかにテストコードの方が短くシンプルになる (=簡単に書ける) のであれば、「先に」書く
  • 動作の仕様がまだ固まりきっていない場合、アプリケーションのコードを先に書き、期待する動作を「後で」書く
  • セキュリティが重要な課題またはセキュリティ周りのエラーが発生した場合、テストを「先に」書く
  • バグを見つけたら、そのバグを再現するテストを「先に」書き、回帰バグを防ぐ体制を整えてから修正に取りかかる
  • すぐにまた変更しそうなコード (HTML構造の細部など) に対するテストは「後で」書く
  • リファクタリングするときは「先に」テストを書く。特に、エラーを起こしそうなコードや止まってしまいそうなコードを集中的にテストする  

 テストを行う

testディレクトリのなかにあるstatic_pages_controller_test.rbのファイルにaboutページのコードを書く

f:id:simpledancer:20171209143729p:plain

そしてターミナルに$ rails testと打ち込むと

NameError: undefined local variable or method `static_pages_about_url' for #

以下略

とでます。

 

Aboutページ見つからないエラー。

 

aboutページのコード書いてないからね。なのでルーティングファイルを修正します

get  'static_pages/about'

を追加します。

意味は 'static_pages/about'のURLのgetリクエストが来たらStaticPagesコントローラのaboutアクションに渡すようRailsに指示

static_pages_about_urlのヘルパーが使えるようになる。

 

次に同様にrails testするとまた違うエラーが出ます。

AbstractController::ActionNotFound: The action 'about' could not be found for StaticPagesController

なのでアクションが見つからないというエラーが出ます。

 

コントローラにaboutアクションを追加します

f:id:simpledancer:20171209145156p:plain

def about

end

と追加。

でrails testすると

StaticPagesControllerTest#test_should_get_about:
ActionController::UnknownFormat: StaticPagesController#about is missing a template for this request format and variant.

テンプレート(=view)がないですと出ます。

 app/views/static_pageディレクトリのなかにabout.html.erbというファイルを作ります

f:id:simpledancer:20171209145651p:plain

作った!

そして再びrails testします。

f:id:simpledancer:20171209145823p:plain

0errorsになりました!

そのあと実際に表示されるかサーバーを立ち上げて実行してみてテスト完了!

f:id:simpledancer:20171209145956p:plain

 

テストって今までサラーーーっと流してましたが

こんな風に確認してたんですね〜と今更ながらなことですがたくさん学べました。

今日はここまで!

 

 

Railsチュートリアル復習中:HTTPメソッドについて

f:id:simpledancer:20171208143315p:plain

今更ながらHTTPメソッドについて全然理解してませんでしたので今日はチュートリアルの中のSample_appの途中のコラムからちょっと勉強してみようと思います。

(ちなみに今日もCanvaを使ってみました。)

railstutorial.jp

HTTPメソッドとは

HTTP (HyperText Transfer Protocol)メソッドとは:

 4つの基本的な操作があり、それぞれGET、POST、PATCH、DELETEという4つの動詞に対応づけられています。クライアント (例えばFirefoxやSafariなどのWebブラウザ) とサーバー (ApacheやNginxなどのWebサーバー) は、上で述べた4つの基本操作を互いに認識できるようになっています (ローカル環境でRailsアプリケーションを開発しているときは、クライアントとサーバーが同じコンピュータ上で動いていますが、一般的には、それぞれ別のコンピュータで動作しているという点を理解しておいてください)。Railsを含む多くのWebフレームワークは、HTTPの各操作を発展させたRESTアーキテクチャの影響を受けています。

うーん、ちょっとわかりそうでわかりにくい。なんとなく行ってることはわかるっちゃわかるけどチュートリアルの文章だとふに落ちない感じです。

http://wa3.i-3-i.info/word11405.html

のブログ内では

WebブラウザさんからWebサーバさんに対する「お願いの種類」をカッコ付けて専門用語っぽく言ったのが「HTTPリクエストメソッド」です。

HTTPリクエストメソッドには以下の種類があります。

1.GET:ページをくれよ(HTTP1.0/1.1)
2.POST:このデータをくれてやるよ(HTTP1.0/1.1)
3.PUT:このファイルをやるよ(HTTP1.0/1.1)
4.DELETE:このデータを消しちゃって(HTTP1.0/1.1)
5.HEAD:ヘッダ情報だけくれ(HTTP1.1)
6.CONNECT:プロキシサーバさん、ちょっくら通しておくれ(HTTP1.1)
7.OPTIONS:サーバさん、どんなオプションを持ってるの?(HTTP1.1)
8.TRACE:どんな経路でそっちに届いたかそのまま返してちょ(HTTP1.1)
9.LINK:ちょっくらそのURLとこっちのリソースをくっつけさせてね(HTTP1.0)
10.UNLINK:「LINK」を解除するよ~(HTTP1.0)

……など。

これだとすごくわかりやすいかも。命令の内容が腑に落ちます。

ちなみにRailsでは4つ。

さらに多くはGETとPOSTが使われるためこれさえ覚えていれば困ることがないとか?

じゃあとりあえずGETとPOSTだけ今日は理解しよう。

ちなみに、あれ?PUTじゃなくてRailsはPATCH??

と気になりますと

d.hatena.ne.jp

qiita.com

とこの辺りのブログで参考に勉強させていただきました。

Rails4からはPUTではなくPATCHがデフォルトになったようです。

qiita.com

PUT→全置き換え

PATCH→部分置き換え

ということだそうです。

ちなみにHTTPメソッドなんて今まで一切意識してなかった。。。だから余計に理解できなかったのね。。単語の意味全くわかってませんでした。。

 

simpledancer.hatenablog.com

 

失敗を元に戻す方法:コードの自動生成とmigrationを元に戻す

f:id:simpledancer:20171207113042j:plain

今日はコードを打ち込んで失敗しちゃった時の元に戻す方法をまとめてみます。(出張前で今日は時間がないのです)ちなみに昨日気になってこの本お金2.0 新しい経済のルールと生き方 (NewsPicks Book)を買いました!

 

新幹線に乗ってる間に読もう!今日は岐阜県までいくのです。

simpledancer.hatenablog.com

生成したコードを元に戻したい場合

  • コードで自動生成したファイルはファイルを消すだけでは元に戻らない
  • ルーティングのroutes.rbファイルも自動的に変更されるのでそれを変更しなくてはならないため

$ rails generate controller StaticPages home help

で自動生成したファイルを消したい場合ファイル名の前にdestroy

$ rails destroy controller StaticPages home help

引数が後についいている場合は

$ rails generate model User name:string email:string 

↓引数はつけなくて、モデル名だけでおけー

$ rails destroy model User

 

マイグレーションを元に戻す方法

$ rails db:migrate

データベースのマイグレーションを元に戻す時

一つ前の時: $ rails db:rollback

最初に戻す時: $ rails db:migrate VERSION=0

 マイグレーションは逐次的に実行され、それぞれのマイグレーションに対してバージョン番号が付与されます。したがって、上記の0を別の数字に置き換えることによって、指定したバージョンの状態に戻すことができます

参考 

www.rubylife.jp

rake db:migrate - リファレンス - - Railsドキュメント

Railsチュートリアル復習中:第3章で気になったGitリポジトリ作成とキャメルケースorスネークケースについてメモ

simpledancer.hatenablog.com

simpledancer.hatenablog.com

Gitのリポジトリでなぜかつまずく

新しいappを作りました。(今回はsample_app)

ところがgit pushしてもエラーが出るし、リポジトリを作ってそれに入れようとしても全く更新ができてない。

src refspec.....と出てしまいます。

d.hatena.ne.jp

私のやったこと

  1. 一旦作ったsample_appリポジトリを削除する
  2. もう一度リポジトリを作り直す際(すでにプロジェクトがありますの方にチェック)

    f:id:simpledancer:20171206133934p:plain

  3. $ git remote add origin git@bitbucket.org:ユーザー名/sample_app.git $ git push -u origin --all # リポジトリやその参照先もすべてプッシュする

これでリポジトリに無事今までのコミットがpushされました。

ただこの方法だと以前のリポジトリを全部削除してしまうので初期段階なら問題ないと思いますが、結構進んでしまってからなどだと厳しいかも?

その場合削除せずに新たに別のリポジトリを作ってしまうほうが良いのかな?と思います。

 キャメルケースとスネークケース

あまり気にしてなかったのですが

キャメルケース:

www.weblio.jp

キャメルケースとは、アルファベット複合語フレーズ表記する際、各単語要素語の先頭の文字大文字表記する手法のことである。

スネークケース:

www2.olisys55.com

単語をわかりやすく判別するために、文字の一部をアンダーバーで連結することを指す。

pg-kura.hatenablog.com

命名規則:キャメルケース 対 スネークケース | 株式会社INDETAIL - インディテール

個人的にはどちらがいいのか。。。?スネークケースの方がわかりやすいのかなあ?

Rubyはクラス名をキャメルケースで 作られる慣習がありファイル名はスネークケースで作られる慣習があるとのこと

 このためRailsのgenerateスクリプトでは、underscoreメソッドを使ってキャメルケースをスネークケースに変換しています

 なるほどね!改めて見てみるとコマンドに打ち込んでいた言葉の意味がちょとずつわかるようになってきました。

Railsチュートリアル(Toy_app)でできることまとめ

f:id:simpledancer:20171205111557p:plain

ここまで割とサクサク進めました。以前やっていたせいもあるのですが

toy_appはScaffoldというRailsの自動生成してくれる機能を使ったので特にコードを自分で書いたわけではありません。

そういうわけでToy_appでできること・できないこと・理解できたことなどをサクッとまとめたいと思います。

Scaffold機能

  • Scaffold機能でコードを自動生成すると、Webのあらゆる部分からモデルデータにアクセスしてやりとりできるようになる
  • Scaffoldは何よりも手っ取り早いのがとりえだが、これを元にRailsを理解するには向いていない

Railsのscaffoldは、rails generateスクリプトにscaffoldコマンドを渡すことで生成されます。

techacademy.jp

 railsアプリケーションの開発をする際には、モデルやコントローラー、ビューを作っていき、さらに必要なルーティングを作成していく必要があります。 railsにはこれらの作業をまとめて行って、簡単にアプリケーションの雛形を作ってくれる機能があります。 それがscaffoldです。 scaffoldを使うことで素早くrailsアプリケーションを作ることができます。

 簡単に土台を作ってくれる代わりにscaffoldだけではシンプルすぎて実用の開発では使えない。けれど最初にアプリケーショを個人で作るにはとても便利な機能である。

MVC (Model-View-Controller)の概要を理解

 

f:id:simpledancer:20171205113514p:plain

MVCの挙動についてざっくり理解することができます。

www.rubylife.jp

blog.codecamp.jpMVCについてはこの辺の記事がわかりやすいと思います!↑

Model(モデル)

データを扱う部分になります。データベース(後述)に対してデータの登録・取得・更新・削除などを行うことができます。

View(ビュー)

ユーザーの見ることができる部分の作り込みを行います。つまり、ブラウザに描画されているHTMLを作り込む部分になります。

Controller(コントローラー)

ユーザーからの要求に対して、Modelとの連携やどの画面を表示するのかといった処理行う部分になります。

 

 

 

RESTについて

simpledancer.hatenablog.com

バリデーション

データモデルの属性に制限をかけることができる方法

文字数の制限などがあるとエラーを表示するようにできます。

udemy.benesse.co.jp

techacademy.jp

クラスの継承構造

simpledancer.hatenablog.com

Railsコンソールについて

simpledancer.hatenablog.com

まとめ

Toy_appはScaffoldを使っているため、あれよあれよという間にできてしまいます。

ですが細かく見ていくとRailsの基本的な部分が大まかにですが理解できるようになるのかあな?と思いました。

もちろんこんなに簡単に複雑なアプリが作れたらいいのですがそうもいかないのですねー

Railsチュートリアル学習を続けます!