30歳 独学で始めるプログラミング ~WEBデザイン・アプリ開発~

ITスキルに興味がでたので、codeを書いてみたら面白くてハマってしまいました!日々何をやったのかを中心に、記事を書いていきたいと思います。

47日目:Ruby on Rails Ⅲ:新規投稿機能作成、フォームタグ、リダイレクト、オーダー(form_tag、redirect、order)

<学習日>

47日目

<学習内容>

① Ruby on Rails Ⅲ(54-100%):新規投稿機能作成、フォームタグ、リダイレクト、オーダー(form_tag、redirect、order)

<参考>

Progateレベル:197

 

<学習内容詳細>

f:id:yakuzen_kokoro:20200820234525p:plain

今日はRuby on Rails Ⅲを完了することが出来ました!

 

 

① Ruby on Rails Ⅲ(54-100%):新規投稿機能作成、フォームタグ、リダイレクト、オーダー(form_tag、redirect、order)

f:id:yakuzen_kokoro:20200820234534p:plain

 

Ruby on Rails Ⅲの後半の内容としては、新規投稿機能を作成するというものでした^^

 

今までの単元で、ルーティング、コントローラー、データベース間のやり取りは少し慣れてきたのか、同じような感じで必要なデータのやり取りをcodeに落としていけば完成品になりました!

 

ではさっそく、具体的なcodeをあげながら、本日の勉強を振り返っていきましょう!

 

・一般的な投稿機能の実装
大まかな流れは以下のとおり。

①投稿フォームで投稿する

②そのデータをアクションでとらえて、データベースのテーブルに情報を追加して、保存する。

③必要に応じて、データベースから情報を引っ張り出して、表示するなりする。


・フォームの値を受ける方法

urlを受けてアクションを指定するのはgetだが、フォームの値を受けて、アクションを指定するにはpostで記載が必要。

例えば、createアクションにnewのフォームで書かれた内容を受けて渡すには、以下のとおり。

 

<ルーティング>
post "posts/create" => "posts#create"

 

<newビュー>
<%= form_tag("/posts/create") do %>
htmlの処理
<% end %>


・処理をするだけで、実際のページを作らないアクションについて

新規投稿の内容を取得して、必要な情報を飛ばしたりするだけのアクションは、実際のページは不要となる。

例えば新規投稿をした後は、再び投稿一覧に戻ったりするが、そのときはリダイレクトというメソッドを用いている。

具体的なcodeは以下のとおり。

 

<コントローラー>
def create
redirect_to("/posts/index")
end


で最終的にはデータベースに投稿を保存して、その内容を投稿一覧に反映させたいわけだから、その場合は以下のとおり。

 

<newビュー>
<%= form_tag("/posts/create") do %>
<textarea name="content"></textare>
<% end %>


<コントローラー>
def create
@post = Post.new(content:params[:content])
@post.save
redirect_to("/posts/index")
end


さらに投稿を日時順に並び替えたい場合は以下の修正を加えればOK

 

<コントローラー>
def index
@posts = Post.all.order(created_at: :desc)
end

 

一連の流れとしては、以下のとおり。

 

①ビューでcreateに送る値にハッシュをつける。この方法がname="content"というものを、textareの属性に追加

②コントローラでname="content"を受け取って、それに対応するデータベースを作成し、保存している。

③投稿一覧でorder(created_at: :desc)にて、作成日時の降べきで並び替えよ、と命令している

 

ということで、本日は新規投稿のページを作成して、データベースを更新し、その値を読む機能が実装できました^^

 

 

ではでは、1日でも長く続けられるように頑張っていきます^^

同志の方、一緒に頑張っていきましょう!

46日目:Ruby on Rails Ⅲ:データベース応答型、find_by関数、ルーティングのワイルドカード 、params変数(find_by、/:id、params)

<学習日>

46日目

<学習内容>

① Ruby on Rails Ⅲ(0-53%):データベース応答型、find_by関数、ルーティングのワイルドカード 、params変数(find_by、/:id、params)

<参考>

Progateレベル:195

 

<学習内容詳細>

f:id:yakuzen_kokoro:20200819223333p:plain

今日はRuby on Rails Ⅲの半分を完了しました^^

 

なかなか、ルーティング・コントローラー・ビューを行き来しつつ、きれいなcodeで応答型のアプリケーションを構築するのは難しいですね^^;;

 

ただびしっとハマるときの快感は健在です!

 

① Ruby on Rails Ⅲ(0-53%):データベース応答型、find_by関数、ルーティングのワイルドカード 、params変数(find_by、/:id、params)

f:id:yakuzen_kokoro:20200819223340p:plain

今日の内容は、とにかく応答型のアプリの骨格の作り方の手順を頭に入れるという感じでした^^

 

成果物を意識して、なるべくProgate側のリードは見ないでcodeを書こうとするのですが、何かしらエラーが出てきたりして、間違いを探しに行く感じになりますね^^;;

 

