参考にさせて頂いたページ
webpack-dev-serverを実行してエラー
bin/webpack-dev-server
を実行したときに以下のようなエラーが出ました。
Error: Cannot find module '../lib/util/addDevServerEntrypoints'
yarnでインストール
足りないパッケージをインストールしました。
yarn add webpack-dev-middleware webpack-hot-middleware --dev
bin/webpack-dev-server
を実行したときに以下のようなエラーが出ました。
Error: Cannot find module '../lib/util/addDevServerEntrypoints'
足りないパッケージをインストールしました。
yarn add webpack-dev-middleware webpack-hot-middleware --dev
個人的に少しずつ公式ドキュメントを読んで学習を進めます。
公式ドキュメントを読んで解りにくかったり、こういう場合はどうなのかと疑問に思ったものはサンプルを自分で書いてみるかもです。
配列をn個ごとに分割します。
すべての偽値が削除された配列を作成します。 値false、null、0、 “"、未定義、およびNaNはfalseです。
配列を連結します。
二つの配列を比較して、第一引数に渡した配列要素のうち一致しないものだけを返します。
等価比較のためにSameValueZeroを使用して、他の配列に含まれていない配列値の配列を作成します。 結果値の順序と参照は、最初の配列によって決定されます。
difference()と違う点としては、第三引数に渡した関数の戻り値を比較する点です。
このメソッドは、配列の各要素と値が比較される基準を生成するために呼び出されるiterateeを受け入れることを除けば、_differenceに似ています。 結果値の順序と参照は、最初の配列によって決定されます。 iterateeは1つの引数で呼び出されます。
difference()と違う点としては、第三引数にによって条件を指定できる点です。
公式ドキュメントの例では_.isEqualを渡していますが、より複雑な条件などにも利用できそうです。
This method is like _.difference except that it accepts comparator which is invoked to compare elements of array to values. The order and references of result values are determined by the first array. The comparator is invoked with two arguments: (arrVal, othVal).
n個の要素を先頭から削除した配列のスライスを作成します。
最後からn個の要素を削除した配列のスライスを作成します。
最後から削除された要素を除いた配列のスライスを作成します。 述語が偽を返すまで、要素は削除されます。 述部は、(value、index、array)という3つの引数で呼び出されます。
最初から削除された要素を除いた配列のスライスを作成します。 述語が偽を返すまで、要素は削除されます。 述部は、(value、index、array)という3つの引数で呼び出されます。
公式ドキュメントの例を見るかぎり、第三引数は配列のindexで第四引数はlengthなんですかね。ちょっと注意が必要そうです。
配列の要素をstartからendまでの値で塗りつぶします。
条件に最初に一致した配列要素のindexを返します。
一致しない場合は-1を返します。
_.indexOf()よりも複雑な条件が指定できます。
このメソッドは、最初の要素述部の索引を戻す点を除いて、_.findに似ています。
このメソッドは、コレクションの要素を右から左に繰り返す点を除けば、_.findIndexに似ています。
配列要素として配列が含まれる場合、一階層展開します。
配列要素として配列が含まれる場合、深い階層のものまで全て展開します。
Recursively flattens array.
第二引数で展開する深さを指定します。
第二引数に1を渡すと、_.flatten()と同じ結果が得られます。
要素が二つずつ入っている二次元配列をkeyとvalueにして、連想配列に変換します。
_.toPairsの逆。 このメソッドは、キーと値のペアから構成されるオブジェクトを返します。
arrayの最初の要素を取得します。
条件に最初に一致した配列要素のindexを返します。
一致しない場合は-1を返します。
等価比較のためにSameValueZeroを使用して、arrayの最初に現れる値が見つかるインデックスを取得します。 fromIndexが負の場合、配列の最後からのオフセットとして使用されます。
arrayの最後の要素を除くすべてを取得します。
二つの配列を比較して、第一引数に渡した配列要素のうち一致するものだけ一意な値として返します。
等価比較のためにSameValueZeroを使用して、指定されたすべての配列に含まれる一意の値の配列を作成します。 結果値の順序と参照は、最初の配列によって決定されます。
intersection()と違う点としては、第三引数に渡した関数の戻り値を比較する点です。
このメソッドは、各配列の各要素に対して呼び出されたiterateeを受け入れて比較する基準を生成するという点を除けば、_.intersectionと似ています。 結果値の順序と参照は、最初の配列によって決定されます。 iterateeは1つの引数で呼び出されます。
intersection()と違う点としては、第三引数にによって条件を指定できる点です。
公式ドキュメントの例では_.isEqualを渡していますが、より複雑な条件などにも利用できそうです。
このメソッドは、配列の要素を比較するために呼び出されるコンパレータを受け入れるという点を除けば、_.intersectionと似ています。 結果値の順序と参照は、最初の配列によって決定されます。 コンパレータは、(arrVal、othVal)という2つの引数で呼び出されます。
公式ドキュメントからの引用ですが。
Git には、あるブランチの変更を別のブランチに統合するための方法が大きく分けて二つあります。merge と rebase です。
ということで、mergeとrebaseについて少しやってみようと思います。
vimの操作方法についてはこのページでは細かくは触れません。
gitのコミットidはご自身の環境として読み替えてください。
以前の記事「gitその0001-01 git rebase入門 indexと準備 - Motomichi Works Blog」のとおりrebase_tutorialリポジトリを準備して、masterブランチとhogeブランチを作成しましたので、それを使います。
記事タイトルがrebase入門ですが、まずmergeコマンドからやってみます。
以下のコマンドを実行して、hogeブランチのログを表示してみます。
git checkout hoge git log --oneline
以下のように表示されました。
3d16339 6行目を追加 e3e9b30 5行目を追加 356d95e 4行目を追加 97029ec 3行目を追加 407e6f9 2行目を追加 30596dc 1行目を追加 d5d7400 Initial commit
作業ブランチをmasterに切り替えて、masterブランチのログを表示してみます。
git checkout master git log --oneline
以下のように表示されました。
1a35929 sample_2.txt 1行目を追加 97029ec 3行目を追加 407e6f9 2行目を追加 30596dc 1行目を追加 d5d7400 Initial commit
現在の作業ブランチがmasterの状態で、以下のように統合したいブランチを指定します。
git merge hoge
以下のように表示されます。
マージコミットのメッセージ編集ができますが、このままにしておきます。
Merge branch 'hoge' # Please enter a commit message to explain why this merge is necessary, # especially if it merges an updated upstream into a topic branch. # # Lines starting with '#' will be ignored, and an empty message aborts # the commit.
このまま:wqします。 以下のように表示されました。
Merge made by the 'recursive' strategy. sample.txt | 3 +++ 1 file changed, 3 insertions(+)
統合されたログを確認してみます。
git log --oneline
以下のように表示されました。
c501ee7 Merge branch 'hoge' 1a35929 sample_2.txt 1行目を追加 3d16339 6行目を追加 e3e9b30 5行目を追加 356d95e 4行目を追加 97029ec 3行目を追加 407e6f9 2行目を追加 30596dc 1行目を追加 d5d7400 Initial commit
コミットを実行した日時の順に統合されて、それぞれのコミットidに変化が無いことがわかります。
また、マージコミットが新たに追加されたことがわかります。
ブランチ一覧を確認してみます。
git branch
以下のように表示されました。
hoge * master
rebaseコマンドによる統合をしたいので、mergeコマンドを実行する前の状態に戻します。
以下のコマンドで、git操作履歴を表示します。
git reflog
以下のように表示されました。
c501ee7 HEAD@{0}: merge hoge: Merge made by the 'recursive' strategy. 1a35929 HEAD@{1}: checkout: moving from hoge to master 3d16339 HEAD@{2}: checkout: moving from master to hoge ~以下略~
ブランチ統合直前の状態にもどしたいので、以下のコマンドを実行して、HEAD@{1}
に戻します。
git reset --hard HEAD@{1}
以下のコマンドを実行して、masterブランチのログを確認してみます。
git log --oneline
以下のように表示されました。
1a35929 sample_2.txt 1行目を追加 97029ec 3行目を追加 407e6f9 2行目を追加 30596dc 1行目を追加 d5d7400 Initial commit
masterブランチが統合前の状態に戻ったことが確認できました。
rebaseコマンドでの統合をやってみます。
以下のコマンドを実行して、hogeブランチのログを表示してみます。
git checkout hoge git log --oneline
以下のように表示されました。
3d16339 6行目を追加 e3e9b30 5行目を追加 356d95e 4行目を追加 97029ec 3行目を追加 407e6f9 2行目を追加 30596dc 1行目を追加 d5d7400 Initial commit
現在の作業ブランチがhogeの状態で、以下のように統合したいブランチを指定します。
mergeコマンドを実行するときとは逆です。
git rebase master
以下のように表示されます。
rebaseの場合は統合コミットは作成されず以下のように表示されます。
First, rewinding head to replay your work on top of it... Applying: 4行目を追加 Applying: 5行目を追加 Applying: 6行目を追加
hogeブランチのコミットログを表示してみます。
git log --oneline
以下のように表示されました。
d97b9dd 6行目を追加 cb0d079 5行目を追加 35f9c3b 4行目を追加 1a35929 sample_2.txt 1行目を追加 97029ec 3行目を追加 407e6f9 2行目を追加 30596dc 1行目を追加 d5d7400 Initial commit
masterブランチでコミットされていた以下のコミットに、hogeブランチでコミットされた4~6行目の変更が適用されたのがわかります。
このときmergeと違うのは、4~6行目のコミットidが変化していて、masterの後ろに履歴が追加される点です。
masterブランチで行った変更と、hogeブランチで行った変更とが交互に並んだりすることなく、ブランチ毎の作業のまとまりが見やすくなったりします。
ブランチ一覧を確認してみます。
git branch
以下のように表示されました。
* hoge master
以下のページからの引用になります。
公開リポジトリにプッシュしたコミットをリベースしてはいけない
同じ編集内容にもかかわらず、C4
とC4'
の異なるコミットidが存在することになり、コンフリクトしたり混乱を招くことになる。ということについて書かれています。
rebaseに限らずコミットidが変化してしまうコマンドは、公開リポジトリにプッシュしたコミットに使用してはいけないということになります。
記事中でresetを使用していますが、resetも公開リポジトリにプッシュしたコミットに使用してはいけないということになります。
いくつか前のcommitメッセージを修正する方法について書いています。
vimの操作方法についてはこのページでは細かくは触れません。
gitのコミットidはご自身の環境として読み替えてください。
git commit –amend についても触れません。
以前の記事「gitその0001-01 git rebase入門 indexと準備 - Motomichi Works Blog」のとおりrebase_tutorialリポジトリを準備して、masterブランチとhogeブランチを作成しましたので、それを使います。
hogeブランチで作業してみます。
git checkout hoge
例として、HEADから3回分のコミットが対象範囲なので、以下のようにコマンドを実行します。
git rebase -i HEAD~3
以下のような感じで、対象となるコミット一覧と、操作の説明が表示されます。 このとき表示されるコミット一覧は一番下が一番新しいコミットです。
pick 356d95e 4行目を追加 pick e3e9b30 5行目を追加 pick fabb554 6行目を追加 # Rebase 97029ec..fabb554 onto 97029ec (3 command(s)) # # Commands: # p, pick = use commit # r, reword = use commit, but edit the commit message # e, edit = use commit, but stop for amending # s, squash = use commit, but meld into previous commit # f, fixup = like "squash", but discard this commit's log message # x, exec = run command (the rest of the line) using shell # d, drop = remove commit # # These lines can be re-ordered; they are executed from top to bottom. # # If you remove a line here THAT COMMIT WILL BE LOST. # # However, if you remove everything, the rebase will be aborted. # # Note that empty commits are commented out
操作の説明が表示されていますが、今回使用するのはrewordです。
コミット一覧のpickと書いてあるところをINSERTモードで、rにします。
pickになっているものは、変更を加えず使用されます。
今回は例として、二つのコミットメッセージを修正します。
r 356d95e 4行目を追加 r e3e9b30 5行目を追加 pick fabb554 6行目を追加 # Rebase 97029ec..fabb554 onto 97029ec (3 command(s)) # # Commands: # p, pick = use commit # r, reword = use commit, but edit the commit message # e, edit = use commit, but stop for amending # s, squash = use commit, but meld into previous commit # f, fixup = like "squash", but discard this commit's log message # x, exec = run command (the rest of the line) using shell # d, drop = remove commit # # These lines can be re-ordered; they are executed from top to bottom. # # If you remove a line here THAT COMMIT WILL BE LOST. # # However, if you remove everything, the rebase will be aborted. # # Note that empty commits are commented out
コマンドモードに戻して:wqです。
しばらく待つと自動的に以下のような表示になりますので、コミットメッセージを編集します。
4行目を追加 # Please enter the commit message for your changes. Lines starting # with '#' will be ignored, and an empty message aborts the commit. # # Date: Fri Aug 4 19:14:05 2017 +0900 # # interactive rebase in progress; onto 97029ec # Last command done (1 command done): # r 356d95e 4行目を追加 # Next commands to do (2 remaining commands): # r e3e9b30 5行目を追加 # pick 3d16339 6行目を追加 # You are currently editing a commit while rebasing branch 'hoge' on '97029ec'. # # Changes to be committed: # modified: sample.txt #
編集が済んだら、コマンドモードに戻って:wqです。
しばらく待つと自動的にまた同じような表示になりますので、コミットメッセージを編集します。
rにした全てのコミットメッセージを編集し終えて、以下のような感じで表示されたら成功です。
[detached HEAD bc2580e] 4行目を追加 編集メッセージ Date: Fri Aug 4 19:14:05 2017 +0900 1 file changed, 1 insertion(+) [detached HEAD 12cffc6] 5行目を追加 編集メッセージ Date: Fri Aug 4 19:15:19 2017 +0900 1 file changed, 1 insertion(+) Successfully rebased and updated refs/heads/hoge.
以下のコマンドを実行してみます。
git log --oneline
以下のように編集されたのが確認できました。
721d841 6行目を追加 12cffc6 5行目を追加 編集メッセージ bc2580e 4行目を追加 編集メッセージ 97029ec 3行目を追加 407e6f9 2行目を追加 30596dc 1行目を追加 d5d7400 Initial commit
commitをまとめる方法について書いています。
vimの操作方法についてはこのページでは細かくは触れません。
gitのコミットidはご自身の環境として読み替えてください。
以前の記事「gitその0001-01 git rebase入門 indexと準備 - Motomichi Works Blog」のとおりrebase_tutorialリポジトリを準備して、masterブランチとhogeブランチを作成しましたので、それを使います。
hogeブランチで作業してみます。
git checkout hoge
例として、HEADから3回分のコミットをまとめるので以下のようにコマンドを実行します。
git rebase -i HEAD~3
以下のような感じで、対象となるコミット一覧と、操作の説明が表示されます。
このとき表示されるコミット一覧は一番下が一番新しいコミットです。
pick 356d95e 4行目を追加 pick e3e9b30 5行目を追加 pick fabb554 6行目を追加 # Rebase 97029ec..fabb554 onto 97029ec (3 command(s)) # # Commands: # p, pick = use commit # r, reword = use commit, but edit the commit message # e, edit = use commit, but stop for amending # s, squash = use commit, but meld into previous commit # f, fixup = like "squash", but discard this commit's log message # x, exec = run command (the rest of the line) using shell # d, drop = remove commit # # These lines can be re-ordered; they are executed from top to bottom. # # If you remove a line here THAT COMMIT WILL BE LOST. # # However, if you remove everything, the rebase will be aborted. # # Note that empty commits are commented out
操作の説明が表示されていますが、今回使用するのはsquashです。
コミット一覧のpickと書いてあるところをINSERTモードで、sにして以下のようにします。
sにしたものは、ひとつ古いコミットとまとめられます。
pickになっているものは、変更を加えず使用されます。
pick 356d95e 4行目を追加 s e3e9b30 5行目を追加 s fabb554 6行目を追加
コマンドモードに戻して:wqです。
しばらく待つと自動的に以下のような表示になりますので、コミットメッセージを編集します。
# This is a combination of 3 commits. # The first commit's message is: 4行目を追加 # This is the 2nd commit message: 5行目を追加 # This is the 3rd commit message: 6行目を追加 # Please enter the commit message for your changes. Lines starting # with '#' will be ignored, and an empty message aborts the commit. # # Date: Fri Aug 4 19:14:05 2017 +0900 # # interactive rebase in progress; onto 97029ec # Last commands done (3 commands done): # s e3e9b30 5行目を追加 # s fabb554 6行目を追加 # No commands remaining. # You are currently editing a commit while rebasing branch 'hoge' on '97029ec'. # # Changes to be committed: # modified: sample.txt #
INSERTモードにして、例えば以下のような感じで、コミットメッセージを変更します。
# This is a combination of 3 commits. # The first commit's message is: 4行目、5行目、6行目を追加 # This is the 2nd commit message: # This is the 3rd commit message: # Please enter the commit message for your changes. Lines starting # with '#' will be ignored, and an empty message aborts the commit. # # Date: Fri Aug 4 19:14:05 2017 +0900 # # interactive rebase in progress; onto 97029ec # Last commands done (3 commands done): # s e3e9b30 5行目を追加 # s fabb554 6行目を追加 # No commands remaining. # You are currently editing a commit while rebasing branch 'hoge' on '97029ec'. # # Changes to be committed: # modified: sample.txt #
コマンドモードに戻って:wqです。
しばらく待って、以下のように表示されれば成功です。
[detached HEAD 2865e19] 4行目、5行目、6行目を追加 Date: Fri Aug 4 19:14:05 2017 +0900 1 file changed, 3 insertions(+) Successfully rebased and updated refs/heads/hoge.
以下のコマンドを実行して、ログを確認してみます。
git log --oneline
以下のような感じで表示されたと思います。
2865e19 4行目、5行目、6行目を追加 97029ec 3行目を追加 407e6f9 2行目を追加 30596dc 1行目を追加 d5d7400 Initial commit
以下のコマンドを実行して、HEADのひとつ前とHEADのdiffを確認してみます。
git diff HEAD^ HEAD
コミットがまとめられて、4行目、5行目、6行目が追加されたのがわかります。
次の練習のためにrebaseする前の状態に戻してみます。
以下のコマンドで自分が操作した履歴を見ます。
git reflog
おおよそ以下のような感じで表示されたと思います。
2865e19 HEAD@{0}: rebase -i (finish): returning to refs/heads/hoge 2865e19 HEAD@{1}: rebase -i (squash): 4行目、5行目、6行目を追加 f090b18 HEAD@{2}: rebase -i (squash): # This is a combination of 2 commits. 356d95e HEAD@{3}: rebase -i (start): checkout HEAD~3 fabb554 HEAD@{4}: commit: 6行目を追加
“6行目を追加"のコミットをした直後の状態に戻すので、以下のコマンドを実行します。
git reset --hard HEAD@{4}
以下のように表示されて、コミットをまとめる前の状態に戻ったと思います。
HEAD is now at fabb554 6行目を追加
一応以下のコマンドでログを確認してみます。
git log --oneline
まとめる前の状態にもどりましたので以下のように表示されました。
fabb554 6行目を追加 e3e9b30 5行目を追加 356d95e 4行目を追加 97029ec 3行目を追加 407e6f9 2行目を追加 30596dc 1行目を追加 d5d7400 Initial commit
最新の6行目を追加のコミットはそのままにして、4行目を追加と5行目を追加のコミットだけをまとめる方法をやってみます。
例として、今回もHEADから3回分のコミットが対象になるので以下のようにコマンドを実行します。
git rebase -i HEAD~3
さきほどと同じように以下のように表示されます。
pick 356d95e 4行目を追加 pick e3e9b30 5行目を追加 pick fabb554 6行目を追加
“4行目を追加"と"5行目を追加"をまとめたいので、以下のようにpickをsに変更します。
sにしたものは、ひとつ古いコミットとまとめられます。
pick 356d95e 4行目を追加 s e3e9b30 5行目を追加 pick fabb554 6行目を追加
編集が済んだら、コマンドモードに戻って:wqです。
しばらく待つと自動的に以下のような表示になりますので、コミットメッセージを編集します。
# This is a combination of 2 commits. # The first commit's message is: 4行目を追加 # This is the 2nd commit message: 5行目を追加 # Please enter the commit message for your changes. Lines starting # with '#' will be ignored, and an empty message aborts the commit. # # Date: Fri Aug 4 19:14:05 2017 +0900 # # interactive rebase in progress; onto 97029ec # Last commands done (2 commands done): # pick 356d95e 4行目を追加 # s e3e9b30 5行目を追加 # Next command to do (1 remaining command): # pick fabb554 6行目を追加 # You are currently editing a commit while rebasing branch 'hoge' on '97029ec'. # # Changes to be committed: # modified: sample.txt #
INSERTモードにして、例えば以下のような感じで、コミットメッセージを変更します。
# This is a combination of 2 commits. # The first commit's message is: 4行目、5行目を追加 # This is the 2nd commit message: # Please enter the commit message for your changes. Lines starting # with '#' will be ignored, and an empty message aborts the commit. # # Date: Fri Aug 4 19:14:05 2017 +0900 # # interactive rebase in progress; onto 97029ec # Last commands done (2 commands done): # pick 356d95e 4行目を追加 # s e3e9b30 5行目を追加 # Next command to do (1 remaining command): # pick fabb554 6行目を追加 # You are currently editing a commit while rebasing branch 'hoge' on '97029ec'. # # Changes to be committed: # modified: sample.txt #
コマンドモードに戻って:wqです。
しばらく待って、以下のように表示されれば成功です。
[detached HEAD 7ef5ac4] 4行目、5行目を追加 Date: Fri Aug 4 19:14:05 2017 +0900 1 file changed, 2 insertions(+) Successfully rebased and updated refs/heads/hoge.
以下のコマンドを実行して、ログを確認してみます。
git log --oneline
以下のような感じで表示されたと思います。
97dedd8 6行目を追加 7ef5ac4 4行目、5行目を追加 97029ec 3行目を追加 407e6f9 2行目を追加 30596dc 1行目を追加 d5d7400 Initial commit
“6行目を追加"のコミットはそのままに、"4行目を追加"と"5行目を追加"のコミットをまとめることができました。
シリーズみたいな感じで、実際にコマンドを実行してみながらrebaseの学習をしていきます。
git rebase -i
は git rebase --interactive
の略です。
rebaseの様々な機能を対話形式で実行していく便利なオプションです。
今後色々な練習をしていくにあたって、準備作業をしました。
以下の内容でsample.txtを作成します。
1行目
addしてcommitします。
git add sample.txt git commit -m "1行目を追加"
同様に、sample.txtを編集して、
以下のコマンドを実行します。
git log --oneline
この段階でmasterブランチのログは以下のような感じです。
97029ec 3行目を追加 407e6f9 2行目を追加 30596dc 1行目を追加 d5d7400 Initial commit
sample.txtの記述内容は以下のような感じです。
1行目 2行目 3行目
仕事での開発ではmasterに直接pushしないと思いますが、練習なのでpushすることにします。
git push origin master
hogeブランチを作成します。
git checkout -b hoge
さきほどと同様に、sample.txtを編集して、
以下のコマンドを実行します。
git log --oneline
この段階でhogeブランチのログは以下のような感じです。
fabb554 6行目を追加 e3e9b30 5行目を追加 356d95e 4行目を追加 97029ec 3行目を追加 407e6f9 2行目を追加 30596dc 1行目を追加 d5d7400 Initial commit
sample.txtの記述内容は以下のような感じです。
1行目 2行目 3行目 4行目 5行目 6行目
hogeブランチをpushします。
git push origin hoge
まずcheckoutします。
git checkout master
sample_2.txtを新たに以下の内容で作成して追加します。
sample_2.txt 1行目
add, commit, push します。
git add sample_2.txt git commit -m "sample_2.txt 1行目を追加" git push origin master
以下のコマンドを実行して、masterブランチのログを見てみます。
git log --oneline
以下のように表示されました。
1a35929 sample_2.txt 1行目を追加 97029ec 3行目を追加 407e6f9 2行目を追加 30596dc 1行目を追加 d5d7400 Initial commit