アウトプットを頑張る

初めてのプログラミング学習期間中の記録と、日頃読んでいる本をメモのアウトプットをがんばります。

【プログラミング学習】レスポンシブ対応

プログラミング学習

■プログラミング学習

f:id:yuma6128:20211116075355j:plain ◎レスポンシブ対応方法
WEBサイトをレスポンシブ化するためには、下記３つの工程が必要
1. 表示領域の設定をする
2.画面サイズによって、CSSを切り替えるための設定をする
3.画面サイズごとに適用するCSSを記述する

◎1.表示領域を設定する方法を学ぼう
レスポンシブ対応をするためには、画面幅が異なるデバイスに対して、Webサイトの表示領域を設定する必要があります。 この表示領域をviewportと呼びます。
viewportを指定しないとスマートフォンで表示したときに、PCサイトのレイアウトをそのままスマートフォンで画面内にに収まるように縮小して表示されるので、文字が小さく見づらくなってしまう。
viewpordを設定するためには、htmlファイルのheadタグ内に以下の記述を行う。

<head>
　<meta charset="UTF-8" />
　<meta name="viewport" content="width=device-width,initial-scale=1.0" />

contentプロパティにwidth="device-width"を指定することで、ブラウザに大きさをPCやスマートフォンなどの大きさに合わせることができます
initial-scaleは、画面の拡大率を指しています。拡大率は「1.0」に設定しているため、拡大は行われません。

◎2.画面サイズによって、CSSを切り替えるための設定をする
例、画面幅が500px以下のときにのみ、pタグのfont-sizeを10pxにしたい

@media (max-width:500px) {
 p{
   font-size: 10px ;
    }
}

この記述をメディアクエリと言います。
メディアクエリとは、表示された画面幅に応じて適用するスタイルを切り替える機能を指します。

◎3.画面サイズごとに適用するCSSを記述する
メディアクエリによって、規定されるスタイルの分岐点をブレークポイントと呼びます。
ブレークポイントの値を何pxにするか、何箇所ブレークポイントを置くかで制作するWebサイトの要件によって、 変わります。
PCとスマホのみの対応であれば、1箇所
PC、タブレット、スマホの対応となると2箇所のブレークポイントが必要になります。

例、PC、タブレット、スマホでそれぞれフォントサイズが異なるよう記述

/* PC表示 */
 p{
   font-size: 30px ;
    }

/* タブレット表示 */
@media (max-width:1000px) {
 p{
   font-size: 25px ;
    }
}

/* スマホ表示 */
@media (max-width:500px) {
 p{
   font-size: 20px ;
    }
}

■読書　リフレクション（REFLECTION）　自分とチームの成長を加速させる内省の技術

f:id:yuma6128:20210710180648j:plain ◎読書
リフレクション内省をする機会がほしいと思い、本書を読みました。 内容としては、認知の4点セットで「意見・経験・感情・価値観」を使い、 どの内容についても振り返ること。
自分の中で不満や怒りなどネガティブな感情が起きたときに、 心の動きや変化を意識して、自分の価値感はを見つける。
アンラーンのリフレクションも方法が書かれており、過去の成功体験を捨てるだけと思っていた自分としては
過去の成功体験を振り返り、称賛をし、その後アンラーンをした先の未来を考え、アンラーンする
「異質な世界に飛び込むと良いことがある」という考えを持つなど、心が軽くなり 今から実践していきたいと思える内容が多くあった。
試しながらも読んでいくことが多かったので、2回目は一つ一つ試していきたいと思える本でした。

【プログラミング学習】Rspec 効率的なテストコードの記述 -Fakerの導入-

プログラミング学習

■プログラミング学習

f:id:yuma6128:20210710173934j:plain

◎Faker
FactoryBotで設定した値は、固有のものになるため、複数のテストを行う際に、「すでに重複したインスタンスが存在する」といった、意図しない形で弾かれてしまうことがあります。
その際に、インスタンスを生成する都度、値をランダムで作れるものがFakerになります。

Faker はランダムな値を生成するGemです。
メールアドレス、人名、パスワードなど、さまざまな意図に応じたランダムな値を生成できます。

Fakerの公式GitHub github.com

◎Fakerの導入
Fakerの導入には、Gemfileの追記が必要になります。

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
  gem 'rspec-rails', '~> 4.0.0'
  gem 'factory_bot_rails'
  gem 'faker' #こちらに追記
end