でも、ちょっと時間がかかってもいいので、ちゃんと自分でエラーを解消しに行っています!

自分でcodeを0から書くときは、そういう作業が多くなるのだろうと思うので、慣れておくに越したことはないと思います^^

 

ではさっそく、具体的なcodeを挙げながら、振り返っていきましょう!

 

・投稿記事の検索:find_by関数
データベースに格納されているテーブルの中から、欲しい行列を探してくる関数。

具体的にPostモデル(データベース名でもある)から、idが2の情報を探してきて、一時的な変数postに格納するcodeは以下のとおり。

 

<rails console>
post = Post.find_by(id:2)

 

基本的な使い方としては、探してきた情報は一度変数に格納する。
探してくるときは、id番号を指定することが一般的(なのかな、今のところ)


・ルーティングのワイルドカード「/:id」について

取得したデータベースのidをurlに反映させることはよくやるが、その全てのurlに対してアクションを指定すると物凄く大変。なので、ワイルドカード的な「/:id」を使うことで対応する。

具体的に、「/posts/1」「/posts/2」のようにpostsのあとにid番号が入っていくurlを、「show」というアクションに全て紐づける場合のcodeは以下のとおり。

 

<ルート>
get "/posts/:id" => "posts#show"

 

なお、ルートファイルの中にはいくつかのget関数を書いていくが、上から順番に当てはまるアクションに導くようになってるので、ワイルドカードを使用したget関数は、必要以上に下の階層に記載しておかないと、他のアクションに導きたいurlまで巻き込んでしまうので注意。

今回のケースだと「/posts/index」などは他のアクションに紐づけたいような場合、このget関数よりも上に「get "/posts/:id" => "posts#show"」を記載してしまうと、もろごとshowアクション側に突っ込まれてしまう。


・id番号の取得方法について

データベースのidをurlの末尾に追加するためには、参照したデータベースのidを取得する必要がある。

@idという変数に対して、id番号を格納するための具体的なcodeは以下のとおり。


<コントローラー>
def show
@id = params[:id]


paramasという変数の中に、そのときのルーティングされたときの:idの値が格納される仕組みとなっている。

多分、この言語を作成したときに、こういう機能を作ることを意図していたので、関数や変数レベルで用意されているということ。


・具体的な投稿内容をクリックしたときに、その詳細ページにとび、その詳細ページでは投稿内容の文字と投稿時間を記載するような場合

 

<ルーティング>
get "post/:id" => "posts#show"

 

<コントローラー>
def index
@posts = Post.all
end

def show
@post = Post.find_by(id:params[:id])
end


<indexビュー>
<% @posts.each do |post| %>
<%= link_to("post.contet","/posts/#{post.id}") %>
<% end %>

 

<showビュー>
<%= @post.content %>
<%= @post.created_at %>


簡単に解説すると、
①indexビューでデータベースのcententを文字列としてもち、「/posts/id番号」をurlのリンク情報として持つリンクボタンを作成
②ルーティングで「/posts/:id」に対して、showアクションを紐づけ
③コントローラーで@postの変数に、urlの末尾のidと一致するデータを格納
④showビューにて、クリックしたデータベースのidと一致するデータベースのcontentとcreated_atの情報を提示

 

この辺で、作成する機能の1つ目が完了したので、本日はここまでです!

 

ではでは、1日でも長く続けられるように頑張っていきます^^

同志の方、一緒に頑張っていきましょう!

45日目:Ruby on Rails Ⅱ:データベースを使いこなす/rails consoleに挑戦/共通レイアウト/link_toでリンクを作成 (Post/rails console/save/all/link_to)

<学習日>

45日目

<学習内容>

① Ruby on Rails Ⅱ(47-100%):データベースを使いこなす/rails consoleに挑戦/共通レイアウト/link_toでリンクを作成 (Post/rails console/save/all/link_to)

<参考>

Progateレベル:192

 

<学習内容詳細>

f:id:yakuzen_kokoro:20200818235112p:plain

今日は遅くなりましたが、昨日の宣言とおりRuby on Rails Ⅱを無事終わらせることが出来ました^^

 

途中コンソールでの作業「rails console」が出てきて、少し戸惑ってしまいましたが、なんとか完了です。

 

私はあの黒い画面が、どうも苦手なようですね^^;;

 

 

① Ruby on Rails Ⅱ(47-100%):データベースを使いこなす/rails consoleに挑戦/link_toでリンクを作成 (Post/rails console/save/all/link_to)

f:id:yakuzen_kokoro:20200818235120p:plain

 

今日はデータベースを使ったり、rails consoleをやってみたりとなかなか私にとっては大変な内容でした^^;;

 

理解に苦労しましたが、早速具体的なcodeを挙げながら、振り返っていきます!

 

Ruby on Railsにすでに用意されているクラス「Post」を使いこなす。

