筋トレもプログラミングも反復練習が大事である。

プログラミング初心者三十路越えアスリート系女がフリーランスプログラマーを目指すブログ

チュートリアル復習中:ユーザー登録画面を作る

なんとか年内にチュートリアルを終わらせたいと思っています。

今日はユーザー登録のところです。

現時点ではこんな画面です。

f:id:simpledancer:20171223155103p:plain

これをちゃんと登録できるように設定します。

form_forヘルパーメソッドを使う

ユーザー登録ページで重要な点は、ユーザー登録に欠かせない情報を入力するためのformです。Railsでform_forヘルパーメソッドを使います。このメソッドはActive Recordのオブジェクトを取り込み、そのオブジェクトの属性を使ってフォームを構築します

 Userオブジェクトの作成:まずインスタンス変数@userにUser.newを代入する

f:id:simpledancer:20171224104115p:plain

Scssで見栄えを整えると

f:id:simpledancer:20171224105003p:plain

sign up画面がこんな感じですっきり見やすく登録画面ができました。

ただし、まだ登録ボタンを押しても

このようなエラーが出ます。

f:id:simpledancer:20171224105214p:plain

コントローラにcreateするアクションが見当たらないとなっています。

まだ作ってないので当然ですが。

なのでこのcreateアクションを作っていきます。

コントローラにcreateアクションを作る

f:id:simpledancer:20171224111056p:plain

そうしてもう一度ユーザー登録をすると今度は

f:id:simpledancer:20171224111408p:plain

となります。

今度はcreateアクションの下に外部から使えないようにprivateアクションも追加します。

そしてユーザー登録に失敗した際のエラーメッセージも追加します。

パーシャルを作る

  <%= render 'shared/error_messages' %>

 ’shared/error_messages’というパーシャルをrender (描画)と云う意味。

sharedというディレクトリを作ってファイルを作ります。app/views/shared/_error_messages.html.erb

f:id:simpledancer:20171224114731p:plain

そこでエラーメッセージを表示することが可能になります。

もし空欄でcreateボタンを押した場合このように

f:id:simpledancer:20171224115855p:plain

上部に赤字でエラーメッセージが表示できるようになりました。

postの追加

f:id:simpledancer:20171224120340p:plain

エラーの処理ができたのでconfig/routes.rbに post '/signup', to: 'users#create'(postリクエスト)を追加する。

 

しかし、この状態だとcreateしようとsubmitボタンを押しても送信されません(フリーズする)

コントローラに追加をします。

redirect_to @user 

f:id:simpledancer:20171224121408p:plain

flashメッセージについてはちょっと割愛します。

Railsの一般的な慣習に倣って、ユーザー登録に成功した場合はページを描画せずに別のページにリダイレクト (Redirect) するようにしてみましょう。具体的には、新しく作成されたユーザーのプロフィールページにリダイレクトしてみようと思います (場合によってはルートURLにリダイレクトするのも1つの選択肢でしょう)。 

f:id:simpledancer:20171224121631p:plain

無事にuserをcreateすることができました!

長くなるので

今日はここまで!

 

 

Railsチュートリアル前半まとめ

f:id:simpledancer:20171223110634j:plain

1日一記事更新するぞ!と思っていたのだけれど、昨日は練習やら出張準備やらで勉強できなかった。。

今日は合間にやっていく予定ですがやっと後半戦に突入。

目標は年内に復習を終わらせて来年は違うのやりたいです。

前半チュートリアルまとめ

以前やっていたものの、ザーーーーーっと流したので細かく見ていくとかなり理解していなかった部分がたくさんあった。

多分今もあまり理解できてないんだろうけど。

simpledancer.hatenablog.com

simpledancer.hatenablog.com

simpledancer.hatenablog.com

simpledancer.hatenablog.com

simpledancer.hatenablog.com

今日から6日間出張に行ってきます!