記述後は、bundle installを行い、導入は完了です。

◎Fakerの試す
コンソールを起動して、ランダムな値が生成されているかを確認します。

% rails c
Running via Spring preloader in process 7256
Loading development environment (Rails 6.0.4)
[1] pry(main)> Faker::Name.initials(number: 3)
=> "SPC"
[2] pry(main)> Faker::Internet.free_email
=> "elliot@yahoo.com"
Faker::Internet.password(min_length:6)
=>

といった具合に、それぞれランダムな値が記述されます。

■読書 世界のビジネスエリートが知っている 教養としての茶道

f:id:yuma6128:20210710180648j:plain ◎感想
日本の中で当たり前にように感じていることの素晴らしさを意識できる 1冊でした。
ビジネスに関係ないと思われるかもしれないですが、相手の気持ちを考える姿勢や物事の捉え方などが学びになりました。
スティーブ・ジョブズも目指していた、茶道も禅も余計なものを捨て、シンプルに生きるということ、今のような変化が多い世界に必要な考え方だと思いました。
石田三成が豊臣秀吉に対して行った、三献のお茶の対応は感銘を受け、こうした考え方を日頃から意識せずとも出来るようになりたいです。
心が疲れていたり、何か悩みがあるかたも是非ご一読をおすすめします。 私はこの本を読んで、茶道の体験教室に行ってきましたが、とても良い体験でした。

【プログラミング学習】Rspec 効率的なテストコードの記述

プログラミング学習

■プログラミング学習 f:id:yuma6128:20210821202045j:plain

◎FactoryBot
テストコードの記述では、ユーザーを生成する記述を下記のように都度記述をしました。

user = User.new(nickname:' ',email:'test@mail',password:'00',password_confirmation'00')

これらの同じような記述はまとめてしまったほうが効率的になります。
その時、使用するものがFactoryBotになります。 インスタンスをまとめることができるGemになります。
他のファイルで予め各クラスのインスタンスに定める値を設定しておき、各テストコードで使用できます。

◎FactoryBotの導入
GemFileの下記部分に記述を追記いたします

Gemfile
group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  #省略
 gem 'factory_bot_rails'
end

を記述後、bundle installを実行する。
FactoryBotの記述を格納するディレクトリ「factories」とUserモデルに対するFactoryBotのファイルをusers.rbを作成する。
上記で作成した、users.rbに下記内容を記述する。

FactoryBot.define do
  factory :user do
    nickname              {'test'}
    email                 {'test@example'}
    password              {'000000'}
    password_confirmation {password}
  end
end

この設定したインスタンスを生成するためには、「FactoryBot.build(:user)」という記述をテストコードの中に記述をする。
このbuildは、ActiveRecordのnewメソッドと同様の意味を持っています。

# FactoryBotを利用しない場合
user = User.new(nickname: 'test', email: 'test@example', password: '000000', password_confirmation: '00000000')

#FactoryBotを利用する場合
user = FactoryBot.build(:user)

【プログラミング学習】Rspec テストコードのメソッド

プログラミング学習

■プログラミング学習

f:id:yuma6128:20210829071916j:plain

◎valid?
valid?はバリデーションを実行させて、エラーがあるかどうかを判断するメソッドです。 エラーが無い場合は、trueを、ある場合はfalseを返します。 また、エラーがあると判断された場合、エラーの内容を示すエラーメッセージを生成します。

例文
% rails c
user = User.new(nickname:'')
user.valid?
=> false

◎expectation
エクスペクテーションとは、挙動が想定どおりなのかを確認する構文のことです。 雛形としては

expect().to matcher()

テスト内容に応じて、引数やmatcherを変えて記述する。

◎matcher
matcherは「expectの引数」と「想定した挙動」が一致しているかどうかを判断します。 expectの引数には、検証で得られた実際の挙動を指定、マッチャには、どのような挙動を想定しているか記述をします。

◎include
includeは「expectの引数」に「includeの引数」が含まれていることを確認するマッチャです。