前回の最後に「Post」というテーブルを作ってみたいな流れでしたが、実際にはPostというモデル名のデータベースを作成していたようです。

 

app/models/post.rbというように、モデルが定義されたファイルと、マイグレーションファイルが作成される。

なお、モデルは「ApplicationRecord」を継承する形になっている。

 

・「rails console」というコンソール上でrailsを実行することが可能な方法がある
⇒データベースを作成するときなど、サクサクとrailsで簡易的な作業を実行したいときに使う感じ?

⇒そんな感じだった!


・データベースを作成する方法
実際にデータベースに情報を追加していく。
具体的なcodeは以下のような感じ。


<コンソール>
$ rails console ⇐ rails consoleを立ち上げ
post1=Post.new(content:"今日も元気!") ⇐ データベースを追加
post1.save ⇐ 追加したデータベースを記録
quit ⇐ rails consoleを停止

 

これで”今日も元気!”というテキストデータを持ったデータベースが、作成日時等の情報と合わせて、データベースに追加される。


・データベースから情報を取得する方法

今度は作成したデータベースから、実際に情報を取得する。
このとき、データの取得は横一行分を取り出してから、特定の列のセルをゲットすることも出来るといった感じ。

具体的なcodeは以下のとおり。

 

post = Post.first ⇐ 最初の行の情報を取得
post.content ⇐ コンテントという項目(列)のセルの情報を取得


あくまでデータベールはテーブルであることを意識すれば、混乱しにくい。

 

さらに進めていくと、データベースのすべての情報を得て、インデックス番号を指定して、項目の名称を指定すれば、自動的に一つのセルの値を参照することが出来る。
順番に説明すると以下のとおり。

 

①posts=Post.all ⇐ データベースの全ての情報を「配列」として取得
②posts[1] ⇐ 配列のインデックス1の要素を取得
③posts[1].content ⇐ 配列のインデックス1の要素のcontentの項目のデータを取得

 

これらをまとめると、この時に得られる情報を一発で書くには

Post.all[1].contentでOK!

 


・上記のデータベース取得のcodeをエディタ側のcodeに反映させる
具体的に、投稿されたコメントを順番に全て表示するには以下のとおり。

 

<コントローラー:ここでhtmlでの変数を規定する>
@posts = Post.all

 

<ビュー:ここのhtmlにRubyのcodeを埋め込んで、繰り返し処理させる>
<% @posts.each do |post| %>
<%= post.content %>
<% end %>

 

つまり、変数にデータベースから持ってきたテーブル(配列を要素に持つ配列)を突っ込んで、htmlに埋め込んだRubyのcodeで操作するという感じ。


・同じヘッダー等、特定の同じhtmlのcodeをもっているページを何枚も扱うとき、全てにその特定のcodeを反映させる方法

結論として、views/layouts/application.html.erbにまとめてしまうことが出来る。

このファイルを「共通レイアウト」と呼んだりするが、共通でない部分を<%= yield %>で書いて、ここに共通でないhtmlコードを代入して、各々のページをブラウザに反映しているという仕組みなっていることに注意。つまり、<%= yield %>との位置関係を間違えると、とんでもないページになる。


・リンクの作成コード(Ruby)

 

<htmlファイル>
<%= link_to("表示名","url") %>

 

例えば、”ここをクリック”というリンクボタンで、リンク先が"/index"だとした場合、以下のようなcodeになる。

 

<%= link_to("ここをクリック","/index") %>

 

はい、ということで、今日もやや抽象的な内容が続いたので、少し理解に苦労しました^^

 

そろそろ道場も目に入ってきたので、気合を入れて進めていきたいと思います^^

 

ではでは、1日でも長く続けられるように頑張っていきます^^

同志の方、一緒に頑張っていきましょう!

44日目:Ruby on Rails Ⅱ:変数を扱う/データベースを作成する (Rubyの組み込み/データベース/マイグレーション)

<学習日>

44日目

<学習内容>

① Ruby on Rails Ⅱ(0-46%):変数を扱う/データベースを作成する (Rubyの組み込み/データベース/マイグレーション)

<参考>

Progateレベル:190

 

<学習内容詳細>

f:id:yakuzen_kokoro:20200817222644p:plain

本日はRuby on RailsⅡの前半部分を完了することが出来ました^^

 

今日は少なめですが、ちょっと夏バテ気味かもしれないので、無理はしないようにということで。

 

 

① Ruby on Rails Ⅱ(0-46%):変数を扱う/データベースを作成する (Rubyの組み込み/データベース/マイグレーション)

f:id:yakuzen_kokoro:20200817222653p:plain

 

今日の学習内容は、「変数を扱う⇒HTMLにRubyを突っ込む」ということと、「データベースを作成する」の2点です!

 

ではさっそく具体的なcodeを挙げながら、本日の内容を振り返ります^^

 

 

