テックキャンプ サーバー作業
自動デプロイ【bundle exec cap production deploy】
ターミナルでAWSキー確認【env | grep AWS】
【cd ~/.ssh】➡️【ssh -i 名前 ec2-user@IP】
MySQLを起動する【sudo service mysqld restart】
nginxの再起動【sudo service nginx reload (restart)】
unicorn実行中確認【ps aux | grep unicorn】
Gitからpullする【git pull origin master】
Rails再起動【bundle exec unicorn_rails -c config/unicorn.rb -E production -D】
Unicorn起動コマンド
【RAILS_SERVE_STATIC_FILES=1 unicorn_rails -c config/unicorn.rb -E production -D】
◎serect_key_base
クッキーの暗号化に用いられる文字列
Railsアプリを動作させる時に必ず用意する必要がある。バレたらだめよ。rake secretで生成
🔳セキュリティグループ
EC2鯖が属するまとまりのようなもの。複数のEC2インスタンスのネット設定を一括で行う
🔳unicorn_railsコマンド
◎-c config/unicon.rb＝設定ファイルの指定
◎-E production＝環境を本番モードとして動作させる
◎-D （Daemon）＝プログラム起動しつつターミナルで別コマンド打てるオプション
🔳アセットファイルをコンパイルする
◎psコマンド＝現在動いてるプロセスを確認するコマンド
🔳web鯖
・クライアントからのリクを受け取り、応じたコンテンツをレスポンスするプログラム
・静的（リクエストのたびに内容が変更されないファイル）コンテンツを
レスポンスとしてクライアントに返す
・動的（クエストのたびに内容が変更されるファイル）コンテンツ生成を
アプリ本体（鯖？）に依頼する処理
🔳アプリケーション鯖
Web鯖から渡されてきた情報を、アプリ鯖内で処理して、結果をWeb鯖に返す処理
◎Webとは蜘蛛の巣(spider web)
◎クライアント＝提供される人
◎サーバ（ソフトウェア）＝提供する人
◎クライアントと鯖のやり取りの流れ
1，クライアントが鯖にリクエストを送る
2，鯖がリクエストを解析、処理して答えを作る
3，鯖がクライアントにレスポンスを返す
🔳デプロイするまでの流れ
1、アプリを開発
2、デプロイするための鯖を用意
3，実際にデプロイする
◎クラウドコンピューティング
ソフトウェアやハードウェアの利用権をネット越しに提供する技術。
必要な時に必要な文だけ使える
◎yumコマンド
Linuxのソフトウェア管理の仕組み。Macのhomebrew。一括アプデとかできる
◎パッケージ
Linuxのある役割や機能を持ったプログラムの集合。ソフトウェアやライブラリとも呼ぶ
◎-y＝side-by-side 形式（2列）で出力
◎アプリケーションサーバ
リクエストを受け付けRailsアプリを動作させるソフトウェア（rails s）
◎プロセス
鯖で動く全てのプログラム実行時の単位。動く数だけプロセスがある
◎worker（ワーカー）
unicornはプロセスを分裂できる。その全てをワーカーと呼ぶ
🔳サーバーとは
サービスを提供するコンピュータや、それにある様々な機能（処理）。特化した機能
◎サーバーの役割
様々なデータを管理・保存。PC同士の通信を行う（WEBサーバー）
◎IPアドレス
コンピュータやサーバーに設定された住所のようなもの
◎グローバルIPアドレス
インターネットに接続する際に利用されるIPアドレス。この世に1つしかない
◎プライベートIPアドレス
ISPから振り割られたGIPをさらに小分けしたIPアドレス。別名LAN(LocalAreaNetwork)
◎ルーター
ネットとパソコン間で通信を行う時に必要になる機器
◎ドメイン
IPアドレスを文字列に変換したもの
文字列化する仕組みをDNS(DomainNameSystem)
◎トップレベルドメイン
ドメインを取得するために必要。inやcomやjpなど。
・セカンドレベルドメイン
早いものがちの2番手。tech-campなど
◎DNSサーバー
IPアドレスとドメインのそれぞれの組み合わせを管理、保存してる鯖
◎digコマンド
DNSサーバーに問い合わせてメインからIPアドレスを取得し表示するコマンド
◎ポート
1つの鯖と複数の鯖を繋ぐもの
◎HTTP
WEBページで必要なCSS,JS,画像等のファイルを鯖にリクエストするためのフォーマット
◎クッキー
WEB鯖がユーザを認識する仕組み
◎Linuxとは
OSの一種。
🔳ディストリビューション
Linuxは色んなソフトウェアを組み合わせて動くようになる。
スターターセットみたいなイメージ
◎パッケージャ・マネージャ
何がインストールされたか記憶し、新しくインストールした新しいバージョンに更新、
以前のソフトウェアの削除を用意に行えるもの
例）iOSのApp Storeみたいな
🔳Linuxの基本的なコマンド
◎シェルとは
鯖に対して作業したい時、ターミナル等を使ってコマンドを利用するけど、
そのユーザーが入力したコマンドを解釈するソフトウェア
◎ls(list)
◎ディレクトリ（フォルダ）
◎カレントディレクトリ(.)＝現在作業中のディレクトリ
◎親ディレクトリ(..)＝1つ上のディレクトリ
◎ホームディレクトリ(~)＝新規にターミナル起動した時の作業中になるディレクトリ
◎ルートディレクトリ(/)＝その階層構造の一番上。木の根元
◎cp（コピー）
◎mv（移動及びリネーム）
◎rm（削除）
◎mkdir（新規にディレクトリ（フォルダ）を作成）
◎touch（移動か、指定したファイルがない場合は空のファイルを作成してくれる）
◎cat（ファイルの内容を結合し、表示する）
◎tail（ファイルの終わり部分を表示するコマンド）末尾に追加するとエラーログ分かる
◎vi（鯖で設定ファイルを編集する時のエディタ。標準装備のソフトウェア）
🔳通常モード(escキーを押す）
◎文字入力できない。
:w＝作成、編集したファイルを保存
:q＝viコマンドを終了
:q!＝編集した内容を保存しないでviコマンドを終了
:wq＝編集した内容を保存してviを終了
🔳インサートモード(iキーを押す）
◎文字入力できる
/＝文字列を検索
u＝挿入中の一連の文字入力の動作を1つ取り消せる
🔳サーバ設定
◎一般ユーザーとrootユーザー
ファイルに対して権限が違う
◎sudo＝他のユーザーに成り代わってコマンド実行できる。権限いる
◎su＝他のユーザにログインし直せる。パスいる
◎所有者とは
ファイルの持ち主。権限を設定できる
◎パーミッションとは
誰にどのような操作を許可するか。権限を規定した情報
読み込み（r,4）書き込み（w,2）実行（x,1）
「ls -l（権限見たいファイルのパス）」で確認できる
例）「 rwx r-x r-x 」➡️所有者rwx、グループユーザーrx、一般ユーザーrx
例）755➡️足し算すると上と同義。
◎chmod＝権限を書き換えるコマンド
◎chown＝所有者を変更するコマンド
🔳ターミナルにコマンドのプロセスを表示する
◎プロセスとは
鯖やコマンドなどLinux上で実行してる処理。
プロセス名とプロセスIDが自動的に付与される
◎ps➡️プロセスを確認
-a＝自分以外のユーザのプロセスも表示
-r＝実行中のプロセスのみ表示
-u ユーザー名＝ユーザー名とプロセスが実行された時刻を表示
aux＝実行中の全てのプロセスのCPU使用率など詳細情報を表示
🔳複数のコマンドを組み合わせる方法
| （パイプ）処理＝あるコマンドの結果を次のコマンドに渡す処理
grepコマンド＝特定の文字列が含まれる一行を抽出する
kill（プロセスID)＝終了させる。kill -9（プロセスID）＝強制終了できる
◎プロトコル
データのやり取りの手順
◎SSH（セキュアシェル）
安全にリモートサーバと通信できる
🔳公開鍵でのログイン手順
1，公開鍵と秘密鍵を生成（ssh-keygen -t rsaコマンド）
2，公開鍵を鯖側に設置（送信先のディレクトリを指定してファイル送る、scpコマンド）
・リモート鯖にローカル環境の公開鍵のファイル（id_rsa.pub)をコピー
・ローカル環境の公開鍵のファイル(id_rsa.pub)の中身を、
リモート鯖の公開鍵のファイル(~/. ssh/authorized_keys)に追記
3，公開鍵認証でログインできるか確認
テックキャンプ テストと非同期通信とか
🔳非同期通信（Ajax)
ブラウザが再読込されないで通信が行われる通信方法
1，JSでリクエストする
2，コントローラでJSON形式のデータを用意
3，レスポンスするためのJSON形式のデータを準備
4, JSでレスポンスを受け取り、HTMLを操作してToDoを追加
◎JSON
データ交換を行うためのデータ記述形式の一種。ハッシュと同じ
◎デフォルトアクション
HTML要素の操作（inputとかsubmit）
🔳非同期通信を実装
◎respomd_to
HTMLかJSONのレスポンスを求めてるか条件分岐
◎$.ajax
非同期通信を行うための記述。.ajaxの部分がメソッドの呼び出し。引数使うで〜
{type: 'POST', url: '/todos.json', data: { todo: { content: todo } }, dataType: 'json' }
◎type
HTTP通信の種類を記述する。通信方法は、GETとPOSTの2種類がある。
◎url
リクエストを送信する先のURLを記述する。
◎data
サーバに送信する値を記述する。
◎dataType
サーバから返されるデータの型を指定する。
◎doneとfail
非同期通信が成功or失敗した時に行う処理をかける
◎FormData
フォームのデータ送信に使用できる
◎ attrメソッド
要素が持つ指定属性の値を返す。
$(this).arrt('action')を取得して、フォームの送信先のurlが入ってる。
◎processDataオプション
デフォはtrue、dataに指定したオブジェクトをクエリ文字に変換する
◎contentTypeオプション
サーバにデータのファイル形式を伝えるヘッダ。dataがformDataならfalse
◎jbuilder:array!メソッド
jbuilderの拡張子テンプレは、jsonオブジェクト？が使える。配列で返したい時はarray!
◎emptyメソッド
指定したDOM要素の子要素のみを削除する
DOM要素自体を削除するremoveメソッドとは違うよ
🔳APIとは
必要なデータだけjsonとかのデータ形式で返すサーバーの仕組み
addDeleteUserメソッドで生成したdiv要素の中にidを基準に
inputタグの$(`#${userId}`).append(html);を突っ込む。
削除ボタンを押すと親要素が消えるので、子要素であるinputタグも死ぬ
回答者が答えやすい質問をする。
jQueryの`と'と"の意味とは？
◎名前空間（namespace）「::」
◎setInterval()関数
一定時間ごとに処理を実行する
◎ valid?メソッド
・valid?メソッドを利用すると、保存する際に
「バリデーションにより保存ができない状態であるか」を確かめる]
・バリデーションが実行された結果
エラーが無い場合trueを返し，エラーが発生した場合falseを返す
◎be_validマッチャ
expectの引数にしたインスタンスが全てのバリデーションを
クリアする場合にパスするマッチャです。
◎discribe
do~endまでのテストのまとまり。""には説明を
◎itとexample
it＝exampleという動作するテストコードのまとまり。""には説明を
◎エクスペクテーション(expect)
実際に評価される式。it do ~ end の間に
◎expect(X).to eq Y
xの値がYと同じならテスト成立
◎マッチャ（テスト評価組）
・eq＝テスト成功する条件
・include＝含んでたら
・valid＝バリデーションにより保存できない状態か
・erros＝valid?とerrorsを合わせて使うと何故できないのか確認できる。すげー
・be_valid＝expectの引数にしたインスタンスが全てのvalidatesをクリアする場合
🔳factory_bot（省略可）
簡単にダミーのインスタンスを作成できるGem
◎buildメソッド
引数にシンボル型で取ったクラス名のインスタンスをbotの記述のもとに作成
◎createメソッド
buildとほぼ同じ動き。でもテスト用DBに値が保存され、
1テスト終わったらごとにロルバ祭り。bindingしないと値残らない
🔳テストコードを書く時の原則
◎各exampleで期待する値は１つ
◎期待する結果をはっきり分かりやすく記述
◎起きてほしいこと、起きてほしくないこと両方をテスト
◎境界値をテスト
◎可読性を考えつつ、適度にDRY(don't repert yourself)わかり易さ重視
◎下に無駄な改行をしない
◎routes.rbで不要なrootを消す
◎分からない内容は調べる。
適当にやっちゃうところがあるから、試す前に調べる
◎deviseを利用したテーブル追加
1，rails g devise user
2，マイグレーションファイルに内容を追加
3，rails db:migrate
4，バリデーションを追加
🔳投稿フォームのビュー崩れ問題。
原因➡️display: flex;が追加されていないため
◎form_tagを使うと、new_messageクラスが自動生成される
➡️自動生成されたクラスに合わせてscssファイルでnew_messageを指定してあげればok
🔳最新のメッセージを表示するためには
messages.lastで最後のメッセージを取得できる
🔳スペルミスめっちゃ多い
➡️仕組み的な解決策を考える（頻度を下げるだけでもいい）
🔳テスト
◎プロダクションコード＝本番環境で実際に作動するプログラム
◎テストコード＝文字通りテスト用
🔳テストの種類
◎単体テスト＝例）1つのコントローラーずつ
◎結合テスト＝例）ユーザー新規登録の一連の流れの処理
🔳Capybara
ブラウザ操作を再現するgem
◎visitメソッド
引数にURLかprefixを指定するとそのページに移動できる
◎click_onメソッド
指定したHTML要素をクリックする
🔳コントローラーのテスト
◎getメソッド
引数で利用したいアクションをシンボル型(:user)で渡す
◎responcse
リクエスト後の遷移先のビュー情報を持つ
◎render_template
遷移するビューを返す
◎assigns
アクションで定義してる変数をテストするためのメソッド
expectの引数で超使う。ぱない
◎creat_list
複数のリソース(tweetの値とか）を作れる。
◎Faker
ダミーデータを作る。create_listと一緒に使うと気持ちいい
◎matchマッチャ
expectの引数と比較する。引数に配列のインスタンスを取り順番までチェックする。すご
◎let 呼ばれた時に初めて実行される遅延評価っていう特徴
◎1 failure（赤文字）
1つの失敗がある。つまりバリデーションに負けた（引っかかった）エラー有り
◎0 failure（緑文字）
1つも失敗しなかった。つまりバリデーションに勝った（引っかからなかった！）エラー0
◎パスワードの文字数制限の問題、2種類のパスの文字数を一致させないとエラー出る笑
テックキャンプ 13日目〜アウトプット
🔳Sassとは
CSSの機能を拡張した言語で、CSSと似てるけど異なる言語
変数使ったり計算できる
🔳Sassのメリット
◎記述の簡略化
・ネストできる
◎プログラムのような処理ができる
・変数使える=$変数名: ~~;
◎複数のCSSファイルを1つにまとめられる
・パーシャル
・分割したSassファイル
・mixin
まとまったスタイルを定義できる
定義＝@mixin mixin名(){}
@include で呼び出す
例）@mixin ~~(){} で変数を定義➡️@includes ~~(); で召喚する
◎同じ値を使い回せる
&で大元のところから引っ張れる
🔳BEMとは
CSS設計のこと。厳しいクラスの命名規則がある。
Block=大元となるブロック要素。こいつが起点。名詞使う
Element=Blockに属する子要素。名詞使う
Modifier=BとEに特別な装飾をする要素。形容詞を使う
🔳命名規則
◎BlockとElementを繋ぐ時はアンダースコア2つ
◎Modifierに繋ぐ時はハイフン2つ
🔳Hamlとは
・少ない労力でHTMLを書ける
◎Sassで文字やアイコンの色を変える時
直接aタグにクラスを追加して色指定する。じゃないと変わらん
🔳jQueryのscriptを読み込むコードを書く
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
🔳$=JSのdocumentにあたる
◎IDセレクタ
$("#div")
◎クラスセレクタ
$(".div")
◎要素セレクタ
$("div")
◎属性セレクタ
$("input[ type = 'radio' ] ")
🔳$(this)
イベントの発生元になった要素を取得できる。超使うらしい
🔳removeClass()
🔳addClass()
🔳index()
配列に変換しなくても引数に指定したDOMと同じ要素番号を戻す。すげー便利
🔳submit
フォームが送信される時に呼び出されるイベント
デフォルトだと自動的に同一ページにリダイレクトされる
➡️preventDefault()
デフォルトのイベントをキャンセルできる！
🔳 find("セレクタ")
合致する全てのセレクタを取得
rubyは1個だけ
🔳each文
・HTML要素.each(function(index, element) {
🔳prop()
要素のプロパティを取得するメソッド
例）checkbox.prop('checked')
🔳attr()
要素の値（バリュー）を取得する。バリューだから中身(tanakaとか)
🔳append()
指定した子要素の最後にテキスト文字やHTML要素を追加することができる
<li>タグとかも入れられる
🔳リポジトリ
Gitの管理下にあるファイルやディレクトリの変更履歴を保管する入れ物
🔳ローカルリポジトリ
自分のPC上（ローカル環境）に置くリポジトリ
🔳リモートリポジトリ
外部のサーバーに置くリポジトリ
複数人で管理下のファイルやディレクトリを共有できる。必須級
🔳git init
新しくGitで管理したいやつを管理できるようにする記述
🔳インデックス
バージョンを記録するためのファイルを一時的に登録する場所
🔳git status
indexに追加されてる、されてない変更修正を確認できる
🔳git add
インデックスに追加して変更修正記録の対象にする
◎git remote add
ローカルリポジトリにリモートリポジトリを紐付け
🔳コミット（git commit）
indexに追加された変更修正をver記録する操作。-mでメッセつけてる
🔳Gitのログとは（git log）
コミット履歴のこと
🔳origin
リモートリポジトリの場所の別名。originが一般的
🔳git push
ローカルリポジトリのコミットをリモートリポジトリ(origin)に反映させる操作
🔳GitHub Desktop
◎Changes
チェックボックスが、git addの概念。チェックされてるとindexに追加されている
◎commit to master＝文字通りコミット
◎Publish branch＝プッシュ
2回目以降はFetch origin
◎masterブランチ
全ての大元
◎トピックブランチ
複数作れるブランチ
◎プルリクエスト
コミット履歴を残し、各コミットの変更修正にコメントをつけてるGitHubの機能
WIP=作業中。途中ならつける。終わったら外せ
、What（何を）と Why（なぜ）を書く
What（どのような実装をしているのか）と
Why（なぜこの実装が必要なのか）を書くことで、このブランチは何を実装していて、
なぜその実装を行ったのかが他の人に伝えることができます。
What をしっかり書くことで、他者にコードを見てもらう際に、
スムーズな理解を促すことができます。アプリケーションの機能が複雑に
なればなるほど、コードを読んだだけでは、何をしているのか把握することは難しくなるからです。また、Why をしっかり書くことで、本来の目的に沿ったコミュニケーションが可能です。実装目的が伝わっていないと、欲しい意見をもらうことはできません。
◎マージ
masterブランチに結合する
マージしたらブランチ消して、ローカルにプルする
🔳デプロイ
アプリケーションをサーバー上で利用可能な状態にすること
🔳デプロイとGitHub
1，ブランチを作成
2，コード変更修正
3，動作確認
4，マージ
5，サーバー側にpull デプロイ
🔳Leave my changes on master
元のブランチで書いてたコードを全て捨て、新しいブランチで0からコード書く
（復旧方法有り）
🔳Bring my changes to （新しいブランチ名）
・元のブランチで書いたコードを新しいブランチに引き継ぐ
（基本こっちじゃね）
◎間違えてプッシュしたらGit revert➡️前回記録分まで戻れる
完全には戻れない。
リモートへのpushは慎重に
🔳Ruby
変数名を全角にすると定数になる。
定数はメソッド内では使えない
◎rails db:migrate
◎bundle exec rake db:migrate
やってることは同じ？
書き方が違うだけ
🔳privateメソッド
クラス外から呼び出すことのできないメソッド
◎メリット
1.Classの外部から呼ばれたら困るメソッドを隔離
メソッドの中には、Classの外部から呼び出されてしまうとエラーを起こすメソッドも存在し得ます。そのような事態を事前に防ぐことができます。
2.可読性
classの外部から呼び出されるメソッドを探すときに、private以下の部分は目を通さなくて良くなります。また、繰り返し使用するメソッドもprivate以下に集約できますので、コードをシンプルにできます。
🔳DOM
HTMLを解析し、データを作成する仕組み
🔳DOMツリー、ドキュメントツリー
DOMによって解析されたHTMLが階層構造のあるデータになると呼ぶ
JSを使うと、DOMツリーを操作できる
🔳ノードオブジェクト
DOMツリーの一部のこと
🔳ノード
HTMLの1つ1つタグが、DOMツリーの中ではノードと呼ばれる
🔳document.getElementById("id名");
・マッチするidを持つノードを取得できる
documentは、開いてるWebページのDOMツリーが入ってるオブジェクトのこと
メソッドを使うとDOMツリーの要素を抽出して取得できる
🔳document.getElementsByClassName("class名");
・classを指定するのはこいつ
🔳document.querySelector("セレクタ名")
CSSのセレクタを指定してDOMを取得
🔳イベント
HTMLの要素に行われた処理要求
例）クリックした、textフィールドで入力、hoverなど
🔳addEventListener
先に取得したノードに対してイベントを取得
ノードオブジェクトににイベントが起きた時、関数を実行する
イベントと関数を結びつける。イベントリスナって言うみたい
◎Cannot read property 'addEventListener' of null
・ボディ内にいるaddEventListenerが読み込まれてない
🔳JavaScriptが動く理由
①DOMツリーからノードを取得する
②JavaScriptでやりたい処理を書く
③イベント発火でHTML側で動かす
🔳innerHTML
HTML要素の中身を書き換えれる
🔳classList.add
クラス要素が追加される
🔳classList.remove
クラスを削除
テックキャンプ 応用 データベースまで
🔳🔳13日目
🔳データベース設計とは
作成するサービスやシステムな必要な情報をどのように
データベースで管理するかを決める作業。
◎いつ行うのか
開発の最初の段階
プログラムを書き始めるよりも前
◎基礎知識
現実世界の要素をデータに落としこむ作業
例）顧客＝ユーザー
顧客という概念（エンティティ）と情報（属性）
他の情報の関係性（リレーション）
🔳エンティティ
管理する必要にある概念（情報）
例）SNS
ユーザー、投稿内容、コメント、いいね
🔳エンティティの属性
エンティティが個別に持つ情報のこと。
例）ユーザー
名前、アドレス、パスワード、トプ画、ID
🔳リレーション
エンティティとエンティティとの間に存在する関係性のこと
🔳データベースの設計の手順
1，データベースで管理するデータ（エンティティ）を決める
2、それぞれのデータの属性を決める
3，エンティティ同士の関係性を決める（リレーション）
4，データを実際にデータベースのテーブルとして定義する
🔳レコードとカラム
◎レコード
エンティティの具体的なデータ(id, tanaka)
◎カラム
エンティティの属性（名前、email)
🔳リレーション
◎テーブル同士の関係性のこと
🔳キー
・テーブルのキーは、レコードを識別するための特別なカラム
🔳SQL
・リレーショナルデータベースの操作を行うための言語
🔳DDL
◎データを定義
・CREATE＝データベースやテーブルの作成
・INT=数字、・VARCHAR(M)＝最大M文字の文字列
・ALTER＝更新
・DROP＝削除
🔳DML
◎データを操作
・INSERT＝登録
・UPDATE＝更新
・DELETE＝削除
・SELECT＝検索。テーブルにあるレコードを全て表示
🔳SQLでよく使いそうなやつら
◎SHOW DATABASES;
・データベースを一覧で表示
◎USE 〜〜;
・データベースを選択
◎SHOW TABLES;
・選択したDBに存在するテーブルを一覧表示
◎SHOW columns FROM ~~;
・テーブル構造を確認
◎FROM句
・検索するテーブル名を指定
◎SELECT句
・取得するカラム名を指定
◎ワイルドカード
・文字の代わりに使える記号。強そう。
◎WHERE句
・取得するレコードを制限
◎AND演算子
・複数条件指定して式を作り、全部正なら正になる
◎OR演算子
・複数条件指定で、どれか1つ以上正なら正になる
◎NOT演算子
・条件1つで、当てはまらないレコードが取得できる
◎BETWEEN演算子
・上限と下限を指定して、カラム値が範囲内なら正
◎IN演算子
・1つのカラムにリストを指定し、カラム値が含まれるなら正
◎CONCAT関数
・複数の文字列を連結できる
◎AS句
・カラム名に別名を付けれる（省略可）
◎DISTINCTキーワード
・カラム値が重複する行を除外してデータ取得できる
◎GROUP BY句
カラム値が同じのデータを1つのグループとしてまとめる
◎COUNT関数
・グループ化されたデータに使える集計関数の1つ（NULL以外の行数を取得）
◎JOIN
・指定したそれぞれのテーブルの、カラム値が一致するデータを結合できる
🔳サブクエリ
ある検索結果を使って別のSQL分を実行（検索をさらに検索）
◎主キー
レコードを識別するための識別子。大体idが主キー
◎外部キー
関連する他のテーブルのレコードの主キーとして値を持つカラム
🔳制約（バリデーション）を使って設計
◎NOT NULL制約
・空欄(nil)を絶対に許さない警察
◎一意性制約
・テーブル内で重複するデータを禁止する
◎主キー制約
・主キーである属性値が必ず存在して、かつ重複してないことを保証
・Railsではidカラムとして自動で生成される
◎外部キー制約
・外部キーに対応するレコードが必ず存在しなくてはいけない
🔳インデックスとは
・カラムに設定して、テーブル内のデータ検索を高速化できる。
・インデックスを貼ると言う。
🔳正規化とは
データ構造をより効率的で重複や無駄のないシンプルな構造にするための手順
◎なぜ正規化は必要？
カラムが混在するから
🔳正規化の順番
◎第一正規形
重複するカラムがない
◎第三正規形
主キーに依存しているかつ、非キー属性同士の依存がない
🔳エンティティの洗い出しのポイント
・データが登録する時に着目
🔳エンティティのリレーション
・多数の方に外部キーを設定
🔳多対多
・一つの投稿に対していろんなタグがついてる。中間テーブルが必要な物
🔳中間テーブル
・複数のテーブルとの関係の間を保つ役割。いいヤツ
◎has_many throughオプション
◎<<メソッド
🔳README
・マークダウンで書かれて、使用、規格、インストール方法などを文章化したやつ
🔳🔳12日目
◎jQuery
JSを簡単に分かりやすくしたやつ
🔳GitとGitHub
プログラミング言語ではない
開発の作業順序の管理や、共同作業のための仕組み
これがないと他のエンジニアと共同作業できない
🔳Git
アプリケーションなどのプロジェクトをバージョン管理してくれるシステム
🔳GitHub
・Gitの仕組みを使って複数人で開発ができるようにしてくれるツール
◎特徴
・世界中のあらゆるプロダクトが保存、公開されている
・グラフィカルな画面からGitを扱うことができる
・チーム開発に便利な様々な機能が用意されている
🔳リポジトリ
◎Gitの管理下にあるファイルやディレクトリの変更履歴を保存する入れ物。2種類ある
・ローカルリポジトリ
・リモートリポジトリ
🔳Gitのver管理流れ
1. 変更修正が一覧になっている
2. 同じバージョンとして記録したいデータを抜きだして登録する
3. バージョンを記録する
🔳インデックス
verを記録するためにファイルを一時的に登録する場所
🔳コミット
インデックスに追加された変更修正をver記録する操作
◎git commit -m '任意メッセ追加'
🔳ブランチ
・リポジトリで管理しているプロジェクトの流れを記録する場（枝）
・1つの主流から枝のように分かれてプロジェクトが管理できる
🔳master ブランチ
・最初にコミットを行うと自動で生成される
・大元のブランチになることが多い
🔳トピックブランチ
・ブランチを作るにはすでにあるブランチをコピーしないとダメ！
つまり、次に作るブランチはmasterブランチのコピー、
それをトピックブランチと言う。
🔳プルリクエスト
・1つのブランチでの作業について話せる掲示板のようなもの
◎作成時のポイント
タイトルに[WIP]、#whatと#whyを書く
🔳プル
リモートリポジトリの変更をローカルリポジトリに取り込む操作のこと
🔳デプロイ
アプリをサーバー上で利用可能な状態にすること
🔳コンフリクト
ブランチごとに情報が異なり辻褄が合わないこと
🔳Behind
・現在のブランチよりも比較するブランチが進んでいる変更履歴
つまり、既にマージとpull originしてる
🔳Ahead
・現在のブランチが進めた変更履歴
つまり、まだマージとpull originしてない
◎読みやすいコードを書くために、演算子に半角スペースを1つ入れる
悪い例）1+1=2
良い例）1 + 1 = 2
🔳🔳11日目
🔳良いコードの要素
◎命名規則
・的確で具体的な単語
・汎用的な名前を避ける
・名前に情報を含める
・誤解されない名前
➡️よく出る英単語
set=代入
add=追加
render=返す
import=読み込む
fetch=情報取ってくる
modify=部分的に修正
apply=適用する
remove=取り除く
is=調べてtrue/falseで返す
◎コードのレイアウト
・整列
・一貫性
・ブロック化
◎コメント
・なぜこのコードを書いたか背景や理由を説明
・他の開発者へのメモを残す
TODO（いつかやる）、FIXME（直せる人直して）
・実際の例を記入する
🔳良いコードのまとめ
◎実際に学んだことを実行
・自分以外の人にコードを最短時間で理解してもらうコード
◎当たり前に「読みやすいコード」を書く
◎コードで伝える
🔳リファクタリングとは
・処理の内容を変えずに冗長なコードを削除したり改善する事
🔳リファクタリングのメリット
◎読み手が最短時間でコードを理解できる
◎修正しやすい
🔳リファクタリングを行うためには
◎制御フロー
・条件式の並び順（左＝調査対象、右＝値が変化しない比較対象）
・if/elseの順番（肯定形を使う、単純or関心を引く条件を先に書く）
・関数から早く返す(return文)
・ネストを浅くする
◎式の分割➡️説明変数を使う
メリット
・大きなコードの塊を分割できる
・簡単な名前で式を説明することでコードを文章化
・概念を読み手が認識しやすくなる
◎変数
・不要な変数を削除
・変数のスコープを小さく
・変数は一度だけ使う
◎メソッドの抽象化
◎関心（機能）の分離
◎短いコードを書く
・汎用的なコードを作り、重複コードを削除
・未使用コードや無用の機能は削除
・最も簡単に問題を解決できる要求を考える
・定期的に全てのAPIを読み、標準ライブラリに慣れ親しんでおく。
🔳正規表現とは
◎文字列に特定の文字が含まれてるかを確認することや、
特定の文字を取り除くなどの操作を行うための技術
🔳正規表現の特徴
◎文字列の一部を置き換え
◎文字列が成約を満たしているか調べる
◎文字列の一部分を抽出
🔳正規表現を実現する2つのメソッド
・sub（gsub)
・match
・split
jQueryだと、DOM要素の取得を全部共通の$("セレクタ名")で書き換えれる
分からないことはいきなり検索せず、
仮説を立ててから調べる
🔳🔳10日目
🔳応用のアウトプット
◎アウトプットのポイント
新規性にとらわれず、気づいたことをアウトプット
質問する前に仮説検証する。
課題整理のレベルを上げる（具体性を上げる）
■解決したいこと
エラー文や、今起こっているトラブルを端的に書く
■自力で調べた内容
検索エンジンを用いた際の検索ワードについてや読んだ記事のリンクを書く
■仮説と検証作業の結果
検索して得た情報から立てた仮説と、その検証作業による結果を書く
①トップページが明確にどのviewの事か
②出力されたエラーメッセージを記述し、キャプチャ画像も添付した
③Nomethodエラーは基礎でも出力されるエラーであったため、
一度触れたトラブルシューティングの内容を復習してみた
④パスについてのエラーメッセージが出力されており、
ルーティングがおかしいと仮説を立てた。
カリキュラムのroutes.rbの内容と見比べ検証を行ってみた。
検索力とは
①目的にあった検索結果を表示させるためのキーワード選び
②検索結果から精度の高い記事を探しだすスキル
🔳キーワード選びの技術
◎複数キーワード
◎期間指定で新しい記事
◎Googleの検索テクニック
・マイナス検索 例）-Qiita
・フレーズ検索 例）"Webアプリケーション開発"
◎英語
・よく使う英単語
change：変える
save：保存する
default：デフォルトの
compare：比較する
configure：設定する
override：上書き
install：導入
🔳複数キーワードで検索
◎文章を単語に分割
（エラー文等一部例外あり）
◎何に関係のある情報かを含める
◎意味を調べる時は「とは」をつける
🔳精度の高いサイトを見つける技術
◎サイトは1ページ目から探す
◎信頼できるサイト・著者を知る
◎一次ソースを調べる
◎間違った情報を嗅ぎとる
4/22 初めてメンターさんに質問した
◎説明させて欲しい
renameメソッドの中だと書き換わってるけど、
変数nameに代入されてないからTanakaが出力される？
呼び出しただけみたいな
メソッドを呼び出したけど、Tanakaっていう値をコピーしてきただけ
本因数と仮因数は違う
引数と変数は別もの？
「post_review」の（a_posts）の流れも説明する
「read_reviews」に、なんで（posts）を因数であげないといけないの？
引数（posts）に全部の情報が入ってて、
それを「read_reviews」にプレゼントして使えるようにしてあげたいから？
🔳回答
全部合ってた！
4/22(水) ライフコーチさんとの個人面談内容
🔳面談内容
◎注意力散漫の対策、集中力を持続する方法
すぐ別のことを考えちゃう
➡️瞑想とか休憩してみるけど、いまいち効果がない
集中してる時は全く考えないのに
学習中に勉強以外で「これやっとかないと」
って思ったことがあったらどうしたらいい？
例）買い物行かないと
あとでやるか、すぐやるか
➡️あとでやることリストっていうメモを用意して、
それにやることを箇条書きして頭の外に出そうとしたけど、
やっぱり何度も思い出しちゃう
我慢することが好きじゃないんだと思う。
理性で抑えられるところは抑えて我慢すべき？
◎夕礼で報告するのは良い
夕礼があるっていう緊張感（締め切り効果みたいな感じ）
人に学習した内容を説明することができて、アウトプットになる
人と話すことで刺激になる。一人で黙々とやり続けても続かない。
🔳回答
昼休憩20分
眠くなる前に
チーム通話する
お互い監視
まとめを先に見る
大事な所を集中して
調べる時間制限（5分）
集中サイクル（コモドールテクニック）
自分で調整
時間で決める
20分集中インプット➡️5分アウトプット➡️QK
実際に働いた時のイメージ
自分で調べて試すのをやる
自分で自分を律する
アウトプット 基礎
🔳🔳10日目
🔳HTML
・エンジニアによって書くコードは異なる。
よって、いかにストックを持っておくかが重要
◎display: flex;
親要素に与えるもの。横並びにできる便利なやつ。ブロック要素にできる？
◎justify-content: 〜〜;
display: flex;を付与した親要素にかけると色々と調整できる
つまり、display: flex;がないと機能しない
◎align-items
子要素の縦方向を指定する
➡️"基本的に"縦の真ん中に来る（他のプロパティがあったら、来ない場合もある）
つまり、display: flex;がないと機能しない
◎text-align
インライン要素のみに適用できる？
文字や画像を中央に持ってくる
◎Syntax Error
文法や構文（書き方）が正しくない時に出るエラー。
ソースコード見れば原因分かるよ！
◎ER図
テーブル同士の関係を視覚的にわかりやすく表した図。
ER図を描くことでテーブル間の関係性が視覚的になり、分かりやすくなる。
◎プライベートメソッド
クラス外から呼び出すことのできないメソッドのこと
◎上記のメリット
1.Classの外部から呼ばれたら困るメソッドを隔離
2.可読性
🔳tweets_comment_pathがないエラー
エラー画面でtweet_pathじゃない？って言われても、欲しいパスは違う。
・prefixで調べてもtweets_comment_pathはなかった。
➡️ネストしないとPrefixのパスが変わる。
ネストしたら変わった。
〜勉強会〜
🔳④:redirect_to_index, except: :index
◎except index追加しないとエラーが起こる理由
◎excep: :indexがないverの動きの流れ
➡️例）indexに行きたい！でもログインしてないからダメ！redirect_to_indexによって戻される。でもログインしてないとindexに入れない。以下ループ
🔳⑥答えおかしい
◎問題内容が投稿を保存できるようにしろ
◎答え移しても保存できない
・理由
params.require(:tweet).permit(:text, :image)➡️答えこれだけ
.mergeでuser_id取得してない。
tweets.rbのvalidatesで、user_idが空白だとダメって設定してる
＝データ保存できない
🔳7
◎belongs_to :user
何故このエラーなのか➡️エラー文でuserがスペルミスって言われるから
🔳9
◎@tweets = user.tweets
・このtweetsはどこから来た➡️userで指定したidのtweetsを全部拾ってくるから
アソシエーションが関係している
的確な答えはない。イメージ。
🔳🔳9日目
◎ruby return
rubyは基本的には、メソッドの中で最後に自動で値を返してくれるけど、
while文を使ったときに返してくれなかったり、（Mr.Tanaka現象）
他の言語（PHPとか）では必要な場合が多い。
だからreturn文をサボらないで書く。習慣化させる
◎require（2回目）
requireがあることで、
Railsがparamsのもう一階層深いtweetの中の値を探しに行けるようになる。
基礎の模試②
🔳Rails問題3
◎<%= render partial: "tweet", collection: @tweets %>
◎<%= render @tweets %>
こういう書き方もあるんだな。程度の認識
🔳Rails問題4
◎model: [@tweet, @comment]
tweet_comment_path モデルの順番とPrefix合わせる
◎<%= form.text_area :text, placeholder: "text" , rows: "2" %>
・rows: "2"はクエリによって取得が想定される行数（表示するビューの見た目を変える）
rowsを10にしたらテキスト幅めっちゃ広くなる
🔳Rails問題7
◎def.search(search)
・引数はsearches_controllerの中のsearch[params[:keyword]から持ってきた
🔳link_to tweets_searches_pathの中でなぜmethod: :GET 必要？
本来HTTPメソッドをpostで探すけど、
whereで無理やり変えてるからgetで指定する必要がある。
・ここは正直どうでもいい。
🔳🔳8日目
◎引数
・メソッドに渡す材料
◎ストロングパラメーター
指定したキーを持つパラメータしか受け取らないようにする。頑固者にさせる。
例）params.permit(:キー名, :キー名)
◎「current_user」と「if user_signed_in?」は同じ意味
◎require
このモデルからしか受け付けないよ
例）.require(:モデル名)➡️.require(:tweet)
中間テストrails ④回答
form_tag＝requireいらない
form_withはモデル名が必要だけど、form_tagは必要ない➡️つまりrequireは不要
◎リセットCSS
➡️詳しくはレッスン3「基本のWebサービスを作ろう」に書いてある。
・ブラウザは最低限の見た目を保証するために、元々CSS持ってる。
・でも、ブラウザ次第でこちらの意図しない表示になる場合がありけり。
・リセットCSSはこれらを打ち消すためにある。
・具体的には、デフォルトのCSSはmarginが用意されてることがあるが、
リセットCSSでこれらのmarginを0にする。
◎pending migration error
実行してないマイグレーションファイルがあるときに起こるエラー
解決策：bundle rxec rake db:migrate
🔳ログイン状態の区別
◎user_signed_in?
・ユーザーがサインイン済かどうかを判定する
こちらの方がログイン状態を確認できる正しい形。
current_userでもいいけど、コードとしては前者のほうが良い。
◎current_user
・サインインしているユーザーを取得する
◎「margin: auto;」と「margin: 0 auto;」の違い
前者＝上下左右に対してautoを適用
後者＝上下0，左右に対してautoを適用
🔳🔳6日目
Verb（HTTPメソッド）は、GETの場合には省略できる
destroy: :delete 必要 リンクだから
create , updateは自動で振り分けてくれるからいらない。
配列の定義＝[ ]
ハッシュの定義＝{}
🔳モデル
◎情報のやり取りに関する処理を担当
例）
・バリデーション
・has_many
・belongs_to
🔳HTML
◎display: flex; と align-item: center; はセット
🔳🔳5日目
◎Prefix
ルーティングの名前？
URLパターンと意味は一緒。書き方が違うだけ。
例）"/posts/#{@post.id}/edit" と edit_post_path(@post.id) の意味は一緒
二つとも同じeditアクションが発火する
railsが推奨してるのはPrefix
設定しなくてもrails側が値（rootとかnew_post）を自動的に用意してくれる。
例）
・Prefix ・Verb ・URIパターン ・Controll#Action
・edit_post ・GET ・/posts/:id/edit ・posts#edit
の場合、
html.erbファイルにコードを書く時は
edit_post_path(@post.id) と "/posts/#{@post.id}/edit"
どちらも表示される結果は同じ（編集ページ）
◎Verb
HTTPリクエストメソッド
右側に表示するパスにどのHTTPメソッドでアクセスするか書いてある
(GET＝表示 , POST＝登録 , DELETE＝削除 , PATCH＝変更や更新)
◎ URI Pattern
コントローラーの割り当てを決める
リクエストされるときのURLを表す
例）posts#index➡️postsコントローラーのindexアクションが呼び出される
◎リファクタリング
長いコードを削除したり改善すること
◎resources
・only
呼び出すアクションを限定
例）resources :posts, only: [:get , :show]
get、showアクションのみを呼び出す
・except
このアクションは除外する
例）resources :posts, expect: :index
indexアクションを除外する。他は全て実行
🔳🔳4日目
🔳アウトプット
◎rails db:rollback
ミスったらrails db:rollback
◎require_tree
全部のcssをアルファベット順に見るrequire_tree
◎form_with
form_tagの進化系form_with
自動的に振り分ける機能を持つ。強い。
例）new➡️create , edit➡️update
form_with使うときはprivateアクションでrequire（条件限定 :post）もセット
例)params.require(:post).permit~
resourceメソッド➡️7つのアクションを纏めたメソッド
index,new,create,show,edit,update,destroy
◎アソシエーション（紐付け）
has_many（postを複数管理する）と、belongs_to（データを一つずつ結ぶ）
has_many➡️posts
belongs_to➡️user
アソシエーションとincludesメソッド（N+1が増えないよう管理）はセット
render➡️部分テンプレートを呼ぶメソッド
partial➡️具体的にどのテンプレを呼ぶオプション
locals➡️partialで定義したパスの中で変数を使えるようにする（each文が良い例）
<% render partial: "post", locals:{post: post} %>
<%= render partial: "post", locals: { post: post } %>
🔳メンター
◎user_path(post.user)
➡️(post.user)のuserは何を指してる？
➡️user_path(post.user_id)じゃダメ？
表示結果は同じなのに
◎回答
書き方の問題。結論どちらでも良い。
目標（実装したい機能）と結果を大事にする。その間の過程がコード
書いたコードより、結果が出ることの方が重要
コードが分かりやすい方がいいけど、最悪結果が出ればok
今回の場合で分かりやすいのは、(post.user_id)だからこっちを書く。
今回の質問は、Railsの開発者に聞いた方がいいレベル
◎form_withの送信先自動で決まる（IDの有無）
new➡️create
edit➡️update
◎form_with model: @postの@postはアクションの中のインスタント変数
edit_post_path = ルート検索
例）高速道路で道を決める
(@post.id)＝大量のデータから一つを見つけるとき
例）Twitterで一つの欲しいツイートのページを開くとき
🔳🔳二日目
◎Flexbox
親要素に「display: flex;」を付与することで子要素が横並びになる。
そしてそれらの並び順や幅は詳細に決めることができます。
これらの機能の総称をFlexboxといいます
◎display: inline-block;
よく分からんから見直す
◎Viewport
ブラウザの表示領域に依存
◎%
親に依存
◎パス
ディレクトリやファイルの所在を示す文字列のこと
例）desktop➡️ls➡️index.html
このindex.htmlがパス
◎引数のルール
1.「メソッドを定義している部分」と「メソッドを呼び出す部分」両方に書く
例）def rename(name) と rename(name)
2.「仮引数」と「実引数」の名前は、一致している必要はない
例）view_post(a_post) と view_post(posts) など
🔳🔳一日目
ショートカットまとめ
⌃ + A（入力時）その行の先頭に移動する
⌃ + E（入力時）その行の末端に移動する
⌃ + H（入力時）前の文字を１つ消す（deleteと同じ）
⌃ + D（入力時）次の文字を１つ消す
⌃ + K（入力時）カーソルの右側の文字を全て削除する
↑入力したコマンドの履歴を遡る （入力途中で）tab入力補完
※ ls現在いるディレクトリのファイルを表示する
cd XXX現在いるディレクトリにある、XXXディレクトリに移動する
