プログラミング未経験おじさんの備忘録

本ブログはプログラミング未経験者の拙い学習の記録です。

学習[60]日目

本日の学習内容

気がつかないうちに学習開始の日がずれていました。。

何日分かのをまとめていたらいつの間にかずれていたようですので改めて管理していきたいと思います。

 gitに関して( 少しミスしていたため)

グループ機能実装を実装していきたいと思いますが、

その前に以前作成したブランチ名が昨日とそぐわないものになっており、コミットしていない状態であった為、masterから分岐したブランチで行なっていたその作業内容を一旦仮置きして、分岐ブランチを親としてさらに分岐ブランチを作成してそちらに仮置きした機能を実装するという事を行なっていきたいと思います。

まず、

#未コミットの記述内容の仮置きをします
git stash
#仮置きした内容を書きで確認できる
git stash list

仮置きしたら新たにブランチを作成するのですが、分岐ブランチを親としたブランチの作成を行いたいので、ブランチの確認を行なっていきます。

#ブランチのリストを確認できる、*が現在いるブランチ
git branch -a
   database-design
   front-end-design
 * chat-space-post-function
   master
   remotes/origin/-database-design
   remotes/origin/front-end-design
   remotes/origin/post-function
   remotes/origin/master
#こんな感じで表示されます。

作成したい親ブランチにいる事を確認したらブランチを作成します。

ブランチの作成にもローカルから作る方法とリモートから作る方法があります。

#ローカルに作成
git checkout -b 作成するブランチ名
#リモートに作成
git checkout -b ローカルに作成するブランチ名 origin/作成元のリモートのブランチ名

作成したらプルリクエストを行うのですが、いつも使用しているgithub-Desktopに関してはコミットしていないものが横に残ってしまいいつものような操作ができなかったので、ここがなんかやり方ないかなーとは思いましたが、無理やり適当なものをコミットして作成してしまいました。

作成したら仮置きしていたものたちを現在のブランチに戻してあげます。

#下記で仮置きしたリストを再確認
git stash list
stash@{0}: WIP on post-function: 53ebebd create pull request
#指定した仮置きを元に戻す
git stash apply stash@{0}

これで作業準備が整いましたので実装していきます。

と思っていたのですが、長くなってしまうので分けて記述していこうと思います。

見返したときにごっちゃになりそうなので。。

 

以上、お読み頂きありがとうござました。

 

参照：https://qiita.com/forest1/items/db5ac003d310449743ca

　　：https://qiita.com/TetsuTaka/items/5ab227a8bd2cd7106833

　　：https://qiita.com/fukajun/items/41288806e4733cb9c342

今回の学習にて使用しなかったけど関連で後でやらないといけないと感じた事

gitに関するコマンドでmergeやrebase、ブランチの派生元を間違えた場合などにどうするかが分かる内容なので後で要確認だなと思います。

　　：https://www.sejuku.net/blog/71919

　　：https://eng-entrance.com/git-fetch

　　：https://www.granfairs.com/blog/staff/git-mistake-parent-branch

学習[59]日目

本日の学習内容

 

 deviseを利用したログイン機能の実装

以前の実装においてdeviseによってログイン画面まで実装を行いましたが、今回は具体的な機能を実装していく必要があります。

 strong_parameterへのデフォルト以外の値の追加

まず、deviseのデフォルトで設定されているカラム以外のデータを保存する為に、設定を追加する必要があります。

上記の要因となっているのは、もともとdeviseにはe-mailやパスワードといった項目がstrong_parameterによって既に許可設定されています。

新たに”name”や”age”などの項目を追加したい場合にはそれを許可するためのstrong_parameterを記述する必要があります。

class ApplicationController < ActionController::Base
before_action :configure_permitted_parameters, if: :devise_controller?

  protected

  def configure_permitted_parameters
    devise_parameter_sanitizer.permit(:sign_up, keys: [:name])
  end
end

上記のように記述することで設定を行うことができますが、一例です。

まず、使用するメソッドは、「devise_parameter_sanitizer 」です。