・復習だけどWEBアプリ開発は「url⇒ルート⇒コントローラ⇒ビュー⇒ブラウザ」の流れを意識すること。
ジェネレートするときにも、上記の一連の流れが新しく作成されると考えておけばOK。


・HTMLのcodeの中にRubyのcodeを埋め込む方法について

HTMLのcodeの中に、変数やデータベースとのやりとりをさせるRubyのcodeを埋め込むことが出来る。

その方法は以下のとおりで、ブラウザに表示させる場合と、ブラウザへの表示はさせずに、処理だけを行う場合にわかれる。

 

<ブラウザに表示させる場合:文字列の表示など>
<%= Rubyのcode %>

 

<ブラウザに表示させない場合:変数の定義など>
<% Rubyのcode %>

 

HTMLにPHPを組み込むときと同じ感じだね。


・ビューで使用する変数はコントローラーファイルのアクション内で定義することが一般的
コントローラー内で変数を定義して、それごとビューに渡すようなイメージ。アクション内での記載の仕方は以下のとおり。

 

def アクション名
@変数名 = 定義内容
end

 

ここで、変数名の前には@をつけないと、ビューファイルに渡してくれないので注意が必要。そして、ビューファイル側でも@変数名で記述する必要がある。


・データベースはExcelのようなテーブル型であることを強く意識する。
縦の列をカラム、横の行をレコードと呼ぶ、テーブル上のデータ格納方式をとっている。

当り前のようだけど、ここを意識することで迷子率を下げられる。

 

・データベースの作り方

まずはターミナルでマイグレーションファイルの作成を指示する。

具体的なcodeは以下のとおり(「Post」テーブルに「content」というカラム名の「text」データ型のデータを格納する場合)。

 

<ターミナル>
$ rails g model Post content:text

 

「$ rails g model テーブル名 カラム名:データ型」という書き方をすればOK
なお、生成されるマイグレーションファイルは「/db/migrate」というファイルの中に格納される。

 

そのあとにマイグレーションファイルを実行して、データベースを作るコマンドを打てばOK。

 

つまり、全体としては、以下の2行のcodeで、データベースは作成される。
なお、マイグレーションファイルを作るだけ作って、実行しないままだとブラウザがでマイグレーションエラーが発生してしまうので、以下の2行はセットで実行するようにする。

 

<ターミナル>
$ rails g model Post content:text
$ rails db:migrate

 

はい、ということで明日は後半をつぶしにかかろうと思います!

データベースを作成できたので、次からはこのデータベースをいじることが出来るだろうと思って、ワクワクしています^^

 

ではでは、1日でも長く続けられるように頑張っていきます^^

同志の方、一緒に頑張っていきましょう!

43日目:Ruby on Rails Ⅰ:「url⇒routes⇒controllers⇒views⇒ブラウザ」の流れを掴もう (views/controllers/routes/ブラウザ/ターミナル/サーバー)

<学習日>

43日目

<学習内容>

Ruby on Rails Ⅰ(0-100%):「url⇒routes⇒controllers⇒views⇒ブラウザ」の流れを掴もう (views/controllers/routes/ブラウザ/ターミナル/サーバー)

<参考>

Progateレベル:187

 

<学習内容詳細>

f:id:yakuzen_kokoro:20200816224107p:plain

 

Rubyの次は何やろうかなと思ったのだけど、ここは素直に「Ruby on Rails」に進むことにしました^^

 

ただあれですね、ボリュームが鬼のようになっていますね^^;;

心して焦らずに取り組みます!

 

Ruby on Rails Ⅰ(0-100%):「url⇒routes⇒controllers⇒views⇒ブラウザ」の流れを掴もう (views/controllers/routes/ブラウザ/ターミナル/サーバー)

f:id:yakuzen_kokoro:20200816224119p:plain

f:id:yakuzen_kokoro:20200816224127p:plain

以前「Node.js」で?マークが飛びまくっていた内容を、今回の「Ruby on Rails Ⅰ」でめっちゃくわしく解説してくれていました!

 

なんとなく気付き始めてきたのですが、各々のコースって「一番左上から順番に全て学習していること」を前提に資料が作成されていて、内容が被る部分に関しては、後半のカリキュラムでははしょりまくっていることが多いです××;;

 

WEB開発パス(Node.js)を素直に進めている場合、「Node.js」で挫折する可能性が高まるので要注意ですね^^;;

(私は苦労しました。。。)

 

さて、早速実際のcodeや、学習中のメモを見ながら、振り返っていきます!

 

Ruby on RailsはWEBアプリケーション開発の実態を反映した形で、今までのRubyのようなエディタだけで完結させる形では進まないことに注意

 

WEBアプリケーションは、ターミナル/エディタ/ブラウザ/サーバーがそれぞれの役割をもって動いて、初めて機能として動くという理解(ちょっとまだ理解が不十分なところがあるから、基本情報技術者のテキストで並行して勉強するけれど)。

 

