20200705のRailsに関する記事は18件です。

O/Rマッピングまとめ

O/Rマッピングとは?

O/RはObject/Relationalの略。

オブジェクト指向プログラミング言語からRDB(リレーショナルデータベース)にアクセスする際の架け橋となる仕組みのこと。

O/Rマッパーとは

O/Rマッピングの考え方に基づいて実装されたライブラリのこと。

Railsで採用されているO/Rマッパーは?

Railsで採用されているO/Rマッパーで代表的なものがActiveRecordである。

※ActiveRecordが備えている主な機能

  • SQLを書かなくても、データの検索・登録・更新・削除が可能
  • RDBの関連付けをモデルクラスの関連付けとして実現できるようにする
  • データの検証機能を提供

Railsで使えるO/Rマッパーは他にどんなものがある?

  • Mongoid
  • Mongomapper
  • activerecord-alt-mongo-adapter
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【Rails】O/Rマッピングまとめ

O/Rマッピングとは?

O/RはObject/Relationalの略。

オブジェクト指向プログラミング言語からRDB(リレーショナルデータベース)にアクセスする際の架け橋となる仕組みのこと。

O/Rマッパーとは

O/Rマッピングの考え方に基づいて実装されたライブラリのこと。

Railsで採用されているO/Rマッパーは?

Railsで採用されているO/Rマッパーで代表的なものがActiveRecordである。

※ActiveRecordが備えている主な機能

  • SQLを書かなくても、データの検索・登録・更新・削除が可能
  • RDBの関連付けをモデルクラスの関連付けとして実現できるようにする
  • データの検証機能を提供

Railsで使えるO/Rマッパーは他にどんなものがある?

  • Mongoid
  • Mongomapper
  • activerecord-alt-mongo-adapter
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【Rails】Mongoidで一部の列のみを指定して検索を行いたい場合

概要

RailsでMongoDBを使用する際、一部のキーのみ指定してmodelから指定したキーで検索する方法を記載します。

前提

  • Mongoidを使用します。MongoidについてはRailsでActiveRecordの代わりにMongoidを使うを参照ください。
  • 今回、以下のようなUserモデルを使用します。emailを検索条件にして、_idpassword_digeststatusのみを抽出します。
user.rb
class User
  include Mongoid::Document
  include Mongoid::Timestamps
  include ActiveModel::SecurePassword

  field :_id, type: String, overwrite: true
  field :email, type: String
  field :name, type: String
  field :status, type: String
  field :role, type: String
  field :gender, type: String
  field :phone_number, type: String
end

実装サンプル

  • where句にemailの条件を設定して、only句で列の絞り込みを行います。
email_auth_controller.rb
class EmailAuthController < ApplicationController

  def email_auth
    #  レコードを抽出するクエリ
    find_by_email_user = User.where(email: email_auth_param[:email]).only(:_id, :password_digest, :status)
    if find_by_email_user.empty?
      render json: { message: "ユーザが見つからなかったよ" }
    else
      # 今回はemailで一意になる前提
      user = find_by_email_user[0]
      if user.status != "active"
        render json: { message: "ステータスが有効じゃないよ" }
      # authenticateメソッドも使える
      elsif !user.authenticate(email_auth[:password])
        render json: { message: "パスワードが違うよ" }
      else
        render json:  { message: "認証OK" }
      end
    end

  def email_auth_param
    params.require(:email_auth).permit(:email, :password)
  end

end
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

パスワードリセットのシステムテストをしていたら、Rails Missing host to link to! のエラーがおでましになった

前提

・ruby 2.6.3
・Rails 6.0.3.1
・rspec-rails (3.9.1)

Rails Missing host to link to!

Rspecでパスワードリセットのsystem specを書いていたら

 ArgumentError:
            Missing host to link to! Please provide the :host parameter, set default_url_options[:host], or set :only_path to true

上記のエラーが出ました。

ホストがないのでhostパラメータを指定するか、default_url_options [:host]を設定して!!

とのことでした。

確認URLを渡すメールが送れない状態みたいです。

自分は、default_url_options [:host]を設定することにしました。

config/environments/development.rb
config.action_mailer.default_url_options = { host: 'localhost:3000' }

開発環境には、設定してあるがテスト環境には確かに記述なし。

ので、テスト環境にも付け足す。

config/environments/test.rb
config.action_mailer.default_url_options = { host: 'localhost:3000' }

ちなみに、本番環境にデプロイしたも上記のようなエラーが出流みたいなので、本番環境にも付け足しとく。

config/environments/production.rb
config.action_mailer.default_url_options = { host: 'localhost:3000' }

上記設定で、エラー解消されました。

Missing host to link to! Please provide the :host parameter
RailsでMissing host to link to!が出たときに。model内でURL組み立てる場合の設定

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【Rails】seedの作り方について

目的

seedを勉強して学んだことをアウトプットしていきます!これからseedを学ぶ方にも参考になればいいなと思います。

seedとは

seedファイルというのは初期データのことです。  
例えば、開発中にデータベースをリセットした場合はデータも全て消えてしまいます。
毎回消えてしまうと登録機能がある場合リセットするたびに毎回データを登録をし直す必要が出てきます。  
すごく面倒ですよね? 
そこで、seedファイルに入れておきたいデータをdb/seeds.rbに記述しておくといちいち作り直さなくて良いってことになります!!!

基本パターン

これでUserのseedデータが一つ作られます。

User.create!(email: "test@example.com",password: "password" )

複数seedデータを作りたい時

これは基本的なRubyのコマンドを使います!emailが同じものにならない様に引数にnを渡しています。n+1にしている理由は、nのみだと0からデータが始まってしまうからです。

10.times do |n|
 User.create!(
   email: "user#{n+1}@example.com",
   password: "password" )
end

関連づけのデータ作成について

例えば、Userとそれに関連したTaskモデルがあったとします。seedデータとしてはUserモデルに関連したTaskを生成するすることにします。そうすると下記の様に記載できます!

User.all.each do |user|
 Task.create!(
  user_id: user.id,
  title: "title",
  memo: "memo",
  color: "red",
  start_date: "2020/5/1",
  end_date: "2020/5/30" )
end

CSVファイルの読み込み方について

CSVファイルを読み込むには下記の様に記載します。"db/csv/masters/init_categories.csv"の部分は自分がファイルを置いているところに寄って変わります。

CSV.foreach("db/csv/masters/init_categories.csv") do |row|
 @categories = Masters::Category.create!(name: row[0])
end

画像挿入について

今回はサンプル画像をアプリ下に用意していたので、そのやり方を下記に記載します。openメソッドを使用して読み込みます。

User.create!(
    image: open("db/images/sample.png"),
    title: "トピック",
    overview: "概要",
    link: "http://origin_job_topic_sample.com" )

ランダムに値を入れたい時

例えば、Userモデルに下記の様に記載されていた時、seedデータを作る時は両方入っているパターンが欲しいですよね?ちなみにenumはuserやadminを数値で格納できる様にしてくれる機能です。

enum user_type: {
    user: 0,
    admin: 1,
  }

そんな時は下記の様に書くとランダムにデータを作ってくれます!これもRubyの基本的な書き方を使っています!

User.create!(
 email: "test@admin.com",
 password: "password",
 status: rand(0..1) )

まとめ

seedも転職前では触った事がなかったのですが、基本的なことは今回で学習できたかなと思います。まだ、学習途中なので新しい知識を得たら随時更新していきたいと思います!!

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

LoadError

LoadErrorを解決するには

新しいルート、コントローラー、ビューを作った所にLoadError発生。
初めてみるエラーに遭遇しました。

a9eba52c9101e535dad59a0d0388ef15.png

解決法

調べるとコントローラー名が違うと指摘されていたことがわかりました
あああ.png

Profileのsが抜けていました
class ProfileControllerから
class ProfilesControllerに正しく直してあげるとエラー解決しました!

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【Rails】ログインしていないユーザーのリクエストURLを一時保存して、ログイン後にそのURLに戻す方法

タイトルが長い。フレンドリーフォワーディングについてまとめます。

フレンドリーフォワーディングとは

「Youがリクエストしたページ、ログイン後のページなんだけど、まだログインしてないじゃん。ログインしてから行きたかったページに案内してあげるね」という類の処理です。よくお見かけする親切設計。きめ細かいです。

どうやって作るの?

大まかな流れとしては次のようになります。

* ログインしていないユーザーがきたとき
 1. リクエストされたURLを一時保存する
 2. ログイン画面に飛ばしてログイン確認
 3. リクエストされていたURLに戻す

メソッド定義

