2019-08-15

【アプリ開発エラーメモ】外部キーをDBに保存する

今制作してるアプリで、DBに登録した情報＋登録者（current_user）を加えたかったのですがエラーを起こしたのでメモします。

まず私のミス

ストロングパラメータにcurrent_user.idと書いたら一緒にDB入るだろうと思ってましたがむりですね、思考停止してました。笑

ストロングパラメータのメソッドであるproduct_paramsはあくまでform_forで送られてきたカラムを指定して、createメソッドに渡してあげてるので、DBにcurrent_user.idと言うカラムがないので当然エラーが起きます。

f:id:chkc:20190815154541p:plain

正解はこれです。

①ストロングパラメータのproduct_paramsでハッシュ形式でカラムを受け取ったら、カラムをcreateメソッドに渡してあげます。

②createメソッド内で、カラムにあるuser_idに対して、current_user.idとしてあげる。

（ログインしているユーザーに関しては、form_forで送られてきた情報ではないのでハッシュでデータ保存する必要性はない。）

f:id:chkc:20190815155134p:plain

2019-08-14

【アプリ開発エラーメモ】DBにparamsが入らない

rails エラー解決開発日記アプリ開発

結果から言うと、外部キーを持っているテーブルだったのですが、optional:trueが抜けてました。

f:id:chkc:20190814164012p:plain

paramsがcreateアクション内で取得できるのに、データベースに入らず、作業が詰まってしまいました。

デバックしてparamsの中身を見ると、

・permitted: false　になっている

・ハッシュで情報を抜こうとするとnilと出る

f:id:chkc:20190814163911p:plain

optional:trueを加えたらparamsがデータベースに入りました。

f:id:chkc:20190814164852p:plain

参考にした記事

https://blog.ryskit.com/entry/2018/01/27/195442

2019-08-14

【アプリ開発エラーメモ】　deviseのインストールの手順を間違えた時の対処方法

rails エラー解決開発日記アプリ開発

deviseのインストール手順を間違え、エラーが起きたので対処方法をアウトプットします

正しい方法

１deviseの導入（gem fileに書いて、$bundle install）

２ローカルサーバー再起動 $ rails s

３ $rails g devise:install （deviseの設定ファイルを設定）

４ $rails g devise user （deviseコマンドでモデル生成する）

５ $rake db:migrate

上の２番を忘れて、deviseコマンドを打つとエラーが出てしまいました。

エラー文