codeを書くのは基本的にエディタなので、プログラミング言語の基本的な部分はエディタ上で勉強すればよいけれど、実際にWEBアプリを開発するのであれば、テスト等も含めて全体的な構造に慣れておく必要があるのかなという印象。

 

なお、Railsのcodeをリアルタイムでブラウザに反映するためには、Railsのサーバーが起動している状態である必要があるので、命令を出すターミナルとは別に、Railsのサーバーを起動させておくためだけの命令を出すターミナルを用意しているっぽい。


Railsでページを作成する方法について:最初の一発

3つのファイルがエディタ上で必要となる。これらのファイルを作成するのが以下のcodeとなる。

 

<ターミナル>
$ rails generate controller home top

上記で作成される3つのフォルダについて説明して、上記のcodeで何が作成されるのかを列挙する。

 

<viewsフォルダ>
1つ目がviewsフォルダで、htmlのcodeを書いていき、最終的にブラウザにhtml情報を渡す役割

viewsフォルダが作成されて、その中にhomeフォルダとtop.html.erbファイルが作成される。
app/views/home/top.html.erbという感じ。

 

<controllersフォルダ>
2つ目がcontrollersフォルダで、viewsフォルダで作成したhtmlファイルの中から、適切なhtmlファイルを探す役割
基本的な役割は「コントローラと同じ名前のビューフォルダから、アクション名と同じ名前のhtmlファイルの繋ぐ」となっている。

 

controllersフォルダが作成されて、その中にhome_controller.rbフォルダとtopメソッド(アクション)が作成される。
app/controllers/home_controller.rb/topメソッドという感じ。


<routesファイル>
3つ目がroutesファイルで、ブラウザで指定されたurlから、適切なcontrollersファイルを見つけだす役割
基本的な役割は「ブラウザから指定されたurlから、対応するコントローラファイルに繋ぐ」となっている。

 

configファイルの中にあるroutes.rbファイルの中に、上記の役割をもつcodeがが作成される。
app/config/routes.rbの中にcode生成という感じ。

codeの中身は、「get"url" => "コントローラー名#アクション名"」で記載され、左と一致するコントローラーファイルにアクセスする。


以上より、ターミナルに記載するcodeの最後の2つは、ファイル名やフォルダ名を変えたければ、任意に変えればいいと思う。最後の2つの前半がコントローラー名、後半がアクション名に対応している。
(urlも変わり、上記3つのフォルダやファイルの名前が、それに対応した名前に変わる)

 

全体としての流れは以下のとおり

 

①ブラウザでurlを入力
②ルートにurlの情報が飛ぶ
③urlで指定されたコントローラファイルを探して繋ぐ@ルートフォルダ
④コントローラのファイル名とアクション名と一致するhtmlフォルダを探して繋ぐ@コントローラーフォルダ
⑤ブラウザに表示しいhtmlコードを書いてブラウザに返す@ビューフォルダ

 

・routesフォルダからurlを変更する方法

コントローラーファイルは変えることなく「ここのページのurlはこう変えたい」ような場合について考える。
例えば、今のrulがhost名/home/getviewだとして、これをhost名/topにしたい場合は以下のとおり。

 

<routesファイル>
変更前
Rails.application.routes.draw do
get "home/getview" => "home#getreview"
end

 

変更後
Rails.application.routes.draw do
get "top" => "home#getreview"
end


つまり、get"url"の部分は「このurlが指定されたら」という意味なので、この部分を変更したいurlに変えれば、以下の命令はそのまま実行されるということになる。

(変更後はhost名/homeというurlが指定されたら、homeというコントローラー名のgetreviewというアクションに繋いでね、というcodeになる。逆に前の長いurlを入力すると、エラーで繋がらなくなる)


・2ページ目以降のページの作成方法について

3つのフォルダ全てで対応する必要がある。具体的に、knowusというページを新しく作る場合は以下のとおり。


<routesファイル>
get "knowus" = "home#knowus"
上記を追加

 

<controllersフォルダ>
def knowus
end
上記を追加

 

<viewsフォルダ>
app/views/homeのフォルダを右クリックして、knowus.html.erbを新規作成して、knowusページに示したいhtmlのcodeを記載する


・デザインの反映方法

cssのcodeをどこで書くのかというと、「app/assets/stylesheets」の中になる、今回でいうとhome.scssファイルとなる。

このファイルも、実は一番最初にターミナルに入力した「$ rails generate controller home top」という命令で、自動生成している。

このファイルに記載したデザインは、viewsのhomeフォルダに格納された、全てhtmlファイルに反映される。

 

・画像の反映方法

画像自体の反映方法は、以前HTML&CSSで勉強した通りの方法で問題ないけれど、問題の画像ファイルをどこに保存していたのかについて。