リクエストを一時保存するためのメソッド(1)と一時保存したURLに戻すためのメソッド(3)を用意します。今回はsessions_helper.rb内に、以下のように書きます。

helpers/sessions_helper.rb
# 1. リクエストされたURLを一時保存する
def store_location
  session[:forwarding_url] = request.original_url if request.get?
end

# 3. リクエストされていたURLに戻す
def redirect_back_or(default)
  redirect_to(session[:forwarding_url] || default)
  session.delete(:forwarding_url)
end

1でsession[:forwarding_url]として、リクエストされたURL(request.original_url)を保存します。 if request.get? でリクエストの種類をGETアクションにのみ限定してあります。

3は一時保存したURLに戻す、あるいはデフォルトとして指定するURLに戻すための処理です。URLが存在しない場合も考慮して||以降でdefaultで設定したURLを入れられるようにしています。
また、セッション情報を保持したままにしておくと、次のログインの時もこれを読み込んでおかしなことになるので、メソッド内2行目のsession.delete(:forwarding_url)で一時保存したURLを削除します。

リクエストされたURLを一時保存 + ログイン確認

アクセスしようとしたURLを一時的に保存するためにstore_locationを呼び出ていきます。
ここではusers_controller.rbのprivate以下、ログインしているユーザーがどうかを確認する記述とあわせて書いていきます。

users_controller.rb
class UsersController < ApplicationController
  before_action :user_login_required





private

def user_login_required
  unless logged_in? # ログインしていないとき
    store_location # ここでURLを一時保存!
    flash[:danger] = "ログインしてください" # フラッシュメッセージを表示
    redirect_to login_url # ログインページに強制的に送る
  end
end

リクエストされていたURLに戻す

ログイン後の遷移先をredirect_back_or(default)を使って指定していきます。ログイン処理を行なっている箇所に次のように書けばOKです。

controllers/sessions_controller.rb
def create
  user = User.find_by(email: params[:session][:email].downcase)
  if user && user.authenticate(params[:session][:password])
    log_in user
    params[:session][:remember_me] == '1' ? remember(user) : forget(user)
    flash[:success] = "ログインしました"
    # 以下でリダイレクト先を指定。defaultは、ここではuserを使いまわしているが user_url のように書くことができる
    redirect_back_or user 
  else
    flash.now[:danger] = 'ログインに失敗しました'
    render 'new'
  end
end

以上で実装完了です!
存在するURLからあえて強制送還をくらった後にログインしてみると、そのURLに飛ぶようになっていると思います。おつかれさまでした。

さいごに

以上、それぞれの役割が一目でわかりやすいように、自分なりにまとめ直してみました。少しでも参考になればうれしいです。

実装にあたり以下を参考にさせていただきました。ありがとうございました。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

<Rails> BootstrapのCard全体をリンクにする

ブログアプリを作成した際、投稿一覧を表示するためにBootstrapのcardを利用しました。
Card全体を詳細表示へのリンクにする方法をまとめます!

BootstrapのCardを実装する前の一覧表示はこんな感じです。

 <p><%= l post.created_at, format: :short %></p>
 <h5 class="card-title"><%= post.title %></h5>
 <p class="card-text"><%= post.content %></p>
 <%= link_to "詳細", post %>

スクリーンショット 2020-07-05 16.02.21.png

それぞれ投稿日時とタイトル、本文を1行だけ表示させています。

1. 投稿一覧をCardで表示

Bootstrapに用意されているクラスを利用します。

Cardについてはこちらを参照。
https://getbootstrap.jp/docs/4.5/components/card/

<div class="card border-dark mb-3" style="max-width: 18rem;">
  <div class="card-body text-dark">
    <p><%= l post.created_at, format: :short %></p>
    <h5 class="card-title"><%= post.title %></h5>
    <p class="card-text"><%= post.content %></p>
   <%= link_to "詳細", post %>
  </div>
</div>

<実装結果>
スクリーンショット 2020-07-05 16.16.10.png

ひとまずいい感じになりましたー!!

今回headerとfooterは必要なかったので省いています。

2. Card全体をリンクに

今のままではCardの中に詳細ページへのリンクがそのまま表示されてしまっているので、このリンクをCard全体に適用させたい…。

実装方法を調べたところ、<div class="card-body text-dark">ではなく <a href="#" class="card-body text-dark">のような感じで、全体を囲むと良いらしい!

<div class="card border-dark mb-3" style="max-width: 18rem;">
  <a href="/posts/<%= post.id %>" class="card-body text-dark">
    <p><%= l post.created_at, format: :short %></p>
    <h5 class="card-title"><%= post.title %></h5>
    <p class="card-text"><%= post.content %></p>
  </a>
</div>

一つ一つの投稿を取り出すためにpost.idが必要になりますが、その際にイコールを忘れてしまうとidが取れなくなるので、必ず<%= post.id %>と記述します。

私はこれで何度かはまりました。。

<実行結果>

スクリーンショット 2020-07-05 17.04.27.png

これでCard全体を詳細ページへのリンクにすることができました!

もう一つ、aタグではなくlinkタグの方法で実装するやり方も。

結果としては、Card全体を<%= link_to ~ do %><% end %>で囲みます!

<div class="card border-dark mb-3" style="max-width: 18rem;">
  <%= link_to post, class: "card-body text-dark" do %>
    <p><%= l post.created_at, format: :short %></p>
    <h5 class="card-title"><%= post.title %></h5>
    <p class="card-text"><%= post.content %></p>
  <% end %>
 </div>

aタグで記載していたBootstrapのclass "card-body text-dark" はlinkタグの中にrailsの記述方法で書き直します。

普段 <%= link_to ~ %>のように1行でしか記述したことがなかったので、do~endで囲むやり方は初めて知りました!

備忘録として残しておきます。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

EC2にデプロイするも、エラーログに何も表示されない時の可能性

環境

Ruby 2.5.1
Rails 5.2.4.3

こちらの記事を参考にAWSにデプロイする過程を終えたのですが、ブラウザからアクセスすると「このサイトに接続できません」となり失敗してしまう…

(注)参考にさせて頂いた記事は大変分かりやすく、記事のせいではありません。

何がダメなのか、記事を参考にログを確認してみます。

サーバー環境(/var/www/rails/アプリ名/)
cd log
tail -n 30 production.log

スクリーンショット 2020-06-26 16.18.13.png

何故かログを見てもエラーのようなものが見当たりません。
最初は意味不明でしたが、しばらく悩んだ結果ブラウザからアクセスができてないかもしれないと考えました。

そこでcurlを使って直接httpにアクセスしてみます。

$ curl -IXGET http://IPアドレス/
HTTP/1.1 301 Moved Permanently
Server: nginx/1.12.2
Date: Sat, 27 Jun 2020 05:09:57 GMT
Content-Type: text/html
Transfer-Encoding: chunked
Connection: keep-alive
Location: https://IPアドレス/

301が返ってきています。
どうやら、httpへのアクセスがhttpsに勝手にリダイレクトされてしまってるようです。試しにあえてcurlでhttpsにアクセスしてみました。

$ curl -IXGET https://IPアドレス/
curl: (7) Failed to connect to IPアドレス port 443: Connection refused

433のportが空いてないと怒られました。
確かにセキュリティグループで433の設定はしていないので当然ですね。

ということでセキュリティグループのインバウンドルールに433を追加して、ブラウザからhttpでアクセスしてみるとhttpsでページが開きました!(感動)

ただ、今はhttpsではなくてhttpで開くのが本来の目標です…

結果

httpからhttpsにリダイレクトされていた原因は/config/environments/production.rbにある以下の記述でした。

/config/environments/production.rb
config.force_ssl = true

こちら以前herokuデプロイでssl化した時に記述したものだと思われます…
これがあるとssl化のためにhttpsにリダイレクトするようです。

ということでローカルで直してもいいのですがpushしたりcloneしたりするのが面倒なのでとりあえずサーバー内の記述を書き換え、確認だけしてみます。

$ cd /var/www/rails/Ticket-Rec/config/environments/
$ vi production.rb

以下のように変更

/config/environments/production.rb
config.force_ssl = false

unicornを再起動

$ ps -ef | grep unicorn | grep -v grep
hiroki    2031     1  0  6月26 ?      00:00:02 unicorn_rails master -c /var/www/rails/Ticket-Rec/config/unicorn.conf.rb -D -E production
hiroki    2036  2031  0  6月26 ?      00:00:00 unicorn_rails worker[0] -c /var/www/rails/Ticket-Rec/config/unicorn.conf.rb -D -E production
hiroki    2038  2031  0  6月26 ?      00:00:00 unicorn_rails worker[1] -c /var/www/rails/Ticket-Rec/config/unicorn.conf.rb -D -E production