例文
describe '自動車メーカー'do
it '自動車メーカーに日本メーカーが含まれている'
　expect(['BMW,' 'MINI','日産'].to include('日産')
end
end

このテストコードを実行した場合、配列の中に、想定通りincludeで記載したものが含まれているため テストは成功になります。

◎eq
eqとは「expectの引数」と「eqの引数」が等しいことを確認するマッチャです。

describe '引き算'　do
 it "2-1の計算結果は1と等しい"
 expect (2-1).to eq(1)
 end
end

◎errors
errorsは、インスタンスにエラーを示す情報がある場合、その内容を返すメソッドです。 エラー情報は、ターミナルから取り出します。 その際にはfull_messagesメソッドを用います。

◎full_messages
full_messagesをもしいて、エラー内容から、エラーメッセージを配列として、取り出すメソッドです。 ターミナルで、.errors.full_messagesと実行すると、 部分でのエラーメッセージが返ってきます。

■読書 日本の美意識で世界初に挑む 細尾 真孝 (著)

f:id:yuma6128:20210811073847j:plain

◎感想
美意識という資本主義ビジネスから遠い存在のように、感じられることを追求し、
資本主義の中での売り上げというゴールを達成している話を見て、 2017年頃に読んだ「世界のエリートはなぜ「美意識」を鍛えるのか？」こちらの本の答えのような内容で とても読みやすかったです。
美意識とは何なのか、どう鍛えるのかなどが書かれており、自分自身も改めて美ということを意識して 日々生活をしていきたいと感じる1冊でした。

f:id:yuma6128:20211107123555j:plain

【プログラミング学習】Rspec テストコードの雛形記述

プログラミング学習

■プログラミング学習

f:id:yuma6128:20211103104657j:plain

◎describeメソッド
describeとは、テストコードのグループ分けを行うメソッドです。
「どの機能に対してのテストを行うか」をdescribeでグループ分けし、その中に各テストコードを記述します。

describeにつづく、do~endの間に、さらにdescribeメソッドを記述することで、入れ子構造をとることもできます。

describe 'テスト内容' do
 #テスト内容に関してのテストコードを記述
end

上記で、どの機能に対してテストを行うかを明記できました。

◎itメソッド
itメソッドは、describeメソッド同様にグループ分けを行うメソッドです、
itの場合はより詳細に「describeメソッドに記述した機能において、どのような状況のテストを行うか」を明記します。
itメソッドで分けたグループを、exampleとも呼びます。

◎example
exampleとは、itで分けたグループのことを指します、
また、itに記述した内容のことをさす場合もあります。

describe 'テスト内容' do
　it #テスト内容に関してのテストコードを記述 do
end

　it #テスト内容2に関してのテストコードを記述 do
end
end

こちらのテストコードを実行するためには、下記のコマンドが必要になります。

◎bundle execコマンド
Gemの依存関係を整理してくれるコマンドです。
Rspecを始め、Gemはその他のGemと関係があり、互いに依存をしている。
こちらは詳しい内容を覚えるというよりは
「bundle exec コマンドが必要になることがある」と認識しています。

◎rspecコマンド
spec　ディレクトリ以下に書かれたRspecのテストコードを実行するコマンドです。
実行するファイルを指定することも可能です。

% bundle exec rspec ファイルの場所

で実行になります。
次回はテストコードの内容の書き方についてまとめて参ります。

■読書　アメリカの高校生が学んでいるお金の教科書

f:id:yuma6128:20211010075119j:plain

読書内容
お金について学んだような気になっている自分がいたので、
改めて、どう向き合うかを考える上でこちらの本を読んでみました。

内容はとてもわかり易く、知っていることもありましたが、
自分の考えやその当たり前と思っていることを説明出来るかというと
なぜそうなっているのか説明ができなかったりしたので、その部分は学びになりました。
どんな人生を歩むかを自分で選択するために、「お金」の知識は絶対に必要だ
と本書冒頭にかかれており、そのとおりだと思っています。

どの業界にいるか、どのスキルを伸ばすか、自分は何が楽しく仕事を出来るかなど
考えて実践し、自分に合った内容を社会にアウトプットしていきたいと思います。

また、改めて「絶対に儲かる」という話はすべてウソだと思ったほうがいいと言うのは
これは当たり前だが、改めて心に刻みたいと思っています。
特に人はお金が無いと思考力が低下するという実験結果が出ていると他の本にも書かれているため
そういうときこそ、きちんと向き合っていきたいと考えています。


f:id:yuma6128:20211103112142j:plain


【プログラミング学習】Rspecの導入と単体テストコード

プログラミング学習

■プログラミング学習

f:id:yuma6128:20211031141429j:plain

 

◎Rspecを追加

前回続いて、Rspecを実行するためには、Gemfileに記述が必要になります。
```
group :development, :test do
~~~~
~~~~
gem 'rspec-rails', '~> 4.0.0'
```
記述後、bunble installを実行します。


◎Rspecをインストール実行

```
rails g rspec:install
```
.rspecファイルを開いて、以下の記述をする。
テストコードの結果をターミナル上に可視化するための記述です。

.rspec
```
--require spec_helper
--format documentation
```

◎テストファイルを作成
ターミナルにて下記コマンドを実行する。
```
rails g rspec:model user
```
user_spec.rbというファイルが生成されるため、その中に単体テストコードを記述をしていく。

次回には、テストコードの雛形について説明をしていきます。

■読書 外資系コンサルの知的生産術～プロだけが知る「99の心得」～　山口 周

f:id:yuma6128:20210710180648j:plain

◎知的ストックを厚くする
アイディアは質よりも量を持って、その掛け算を考えて、新しいものを生んでいく。そのための知的ストックを集めるためのテーマに分けた、イケスをデジタル上に用意をしたり、自分の中でフッと浮かんだ違和感や、疑問を逃さないようメモを持って、なるべく書き留めることを意識する。
なにより、常識と思って思考停止をしないで、常識は「いま、ここ」での常識であって過去や未来には、常識で無くなる可能性がある、その選球眼をもった上で
「Why」を投げかけることを意識する。

f:id:yuma6128:20211031144201j:plain




【プログラミング学習】テストコードRspecを知ろう

プログラミング学習

■プログラミング学習

f:id:yuma6128:20211027071708j:plain

◎テストコード

アプリケーションの機能を実装したら、正しく想定道理に動くかを自分でブラウザを操作して確認をしてきました。しかしそれ以外の確認方法もあります。

それは動作を確認するためのコードを書いて、そのコードを実行し、自動で確認する「テストコード」と呼ばれる方法です。

 

◎Rspec

RspecはRuby on Railsのテストコードを書くために用いられるGemです。
なぜ、テストコードを書く必要があるのか。
ブラウザでの確認ではだめなのか。

◎テストコードを書く意義
・クオリティの担保が出来る
　人為的ミスの削減、仕様が変わったときの全部やらなくてよい、チェックリストのログが残る

・仕様を見極めることが出来る
テスト項目を見ることで、仕様の確認ができる。

テストコードは「何を確認したいのか」を意識して作成をしていく。

◎テストコードのパターン
アプリケーションの挙動を確認するときは「うまくいくとき」「うまくいかないとき」
をそれぞれ確認する。
前者を「正常系」、後者を「異常系」と呼びます。

正常系・・「ユーザーが開発者の意図する操作を行ったときの挙動」を確認するテストコードが正常系（詳細は次回以降）

異常系・・「ユーザーが開発者の意図しない操作を行ったときの挙動」を確認するテストコードが異常系に分類されます。
たとえば、必須項目を入力せずに送信されたときに、「必須項目」を入力してくださいというアラート画面がでます。この挙動を確認することは異常系に分類されます。

 

◎テストコードの種類

テストコードの種類は大きく2つに分類されます。
「単体テストコード」と「結合テストコード」の2つです。

単体テストコード・・モデルやコントローラーなどの機能ごとに問題がないかを確かめます。

結合テストコード・・ユーザーがブラウザで操作する一連の流れを再現して、問題がないか確かめます。

 

■読書　外資系コンサルの知的生産術～プロだけが知る「99の心得」～　山口 周

f:id:yuma6128:20210710180648j:plain

◎アウトプット

アウトプットについての章では、
行動をさせることが目的のため「レス・イズ・モア＝少ないほどいい」
が個人的には、とても大切なことと思いました。

どうしても資料は、色んな情報を詰め込みがちになってしまい、
大切なことに絞ろうと思っていても、文字や情報が増えていってしまうことがあるため
この意識を忘れないようにしたいです。

アウトプットの形は「What」「Why」「How」の要素を備えているかと、状況に応じて、それぞれの説明の割合や順番によって、相手を動かし方が変わるというのも新しい気付きだったため、状況に応じて使い分けをしていく。

そして説得より納得を、納得よりも共感をというのが、相手に動いてもらう上で、とても重要だなと思い、そこは意識していくべきだと思いました。

相手からの質問は質問という名の反対意見や懸念表明であることが多いため、回答をするよりも質問で返して、相手の懸念や反対意見を良質なインプットが得られる可能性があるというのためになりました。

次回は知的ストックを厚くするになります。