基本的に画像フォルダは「app/public」の中に直接放り込んでおくこと。
これで、画像のリンクは「/画像ファイル名」でOKとなる。


・リンクの飛ばし方

これもhtml&cssで学習した内容だけど、今回の「url⇒routes⇒controllers⇒views⇒ブラウザ」の流れを理解してからだと、ちゃんと意味合いがわかる。

 

<a href"/top">文字列<a>

 

上記のような形で、host名/topに飛べるボタンが作れる。

 

 

ということで、今回は実際のcodeよりも、全体的な流れの部分の基礎が多かったので、説明口調になってやや長文になってしまいました^^;;

 

ただ、今回の学習内容はとにかく大切な部分なので、なんとなくではなくて、しっかりと理解した上で進んでいこうと思います!

 

大切なのは

 

「url⇒routes⇒controllers⇒views⇒ブラウザ」の流れ

 

ですね^^

 

 

ではでは、1日でも長く続けられるように頑張っていきます^^

同志の方、一緒に頑張っていきましょう!

42日目:Ruby Ⅴ: クラスの機能を色々と使おう ローカル環境でRubyを動かそう(クラスの継承、オーバーライド、メソッドの継承、既存クラスの利用)

<学習日>

42日目

<学習内容>

① Ruby Ⅴ (0-100):クラスの機能を色々と使おう (クラスの継承、オーバーライド、メソッドの継承、既存クラスの利用)

② ローカル環境でRubyのcodeを書こう!

<参考>

Progateレベル:181

 

<学習内容詳細>

f:id:yakuzen_kokoro:20200815161511p:plain

今日でProgateでのRuby学習は完了です^^

 

ローカルでの開発環境も整い、実際に適当に書いたcodeが正常に動くことまで確認できたので、他の言語のようにもう一周することはないかと思います!

 

スライド検索や自分で書き留めているノートで、不明点をさらうくらいで問題ないかなと思っています。

 

① Ruby Ⅴ (0-100):クラスの機能を色々と使おう (クラスの継承、オーバーライド、メソッドの継承、既存クラスの利用)

f:id:yakuzen_kokoro:20200815161646p:plain

f:id:yakuzen_kokoro:20200815161657p:plain

 

はい、ということで本日でProgateでのRubyの学習は完了です!

 

最後の「すでに用意されている」クラスの活用が、実際にcodeを0から作成するときには有用なのかもしれませんね^^

 

↓のようなサイトを参照するといいのかもしれません。

docs.ruby-lang.org

 

では、実際のcodeを挙げながら、振り返っていきます!

 

・クラスの継承について
既存のクラスの型を引きついで、細分化したクラスを作成するときに便利な方法となる。

たとえば、Menuクラスを引き継いで、Foodクラスを作成する場合は、具体的なcodeは以下のとおりとなる。

 

class Food < Menu

新しく作るクラスを先に記載して、「<」を加えてからもとになるクラスを記載すればオッケー。

また、上記の例ではFoodクラスのことを子クラス、Menuクラスのことを親クラスと呼ぶ。


・継承したクラスに新しいプロパティやメソッドを追加する場合。
新しく定義したクラスの中で、同じように定義するだけでOK

 

<プロパティの場合>
attr_accessor :プロパティ名

 

<メソッドの場合>
def メソッド名
処理内容
end


このとき、親クラスがすでに持っているプロパティや、メソッドはそのまま引き継がれるので、クラスの持っている型が増える形となる。


・親クラスのメソッドの上書きと継承について

親クラスで定義しているメソッドに対して、同じメソッド名で子クラスで再定義してしまうと、子クラスで定義したメソッドが適応される(上書き)。
例えばinitializeメソッドに対して、新しい引数を追加したい場合を想定して、実際のcodeは以下のとおり。

 

<親クラス>
def initialize(name:, price:)
self.name = name
self.price = price
end

 

<子クラス>
def initialize(name:, price:, weight:)
self.name = name
self.price = price
self.weight = weight
end

 

これで、子クラスに対してinfoメソッドを呼び出したとき、3つの引数を持つ関数として扱われる。

また、親クラスで定義しているメソッドの大部分を引きついで、子クラスで再度メソッドを再定義したい場合はsuperというcodeを使用する。

上記の例で具体的なcodeを記載すると、以下のとおり(親クラスは同じなので省略)。

 

<子クラス>
def initialize(name:, price:, weight:)
super(name:name, price:price)
self.weight = weight
end


Rubyですでに定義されているクラス
Rubyでは自分で定義しなくても、最初から色々な機能やプロパティを持ったクラスを用意してくれている。

その一例として「Dateクラス」を取り上げる。最初から用意されているクラスの場合は、読み込みも「./」がいらいないなど、細かいところが少し違う。
(自分でもDateクラスを別途定義出来るように、呼び出し経路を分けているのだと推察する)

 