出張の合間にできるところはやりたいですが。。どれくらいできるかな。7章以降は難しくなるのでわかりませんが。。

railstutorial.jp

Railsチュートリアル復習中:デバッグ

f:id:simpledancer:20171221123650p:plain

デバッグについて、いつもさらっとここも流していたので少しゆっくりやりながら進めていこうと思います。

Railsチュートリアルでいうと7章のところです。

railstutorial.jp

 デバッグとは

デバッグ - Wikipedia

デバッグ(debug)とは、コンピュータプログラム電気機器中のバグ・欠陥を発見および修正し、動作を仕様通りのものとするための作業である。サブシステムが密結合であると、1箇所の変更が別の箇所でのバグを作り出すので、バグの修正がより困難となる

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

バグ→プログラムのおかしいところ

デバッグ→そのおかしいところを取り除く作業

デバッガー→バグの原因を見つけてくれるお手伝いをするソフトウェアの事orその仕事をする人

 まずデバッグ情報を追加する

f:id:simpledancer:20171221125353p:plain

 layout/application.html.erbに <%= debug(params) if Rails.env.development? %>を追加する

本番環境に展開したアプリケーションではデバッグ情報を表示したくないので if Rails.env.development?となる。

環境開発のみで行うべきで本番環境やテスト環境ではデバッグ情報は表示されないようにする。

CSSの追加

デバッグの出力を綺麗にするためにCSSを追加します。