記述する場所は、Deviseのコントローラーを継承したコントローラーか、もしくはApplication Controllre に記述する。

今回の場合は、devise_parameter_sanitizerを直接呼び出さず、呼び出すメソッドを作成して、deviseのコントローラーにあるアクションが動いた時のみに動くようにif: :devise_controller?をbefore_actionにオプションで設定する。

※:sign_up部分は引数で引数により異なる種類の処理を行うように設定出来る。

 

ユーザーの編集機能の実装

ここまででユーザーの新規登録が可能となりましたが、編集が出来ないので編集をできるようにしていきます。

まず、ユーザーの編集を行う為にcontrollerを新規に作成してきます。

#controller作成
#複数形の大文字で特定のアクションを指定したい場合には名称の後ろにアクションを指定
rails g controller Users
 
#users_controllerに下記を記述
#編集に必要なegit及びupdateアクションを定義する
class UsersController < ApplicationController

  def edit
  end

  def update
    if current_user.update(user_params)
      redirect_to root_path
    else
      render :edit
    end
  end

  private

  def user_params
    params.require(:user).permit(:name, :email)
  end
end

そして、コントローラーのアクションを設定します。今回はeditアクションとupdateアクションがあれば良いので各アクションを定義します。

 

コントローラーの作成を行ったので作成したコントローラーのeditアクションをリンク先に設定します。

#トップページのビュー登録したユーザーを表示させるように下記の記述を行う
%h.left-header__user-name
      = current_user.name
 
#トップページのビューにボタンのリンク先を追加
%li.left-header__edit-group
        =link_to edit_user_path(current_user), class: "left-header__btn" do
          = fa_icon 'cog'

今回はeditアクションとupdateアクションを定義しているのでそれぞれのルーティングを設定していきますが、updateに関しては変更を保存できたか出来ていないかの処理の設定して表示はトップページに戻れば良いのでビューは設定しません。rootにに飛ぶように設定すれば良いです。

しかし、editnに関しては編集を行う画面が必要となるので、ビューの作成を行う必要があります。

#routes.rbにルーティングを設定する
resources :users, only: [:edit, :update]

 

フラッシュメッセージの実装


フラッシュメッセージとは、ユーザーの動作に合わせてメッセージを出す機能です。

今回はupdateでトップページに戻るように設定しましたが、設定後に変更されたかが、パッと見でわからないので、変更した時にメッセージを出すことでわかりやすくするために実装していきます。

これをサインアップ時、ログイン時、ログアウト時に出るようにします。

また、デフォルトでは、フラッシュメッセージは英語なので、日本語化してフラッシュメッセージを出すように日本語のファイルを利用して実装していく必要があります。

#通知用のビューを作成します
.notification
  - flash.each do |key, value|
    = content_tag :div, value, class: key
 
#通知用のスタイルを作成します
.notification {
  .notice {
    background-color: $light_blue;
    color: $white;
    text-align: center;
  }

  .alert {
    background-color: $alert_orange;
    color: $white;
    text-align: center;
  }
}

これらをトップページ状に反映させたいのでrenderとimportを使用して反映させます。

#top-pageに反映(application.html.haml)
= render 'layouts/notifications'
#top-pageのstyleに反映(application.scss)
@import "modules/flash";

上記でビューの方は完成したので、表示されるメッセージを英語から日本語に切り替える手順を行なっていきます。

#config/locales以下に、「devise.ja.yml」および「ja.yml」という名前のファイルを新規作成する。

#config/application.rbに以下のような記述を追記
class Application < Rails::Application
    config.generators do |g|
 　　　...省略
    　config.i18n.default_locale = :ja
    end

「devise.ja.yml」、「ja.yml」に関しては調べて出てくるのでコピーして実装すれば大丈夫です。これでフラッシュメッセージが完成しました。

 

今日の英単語

これからは、わからない英単語に関しても徐々に覚える為に追加していきます。

●unsubscride　登録の解除(subscride　申し込むを覚えれば理解しやすい)

●notification　通知

 

