ギークなエンジニアを目指す男

基幹系SIerが機械学習系の知識を蓄えようとするブログ

MENU

小学生でもわかるRuby on Rails入門を学習しました。(ソースコード有り)

明けましておめでとうございます。
今年もRubyonRailsの学習を継続していこうと思います。
よろしくお願い申し上げます。

今年の目標としては、公開できるサービスを2つ以上作成し、ユーザを1人以上獲得することです!!!

本日は昨年より進めていた 小学生でもわかるRuby on Rails入門 を一通り学習し終えたので、所感などを記事として残しておきます。(最後にソースコードも載せておきます)

Twitterライクなアプリ作成

小学生でもわかるRuby on Rails入門では、Twitterライクなアプリの作成を基盤として、MVCの概念などを学ぶことができます。

rails newコマンドからビュー、コントローラ、データベースの作成は一通り学ぶため、タイトル通り、小学生でも簡単に作ることのできる内容になっています。

ドットインストールと比較すると物足りないボリューム

私がRailsの勉強として今まで行ったものは、ドットインストールのみなので、どうしてもこれとの比較となってしまいますが、やはりボリューム面では物足りなさが生まれます。
(小学生でもわかるRuby on Rails入門は2〜3時間ほどで終了します)

Railsに慣れるという意味では最高

