独学でWebエンジニアを目指す

覚えたことのメモです。

まとめてステージングしてーーー!

例えばページネーションを追加したくなったとして

$git diff --only-name #変更したファイル名だけ表示
Gemfile
Gemfile.lock
app/controllers/items_controller.rb
app/views/items/index.html.erb

一つずつ追加するのも面倒だし、 git add . は使いたくない。。

調べると対話シェルモードなんてのがあるんですねー

$git add -i

これの使い方はこれでわかった

多分もっと早い方法知ってる人教えて下さい!!

てかtigとどっちがいいかって話にもなりそう。。。

ページネーションの使い方

gem kaminari をインストール

書き方はこんなかんじ。 page(params[:page].per(1ページに用事させたい数)

こんな感じで定義 items_controller.rb

class ItemsController < ApplicationController

  def index
    @items = Item.all.page(params[:page]).per(3)
  end

items/index.html.erb

  @items.each{ |item| <%= item.id %> }
  <%= paginate(@items%>

git の使い方

バージョン管理用のファイルを作成

$git init

追加したい機能のためにブランチを作成する

前提として、masteブランチで作業はしない

まず自分が今どのブランチにいるか確認する

git branch このコマンドを打つと今現在いるブランチ名の左に☆印があります。

マスターブランチにいることを確認してブランチを作成する

$git checkout -b [branch_name] #branchの作成と切り替えを同時にしている

branchを全てみる(現在のブランチが作成したブランチにいることを確認)

$git branch

できていない場合は下記コマンドで移動する

$git checkout [branch_name]

ファイルを変更する

お好きなように変更してください。

変更箇所を再確認する

$git diff      #ステージとの差分
$git diff HEAD #ステージをコミットの差分

変更したファイルをステージングエリアに追加

ステージングエリアって何やねん!!って方はこちら

$git add [file_name]
$git add .(変更したfileを全て追加する場合)

変更を記録する

$git commit

下記のような感じで僕はコミットしてます。

WHAT: 何をしたか

WHY: 何のために

現在の状況の確認する

git status

コミットした記録を確認する

$git log --oneline      #1行で表示する)
$git log -p [file_name] #ファイルの差分を表示する

目的の機能を実装できたらマスターブランチに反映させる

マスターブランチに移動する

$git checkout master

マージする

git merge [branch_name]

マージできたか確認する

$git branch --merged

終わったブランチを削除する

$git branch -d branch_name

削除できたか確認する(branch_nameがなくなっていれば削除できている)

$git branch

はい、これで完了です。

コマンドのtab補完にこちらを利用させていただきました。 ありがとうございます。

コマンドに慣れてきたら、tigを使っていきたいなと思います。

rails g migration した時にCould not find ‘xxx' in any of the sources とエラーが出て実行出来ない場合

rails g migration した時にCould not find ‘xxx' in any of the sources とエラーが出て実行出来ない場合 ruby 2.5.0を今回から使おうと思いインストールしたことが起因かと思われる

そして今回、Twitter認証を使ったアプリ開発のためにTwitterログイン用のカラムを追加しようと、

rails g migration AddColumnsToUsers uid:string provider:string を実行した際に

Could not find hashie-3.5.7 in any of the sources Run bundle install to install missing gems.

とエラー表示が出て実行できない。

最初に表示通りbundle install してエラーが出なかった為、 再度rails g migration コマンドを打つがまた同じエラーが出て変化なし。。

rubygemsにアクセスしてhashieを検索してyankされていないか確認。

サイトにあるgem install hashie コマンドをして再度

rails g migration AddColumnsToUsers uid:string provider:string

で無事追加できました。

部分テンプレートを使おう

サイトのlayoutにおいて固定で必ず表示させていものは views/layouts/application.html.erbに書くことで全ページに反映さえるようにできるけど 書きすぎると可読性が下がるし編集しにくいしあんまりいいことがないと思うので部分テンプレートを使うといいと思います。

1.Viewsフォルダ内にpercialフォルダを作成する

(必ずpercialディクトりを作成しなければいけない決まりはない)

2.ファイル名を作成する

ファイル名にも規則があり _hearder.html.erb と必ずアンダーバーから書く必要があります。

使い方の基本形 <%= render "ディレクトリ名/ファイル名" %>(※この時のファイル名にアンダーバーと拡張子は不要です!)

今回はpercialディレクトリ内の_hearder.html.erbを使うので、下のファイルに

<!DOCTYPE html>
.
.
<body>
    <%= render "percial/header" %>
    <%= yield %>
</body>
</html>

3.ブラウザーで確認する

rails sしてviewを確認して反映されていればOKです。

今回はシンプルにviewだけ反映させるためにrenderを使いましたが他にもいろんな使い方があるので興味が湧いた方は見て見て下さい。 Railsドキュメント/render

railsでbootstrapを使う

bootstrapNavbarプロジェクトを作成

rails new bootstrapNavbar

cd bootstrapNavbar

rails g controller tops index


bootstrapを導入準備

下記のコードを追加

gem 'bootstrap-sass', '~> 3.3.7'

bundel installコマンドを実行

@import "bootstrap-sprockets";
//= require bootstrap-sprockets

bootstrap/navbarを使って見る

Default navbarのEXAMPLEのコードを全貼り付け

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
反映されている確認

ターミナルでrails s

chome等でlocalhost3000/tops/indexにアクセス

にアクセスするとnavberが反映されていると思います。 他に色や形等を変えたい場合は公式サイトにいろいろ載っているのを見て下さい

github/bootstrap-sass
bootstrap/navbar