記述を忘れたので最後にmodelにてvalidateというものがありますが、こちらに関しては文字数制限等の設定を行うことができる処理になります。

また、今回は実装していませんが、パスワードの変更もか可能にして変更する際に変更前のパスワードを必要とするような設定も行いたいなと思いました。

本日の学習内容は以上になります。

最後までお読みいただきありがとうございます。

 

参照：https://www.pikawaka.com/rails/devise

　　：https://aliceblog1616.com/devise_parameter_sanitizer%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89%E3%81%A8%E3%81%AF%EF%BC%9F/

　　：https://nyoken.com/rails-devise-validation

　　：https://qiita.com/kei_f_1996/items/32c87b924076445ab55e

学習[58]日目

本日の学習内容

 ログイン機能の実装

deviseの基本的にな利用方法に関して

  • gemのインストール
  • Eroorの修正

gemのインストール

#Gemfile
gem 'devise'
#ターミナル
bundle install
#deviseに関する関連ファイルの生成
rails g devise:install
#usersモデルの生成
rails g devise　user

上記のような手順で準備を行なっていくのですが、今回はrails g devise:installを忘れて、rails g devise userを実行したことにより、Errorが生じてしまいました。

Eroorの修正

思わぬところでエラーが発生したので、エラー解決までにやったことをメモしていきます。

'method_missing': undefined method 'devise' for User (call 'User.connection' to establish a connection):Class (NoMethodError)
確か上記のようなエラーが生じてしまったので、以下のことを実行することで元に戻すことができました。

#ターミナル上で下記を実行
#既存のファイルに関して追記したものを現在のgitに保存されている状態に更新を行う
git checkout .
#新規に作成されたファイルに関して現在のgitに保存されている状態に更新を行う
(新規ファイルの削除)
git clean -df .

しかし、上記だけでは改善されない点をあり、データベース等に保存されたテーブルに関しては、削除されなかったので、sqlコマンドかsequel pronにて削除を行う必要があった。

ちなみに今回の原因を一つ一つ削除していくとなると下記を削除することで元に戻りました。

●routes.rbのdevise_for :usersという記述を削除

●rake db:rollbackでmigration-fileのrollbackを行う
●uses-tableとそれを作ったときのmigration-fileを削除
●rails d model userを行いuser-modelを削除

deviseのビューファイルの追加

上記の過程でログイン画面は出来るのですが、このままだと簡素な見た目のままなのでここではログイン画面に任意のビューを反映させるための操作を行います。

#devise関連ビューの生成
rails g devise:views

今回はビューファイルに関してはhamlを使用しているので生成されたファイルの拡張子はerbであり、残ったままだとerbの優先度の方が高いのでhamlを適用させるためにはerbファイルを削除する必要があります。

#app/assets/stylesheets/application.scssにてビューを反映させるように実装
@import "module/user";

#application_controller.rbにて未ログイン時にログインページに遷移させる
class ApplicationController < ActionController::Base 
　　protect_from_forgery with: :exception 
　　before_action :authenticate_user! 
end

 

ここまで暫定で実装を行いましたが、結果的にdeviseに関しての前提知識が不足していることが分かったので明日はそこらへんを含めて理解して実装していきたいと思います。

 

参照：https://qiita.com/tani-shi/items/3419600447292abf6c79

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

　　：https://qiita.com/higeaaa/items/96c708d01a3dbb161f20

　　：https://qiita.com/Hal_mai/items/350c400e8763ce0487a3

学習[56]日目

本日の学習

フロント画面の実装(主にhamlとscssコードの見直し)

  • 命名について
  • 複数クラスの設定
  • 変数
  • 部分テンプレートの設定

命名について

命名に関してどのような名称が一般的であるかを少ししか理解していなかったため、それぞれの要素に対して記述したクラス名がその要素に適したものであるかが曖昧だったので見直しを行いました。

例えば、ブロックなどの親要素に関しては、containerやwrapperが主によく使用されるものであるように感じます。ブロックの子要素に関してはcontentやitemなどを使用すればいいなどがあります。

 

複数クラスの設定