require "date"
birthday = Date.new(2000,1,1:自分の誕生日⇒年,月,日)
puts birthday
puts birthday.saturday?


このcodeでは、Dateメソッドを呼び出して、自分の誕生日を引数に値を渡して、そのあとに呼び出している。

また、その日付が土曜日であるのかどうかを判定させている。

 

さらにDateクラスでは、「Date.today」とすることで、今日の日付を引数に値を代入されたインスタンスを作成することができる。
このため、今日が土曜日であるかどうかの判定をする場合は、以下のようなcodeを自分で定義したクラスに入れればよい。

 

def クラス名.judge_day
today = Date.today
return today.saturday?
end

 

これで、今日の日付のインスタンスを作成したうえで、その日が土曜日であればtureを、土曜日ない場合はfalseをreturnしてくるメソッドが完成した。


・クラスメソッドについて

インスタンスを作成してから、メソッドを実行することが前提で動いてきたけれど、クラス自体に紐づけするメソッドもある。
例えばMenクラスに紐づいたメソッドを作成したい場合、具体的なcodeは以下のとおり。


def Menu.cout_up
処理
end

 

このように、メソッド名の前にクラス名を記載することで、クラスメソッドとして認識される。

 

② ローカル環境でRubyのcodeを書こう!

f:id:yakuzen_kokoro:20200815161714p:plain

f:id:yakuzen_kokoro:20200815161723p:plain

f:id:yakuzen_kokoro:20200815161738p:plain

 

お決まりのコラムの記事で、ローカル環境でRubyを使用できるような環境構築の方法が記載されていましたので、それに沿ってRubyAtomでcode出来るようにしてみました^^

 

基本的にはRubyのダウンロードページに行って、ダウンロードして、Atomでファイルを開いてcodeを書くという手順です。

 

実際にProgateで習ったような簡単なcodeを書いてみましたが、0から書くとエラーが頻発します^^;;

 

実際に0から書いてみることを積み重ねて、エラーの読み取り能力をあげることも大切と思います!

 

ちなみに私のエラーは以下のとおりでした。

 

・「requier」が定義されてないよ⇒requireのスペルミスで、Rubyで定義されていないcodeを書いていた

 

・「end」忘れてない?⇒クラスの定義のendを忘れていました。defのendで安心しがちなので気を付けよう

 

・「initialize」の引数に対して、値の数が合わないよ⇒キーワード方式にしていたのに、普通の引数に値を入れる形でcodeを書いていた。キーワードと対応するように書き直したら問題なくなった

 

ということで、無事ローカルでも今回習ったことを反映させることが出来たので、とりあえずはRubyは終了ということで、次は別の言語を見てみます!

 

もしかしたら、Progateの学習の合間に、「コンピューターサイエンス基礎」の勉強を書籍で始めるかもしれません。

 

ここの部分がしっかりしていないと、ローカル環境での開発で色々と詰まるきがしたので^^;;

 

 

ではでは、1日でも長く続けられるように頑張っていきます^^

同志の方、一緒に頑張っていきましょう!

41日目:Ruby Ⅳ:クラスとインスタンスを使いこなそう (クラス、インスタンス、インスタンスメソッド、ファイル分割)

<学習日>

41日目

<学習内容>

① Ruby Ⅳ (0-100):クラスとインスタンスを使いこなそう (クラス、インスタンスインスタンスメソッド、ファイル分割)

<参考>

Progateレベル:177

 

<学習内容詳細>

f:id:yakuzen_kokoro:20200814183124p:plain

本日はRuby Ⅳを全て終わらせることが出来ました^^

 

なんとなくRuby学習の本丸だった気がしますので、ここを乗り越えられたら、あとは具体的なWEBアプリを作ってみる感じになるかなと思っています!

 

ユーザーからの入力やクリックに対して、レスポンスして処理を行う部分の土台を学ぶことが出来ました^^

 

① Ruby Ⅳ (0-100):クラスとインスタンスを使いこなそう (クラス、インスタンスインスタンスメソッド、ファイル分割)

f:id:yakuzen_kokoro:20200814183322p:plain

f:id:yakuzen_kokoro:20200814183331p:plain

 

ということで、そこそこのボリュームがありましたが、内容はそこまで複雑ではなく、特に突っかかるところもなくこなすことが出来ました^^

 

やや難易度が高かったのは、インスタンス生成時に、「self」というcodeを用いて、クラス内の変数に値を入れなおす部分でした。

 

が、ここはPHPの学習時にコツとして会得した、「この言語で最終的にやりたいことはなにか」を考えることで解消することが出来ました!

 

内容としてはPHPという言語と、この部分に関しては同じかと思ったので、その時の考察を貼っておきますね^^

 

yakuzen-kokoro.hatenablog.jp

 

では、具体的なcodeを挙げながら、振り返っていきます!

 