$ kill 2031
$ bundle exec unicorn_rails -c /var/www/rails/Ticket-Rec/config/unicorn.conf.rb -D -E production

nginxを再起動

$ sudo service nginx restart

再度curlでhttpにアクセスしてみると200が返ってきました!

$ curl -IXGET http://IPアドレス/
HTTP/1.1 200 OK
Server: nginx/1.12.2
Date: Sat, 27 Jun 2020 05:27:46 GMT
Content-Type: text/html; charset=utf-8
Transfer-Encoding: chunked
Connection: keep-alive
X-Frame-Options: SAMEORIGIN
X-XSS-Protection: 1; mode=block
X-Content-Type-Options: nosniff
X-Download-Options: noopen
X-Permitted-Cross-Domain-Policies: none
Referrer-Policy: strict-origin-when-cross-origin
ETag: W/"03411acbf679047381b99fd0eda2307c"
Cache-Control: max-age=0, private, must-revalidate
Set-Cookie: _myapp_session=%2Fj%2FMy4fzeeSRY3imIh%2FCkJg94SzoshjfdaYZhZcEzF4i%2BxXXUZiYY8M%2Flre%2F6TAAvXqfyrr5sJ8ke2aOlhh4o8i6xsMfO7Ubp7LvUQnAxB9gm%2FbQ8Gc%2BLPzZAxcL9OgDLvQaocLN1MTSz6XKaDM%3D--1h9%2FJNHiHiktaWNU--CJuK9RUucx3dkTVkQpjYLg%3D%3D; path=/; HttpOnly
X-Request-Id: 9d2ee01e-fa05-40ae-8959-6e9b40f9b3e1
X-Runtime: 0.005877

実際にブラウザで開いてみる

ブラウザ
http://IPアドレス/

無事アプリにアクセスできました!
めでたしめでたし!

と言っても、もしこの後ssl化する時は結局

/config/environments/production.rb
config.force_ssl = true

に設定すると思われます笑

ただ、繋がらない原因が分かりました。

参考

【画像付きで丁寧に解説】AWS(EC2)にRailsアプリをイチから上げる方法【その1〜ネットワーク,RDS環境設定編〜】

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Rails5でECサイトを作る③ ~Modelのアソシエーション、その他諸々を設定~

はじめに

架空のベーカリーで買い物できるECサイトを作るシリーズ、Rails5でECサイトを作る②の続きです。
今回もまだ準備段階。Model同士の関連を設定していきます。

ソースコード

https://github.com/Sn16799/bakeryFUMIZUKI

サインイン後のルート設定

サインイン、サインアウト後の遷移先を指示していなかったことに気付いたので、ここで設定。

app/controllers/application_controller.rb
  before_action :configure_permitted_parameters, if: :devise_controller?
  #デバイス機能実行前にconfigure_permitted_parametersの実行をする。

  add_flash_types :success, :danger, :info  #ついでにBootstrapのflash設定も記述

  protected

  def after_sign_in_path_for(resource)
    case resource
    when Admin
      admins_top_path
    when Customer
      customer_top_path
    end
  end

  def after_sign_out_path_for(resource)
  if Admin
    new_admin_session_path
  end
  end


  def configure_permitted_parameters
    devise_parameter_sanitizer.permit(:account_update, keys: [:is_active, :first_name, :first_name_kana, :family_name, :family_name_kana, :post_code, :address, :email, :tel])
    #sign_upの際にnameのデータ操作を許可。
  end

Model部分の設定

アソシエーションとバリデーションを設定します。

app/models/address.rb
belongs_to :customer

validates :post_code, presence: true, length: {minimum: 2, maximum: 10}
validates :addressee, presence: true, length: {minimum: 2, maximum: 35}
validates :address, presence: true, length: {minimum: 2, maximum: 50}
app/models/cart_item.rb
belongs_to :customer
belongs_to :product
validates :customer_id, presence: true
validates :product_id, presence: true
app/models/customer.rb
  has_many :cart_items
  has_many :products, through: :cart_items

  has_many :orders
  has_many :addresses

  validates :email, length: {minimum: 3, maximum: 80}
  validates :family_name, length: {minimum: 1, maximum: 15}
  validates :family_name_kana, length: {minimum: 1, maximum: 20}
  validates :first_name, length: {minimum: 1, maximum: 15}
  validates :first_name_kana, length: {minimum: 2, maximum: 20}
  validates :post_code, length: {minimum: 3, maximum: 10}
  validates :address, length: {minimum: 3, maximum: 50}
  validates :tel, length: {minimum: 3, maximum: 15}
app/models/genre.rb
has_many :products
validates :name, presence: true, length: {maximum:15,minimum:2}
app/models/order.rb
belongs_to :customer
has_many :order_items, dependent: :destroy
#中間テーブルを介して複数のプロダクトを持つ
has_many :products, :through => :order_items

belongs_to :customer

validates :addressee, presence: true, length: {maximum: 35, minimum: 2}
validates :post_code, presence: true, length: {maximum: 10, minimum: 2}
validates :send_to_address, presence: true, length: {maximum: 50, minimum: 3}
app/models/order_item.rb
belongs_to :order
belongs_to :product
app/models/product.rb
belongs_to :genre
has_many :cart_items
has_many :customers, through: :cart_items
has_many :order_items
has_many :products, through: :order_items
attachment :image
validates :name, presence: true, length: {maximum:30,minimum:2}
validates :introduction, presence: true, length: {maximum:250,minimum:2}
validates :price, presence: true
validates :image, presence: true

後記

これで準備は整ったはず。次回から実装に入りたいところです。
機能の根幹とは関係ないですが、サイトの配色やデザインもそろそろ決めねばなりません。チーム実装の実習時は、当初「和風の配色にしよう」という話をしていたのに、気付いたら和でも何でもなくなっていたので、今度こそ和風のデザインを意識してみようかな?などと画策中です。

果たして、デザイン知識0で和風テイストを表現できるのか?
次回へ続く!

おすすめ色見本サイト

https://www.color-sample.com/
「襲(かさね)の色目」という、平安時代の人々が着物の色を組み合わせて装う際の色見本を集めたサイト。同様のサイトはそれなりにあるものの、こちらはカラーコードが載っていて便利。

https://colordrop.io/
4色ずつ組み合わされた色見本を延々と眺めることができる。特定の色で検索をかけたり、いいねをつけてまとめて見たりすることが可能。気が付くと2時間経っている。

https://www.schemecolor.com/
2色から6色までの組み合わせが沢山載っている。検索・ソート機能も充実。気が付くと2時間経っている。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

[Rails] form_tagはデフォルトでHTTPメソッドをPOSTにする

aaa

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【保存版】WEBプログラミング完全ロードマップ【MacBook購入から実務レベルへ】

WEBプログラミング完全ロードマップとは

下記の体験を完全無料にてご提供いたします。お金を取ろうにも、
Qiitaはnoteとかと違って有料記事機能がないですからね。安心です。

・MacBookを買えば誰でもできます
・プログラミング初心者向けの教材です
・WEBプログラミングの基礎を解説します
・完全未経験でもプログラミングを学べます
・QiitaようなWEBサービスを個人で作れます

この記事を読むメリット

・50万円で納品できるWEBサイトを制作するスキルが身につきます

皆さんがたった今使っている「Qiita」というWEBサイトですが、
1から制作すると「納期30~60日、価格50~100万円」の規模です。

本教材ではQiitaを簡略化したWEBサイトを1から制作しますから、
クリアできれば、その金額を稼ぐスキルが身につくことになります。

成果物

結論ファーストでいきます。
この教材で制作する成果物は、以下のようなWEBサイトです。

ss.png

機能紹介