変数にて複数のクラスの設定を行いたいhamlの場合にはクラス同士の間に.を入れてあげることによって複数のクラスを指定することが可能となる。

.header__box.hedder__item
↓
#html
<div class="header__box hedder__item">
</div>

変数の定義

変数

#変数の定義
$default-color: #38aef0;
 
#変数の呼び出し
.container {
  color: $default-color;
}

部分テンプレートの設定

部分テンプレートの呼び出しに関しては下記のように行うことで実装出来ます。

#hamlにおける部分テンプレートの呼び出し
#messagesディレクトリ下にある_containerファイルを呼び出す
= render "messages/container"

 

以上、最後までお読み頂きありがとうございます。

 

参照：https://qiita.com/pugiemonn/items/eaa597b79fe59a1f1506

　　：https://qiita.com/yukimura1227/items/a1cbf65ac9abd4d138e1

　　：https://www.pikawaka.com/rails/partial_template

　　：https://qiita.com/suimi34/items/8f04431954255f23b80c

学習[55]日目:haml、sassに関して

本日の学習内容

本日の迷ったところ

  • font-awesomeを用いたアイコンの実装(fileアップロードする為のボタンの作成)
  • boxsizingが未適用によるブロック要素同士のズレ
  • Base-level rules cannot contain the parent-selector-referencing character(Error)
  • 幅や高さの指定は計算値を使用することが多かった...

 

font-awesomeを用いたアイコンの実装(fileアップロードする為のボタンの作成)

まず、ファイルをアップロードする為のボタンに関してはinputで作成します。

しかし、デフォルトで適用されてしまうスタイルがあり、ボタンにはファイルを選択、テキストで「アップロードするファイルを選択してください」となってしまいます。

これを任意のアイコンを設定してボタンにするには labelタグで囲ってあげることにより、通常ボタンアイコンのみクリッカブルである設定をタグに含んでる要素に適用範囲を含めることが出来るようになる。

これでアイコンを追加すればクリックが可能になるわけだが、これだけでは、不要なスタイルが適用されたままなので、inputのスタイルをdisplay noneで排除してlabelタグにスタイルを適用することで任意のボタンの作成が可能

 

boxsizingが未適用によるブロック要素同士のズレ

そもそもbox-sizingとは、要素の幅と高さの中にpaddingとborderを含めるかどうかという設定ができるプロパティです。

デフォルトで設定されているのは基本的にcontent-boxで要素が作り出す幅は、width + padding + borderの太さ + marginになります。pxでwidthやpaddingを指定する分にはこれでも別に良いのですが、borderはpxでしか設定出来ないので親要素に対して幅100%にすることが難しく、ズレが生じることになります。

しかし、border-boxを* で全体に適用することでwidthの中にpaddingとborderが含まれるので「width」と「左右のmargin」の合計だけを100%にすれば、親要素にはまります。


Base-level rules cannot contain the parent-selector-referencing character '&'(Error)

上記のエラーが発生してhamlの記述変更後に起きたのでhamlを確認していたが、hamlの記述を変更したことによってsassで適用されるセレクタがなくなってしまい、scssの反映が無効になりエラーが起きたということが分かり、無駄にhamlをいじくってしまったような気がしました。


幅や高さの指定は計算値やpx以外の単位を使用することが多かった...

em、rem、vh、vwとか色々使用してこなかった単位が出てきて正直びっくりしてしまったが、今まで使用していたpxは絶対値での設定でこれらは全て相対値で設定するものだということを理解した。

これらを利用してくことで慣れていくしかない。

 

以上、本日の学習内容のまとめになります。

最後までお読み頂きありがとうございました。

 

参照：https://saruwakakun.com/html-css/reference/box-sizing

　　：https://qiita.com/amidaku/items/bf99a2e73478a37aa703

　　：https://qiita.com/39_isao/items/e8242901ba1aadb75676

学習[54]日目：haml、sass、BEMの復習

本日の学習内容

 

BEM

Sass

Haml

 

BEM