・クラスの作成/定義と出力方法
クラスは以下のように作成する。なお、前半がクラスのプロパティのようなもので、クラスが値を受け取れる「特徴」の枠。
後半がクラスが実行できる「処理」の枠で、メソッドと言ったりする。

 

<定義>
class Food
attr_accessor :name
attr_accessor :price

def info(name, price)
return "このメニューは#{self.name}で、値段は#{self.price}円です"
end
end

 

endはclassに対するものと、defに対するもので2つ必要となる。
「self.変数」とすることで、このクラス内で定義した変数に対して、外から値を入れたものをそのまま引用できる。

 

このときの出力方法の一例として、以下のようなcodeがある。

 

<出力方法>
menu1 = Food.new
menu1.name = "寿司"
menu1.price = 3000

puts menu1.info

 

<出力結果>
このメニューは寿司で、値段は3000円です


・メソッドを引数で定義して、値を突っ込んで合計の値段を計算させる。
例えば、たくさん買うと割引率が高くなるようなオプションも含めて、買う個数を指定すると、合計金額が得られるような仕組みを作ることが出来る。

今回は、上記の寿司に対して、2人前以上頼むと10%引き、5人前以上頼むと20%引きになるようにする。

 

<定義:クラスの中>
def final_total_price(count)
total_price = self.price * count
if count >= 5
total_price = total_price * 0.8
elsif count >= 2
total_price = total_price * 0.9
end
return total_price
end

 

<出力方法>
puts menu1.final_total_price(1)
puts menu1.final_total_price(2)
puts menu1.final_total_price(10)

 

<出力結果>
3000
5400
24000

 

returnには、成立した時点でそれよりも下のcodeを実行しない(endの範囲内で)という点に注意して、ifの条件式の書き方は順番を意識するのが大切。

 

インスタンス生成時に値を自動で取得してしまう(特にプロパティに、個別のインスタンスが作成された時点で値を受け取る)

「initialize」という関数を使って、自動で値を受け取る機能を持たせることが出来る。
具体的なcodeは以下のとおり。

 

<定義:クラスの中>
def initialize(name:, price:)
self.name = name
self.price = price
end

 

このcodeを使うことで、色々な種類のインスタンスを作成したときに、このインスタンス内で用いる変数に、常に値が入った状態となる。
複数のインスタンスを使って、each関数と組み合わせると、どのように時短になるのか、以下のcodeで説明する。

 

<クラスの定義>
class Food
attr_accessor :name
attr_accessor :price

def initialize(name:, price:)
self.name = name
self.price = price
end

def info
return "このメニューは#{self.name}で、値段は#{self.price}円です"
end
end

 

<出力方法>
menu1 = Food.new(name:"寿司", price:3000)
menu2 = Food.new(name:"お茶", price:200)
menu3 = Food.new(name:"いなり", price:500)

menus = [menu1, menu2, menu3]

memus.each do |menu|
puts menu.info
end

 

<出力結果>
このメニューは寿司で、値段は3000円です
このメニューは.お茶で、値段は200円です
このメニューはいなりで、値段は500円です

 

ということで、自動生成や、ユーザーが指定した値を受けての応答が出来るような未来が見えますね。

 

・ファイルを分けて、他のファイルから情報を受け取る方法
以下のcodeを、最初に張り付けるだけ。

 

require "./ファイル名"


・コンソールで値を打ち込ませて、その値を受け取る方法
具体的なcodeは以下のとおり。

 

文字列として受けたい場合⇒gets.chomp
数字として受けたい場合⇒gets.chomp.to_i

 

より具体的に、各メニューにメニュー番号を割り付けて、その番号を入力したら、メニュー名と番号を返すcodeを挙げると、以下のとおり。

 

<クラスの定義>
class Food
attr_accessor :name
attr_accessor :price

def initialize(name:, price:)
self.name = name
self.price = price
end
end

 

<出力方法>
menu1 = Food.new(name:"寿司", price:3000)
menu2 = Food.new(name:"お茶", price:200)
menu3 = Food.new(name:"いなり", price:500)

menus = [menu1, menu2, menu3]

index = 0

memus.each do |menu|
puts menu.info
index += 1
end

puts "メニュー番号を入力してください"

number = gets.chomp.to_i
select_menu = menus[number]

puts "選択したメニューは#{select_menu.name}です"


<出力結果>

メニュー番号を入力してください
1
選択したメニューはお茶です


こんな感じで、訪問者のクリックや入力に対応して、自動で処理をするシステムの基幹部分を担うことが出来そうです。

 

ということで、本日はこのくらいで終わりにしようと思います。

 

今日は時間に余裕があるので、7つの習慣を読み終えることと、税金について大河内さんの動画でがっつり勉強しようと思います! 

(こうしてみると、プログラミングはあくまで趣味になっていますね^^;;) 

 

 

ではでは、1日でも長く続けられるように頑張っていきます^^

同志の方、一緒に頑張っていきましょう!