テックキャンプ 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
クラスを削除