@mixin box_sizing {  
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

.#ここでSassのミックスイン機能 (ここではbox_sizing) を使っています。ミックスイン機能を使うことで、CSSルールのグループをパッケージ化して複数の要素に適用することができます。

 

.

.

/* miscellaneous */

.debug_dump {
clear: both;
float: left;
width: 100%;
margin-top: 45px;
@include box_sizing;
}

www.webcreatorbox.com

 

デバッグ出力

Railsサーバーを立ち上げるとこんな画面になります。

f:id:simpledancer:20171221131656p:plain

デバッグ出力には、描画されるページの状態を把握するのに役立つ情報が含まれます。

 これはparamsに含まれている内容で、YAML5という形式で書かれています。YAMLは基本的にハッシュであり、コントローラとページのアクションを一意に指定します。

YAMLとは

構造化されたデータを表現するのに便利な、ファイルの書き方ルール(の1つ)
です。

です。

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

Rubyist Magazine - プログラマーのための YAML 入門 (初級編

まとめ

とりあえず7章からは難しいらしいです。しかもつぎからつぎへと知らない単語や知っているけどよくわからない単語、説明に困る単語が出てきます。

覚書なので意味のわからないところは多いブログではありますが、引き続きやっていきたいと思います。

 

続く。

 

プログラミングをする場所で最適なところって?

f:id:simpledancer:20171021142929j:plain


今日は夜仕事なので家でプログラミングしています。

チュートリアルの内容をupdateしようかと思ったのですが、

普段よく、プログラミングする場所ってどこが最適なのか?と。

あ、独学してる人にとって。

私の場合メインはカフェか自宅なんですが家だとだらだらしちゃってなかなか進まないんですよね。。

一番お勧めはファミレス(静かな)

個人的にはお勧めはファミレスです。

電源がないところが多いのですが、まず

  • テーブルが広い
  • ドリンクバーがある
  • 店員さんが放置してくれる

というところです。

繁華街だと結構うるさいのでお勧めできないのですが。

住宅地なんかだといい感じに人がいないので

集中できるし。

なんだったら食事もできますし。リーズナブルなところが多いので。

カフェは以外と場所を選ぶ

カフェって机が小さいところが多いので

結構作業がしにくいです。

パソコンだけおければいいのかというと、手元にメモだったり、勉強中の本だったりをおきたい場合スタバやベローチェだと結構机不足。

ただ、電源があるところはかなり利用しがいがあります。

都心だと作業できるようなカフェも結構あるんですがうちの近所は以外とないんですよ(都会のくせに)

渋谷のbowling cafeは地下で繁華街ですがかなり静かでお勧めです。

tabelog.com

テーブル広い!

以前Rubyの環境構築手伝ってもらう際に利用しました。

渋谷なのに空いてる確率が高く(地下だからかな?)wifiもあるし。静かなことが多いぽい。

ちなみに昨日は渋谷のilly のカフェを使いました。テーブルはちょっと狭かったけど2F席は結構空いてた。

自宅作業する際

自宅だとついいろいろ違うことをやってしまうんですが

コツはできるだけその日のタスクを決めてしまうこと

何時から何時までやってこれくらいは休憩。という感じで休憩もちゃんと時間を取ってあげること。

ある程度タイムスケジュールを組んでしまうといいのかもしれません。

 

ただ、ゲームとかテレビの誘惑が多い人はやっぱり自宅でやるのは控えた方がいいかもしれませんね。。

後、プログラミングやってて思うのですが、本当に人と喋らなくなるんですよね。。(私だけじゃないはず)

それが辛い人は店員さんと触れ合えるからやっぱり外でプログラミングした方がいいのかな。。

 

Railsチュートリアル復習中:苦手なデータベースのところ

f:id:simpledancer:20171219214825p:plain

今日はデータベースのところで以前全然スルーしていたところです。

Railsはデータを保存する際にデフォルトでリレーショナルデータベースを使います。リレーショナルデータベースは、データ行で構成されるテーブルからなり、各行はデータ属性のカラム (列) を持ちます。 

 まずUserモデルを作るためにコマンドに

 $ rails generate controller Users new

します。

そうするとファイルがいろいろできてきます。

この中にマイグレーションという新しいファイルが生成されます。

 マイグレーションは、データベースの構造をインクリメンタルに変更する手段を提供します。それにより、要求が変更された場合にデータモデルを適合させることができます。このUserモデルの例の場合、マイグレーションはモデル生成スクリプトによって自動的に作られました。

マイグレーションファイルを生成する流れ 

f:id:simpledancer:20171219212002p:plain

マイグレーションファイルのファイル名には先頭に生成された時間のタイムスタンプがつきます。

マイグレーション自体はデータベースに変更を与えるchangeメソッドの集まり

changeメソッドはcreate_tableというRailsのメソッドを呼びユーザーを保存するためのテーブルをデータベースに作成します。

create_tableメソッドはブロック変数を1つ持つブロック  を受け取ります。 

 ブロックの中でcreate_tableメソッドはtオブジェクトを使って、nameとemailカラムをデータベースに作ります モデル名は単数形 (User) ですが、テーブル名は複数形 (users) です(これはRailsで用いられる言葉の慣習を反映)モデルはひとりのユーザーを表すのに対し、データベースのテーブルは複数のユーザーから構成されます。

ブロックの最後の行t.timestampsは特別なコマンドで、created_atとupdated_atという2つの「マジックカラム (Magic Columns)」を作成します。これらは、あるユーザーが作成または更新されたときに、その時刻を自動的に記録するタイムスタンプです  

 $ rails db:migrate

 マイグレーションを実行します。

 db:migrateが実行されると、db/development.sqlite3という名前のファイルが生成されます。これはSQLite5データベースの実体。

データベースの構造を見ることができるツールがdevelopment.sqlite3ファイルを開くためのDB Browser for SQLiteというものがあります。

f:id:simpledancer:20171219213711p:plain

DB Browser for SQLite

 ダウンロードして、開くとこのように構造を見ることができます!(これ、前回やってませんでした多分)

f:id:simpledancer:20171219214046p:plain

データベースのところはちょっとかじってはやめ、かじってはやめ、、、で理解が全然できていないのでこれを機会にちゃんと理解したいなと思ってます。

 

続く!

simpledancer.hatenablog.com

simpledancer.hatenablog.com

 

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