新規記事投稿(articles#new)
ブログ記事を投稿することができます。Qiitaと同様、マークダウン記法やコードブロックの挿入、本文中への画像挿入などの機能を使用することができます。

記事一覧表示(articles#index)
投稿された記事の一覧表示ができます。
記事のアイコンをクリックすると、記事の閲覧画面に移動できます。

記事閲覧(articles#show)
投稿された記事を閲覧できます。
いいね機能やSNSのシェア機能なども搭載されています。

マイページ(users#show)
ユーザのプロフィールやインプレッション、投稿した記事の一覧が確認できます。


以上が本教材の成果物です。要するに、Qiitaを制作していきます。
それでは早速、学習に入っていきましょう。

学習カリキュラム

1.MacBookを購入しよう
2.ブラウザをインストールしよう
3.開発の環境を作ろう【Homebrew】
4.エディタをダウンロードしよう
5.HTMLとCSSの基礎を理解しよう
6.デベロッパーツールを使ってみよう
7.レスポンシブデザインを知ろう
8.Flexboxを使いこなそう【神業】
9.RailsでTwitter風アプリを作ろう
10.Git/Githubを使ってみよう
11.AWSにアプリをデプロイしよう
12.RailsでQiita風アプリを作ろう

1.MacBookを購入しよう


まずはパソコンを買いましょう。MacBook Pro 13インチというパソコンがおすすめで、値段は¥134,800(税別)です。これは、そこそこお財布に痛い出費ですね。しかし、今回制作する「Qiita風WEBサイト」が50万円で売れたとします。すると初期投資の15万円は、WEBサイトを1つ売った時点で回収できます。

プログラミング学習のリターン
・開発期間  :1か月
・初期費用  :¥150,000
・アプリ単価  :¥500,000
・リターン(1年):¥(50×12-15)×10,000 = ¥5,850,000

しかし、上記はプログラミング学習で挫折せずに継続した場合の計算になりますから、挫折すると上記の通りにはなりません。ただ、その場合はメルカリでMacBookを売却してしまえばいいだけかなと思います。6万円で売却できますので、9万円の出費で抑えられます。

まとめると、プログラミング学習のコスパは以下のような感じになります。

プログラミング学習のコストパフォーマンス
・開発期間  :1か月
・初期費用  :¥150,000
・アプリ単価  :¥500,000
・リスク    :¥(15-8)×10,000     = ¥   90,000
・リターン(1年):¥(50×12-15)×10,000 = ¥5,850,000

年間585万円のリターンがある挑戦のリスクが9万円って安すぎだな、と個人的には思います。昔はこの桁のリターンを得たければ、起業して、事業を起こして、仲間を集めて...といったことが必要だったと思います。そして会社が倒産したら何百万の借金、信頼も仲間も全て失う、みたいな感じですよね。

これが、個人でたった9万円のリスクを払うだけで達成できてしまうかもです。しかもリターンが初年から585÷9=65倍です。コスパが良すぎ。いい時代になりましたね。

一般的にみても今回ご紹介する「Ruby」というプログラミング言語を生業とするエンジニアの平均月収は50~100万円(年収600~1,200万円)だと言われているので、この概算はあながち間違いではないと思います。興味があれば、Railsエンジニア 平均年収でググってみて下さい。

それでは、MacBookを買いましょう。MacBookはこちらから購入できます。種類がいろいろありますが、特にこだわりがなければMacBook Proの13インチで問題ないかな、と思います。メモリも8GB/16GBから選べますが、プログラミングをするだけなら8GBで十分です。

2.ブラウザをインストールしよう

「ブラウザ」というのは、インターネットを見るためのアプリのことです。色々な種類がありますが、プログラミングにおいてはGoogle Chromeというブラウザを使うのが一般的です。

こちらのリンクから、インストールしましょう。リンク先でChromeをダウンロードをクリックすると、画面左下にgooglechrome.dmgというのが表示されます。これがインストール用のファイルなので、クリックしてインストールを完了して下さい。

3.開発の環境を作ろう【Homebrew】

プログラミングをしていくには「開発環境」というものが必要になります。スマホを新品で買ったらLINEやYoutube、Twitterといったアプリをストアからダウンロードしますよね。

それと同じような感じで、プログラミングするためのアプリをダウンロードしていく、みたいな感じです。ここでダウンロードしていくのは、以下のような名前のものです。

・Homebrew
・rbenv
・ruby-build
・readline
・Ruby
・MySQL
・bundler
・Rails
・Node.js

見ての通り数がだいぶ多いですが、覚える必要は特にありません。LINEの使い方を覚えるときって、別にLINEの役割や機能を事前に逐一チェックしたりしませんでしたよね。同じ感じで、使っていけば自然と「このアプリは何なのか」を覚えていくので、気にせず作業していきましょう。

それにしても、知らない単語が目の前にドーンと沢山出てきて既に「辛い。。」と思ってしまうかもですが、これもスマホアプリの例で考えてみてください。次の単語一覧は、見ていて辛いでしょうか?

・LINE
・Twitter
・Instagram
・TikTok
・Youtube

辛くないですね。しかし、これも上記のリストと全く同じ「謎の単語の羅列」です。上記の単語一覧も、スマホを知らないお婆さんからすれば、見ていて辛い物かもしれません。

プログラミング学習では「謎の単語の羅列」に何度も何度も遭遇します。未知は人間にとって「恐怖」なので、プログラミング未経験者の多くは未知との遭遇で挫折してしまいがちです。

しかし、全ての「未知の単語」は、繰り返し触れているうちに「LINE Twitter」のような無害な言葉に変化していきます。なので、安心して学習に取り組んで頂きたいのです。

また、この教材はあなたを「置き去りにする」ようなことはしません。「読んでる人に伝わっているか?」という目線で全カリキュラムを執筆していますので、ご安心ください。

それでは、実際の作業を開始していきましょう。

Command Line Toolsの導入

読んでおくべき記事が「1本」あります。
・Command Line Toolsとは?役割とその使い方を解説

Homebrewの導入

読んでおくべき記事が「1本」あります。
・Homebrewとは?役割とインストール方法を解説

RubyとRailsの導入

プログラミングには「言語」というものがあります。これは現実世界における「日本語」「英語」みたいなものです。いろいろありますが、今回は「Ruby語」を使います。

読んでおくべき記事が「1本」あります。
・Rails on Railsとは?その役割と、導入方法を解説【結論:カレールーです】

MySQLの導入

読んでおくべき記事が「1本」あります。
・MySQLとは?パンケーキを添えてあなたのMacに導入する方法【簡単です】

環境構築が完了です

お疲れ様でした!続けて、エディタというものを導入する作業に移ります。

4.エディタをダウンロードしよう

読んでおくべき記事が「1本」あります。
・VSCodeとは?役割と導入方法を解説【結論:コードを書くためのアプリです】

準備完了!

これで諸々の準備が完了です。ここから先はついにコーディング作業です!

5.HTMLとCSSの基礎を理解しよう

見ておくべき動画が「2本」あります。
・はじめてのHTML入門講座(24本)
・はじめてのCSS入門講座(34本)

こちらの動画を見ながら、実際に手を動かしてコーディングしてみましょう。VSCodeでコーディングしていくので、まずはVSCodeを開き、キーボードのcommand+Nを押します。するとUntitled-1というファイルが生成されます。このファイルは保存されていないので、command+Sを押して 表示される保存メニューから、"デスクトップ"を指定して保存するのがオススメです。また、ファイル名は"index.html"や"style.css"のように"ファイル名.拡張子"という名前にしましょう。「拡張子」というのはファイルの種類を示すもので、.htmlとすれば「このファイルはhtmlで書かれているよ」とパソコンに教えてあげることができます。

また、HTMLで書いたファイルを開く時は、デスクトップに保存したファイルを2本指クリック→このアプリケーションで開く→Google Chromeの順に選択すると開くことができます。

6.デベロッパーツールを使ってみよう

ここまで来ると「脱初心者」という感じになってきます。一緒にスタバでMacBookを広げてイケてる感じになっていきましょう。モチベーションが爆上がりです。笑

見ておくべき動画が「1本」あります。
・今更聞けない! ブラウザデベロッパーツールの使い方

デベロッパーツールの使い方を覚えることで、イケてるサイトのコードを、自分のスキルに変換できるようになります。かなりの近道ですね。これを知ってるか知らないかで成長速度に大きな差がついてきますので、是非覚えておきましょう。

7.レスポンシブデザインを知ろう

ここからは「レスポンシブデザイン」というものを学習します。レスポンシブデザインというのは、直訳すると「反応する設計」です。何を反応させるのかというと、主に「画面の横幅」です。WEBサイトというのは、パソコンで見る人もいれば、タブレット見る人、スマホで見る人もいます。これらは全て画面の横幅が違うので、同じWEBサイトを同じ見た目で表示してしまうと表示が見づらくなります。これを避けるために、横幅に反応して見た目が変わるデザインを作っていきます。

見ておくべき動画が「1本」あります。
・はじめてのレスポンシブWebデザイン入門講座(19本)

8.Flexboxを使いこなそう【神業】

ここまでの学習で、floatという概念が出てきたと思います。これ実は、理解がかなり難しく、プログラミング初心者の最大の挫折ポイントだったりします。ギターでいうところのFコードです。でも実はこのfloatという概念は、Flexboxという神業を習得することによって「ほぼ不要」にすることができます。

見ておくべき動画が「1本」あります。
・フレックスボックス (flexbox) の使い方をゲームで学ぼう!

上記の動画は、ゲーム形式でFlexboxを学ぶことができて中々楽しいのでオススメです。また、下記の記事でFlexboxまとめシートを配布しているので、必ず入手しておきましょう。
・CSS Flexboxのチートシートを作ったので配布します

9.RailsでTwitter風アプリを作ろう

ここまでは主にWEBサイトの見た目を作るための学習を進めてきました。ここから先は、内部のシステムを作っていく作業をはじめます。内部のシステムというのは、例えばTwitterで言うところの「ユーザ登録機能」「ログイン機能」「ツイート機能」などです。また、これらのシステムは、Rubyという言語を使って作成します。Ruby on Railsというのは、Rubyを使ったシステム開発を助けてくれる「フレームワーク」というものです。

読んでおくべき記事が「1本」あります。
・【Ruby on Rails入門】RubyでTwitterを作る全手順を解説します【簡単です】

10.Git/Githubを使ってみよう

また新しい横文字ですね。しかし、ここまで読んだ方はもはや怯むことはないと思います。Gitというのはプログラミングにおける「セーブ&ロード」の仕組みです。テレビゲームで遊んでいるとデータをセーブしたりロードしたりしますよね。これがプログラミングでもできるようになります。超便利です。早速導入しましょう。

読んでおくべき記事が「1本」あります。
・Gitとは?Githubとは?役割と活用方法を解説します

※この記事では、12章で制作するQiita風ブログアプリのベースとなるアプリを生成します。必ず読んでおきましょう。

11.AWSにアプリをデプロイしよう

AWSというものを使って、作成したアプリを全世界に公開します。ここまで作ったアプリはlocalhost:3000というアドレスからアクセスできましたが、これは自分のPCでなければアクセスできません。WEBサイトはインターネット上のどこからでもアクセスできるようにしなければなりませんが、これを実現するのが「AWS」です。

読んでおくべき記事が「1本」あります。
・【保存版】AWSのアカウント登録からRails自動デプロイまでの全手順【Capistrano】

12.RailsでQiita風アプリを作ろう

ついに最終章です。前の章で作ったTwitter風アプリよりもさらに高度なRailsアプリを制作し、実務レベルのWEBサイト制作を身に付けましょう。

・【保存版】Qiita風ブログアプリを作る全手順【注:高難易度&実務レベルです】

付録:稼ぐための案

お疲れ様でした!こちらのロードマップで学べる「プログラミングスキル」についての情報は以上です。これで皆さんは冒頭に述べたとおり「50万円で売れるアプリを作る」というスキルを得ました。ここから先は「どうやって50万円稼ぐか」という話になってきます。結論、いろんな方法があります。いくつか案を提示して、この記事を締め括りたいと思います。

就職/転職活動をする

最も手っ取り早い方法です。世の中には就職/転職の支援サービスが豊富に存在しますので、自身のスキルを基に履歴書などを作成し、成功するまでひたすら就職/転職活動を繰り返しましょう。支援サービスは以下がおすすめです。

・Wantedly(ウォンテッドリー)「はたらく」を面白くするビジネスSNS

また、最近は「転職完全サポート付きプログラミングスクール」なども多く存在しますので、スクールに入校してサポート付きで就職するのもアリです。確実な方法ではありますが、就職先が下請けの企業になりやすいなどのデメリットもあります。しかしシステムエンジニアとしてのキャリアを形成するだけなら最短ルートとも言えます。そこで下積みをして「私には実務経験があります」と胸を張れるようになれば、さらに高いキャリアを狙うチャンスを掴みやすくなるでしょう。スクールは以下がおすすめです。

・【公式】テックキャンプ - No.1エンジニア養成プログラム

独立する

就職/転職というレールを外れ、フリーランスという道を選ぶ場合です。私自身が歩んでいるキャリアはこれですね。「フリーランス」というのは随分カッコつけた言い方でして、言い方を変えれば「無職」であるとも言えます。企業に所属せず、自分の手でビジネスを形成していく道ですね。

独立で稼ぐ手っ取り早い方法は「クラウドソーシング」と呼ばれる仕組みを利用する方法です。レールを外れつつ、別のレールに乗る方法ですね。クラウドソーシングというのは、要するに「外注」の仕事を「誰でも」という条件で募集している企業を捕まえて、「私にやらせてください」と提案していくことです。以下の2つのサービスが有名ですので、以下に登録して早速「HTML CSS」「JavaScript」「Rails」などで案件を検索し、提案していくのが良いと思います。

・クラウドソーシングは日本最大の「クラウドワークス」
・ランサーズ | 日本最大級のクラウドソーシング仕事依頼サイト

その他にも、独立については無限の選択肢があります。有名インフルエンサーが販売する「稼ぐ為の教材」などを購入するのも一つの手ですね。私がプログラミングを始めたきっかけであるmanablogさんのこちらの商品は実績を出している人が多いイメージなので、おすすめです。

なお、私の場合は「自作の技術ブログを立ち上げる」という方法で独立しました。ブログにもアドセンスとか商品販売といった色々な「稼ぐ道」が存在するので、私はこの道に進んでみる決心をしました。

起業する

独立と大体一緒ですが、「株式会社」という肩書きが欲しい方にはおすすめです。肩書き以外にも社会的な保証とか色々なメリットがついてくるとは思います。安直に考えれば、社会的な信頼は得やすそうなのでクラウドソーシングでの受注成功率とかは上がりそうですね。

私はやったことないので、これについてのアドバイスは「IT系の起業経験がある人」に聞いてみた方が良さそうです。まあ正直アドバイスを待つより、興味があるなら自分でやってみるのが一番手っ取り早いと思います。無責任な発言に聞こえるかもですが、たぶん真理です。

「IT系の起業経験がある人」ってそれなりにすごい人が多いので、そうした人たちから「TAKE」するのって難しいんですよね。そのすごい人たちの日常を上回るレベルの「GIVE」をその人たちにしなきゃいけなくなるので。それなら、自分がその「すごい人」になってしまう方がよっぽど早そうです。ちなみに、起業の際は以下のサイトが便利そうです。

・個人事業主の開業手続き、開業届作成を無料でサポート | 開業 freee

共通して言えること

就職転職にしろ独立にしろ「自分が与えられるもの」を「相手に見えるように、わかりやすく伝える」という条件さえ満たせば稼げるようになると私は思います。

私自身「プログラミング独学2ヶ月→スクール2ヶ月→独学2ヶ月→記事執筆現在」という状況だったりします。この私が人の役に立つための最適解は「初心者向けに、独学とスクールで得た知見を、プログラミング初心者のために全力で提供すること」だと本気で思っています。なのでこのブログを立ち上げ、こうして皆さんに発信しています。

私は、このブログ発信を基に、このブログを自分の最初の「実績」として信頼を獲得しようと考えています。これが、私のやりたいことなのです。私は、誰かにとっての「やりたいこと」と、誰かにとっての「やって欲しいことが」一致する瞬間は、必ず世の中のどこかに存在すると信じています。

お疲れ様でした!

ここまで読んでいただき、本当にありがとうございました。これからも、読んでくださる皆様のためになる記事を発信していきたいと思いますので、よろしくお願いいたします。

筆者情報

・ブログ:ONSEO MacBook購入から実務レベルへ
・Twitter:https://twitter.com/soeno_onseo

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【初心者向け】WEBプログラミング学習完全ロードマップ【MacBook購入から実務レベルへ】

WEBプログラミング学習完全ロードマップとは

下記の体験を完全無料にてご提供いたします。お金を取ろうにも、
Qiitaはnoteとかと違って有料記事機能がないですからね。安心です。

・MacBookを買えば誰でもできます
・プログラミング初心者向けの教材です
・WEBプログラミングの基礎を解説します
・完全未経験でもプログラミングを学べます
・QiitaようなWEBサービスを個人で作れます

この記事を読むメリット

・50万円で納品できるWEBサイトを制作するスキルが身につきます

皆さんがたった今使っている「Qiita」というWEBサイトですが、
1から制作すると「納期30~60日、価格50~100万円」の規模です。

本教材ではQiitaを簡略化したWEBサイトを1から制作しますから、
クリアできれば、およそその程度の金額を稼ぐスキルが身につくことになります。

成果物

結論ファーストでいきます。
この教材で制作する成果物は、以下のようなWEBサイトです。

ss.png

機能紹介

新規記事投稿(articles#new)
ブログ記事を投稿することができます。Qiitaと同様、マークダウン記法やコードブロックの挿入、本文中への画像挿入などの機能を使用することができます。

記事一覧表示(articles#index)
投稿された記事の一覧表示ができます。
記事のアイコンをクリックすると、記事の閲覧画面に移動できます。

記事閲覧(articles#show)
投稿された記事を閲覧できます。
いいね機能やSNSのシェア機能なども搭載されています。

マイページ(users#show)
ユーザのプロフィールやインプレッション、投稿した記事の一覧が確認できます。


以上が本教材の成果物です。要するに、Qiitaを制作していきます。
それでは早速、学習に入っていきましょう。

学習カリキュラム

1.MacBookを購入しよう
2.ブラウザをインストールしよう
3.開発の環境を作ろう【Homebrew】
4.エディタをダウンロードしよう
5.HTMLとCSSの基礎を理解しよう
6.デベロッパーツールを使ってみよう
7.レスポンシブデザインを知ろう
8.Flexboxを使いこなそう【神業】
9.RailsでTwitter風アプリを作ろう
10.Git/Githubを使ってみよう
11.AWSにアプリをデプロイしよう
12.RailsでQiita風アプリを作ろう

1.MacBookを購入しよう


まずはパソコンを買いましょう。MacBook Pro 13インチというパソコンがおすすめで、値段は¥134,800(税別)です。これは、そこそこお財布に痛い出費ですね。しかし、今回制作する「Qiita風WEBサイト」が50万円で売れたとします。すると初期投資の15万円は、WEBサイトを1つ売った時点で回収できます。

プログラミング学習のリターン
・開発期間  :1か月
・初期費用  :¥150,000
・アプリ単価  :¥500,000
・リターン(1年):¥(50×12-15)×10,000 = ¥5,850,000

しかし、上記はプログラミング学習で挫折せずに継続した場合の計算になりますから、挫折すると上記の通りにはなりません。ただ、その場合はメルカリでMacBookを売却してしまえばいいだけかなと思います。6万円で売却できますので、9万円の出費で抑えられます。

まとめると、プログラミング学習のコスパは以下のような感じになります。

プログラミング学習のコストパフォーマンス
・開発期間  :1か月
・初期費用  :¥150,000
・アプリ単価  :¥500,000
・リスク    :¥(15-8)×10,000     = ¥   90,000
・リターン(1年):¥(50×12-15)×10,000 = ¥5,850,000

年間585万円のリターンがある挑戦のリスクが9万円って安すぎだな、と個人的には思います。昔はこの桁のリターンを得たければ、起業して、事業を起こして、仲間を集めて...といったことが必要だったと思います。そして会社が倒産したら何百万の借金、信頼も仲間も全て失う、みたいな感じですよね。

これが、個人でたった9万円のリスクを払うだけで達成できてしまうかもです。しかもリターンが初年から585÷9=65倍です。コスパが良すぎ。いい時代になりましたね。

一般的にみても今回ご紹介する「Ruby」というプログラミング言語を生業とするエンジニアの平均月収は50~100万円(年収600~1,200万円)だと言われているので、この概算はあながち間違いではないと思います。興味があれば、Railsエンジニア 平均年収でググってみて下さい。

それでは、MacBookを買いましょう。MacBookはこちらから購入できます。種類がいろいろありますが、特にこだわりがなければMacBook Proの13インチで問題ないかな、と思います。メモリも8GB/16GBから選べますが、プログラミングをするだけなら8GBで十分です。

2.ブラウザをインストールしよう

「ブラウザ」というのは、インターネットを見るためのアプリのことです。色々な種類がありますが、プログラミングにおいてはGoogle Chromeというブラウザを使うのが一般的です。

こちらのリンクから、インストールしましょう。リンク先でChromeをダウンロードをクリックすると、画面左下にgooglechrome.dmgというのが表示されます。これがインストール用のファイルなので、クリックしてインストールを完了して下さい。

3.開発の環境を作ろう【Homebrew】

プログラミングをしていくには「開発環境」というものが必要になります。スマホを新品で買ったらLINEやYoutube、Twitterといったアプリをストアからダウンロードしますよね。

それと同じような感じで、プログラミングするためのアプリをダウンロードしていく、みたいな感じです。ここでダウンロードしていくのは、以下のような名前のものです。

・Homebrew
・rbenv
・ruby-build
・readline
・Ruby
・MySQL
・bundler
・Rails
・Node.js

見ての通り数がだいぶ多いですが、覚える必要は特にありません。LINEの使い方を覚えるときって、別にLINEの役割や機能を事前に逐一チェックしたりしませんでしたよね。同じ感じで、使っていけば自然と「このアプリは何なのか」を覚えていくので、気にせず作業していきましょう。

それにしても、知らない単語が目の前にドーンと沢山出てきて既に「辛い。。」と思ってしまうかもですが、これもスマホアプリの例で考えてみてください。次の単語一覧は、見ていて辛いでしょうか?

・LINE
・Twitter
・Instagram
・TikTok
・Youtube

辛くないですね。しかし、これも上記のリストと全く同じ「謎の単語の羅列」です。上記の単語一覧も、スマホを知らないお婆さんからすれば、見ていて辛い物かもしれません。

プログラミング学習では「謎の単語の羅列」に何度も何度も遭遇します。未知は人間にとって「恐怖」なので、プログラミング未経験者の多くは未知との遭遇で挫折してしまいがちです。

しかし、全ての「未知の単語」は、繰り返し触れているうちに「LINE Twitter」のような無害な言葉に変化していきます。なので、安心して学習に取り組んで頂きたいのです。

また、この教材はあなたを「置き去りにする」ようなことはしません。「読んでる人に伝わっているか?」という目線で全カリキュラムを執筆していますので、ご安心ください。

それでは、実際の作業を開始していきましょう。

Command Line Toolsの導入

読んでおくべき記事が「1本」あります。
・Command Line Toolsとは?役割とその使い方を解説

Homebrewの導入

読んでおくべき記事が「1本」あります。
・Homebrewとは?役割とインストール方法を解説

RubyとRailsの導入

プログラミングには「言語」というものがあります。これは現実世界における「日本語」「英語」みたいなものです。いろいろありますが、今回は「Ruby語」を使います。

読んでおくべき記事が「1本」あります。
・Rails on Railsとは?その役割と、導入方法を解説【結論:カレールーです】

MySQLの導入

読んでおくべき記事が「1本」あります。
・MySQLとは?パンケーキを添えてあなたのMacに導入する方法【簡単です】

環境構築が完了です

お疲れ様でした!続けて、エディタというものを導入する作業に移ります。

4.エディタをダウンロードしよう

読んでおくべき記事が「1本」あります。
・VSCodeとは?役割と導入方法を解説【結論:コードを書くためのアプリです】

準備完了!

これで諸々の準備が完了です。ここから先はついにコーディング作業です!

5.HTMLとCSSの基礎を理解しよう

見ておくべき動画が「2本」あります。
・はじめてのHTML入門講座(24本)
・はじめてのCSS入門講座(34本)

こちらの動画を見ながら、実際に手を動かしてコーディングしてみましょう。VSCodeでコーディングしていくので、まずはVSCodeを開き、キーボードのcommand+Nを押します。するとUntitled-1というファイルが生成されます。このファイルは保存されていないので、command+Sを押して 表示される保存メニューから、"デスクトップ"を指定して保存するのがオススメです。また、ファイル名は"index.html"や"style.css"のように"ファイル名.拡張子"という名前にしましょう。「拡張子」というのはファイルの種類を示すもので、.htmlとすれば「このファイルはhtmlで書かれているよ」とパソコンに教えてあげることができます。

また、HTMLで書いたファイルを開く時は、デスクトップに保存したファイルを2本指クリック→このアプリケーションで開く→Google Chromeの順に選択すると開くことができます。

6.デベロッパーツールを使ってみよう

ここまで来ると「脱初心者」という感じになってきます。一緒にスタバでMacBookを広げてイケてる感じになっていきましょう。モチベーションが爆上がりです。笑

見ておくべき動画が「1本」あります。
・今更聞けない! ブラウザデベロッパーツールの使い方

デベロッパーツールの使い方を覚えることで、イケてるサイトのコードを、自分のスキルに変換できるようになります。かなりの近道ですね。これを知ってるか知らないかで成長速度に大きな差がついてきますので、是非覚えておきましょう。

7.レスポンシブデザインを知ろう

ここからは「レスポンシブデザイン」というものを学習します。レスポンシブデザインというのは、直訳すると「反応する設計」です。何を反応させるのかというと、主に「画面の横幅」です。WEBサイトというのは、パソコンで見る人もいれば、タブレット見る人、スマホで見る人もいます。これらは全て画面の横幅が違うので、同じWEBサイトを同じ見た目で表示してしまうと表示が見づらくなります。これを避けるために、横幅に反応して見た目が変わるデザインを作っていきます。

見ておくべき動画が「1本」あります。
・はじめてのレスポンシブWebデザイン入門講座(19本)

8.Flexboxを使いこなそう【神業】

ここまでの学習で、floatという概念が出てきたと思います。これ実は、理解がかなり難しく、プログラミング初心者の最大の挫折ポイントだったりします。ギターでいうところのFコードです。でも実はこのfloatという概念は、Flexboxという神業を習得することによって「ほぼ不要」にすることができます。

見ておくべき動画が「1本」あります。
・フレックスボックス (flexbox) の使い方をゲームで学ぼう!

上記の動画は、ゲーム形式でFlexboxを学ぶことができて中々楽しいのでオススメです。また、下記の記事でFlexboxまとめシートを配布しているので、必ず入手しておきましょう。
・CSS Flexboxのチートシートを作ったので配布します

9.RailsでTwitter風アプリを作ろう

ここまでは主にWEBサイトの見た目を作るための学習を進めてきました。ここから先は、内部のシステムを作っていく作業をはじめます。内部のシステムというのは、例えばTwitterで言うところの「ユーザ登録機能」「ログイン機能」「ツイート機能」などです。また、これらのシステムは、Rubyという言語を使って作成します。Ruby on Railsというのは、Rubyを使ったシステム開発を助けてくれる「フレームワーク」というものです。

読んでおくべき記事が「1本」あります。
・【Ruby on Rails入門】RubyでTwitterを作る全手順を解説します【簡単です】

10.Git/Githubを使ってみよう

また新しい横文字ですね。しかし、ここまで読んだ方はもはや怯むことはないと思います。Gitというのはプログラミングにおける「セーブ&ロード」の仕組みです。テレビゲームで遊んでいるとデータをセーブしたりロードしたりしますよね。これがプログラミングでもできるようになります。超便利です。早速導入しましょう。

読んでおくべき記事が「1本」あります。
・Gitとは?Githubとは?役割と活用方法を解説します

※この記事では、12章で制作するQiita風ブログアプリのベースとなるアプリを生成します。必ず読んでおきましょう。

11.AWSにアプリをデプロイしよう

AWSというものを使って、作成したアプリを全世界に公開します。ここまで作ったアプリはlocalhost:3000というアドレスからアクセスできましたが、これは自分のPCでなければアクセスできません。WEBサイトはインターネット上のどこからでもアクセスできるようにしなければなりませんが、これを実現するのが「AWS」です。

読んでおくべき記事が「1本」あります。
・【保存版】AWSのアカウント登録からRails自動デプロイまでの全手順【Capistrano】

12.RailsでQiita風アプリを作ろう

ついに最終章です。前の章で作ったTwitter風アプリよりもさらに高度なRailsアプリを制作し、実務レベルのWEBサイト制作を身に付けましょう。

・【保存版】Qiita風ブログアプリを作る全手順【注:高難易度&実務レベルです】

付録:稼ぐための案

お疲れ様でした!こちらのロードマップで学べる「プログラミングスキル」についての情報は以上です。これで皆さんは冒頭に述べたとおり「50万円で売れるアプリを作る」というスキルを得ました。ここから先は「どうやって50万円稼ぐか」という話になってきます。結論、いろんな方法があります。いくつか案を提示して、この記事を締め括りたいと思います。

就職/転職活動をする

最も手っ取り早い方法です。世の中には就職/転職の支援サービスが豊富に存在しますので、自身のスキルを基に履歴書などを作成し、成功するまでひたすら就職/転職活動を繰り返しましょう。支援サービスは以下がおすすめです。

・Wantedly(ウォンテッドリー)「はたらく」を面白くするビジネスSNS

また、最近は「転職完全サポート付きプログラミングスクール」なども多く存在しますので、スクールに入校してサポート付きで就職するのもアリです。確実な方法ではありますが、就職先が下請けの企業になりやすいなどのデメリットもあります。しかしシステムエンジニアとしてのキャリアを形成するだけなら最短ルートとも言えます。そこで下積みをして「私には実務経験があります」と胸を張れるようになれば、さらに高いキャリアを狙うチャンスを掴みやすくなるでしょう。スクールは以下がおすすめです。

・【公式】テックキャンプ - No.1エンジニア養成プログラム

独立する

就職/転職というレールを外れ、フリーランスという道を選ぶ場合です。私自身が歩んでいるキャリアはこれですね。「フリーランス」というのは随分カッコつけた言い方でして、言い方を変えれば「無職」であるとも言えます。企業に所属せず、自分の手でビジネスを形成していく道ですね。

独立で稼ぐ手っ取り早い方法は「クラウドソーシング」と呼ばれる仕組みを利用する方法です。レールを外れつつ、別のレールに乗る方法ですね。クラウドソーシングというのは、要するに「外注」の仕事を「誰でも」という条件で募集している企業を捕まえて、「私にやらせてください」と提案していくことです。以下の2つのサービスが有名ですので、以下に登録して早速「HTML CSS」「JavaScript」「Rails」などで案件を検索し、提案していくのが良いと思います。

・クラウドソーシングは日本最大の「クラウドワークス」
・ランサーズ | 日本最大級のクラウドソーシング仕事依頼サイト

その他にも、独立については無限の選択肢があります。有名インフルエンサーが販売する「稼ぐ為の教材」などを購入するのも一つの手ですね。私がプログラミングを始めたきっかけであるmanablogさんのこちらの商品は実績を出している人が多いイメージなので、おすすめです。

なお、私の場合は「自作の技術ブログを立ち上げる」という方法で独立しました。ブログにもアドセンスとか商品販売といった色々な「稼ぐ道」が存在するので、私はこの道に進んでみる決心をしました。

起業する

独立と大体一緒ですが、「株式会社」という肩書きが欲しい方にはおすすめです。肩書き以外にも社会的な保証とか色々なメリットがついてくるとは思います。安直に考えれば、社会的な信頼は得やすそうなのでクラウドソーシングでの受注成功率とかは上がりそうですね。

私はやったことないので、これについてのアドバイスは「IT系の起業経験がある人」に聞いてみた方が良さそうです。まあ正直アドバイスを待つより、興味があるなら自分でやってみるのが一番手っ取り早いと思います。無責任な発言に聞こえるかもですが、たぶん真理です。

「IT系の起業経験がある人」ってそれなりにすごい人が多いので、そうした人たちから「TAKE」するのって難しいんですよね。そのすごい人たちの日常を上回るレベルの「GIVE」をその人たちにしなきゃいけなくなるので。それなら、自分がその「すごい人」になってしまう方がよっぽど早そうです。ちなみに、起業の際は以下のサイトが便利そうです。

・個人事業主の開業手続き、開業届作成を無料でサポート | 開業 freee

共通して言えること

就職転職にしろ独立にしろ「自分が与えられるもの」を「相手に見えるように、わかりやすく伝える」という条件さえ満たせば稼げるようになると私は思います。

私自身「プログラミング独学2ヶ月→スクール2ヶ月→独学2ヶ月→記事執筆現在」という状況だったりします。この私が人の役に立つための最適解は「初心者向けに、独学とスクールで得た知見を、プログラミング初心者のために全力で提供すること」だと本気で思っています。なのでこのブログを立ち上げ、こうして皆さんに発信しています。

私は、このブログ発信を基に、このブログを自分の最初の「実績」として信頼を獲得しようと考えています。これが、私のやりたいことなのです。私は、誰かにとっての「やりたいこと」と、誰かにとっての「やって欲しいことが」一致する瞬間は、必ず世の中のどこかに存在すると信じています。

お疲れ様でした!

ここまで読んでいただき、本当にありがとうございました。これからも、読んでくださる皆様のためになる記事を発信していきたいと思いますので、よろしくお願いいたします。

筆者情報

・ブログ:ONSEO MacBook購入から実務レベルへ
・Twitter:https://twitter.com/soeno_onseo

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

boostrapの罠

現在、絶賛ポートフォリオ作成中です。

Bootstrapを導入し、見た目を整えようとしたときのこと。

Gemfile
gem 'boostrap-sass'

Gemfileを更新し、bundle installしても
全く、反映されない。。

dockerで環境を構築しているので
「imageのキャッシュが使われたのかな。」
と思い

$ docker-compose build --no-cache
$ docker-compose up -d

を行うも
反映されない。

画面上はひたすら

@import "bootstrap-sprockets";

を読み込むことができない、というエラーが出るだけです。

「バージョンを指定していないからか。。?」
と思い、バージョンを指定してみると

Could not find gem 'boostrap-sass (~> 3.4.1)' in any of the gem sources listed in your Gemfile.

そんなバージョンはねえ!と言っています。
gemを見にいってみました。

スクリーンショット 2020-07-05 11.41.56.png

なんだこいつは!
偽物?

Gemfileを「bootstrap」に書き直したところ、普通に反映されました。笑

ただのタイピングミスでしたが、めちゃくちゃ時間かかりました。
おかげで、どういうふうに読み込みされているのかわかるようになりました。
感謝。boostrap

boostrapの罠にみなさまもお気をつけて。(引っかかる人もいないと思いますが。。)

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

ActiveModelのvalidateが発火されない時に

最近RailsのViewを使うケースより、APIの開発ケースが増えたので、ActiveModelの使う機会が以前より、グーと増えた気がした。が、すごく簡単なことで、ハマってしまったので、メモ形式で共有します。

例えば、ActiveModelを使った以下のような簡単なクラスがあるとしよう。

class SearchForm
  include ActiveModel::Model
  attr_accessor :from_date, :to_date
  validate :check_something

  def check_something
    ・・・
  end
end

Controller側では以下のように利用するとしよう。

form = SearchForm.new(params)

インスタンスの作成時、当然、カスタムバリエーション用のメソッドが実行されない。
「えっ?なぜcheck_somethingが実行されないの?」という簡単なミスにハマったことがあった。
valid? or invalid?を呼ばない限り、発火しないのは当然のことだが、、、ORZ

以下のように

form.valid? 
# or
form.invalid? 

みなさんは、このような経験がないでしょうか?

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Rspecでサインインメソッドを共通化して切り出す(devise使わないとき)[system spec][request spec]

はじめに

サインイン機能の勉強のために、サインイン機能をdeviseを使わないで自作したところ、テストで大変苦労したので、学んだことを以下に記します。

今回は、system specとrequest specでテストを記載し、多くのところで使いまわせるよう、これらの処理を別ファイルに書き出しました。

実行環境は以下の通りです。

  • Rails 5.2.4.2
  • Rspec 4.0.1
  • capybara 3.33.0

サインイン画面について

emailとパスワードでサインインできるフォームを作っています。画像は参考画像です。
sample.png

基本のサインインメソッド

サインインメソッドをsystem specとrequest specとでそれぞれ表すと下記のようになります。今回は、あるショップに所属しているスタッフを作成し、そのスタッフのメールアドレスとパスワードでサインインをします。

system spec

spec\system\shops_spec.rb
let!(:shop) { FactoryBot.create(:shop) }
let!(:user) { FactoryBot.create(:staff, shop_id: shop.id ) }

before do
  visit login_path
  fill_in "E-mail", with: user.email
  fill_in "Password", with: user.password
  click_button 'LOGIN'
end

request spec

spec\system\shops_spec.rb
let!(:shop) { FactoryBot.create(:shop) }
let!(:user) { FactoryBot.create(:staff, shop_id: shop.id ) }

before do
  session_params = { session: { email: user.email, password: user.password } }
  post "/login", params: session_params
end

共通事項をまとめる(1) shared_context

まずは、letで従業員を定義している2行が、両者で重複していたので、それをshared_contextを用いて、別ファイルに書き出します。

spec\support\contexts\user_setup.rb
RSpec.shared_context "user_setup" do
  let!(:shop) { FactoryBot.create(:shop) }
  let!(:user) { FactoryBot.create(:staff, shop_id: shop.id ) }
end

この時、spec\rails_helper.rb内にある、以下の行のコメントアウトを外し、spec\support内のファイルやディレクトリをすべて読み込めるようにしておきます。

spec\rails_helper.rb
Dir[Rails.root.join('spec', 'support', '**', '*.rb')].sort.each { |f| require f }

こちらの設定で、spec内では以下のように記述することで、ユーザーのセットアップができるようになります。

# 任意のspecファイル内
include_context "user_setup"

共通事項をまとめる(2) module

system specとrequest specの共通処理もそれぞれモジュールにまとめることで、いろいろなところで使いまわすことができます。今回作成したファイルは以下の通りです。

system spec

spec\support\sign_in_module.rb
module SignInModule
  def sign_in_as(user)
    visit login_path
    fill_in "E-mail", with: user.email
    fill_in "Password", with: user.password
    click_button 'LOGIN'
  end
end

なお、この時、ファイル名とモジュール名は一致させる必要があるようです。例えば、SignInModuleなら、sign_in_module.rbというファイル名にする必要があります。

▼参考サイト
https://relishapp.com/rspec/rspec-core/v/3-0/docs/helper-methods/define-helper-methods-in-a-module

request spec

spec\support\login_request_module.rb
module SignInRequestModule
  def sign_in_request_as(user)
    session_params = { session: { email: user.email, password: user.password } }
    post "/login", params: session_params
  end
end

rails_helper.rb への記載

このとき、spec\rails_helper.rbには、以下のように記入します。(明示的に読み込むことを記載しないと、読み込めませんでした…。)

spec\rails_helper.rb
RSpec.configure do |config|
  # 中略
  config.include SignInModule
  config.include SignInRequestModule

end

このあたりもう少しDRYにかけそうなので、方法がわかったら追記したいです。

specファイルでの使い方

上記のように記載することで、specファイルではこちらの方法で、それぞれサインインメソッドを呼び出すことができます。

# 任意のsystem specファイル
include_context "user_setup"
before do
  sign_in_as(user)
end
# 任意のrequest specファイル
include_context "user_setup"
before do
  sign_in_request_as(user)
end

まとめ&参考サイト

devise使わないでログイン機能を実装してやる!と頑張って作り始めたのですが、deviseはいろいろなところで手間を簡略化してくれていることがわかりました。これからはdeviseとうまく付き合っていきたいと思います。
一方で、サインインの仕組みにも詳しくなったので、エンジニアとしてのスキルアップはできたと思います。

今回参考にした情報はこちら。
Define helper methods in a module
Request Specを使おう
What is the proper way to sign in as a user in an rspec request spec, without devise?
rails5 can't access session in ActionDispatch::IntegrationTest

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

migrateファイルの変更(rails db:rollback STEP=)

こんにちは、tt_tsutsumiです。
今回もmigrateファイルの変更方法についてです。
こちらの記事が何方かのお役に立てると嬉しいです。

https://qiita.com/tt_tsutsumi/items/ea8bc346d5b9cb21e05b

↑↑↑

前回の記事でmigrateファイルの変更等は行えるようになりました。
その中でファイルを1つずつしかdownに出来ないという話が出て来ましたが、
今回は任意のファイルまでまとめてdownさせる方法を記載致します。

1. rails db:migrate:status

まずは前回と同様に現在作成しているアプリケーションのmigrateの稼働状況の確認を行いましょう。
コンソールにて下記コードを入力します。

$ rails db:migrate:status

Status   Migration ID    Migration Name
--------------------------------------------------
   up     year/month/day  Devise create users
   up     year/month/day  Create spots

2. rails db:rollback STEP=2

前回の rails db:rollback の後に STEP=2 を追加し実行。
このコードの意味は現段階のファイルから 2段階前までファイルをdown するという意味です。
実行を行うと下記のようになります。

$ rails db:rollback STEP=2
$ rails db:migrate:status

Status   Migration ID    Migration Name
--------------------------------------------------
   down     year/month/day  Devise create users
   down     year/month/day  Create spots

複数のファイルをまとめて変更や削除したい際はSTEPを使用した方が早いと思います。
ですが確認を行ってから使用をしないと全てdownになる可能性もあるので注意が必要です。

3. rails db:migrate

変更が終了したら保存をし、rails db:migrate を行います。
STEPで何段階か戻っていたとしても1回のmigrateで全てupに変更になります。

$ rails db:migrate
$ rails db:migrate:status

Status   Migration ID    Migration Name
--------------------------------------------------
   up     year/month/day  Devise create users
   up     year/month/day  Create spots

これでmigrateファイルの一括変更と保存は終了です。
ご覧いただきありがとうございました !!

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Could not locate Gemfile or .bundle/ directoryと出たときの対処法

日々学んだことやつまずいたことについてまとめていきます。
記載に誤りがありましたら、ご指摘していただけると助かります!
いつも他のかたの記事に助けられているので、少しでもお役に立てればと思います。

どういうエラーなのか

Gemfileが見つからないというエラー。

どんなときに起こるのか

作成したアプリのディレクトリに移動していない状態で、

bundle exec rake db:create

などのコマンドを実行した時に起こる。

対処法

cdコマンドで、作成したアプリのディレクトリに移動してから実行する。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む