先にも述べましたが、小学生にも分かる様な内容になっているので、Rails初心者が初めて学習する教材としては最高ではないかと思います。
私はドットインストールを学習してからでしたが、ここの順番はどちらが先でも良いのではないかと思います。
(ただ、小学生でも分かる(ry を先に学習すると、ルーティングなどの概念が分かりにくい部分もあります)

おすすめとしてはドットインストール→小学生でも(ry の順番で学習できれば、rails入門は完璧ではないでしょうか。

今後の学習

この次はRailsチュートリアルを学習していこうと思います。
これを1月中に終了させ、2月以降は自分の構想しているアプリケーション作成用の勉強時間としていく予定です。

小学生でもわかるRuby on Rails入門のソースコード

ソースコードGitHubに載せています。 よければ参考になさってください。

github.com

ドットインストールで作るブログアプリその8(RubyonRails)

例のごとくドットインストールのRails5の動画を元に学んでいきます!
前回までは記事の編集処理の実装まで行ったので
本日はブログの記事にコメントが登録できるような処理の追加を行います!(23章あたりからです)
前回同様、Githubへのソースコードアップもします。

前回記事はこちら

taxa-program.hatenablog.com

  • Comment モデルの作成
  • ルーティングの設定
  • Commentsコントローラの作成
  • コメントを保存するActionの作成
  • 登録したコメントを表示させる

Comment モデルの作成

下記コマンドでmodelの作成を行います。

 $rails g model Comment body:string post:references

ここでのポイントは、postに紐づけるためにreferences特性を付与していることです。(Commentは単数形です)

そのあとはお決まりのmigrateをしましょう。

 $rails db:migrate

これでコメントmodelが作成されたことが分かると思います。
app/models/comment.rb

class Comment < ApplicationRecord
  # postに紐づいていることが記載されている
  belongs_to :post
  # バリデーションを設定
  validates :body, presence: true
end

さらに、下記ファイルも修正します。

続きを読む

ドットインストールで作るブログアプリその7(RubyonRails)

例のごとくドットインストールのRails5の動画を元に学んでいきます!
前回までは記事の編集処理の実装まで行ったので
本日は共通部品の作成から行います!(21章あたりからです)
また、本日はGithubソースコードも上げれたらなと思っています。

前回記事はこちら taxa-program.hatenablog.com

  • 共通部品(Partial)の作成
  • 削除リンクの作成

共通部品(Partial)の作成

現状、下記2つの新規登録のviewファイルと、編集のviewファイルの内容はほとんど同じ処理が記述されていると思います。
app/views/posts/new.html.erb
app/views/posts/edit.html.erb

この共通部分を一つにまとめていきます。
一つにまとめたファイルをPartialと呼ぶそうです。
また、このPartialファイルは頭文字を'_'から始めるのがルールです。

app/views/posts/_form.html.erb

<%= form_for @post do |f| %>
<!-- タイトルcolumnに対応するフィールド -->
<p>
    <%= f.text_field :title, placeholder: 'enter title' %>
    <!-- エラーがあるかチェック -->
    <% if @post.errors.messages[:title].any? %>
    <!-- エラーがあった場合、そのメッセージの内容を表示する。メッセージは最初の一つを表示する。 -->
    <span class="error"><%= @post.errors.messages[:title][0] %></span>
    <% end %>
</p>
<!-- ボディcolumnに対応するフィールド -->
<p>
    <%= f.text_area :body, placeholder: 'enter body text' %>
    <!-- エラーがあるかチェック -->
    <% if @post.errors.messages[:body].any? %>
    <!-- エラーがあった場合、そのメッセージの内容を表示する。メッセージは最初の一つを表示する。 -->
    <span class="error"><%= @post.errors.messages[:body][0] %></span>
    <% end %>
</p>
<p>
    <%= f.submit %>
</p>
<% end %>

そして、共通化された新規登録と編集のviewファイルには下記の様に、Partialの'_'を削除した記述をしてあげます。

続きを読む

Git入門(ソースコードあげてみる編)

こんばんは。

本日は、現在勉強中のRailsソースコードを公開してみようと思い立ち(需要がないのは重々承知です)
備忘録がてら、GitHubでのソースコード公開手順も残していこうと思います。

ソースコードあげてみる編と書きましたが、続編が登場する確率は低いです。

はじめに

環境は以下の通りです。(2017/11/26現在)

OS:macOS Sierra Ver.10.12.5

また、GitHub用語やユーザ登録方法などは割愛させていただきます。

リポジトリの作成

GitHubにログイン後、まずはリポジトリの作成を行います。
f:id:taxa_program:20171127000638p:plain

項目を埋めてCreate repositoryボタンを押下します。 f:id:taxa_program:20171127232700p:plain

これでGitHub上のリモートリポジトリの作成は終了です。

次に、ローカルリポジトリの作成を行います。

続きを読む

ドットインストールで作るブログアプリその6(RubyonRails)

例のごとくドットインストールのRails5の動画を元に学んでいきます!
前回までで、記事の登録処理まで実装できたので、
本日は記事編集リンクの作成から行います!(19章あたりからです)

前回記事はこちら taxa-program.hatenablog.com

  • viewの修正(編集フォーム作成)
  • 編集Actionの追加

viewの修正(編集フォーム作成)

編集先へのリンクを作成するため、TOPページのview(index)に
手を加えていきます。
rails_lessons/myblog/app/views/posts/index.html.erb

  <!-- 編集ボタンの追加 -->
  <%= link_to '[Edit]', edit_post_path(post), class: 'command' %>

次にスタイルシートにcommand属性を追加します。
rails_lessons/myblog/app/assets/stylesheets/application.css

.command {
  font-size: 12px;
}

ここでブラウザで見てみると...
f:id:taxa_program:20171126230520p:plain

編集リンクが追加されていることが分かるかと思います。

次に編集リンクを押した時のActionを定義していきます。

続きを読む

ドットインストールで作るブログアプリその5(RubyonRails)

例のごとくドットインストールのRails5の動画を元に学んでいきます!
本日は17章からの部分です。

前回記事はこちら taxa-program.hatenablog.com

  • バリデーションを設定する
  • viewファイルの修正(new)

バリデーションを設定する

現在はデータがNULL(空データ)でも登録できてしまいます。
これではシステム上よくないため、チェックを行います。

バリデーションのチェックはmodelに対して行うため、
下記ファイルを次のように修正します。
rails_lessons/myblog/app/models/post.rb

class Post < ApplicationRecord
  # 必須チェック(presence)と文字数(length)チェック及びエラーメッセージの設定
  validates :title, presence: true, length:{ minimum: 3, message: 'Too short to post!!' }
  validates :body, presence: true
end

エラーが発生した場合は、new画面にエラーメッセージを表示したいため、ビューファイルの修正も行います。

続きを読む

ドットインストールで作るブログアプリその4(RubyonRails)

例のごとくドットインストールのRails5の動画を元に学んでいきます!
本日は14章からの部分です。

前回記事はこちら taxa-program.hatenablog.com

  • 記事追加リンクの作成
  • リンクに対するアクションの作成
  • アクションに対するビューの作成

記事追加リンクの作成

下記ファイルにAdd Newのリンクを作成します。
rails_lessons/myblog/app/views/posts/index.html.erb

<h2>
  <%= link_to 'Add New', new_post_path, class: 'header-menu' %>
  My Posts
</h2>

さらに、cssにheader-menuの属性を定義します。
rails_lessons/myblog/app/assets/stylesheets/application.css

.header-menu {
  font-size: 12px;
  font-weight: normal;
  float: right;
}

リンクに対するアクションの作成

newアクションとcreateアクションを定義します。
ここでなぜnewとcreateなのかというと、ルーティングに定義されているからです。
ここでもう一度ルーティングを確認してみます。

   Prefix Verb   URI Pattern               Controller#Action
    posts GET    /posts(.:format)          posts#index
          POST   /posts(.:format)          posts#create
 new_post GET    /posts/new(.:format)      posts#new
edit_post GET    /posts/:id/edit(.:format) posts#edit
     post GET    /posts/:id(.:format)      posts#show
          PATCH  /posts/:id(.:format)      posts#update
          PUT    /posts/:id(.:format)      posts#update
          DELETE /posts/:id(.:format)      posts#destroy
     root GET    /                         posts#index

3行目と4行目に当たる部分です。
ではアクションを定義していきます。

続きを読む