応用編で学んだこと
これまで学んだことまとめ(応用編)
masterブランチ
masterブランチとは、リポジトリに最初のコミットを行うと自動で作成されるブランチです。masterブランチがリポジトリの大元のブランチとなることが多いです。これまで行ってきたコミットはすべてmasterブランチの履歴上で管理されていました。
トピックブランチ
ブランチは複数作ることが出来ます。そして、ブランチを作るにはすでにあるブランチをコピーしなくてはいけません。最初のブランチはmasterブランチなので、次に作るブランチはmasterブランチをコピーしたブランチになり、それをトピックブランチと言います。
実際の開発では下図の様に、機能ごとにトピックブランチを作成して、完成したらmasterブランチに結合していきます。
プルリクエストとは
ブランチでのコミット履歴を残すと共に、各コミットにおける変更修正にコメントをつけることができるGitHubの機能のことを言います。以下の図のような形で、１つのブランチでの作業について、コミュニケーションが取れる掲示板のようなものがプルリクエストです。
プルリクエストのタイトルには[WIP]をつける
WIPとは、Work In Progressの略で作業中の意味です。反対に作業が終わっている場合にはWIPを外します。「実装途中の機能にはWIPをつける」「実装が一旦完了したプルリクエストからはWIPを外す」と考えてください。上記のアプリケーションではまだ投稿機能は実装途中であるため、この時点ではWIPを付けておきます。
プルリクエストの詳細には、What（何を）とWhy（なぜ）を書く
What（どのような実装をしているのか）とWhy（なぜこの実装が必要なのか）を書くことで、このブランチは何を実装していて、なぜその実装を行ったのかが他の人に伝えることができます。Whatをしっかり書くことで、他者にコードを見てもらう際に、スムーズな理解を促すことができます。アプリケーションの機能が複雑になればなるほど、コードを読んだだけでは、何をしているのか把握することは難しくなるからです。また、Whyをしっかり書くことで、本来の目的に沿ったコミュニケーションが可能です。実装目的が伝わっていないと、欲しい意見をもらうことはできません。
Pull Requestに最初に書き込むメッセージは会社やチームによって異なります
マークダウン表記で書くこと
マークダウンとは記法の一種です。マークダウンを使うことでシンプルな記法で HTML 文書を書くことができます。以下のリンクの記事を参考にしてマークダウンはどのように記述するのかを確認しましょう。
LGTMを出しましょう
LGTMとは、Looks good to meの略で、「コードに問題がないのでマージしていいよ！」というプログラマー慣習です。
レビュアーであれば、プルリクエストのトップページのコメントにLGTMの旨を書いてあげましょう。LGTMを伝えるための画像を貼り付けたりすることもあります。
レビューワーになったつもりでプルリクエストにLGTMを出しましょう。
コンフリクトとは、あるファイルにおいてブランチごとに情報が異なり辻褄が合わない状況のことを言います。
Behindは、現在のブランチよりも比較するブランチが進んでいる変更履歴を意味し、 Aheadは、現在のブランチが進めた変更履歴を意味します。
git revert
コミットを打ち消すコミットを生成する操作が行なえます。プッシュ済みのコミットを消す方法もありますが、git revertでは誤りであるコミットを打ち消したコミットの記録が残ります。
git revert実行後、revertしたコミットの内容はローカルからも消えています。つまり、同じような記述を再度commit&pushしたい場合は、もう一度最初から当該コミットのコードを書きなおす必要があります。push前の状態に戻されるわけではありません。ゆえに、リモートへのpushは慎重に行いましょう。
・split()は、文字列を複数の部分文字列に区切り、文字列の配列に分割します。
・map()は、配列から要素を1つずつ取り出し、引数に与えられた関数の処理を行った結果から新しい配列を作ります。
・join()は、配列のすべての要素をつないだ文字列を作成します。引数に文字列を渡すと、その文字列で文字と文字をつなげます。
Git/GitHub：
・Gitでアプリケーションを管理すると、それぞれの修正点でセーブポイントのようなものを記録して、時系列で管理してくれます。
Git/GitHubの違い
・Gitはアプリケーションなどのプロジェクトをバージョン管理してくれるシステム。
・GitHubはそのGitの仕組みを用いて簡単に複数人での開発ができるようにしてくれるツール。
→Gitの管理下にあるファイルやディレクトリの変更履歴を保管しておく入れ物
ローカルリポジトリとは、自分のPC上（ローカル環境）に置くリポジトリ。
リモートリポジトリとは、外部のサーバなどのネットワーク上に置くリポジトリ。
git init
→新たにGitで管理したいディレクトリ（今回の場合はsampleディレクトリ）において実行すると、隠しディレクトリである.gitが作成され、Gitで管理できるようになります。
Gitで管理できるということは、今回で言うsampleディレクトリに対してリポジトリが付与されていることです。
Gitにおけるバージョン管理の流れは以下のとおり。
1. 変更修正が一覧になっている
2. 同じバージョンとして記録したいデータを抜きだして登録する←登録する場所をインデックス(バージョンを記録するためにファイルを一時的に登録する場所)という。
3. バージョンを記録する
git status
インデックスに追加されている変更修正、されていない変更修正を確認することができます。
git add
インデックスに追加して、変更修正記録の対象とすることができます。
git commit
インデックスに追加されている変更修正を、コミットするためのコマンドです。
-mのオプションはコミットメッセージと呼ばれ、どのような変更を行ったのかメモを残せます。
git log
コミットの履歴を表示するための操作。様々なオプションが存在し、より詳細な情報を表示することも可能です。
GitHubが必要な理由：
自分の作業が他の開発者に影響を及ぼしたり、反対に他の開発者の作業が自分に影響を及ぼすことを避けて開発を進めることができます。
GitHubの特徴：
- 世界中のあらゆるプロダクトが保存、公開されている
- グラフィカルな画面からGitを扱うことができる
- チーム開発に便利な様々な機能が用意されている
jQuery（ジェイクエリー）は、前回学んだDOM操作（DOM要素の取得や追加削除など）をもっと短く簡単に書くことができます。
現在やや下火傾向ではありますが、手軽扱えることができることから未だに根強い人気があります。
Webサイト制作などをやりたい場合は、jQueryの知識が必要になります。
① 歴史があるのでリファレンスが多くあり、学習を進めるのが容易
② 機能が限定的でとっつきやすい
③ まだまだ使われている現場が多い
どんな文法があるのか知識を増やすためにも、参考リファレンスをいつもみておく癖はつけておくこと。
・IDセレクタ
→HTML要素のid属性で指定するセレクタのことです。IDセレクタは、取得したいHTML要素のid属性の値に#（ハッシュ）を付けたものをセレクタとして利用します。
・クラスセレクタ
→HTML要素のclass属性で指定するセレクタのことです。取得したいHTML要素のclass属性の値に.（ドット）を付けたものをセレクタとして利用します。
・要素セレクタ
→h1やpのようなHTML要素を対象としたセレクタのことです。HTMLのタグの属性値を指定したい場合、$("[ 属性 = '値' ]")で属性セレクタを取得できます。
・属性セレクタ
→HTMLのタグの属性値を指定したい場合、$("[ 属性 = '値' ]")で属性セレクタを取得できます。
クリックイベントの取得はclick()を使用します。
セレクタを指定すればクリックした要素の値を簡単に取り出してくれます。
関数の中でthisを使うと、イベントの発生元となった要素を取得することができます。
thisはJavaScriptで、非常によく使います。
thisはJavaScriptの機能です。そのためthisで取得した要素は、JavaScriptで使用するDOM要素になっています。
jQueryで使う場合は、$(this)と指定しないとエラーになります。
removeClass()
→jQueryのクラスの削除、要素の指定が必要ない
addClass()
→jQueryのクラスの追加、要素の指定が必要ない
index()
→配列に変換しなくても、集合したDOM要素から引数に指定したDOMと同じ要素番号を戻します。
eq()
→引数に要素番号を取り、集合したDOM要素から選択できます。
submit
→submitイベントは、フォームが送信される時に呼び出されるイベントです。
preventDefault()
→要素のイベントをキャンセルすることができます。
イベントオブジェクト
→イベントに関する情報を持つオブジェクトです。targetやkeyCodeなどのプロパティを使うことでイベントの発生元の要素や押されたキーの種類などを知ることができます。
preventDefault()
→ブラウザが最初から持っているアクションをキャンセルするメソッドです。
find("セレクタ")
→Rubyで使用するfind()メソッドと用途は同じ。Rubyのfind()メソッドは最初に該当する1つだけしか取得ができませんでしたが、
jQueryのfind()メソッドは、引数にセレクタを指定して、合致するセレクタを全て取得します。
セレクタの属性は、[]を使用します。
JavaScriptについて
・ブラウザ上での操作において有益である。
・Webサイト表示を変化させたいとき、画面更新せずにサーバと通信したいとき等に有効。
・Javaは業務システムなどのサーバーサイド側で使用され、データの保管や複雑な処理を行う「裏側」がメインです。Rubyもサーバーサイドに分類。
・JavaScriptは前述の通り、主にフロントエンド、つまり「見た目」の部分で活躍することが多いプログラミング言語。
・JavaScriptの略称はJSです。「ジャバ」とは呼ばずに「ジェイエス」と呼ぶ。
※つまり、JavaとJavaScriptでは全然違う。
JavaScript基本文法
・検証ツールからコンソールを開くことでJavaScriptのコードの記載、実行結果の表示もできる。Rubyにおけるirbみたいなもの。
→操作方法：ブラウザ上で二本指クリック→「検証」を選択→Consoleを選択。
・以下のように、HTMLのコード中にスクリプトタグを埋め込むことで、JavaScriptのコードを呼び出すことができる。
<body>
<script>
// この中にJavaScriptのコードを記述する
</script>
</body>
・window.alert()
→ブラウザでアラートを表示させるメソッド。script.jsに記載することで表示される。
・console.log()
→ブラウザのコンソールにテキストを表示させるメソッド。script.jsに記載することで表示される。Rubyにおけるputsメソッドと同様に使える。
※変数を宣言する際は、varのあとに半角スペースを挟んで変数名を記述
letは、後で書き換えることができる変数宣言です。
constは、後で書き換えることができない変数宣言です。
・条件分岐は、Ruby同様if文を使う。
但し、Rubyと異なるのは以下3点：
・条件式は()でくくること
Rubyにおいては()でくくる必要がありません
・条件式の後に続く波括弧{}内の処理が実行されること
Rubyの記述においては{}で処理を囲む必要はありません。一方で、if文の終わりにendを付与する必要があります
・複数条件を指定する場合は、elseのあとに続けてif文を記述すること
Rubyではelsifですが、JavaScriptではelse ifと書くことを注意しましょう
オブジェクトを作成するには波カッコ{}を用います。
let obj = {};
例)let obj = { name: 'yamada' };
配列について
・0から始まる。
・Rubyと同様にlengthメソッド(要素の取得)、pushメソッド(要素の追加)、popメソッド(配列の削除)、
繰り返しはfor文
num = 1;
for (let i = 0; i < 10; i += 1) {
console.log(num + '回目の出力')
num += 1
}
これで1~10回目の出力が繰り返しされる。
関数の定義：
JS：function文
Ruby：def ~ end
JS：returnで戻り値を明示する必要がある。
Ruby：関数における最後の戻り値が関数の戻り値として処理
2種類の関数定義
1.関数宣言と呼ばれます。
2.無名関数を用いた関数式と呼ばれる方法。
JavaScriptで簡単に画面表示を変える。
・DOM（Document Object Model）とは、HTMLの一つ一つの要素を、JavaScriptのオブジェクトとして扱えるようにする仕組み。
・querySelectorメソッドでは、複雑なセレクタも指定できる。
・addEventListenerは、あるDOMオブジェクトに対して、イベントリスナを追加するメソッド。
①DOM要素を取得する
②JavaScriptでやりたい処理を書く
③イベント発火でHTML側で動かす
・innerHTMLを使用するとHTML要素の中身を書き換えることができます。
・classList.addはクラスの追加、classList.removeはクラスの削除
- jQueryのメリット・デメリットは簡単に言うと何か→JavaScriptをより簡単にしたものがjQueryであり、主にWebサイトやWebアプリケーションで使用されることが多い。メリットとしてはコードを短くかける、ブラウザごとの対応をしなくて良い、豊富なプラグインである、デメリットは処理が遅くなる場合がある(理由：・jQueryの読み込みが発生するため
・jQueryを使って無駄な処理を発生させている可能性)、他のライブラリと共存しにくい(理由：他のライブラリと考え方が違う)、
参考サイト：https://geekly.co.jp/column/cat-technology/1903_039/
- jQueryは最近のトレンドの中でどのような立ち位置か（人気上昇中 or 下降中)、それはなぜか→開発者はどんどんjQueryから離れつつある。Reactのような最新ライブラリと相性が悪いこと。最新のブラウザはjQueryのような機能を最初からサポートしているため、多くの場合jQueryなしでもどうにかなります。これらの理由により、最近はピュアJavaScriptによる実装が増えつつあります。参考サイト：https://qiita.com/rana_kualu/items/9652879067cf658499c7
- deviseとは簡単に言うと何か→railsで作ったwebアプリケーションに簡単に認証機能を実装できるgemのことです。deviseは認証機能を追加するためのgemの中で一番使用されており、コマンドを何度か打つだけで簡単に認証機能を実装することができます！(・ユーサーの登録処理、ユーザーの仮登録（本登録のためのメール送付）、ログイン処理、認証機能（ログイン済みかどうかの確認）、パスワードの変更、パスワードの再発行)認証関連の各種画面など)参考サイト：https://www.sejuku.net/blog/13378
- deviseと同様な機能で他によく使われるものは何か、それらの違いは何か、なぜdevise以外にそれが生まれたか→
- unicornとは簡単に言うと何か→UnicornはRuby用アプリケーションサーバのことです。Unix系OS上で動作するRack規格Rubyアプリケーションを動かすためのアプリケーションサーバです。参考サイト：http://to-developer.com/blog/?tag=unicorn
- unicornと同様な機能で他によく使われるものは何か、それらの違いは何か、なぜunicorn以外にそれが生まれた。→参考サイトhttps://qiita.com/zuchi190/items/7fd92e8a77f443dcf026
正規表現について
文字列に特定の文字が含まれているかを確認することや、特定の文字を取り除くなどの操作を行うための技術が正規表現です。
正規表現は様々な言語で同じようなコードで表すことができるように設計されています。そのため、ほとんどの記述をRubyやJavaScriptなどの別言語間でも共有することができます。
例）電話番号のハイフン、フォーマットを統一させるために処理するなど。
2つメソッド
subメソッド・・・文字列の指定した部分を別の文字列に置き換えるためのメソッドです。第一引数に置き換えたい文字列を指定し、第２引数に変換後の文字列を指定します。
また、操作したい文字列は/で囲みます。JavaScriptでは、subメソッドと同じ機能を持つメソッドとして、replaceメソッドがあります。
Matchメソッド・・・引数に指定した文字列がレシーバの文字列に含まれているか否かをチェックするためのメソッド。含まれている場合は、指定した文字列がMatchDataオブジェクトの返り値で得られます。また、含まれていない場合は、返り値としてnilが得られます。マッチした文字列等はMatchDataオブジェクトで返されます。MatchDataオブジェクトから文字列等を取り出す際は、以下の様に配列からデータを取り出す時と同様の形で取り出すことができます。
電話番号のハイフン取り除く。
特定の文字を取り除く場合は、「特定の文字を空文字に置換する」と考えます。置換するメソッドはsubメソッドでした。
gsubメソッドのgが意味するのは、グローバルマッチと呼ばれ、文字列内で指定した文字が複数含まれている場合、その全てを置換するという意味になります。
tel.sub(/-/,'')
0901234-567
tel.gsub(/-/,'')
09012345678
上記のような違いになる。
パスワード8文字以上の英数字という制約をつける。
正規表現のパターン
[a-z] : 角括弧で囲まれた文字のいずれか 1 個にマッチ
\d : 数字にマッチ
{n, m} : 直前の文字が少なくとも n 回、多くても m 回出現するものにマッチ
i : 大文字・小文字を区別しない検索
. どの１文字にもマッチ
+ 直前の文字の 1 回以上の繰り返しにマッチ