前回学習した内容ではありますが、実際に書き出してみた時にここってどうなんだろうという点が何箇所かあったのでそちらに関してまとめていきたいと思います。

 

以前に学習したBEMですが、自分が記述していた際に以下のようになってしまった際にエレメントの子にエレメントのような記述をしてしまったのでこのような記述でいいのかと思い、再度復習しました。

＃ブロック__エレメント__エレメントみたいになってしまった。。
n.left-headder
%ul.left-headder__menu
%li.left-headder__menu__new-group
    %li.left-headder__menu__edit-group

これに関しては、エレメントではなく以下のようにブロックの直下に置くような記述をしてあげるのが、望ましいようです。

.left-headder
%ul.left-headder__menu
   %li.left-headder__new-group
 
    %li.left-headder__edit-group

他にも注意するべき点がいろいろあるようでマルチクラスを使用した記述はしないことやルール上OKなものでも普通は使用しないというようりかは使用しないほうがいいルールもあるようなので記述していく上で調べながら実装していく必要性を感じた。

BEM一つとっても深いなーと感じた。

 

Sass

●書き方に関して

記述に関しては、ほとんどcssと同じだと感じたsass(.scss拡張子にて)ですが、＆とネストを混同しておりました。

ネストはheaderでhタグやpタグとかにcssを適用させたい時にネストを使うことでheader hやheader pのようにいちいち定義することなくheaderを省略して記述出来るが、class等で指定した時にブロックの中のエレメントを指定する時には親要素をひっぱってくる&が必要になるっていう理解でいいのかな？

そのままネストだけでは反映されなかったし。

●mixin

例えばmixinでスタイルを定義できるので以下のように文字スタイルに関してまとめて設定したい場合には以下のように設定可能である。

@mixin font-option($font-size: 16px, $color: #ffffff, $font-weight: bold) {
  font-size: $font-size;
  color: $color;
  font-weight: $font-weight;
}
 
.left-headder {
  @include font-option(10px, #253141, 100);
}

引数を上記のように設定した場合には@includeにてスタイル定義語に引数として使用する値を入力してあげることで任意のスタイルを簡略して使用することが可能となる。

尚、変数を入れずに使用した場合には定義した引数が勝手に代入されるようになっているようです。

 

haml

hamlでの記述に関してはlink_toの使い方において手こずりました。

link_toに関してはrailsにてヘルパーメソッドとして習いましたが、これ一つをとっても色々な使用方法があり、勉強になりました。

font-awesomewoを利用してアイコンのリンクを作成する場合には、以下のように行いました。

=link_to "/messages", class: "left-headder__menu__btn" do
= fa_icon 'cog'

実際にこれがリンクとして生成されているのかが曖昧なので、あとで復習して理解を深めたいと思います。

参照：https://necomesi.jp/blog/tsmd/posts/152#class-naming

　　：https://qiita.com/Takuan_Oishii/items/0f0d2c5dc33a9b2d9cb1

　　：https://techracho.bpsinc.jp/hachi8833/2017_04_25/39061

学習[53]日目

本日の学習内容

Rubyにおいてハッシュを配列に変換するメソッドに関して

 

d = {"tea"=>98, "cola"=>108, "coffee"=>128} 

上記配列に対してそれぞれのメソッドを適用すると
keyメソッドにより全ての キーを配列に変換することができます。
p d.keys 
=> ["tea", "cola", "coffee"]

valuesメソッドにより全ての値を配列に変換することができます。
p h.values 
=> [98, 108, 128]

to_aメソッドによりキーと値のペアを配列の配列に変換することができます。

p h.to_a 
=> [["tea", 98], ["cola", 108], ["coffee", 128]]

Hash#indexesメソッドまたはHash#indicesメソッドにより指定されたキーを持つ要素の値を配列に変換することができます。

p h.indexes("tea", "cola") 
=> [98, 108]
p h.indices("cola", "coffee")  
=> [108, 128]

上記のように一括で配列をメソッドによって変換することが可能であることを学習しました。

 

ボリュームが少なめですが以上になります。

最後までお読み頂きありがとうございました。