undefined method `devise' for Install (call 'Install.connection' to establish a connection):Class (NoMethodError)

方法として、routes.rbにあるdevise_for :usersというコードを削除→rails sで再起動で直りました！

f:id:chkc:20190814163136p:plain

下記の記事を参考にしました。

deviseのインストール手順失敗

https://qiita.com/ryouzi/items/9c5324ba567109ab2a22

2019-08-10

【BEM】HTMLのクラス名を簡単につける

BEM マークアップ

https://chkc.hatenablog.com/entry/2019/08/10/124430

Sassについて書いた記事の続き。

BEMとは命名規則のことで、ページを構成する要素をBlock、Element、Modifierの３つに分類して考える。

BEMを使えば、HTMLを書くときにクラス名をどうするか悩まずに、マークアップのスピードが上がる。（CSS設計のルール決め的な）

BEMに関してのわかりやすい記事

https://app.codegrid.net/entry/bem-basic-1

https://mae.chab.in/archives/2553

f:id:chkc:20190825170613p:plain

　ルールは２つ

・blockとelementをつなぐときは、__アンダースコア２つ使う

・modifierにつなぐときは、 --ハイフン２つ使う

例）sample.html

<nav class='header-nav'>
  <ul class='menu'>
    <li class='menu__list'>TOP</li>
    <li class='menu__list'>CONTACT</li>
    <li class='menu__list menu__list--back-black'>ABUOT US</li>
    <li class='menu__list'>SERVICE</li>
   </ul>
</nav>

①navはヘッダーのナビゲーションメニューなので、クラス名をheader-navとしました。このようにクラス名の単語数が2つ以上の場合はハイフン1つでつなぐ。

②ulはheader-navの子要素ですが他のヘッダーメニュー以外の部分でも使用したいので、クラス名をmenuとする。

③liはmenuの子要素なので、クラス名をmenu__listにします。
liのうちABOUT USだけは背景色を黒くしたいので、クラス名をmenu__list--back-blackとしました。
Modifierはこのように特定の部品を修飾したい時に使用する。

このhtmlに対して、以下のようにSassを記述

&（アンパサント）で、親セレクタを参照にしている

.menu {
  list-style: none;
  &__list {
    background-color: #3BD1EC;
    color: #FFF;
    float: left;
    font-size: 30px;
    padding: 2% 1%;
    text-align: center;
    width: 23%;
    &--back-black {
      background-color: #000;
      color: #3BD1EC;
    }
  }
}

次回、hamlの書き方について

https://chkc.hatenablog.com/entry/2019/08/10/131548

2019-08-10

【haml】導入方法と書き方

haml マークアップ

前回BEMの記事

https://chkc.hatenablog.com/entry/2019/08/10/135252

Hamlとは、HTMLよりも簡単に書くためのビューのテンプレートエンジンのこと。

導入方法

gemfile

gem "haml-rails", "~> 2.0"

$ budle install

$ rails haml:erb2haml

書き方

ドキュメント

http://haml.info/

Qiitaの記事

https://qiita.com/yukimura1227/items/a1cbf65ac9abd4d138e1（分かり易い！）

f:id:chkc:20190825175341p:plain

ドキュメントからわかる事

①子要素がある場合は %から始める

②コントローラで定義された変数名をviewで表示させるには、

erb <%=変数名%>

haml =変数名

例えばこんな感じ

例）index.html.haml

f:id:chkc:20190810184306p:plain

sassの復習

分割したpartialファイルの読み込み（　＿アンダースコアで始まるsassファイル）

例）application.scss　　＊３つのpartialファイルを読み込んでる

f:id:chkc:20190810184433p:plain

BEMの復習

index.html.hamlはBEMの命名規則で書かれていて、そのクラス名にscssを当ててる。

例）_posts.scss

f:id:chkc:20190810184613p:plain

こんな感じ

2019-08-10

【Sass】基礎

sass マークアップ

Sassについてアウトプットします。

１Sassとは

２sass拡張子とscss拡張子（こっち使う）

３変数使える

４partial

５ mixin

６ sassファイルの構成について

１sassとは

cssを拡張した言語。変数使えたり計算もできる。

２scss拡張子

cssに近い文法で書ける。主流らしい。

こんな感じ

例）sample.scss

.body p {
  color: #333;
  font-size: 15px;
  font-weight: normal;
  strong {
    color: red;
    font-weight: bold;
  }
}

例）sample.html

<div class="block">
  <h1 class="title">Hello world</h1>
  <p class="text">Sass is <span>greate!</span>
</div>

例）sample.css

.block {
  background-color: #000;
}

.block .title {
  color: #FFF;
  font-size: 70px;
  text-align: center;
}

.block .text {
  font-size: 15px;
  color: #FFF;
}

.block .text span {
  color: red;
  font-size: 20px;
}

上を書き換えると

例）sample.scss

.block {
   background-color: #000;
  .title {
    color: #FFF;
    font-size: 70px;
    text-align: center;
  }
  .text {
    font-size: 15px;
    color: #FFF;
    span {
      color: red;
      font-size: 20px;
    }
  }
}

3 Sassに置ける変数

ピクセル数とかカラーコードを使用する場合、何回も使うから変数として定義しておくと便利

$変数名: 値;

例）sample.scss

$section-color: rgb(30,30,30);
section {
  background-color: $section-color;
}

4 partialについて

partialと言う機能を使えば、複数のファイルを１つのファイルにまとめることができる

partialとは分割したsassファイルのこと。

・partilaファイルを作成するには、ファイル名を _ (アンダースコア）から始める

・フォルダ内なら　_アンダースコア不要

・読み込みは@import ファイル名

例）sample.scss

@import "reset";  /* _reset.scssを読み込む */
@import "header"; /* _header.scssを読み込む */

sample.scssでは、他のファイルで定義された変数を使うことができる

５ mixin

まとまったスタイルを定義できる

@mixin mixin名( ) { }

例）_clearfix.scss

@mixin clearfix() {
  &:after {
    content: '';
    display: block;
    clear: both;
  }
}

呼び出しは @include

_sample.scss

.menu {
  @include clearfix();
  ...

  .menu__list {
    float: left;
    ...
  }
}

上はこれと同じコード

_clearfix.scss

.menu {
  &:after {
    content: '';
    display: block;
    clear: both;
  }

  .menu__list {
    float: left;
    ...
  }
}

６ sassファイルの構成について

f:id:chkc:20190810123423p:plain

index.html

HTMLを記述するファイルです。
このファイルに書かれたものが実際にブラウザに表示される。

style.css

style.cssは、htmlファイルでこのファイルを読み込むことでスタイルを適用させる。
style.cssファイルを直接編集するのではなく、sassコマンドを実行することでstyle.cssファイルを作成・更新する。

stylesheetsフォルダ

stylesheetsフォルダは、すべてのscssファイルを管理するフォルダ。
scssファイルを追加する場合は、styelsheetsフォルダ内に作成する

style.scss

このファイルですべてのscssファイルを@importで読み込むことで、一つのsassファイルに統合する

例）style.scss　　　@importを使用してscssファイルを読み込む例

@import "reset";  /*_reset.scssを読み込む */
@import "./config/variable";　/* configフォルダの中の_variable/scssを読み込む */
...

_reset.scss

ブラウザによって初めからcssがそれぞれのhtmlに設定されている。
そのCSSによって、意図しないデザインになってしまうことがあるからそれを防ぐために、初めにブラウザごとのCSSをすべてリセットしてあげる。
このようにブラウザごとのCSSを打ち消すCSSのことをリセットCSSという。リセットファイルで _normalize.cssとかある

configフォルダ

configフォルダは、プロジェクトの設定ファイルや、scssで使用する変数を定義するファイルなどを管理するフォルダ。

mixinフォルダ

mixinフォルダは、scss内で使用するmixinファイルを管理するフォルダ。

moduleフォルダ

modulesフォルダはモジュールを管理するためのフォルダ。
モジュールとは、いくつかの要素をまとめた部品の集合という意味で、ヘッダー、フッターのような用途ごとに分けることができる。
モジュールを使うことでまとまったCSSを独立したものとして管理することができる。

vendorフォルダ

vendorフォルダは、ライブラリのファイルを管理するフォルダ。
cssにはライブラリと呼ばれるものがある。ライブラリとはあらかじめCSSが書かれたファイルのこと。
有名なCSSのライブラリでは、bootstrapがある。
ライブラリを効率よく利用することで、コーディングのスピードが格段に上がります。

overrideフォルダ

overrideフォルダは、vendorフォルダに格納してある外部のライブラリを上書きするためのscssファイルを管理するフォルダです。

分かり易い記事

https://liginc.co.jp/web/html-css/css/59325

次の記事【BEM】について。HTMLを書く時に、命名規則があればクラス名を悩まなくてオッケーなので、HTMLのコーディングが早くなります。

https://chkc.hatenablog.com/entry/2019/08/10/135252