Motomichi Works Blog

モトミチワークスブログです。その日学習したことについて書いている日記みたいなものです。

railsその0003-002 任意のgemをproduction環境、development環境、test環境それぞれ分けてインストールする

参考にさせて頂いたページ

はじめに

rails 5のチュートリアルをやってみる日記です。

今日はここまで読んだとか、ここまでやったとかそんな感じの日記です。

任意のgemをproduction環境、development環境、test環境それぞれ分けてインストールする

Herokuにデプロイするところで、sqlite3をgroupに加えていました。

以下は引用コードです。

引用元:「第1章 ゼロからデプロイまで | Rails チュートリアル

group :production do
  gem 'pg', '0.20.0'
end

group :development, :test do
  gem 'sqlite3', '1.3.13'
  gem 'byebug',  '9.0.0', platform: :mri
end

などgroupに分けて記述して、以下のようにproduction環境でbundle installします。

$ bundle install --without production

railsその0003-001 RailsTutorialを始めてみる

はじめに

技術ブログというか日記です。

最近は全然勉強していなかったり、
勉強していたとしても記録を残していないので、なんか前に進んでる感が無くて、
成長していない自分にただただ焦りを感じているので、
久しぶりにコツコツ前に進んでる感を自分で感じとれるように書き留めていこうと思ってます。

コツコツ勉強した記録をあとで眺めるとなんかちょっと元気が出ます。

Electronその0001 HelloWorldまでやってみる

参考にさせて頂いたページ

環境

  • Windows10
  • node 6.11.4
  • npm 5.5.1
  • electron 1.7.9

プロジェクトのディレクトリを作成する

何でも良いけど、el_image_viewerディレクトリを作成しました。

そのディレクトリでnpm initして、適当にenter押しました。

npm init

Electronをプロジェクトディレクトリにインストールする

公式のnpmパッケージのページにならって以下の通りです。

npm install electron --save-dev --save-exact

main.jsの作成とその記述内容

【2017年1月版】今からでも遅くない!Electron入門 - Qiita」にならって以下の通り記述しました。

const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

let mainWindow = null;
app.on('ready', () => {
  // mainWindowを作成(windowの大きさや、Kioskモードにするかどうかなどもここで定義できる)
  mainWindow = new BrowserWindow({width: 400, height: 300});
  // Electronに表示するhtmlを絶対パスで指定(相対パスだと動かない)
  mainWindow.loadURL('file://' + __dirname + '/index.html');

  // ChromiumのDevツールを開く
  mainWindow.webContents.openDevTools();

  mainWindow.on('closed', function() {
    mainWindow = null;
  });
});

index.htmlの作成とその記述内容

【2017年1月版】今からでも遅くない!Electron入門 - Qiita」にならって以下の通り記述しました。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    Hello World!
  </body>
</html>

electronコマンドでmain.jsを実行してみる

el_image_viewerディレクトリで以下のコマンドを実行しました。

./node_modules/.bin/electron ./main.js

Hello World! と表示されました。

今日はここまで。

webpack-dev-serverのCannot find module addDevServerEntrypointsを解消する

参考にさせて頂いたページ

webpack-dev-serverを実行してエラー

bin/webpack-dev-serverを実行したときに以下のようなエラーが出ました。

Error: Cannot find module '../lib/util/addDevServerEntrypoints'

yarnでインストール

足りないパッケージをインストールしました。

yarn add webpack-dev-middleware webpack-hot-middleware --dev

vagrantその0028 ファイルをゲストマシンからホストマシンに同期する

参考にさせて頂いたページ

実行する前に注意すること

同期なので、ゲストのファイルで上書きされたり、ホスト側のファイルが削除されたりすることにもなると思うので、実行する前には注意が必要です。

プラグインvagrant-rsync-backをインストールして実行する

以下の通りです。

$ vagrant plugin install vagrant-rsync-back
$ vagrant rsync-back

色々同期できました。

Lodash 4.x その0001 個人的index

はじめに

個人的に少しずつ公式ドキュメントを読んで学習を進めます。

公式ドキュメントを読んで解りにくかったり、こういう場合はどうなのかと疑問に思ったものはサンプルを自分で書いてみるかもです。

Array

_.chunk(array, [size=1])

配列をn個ごとに分割します。

_.compact(array)

すべての偽値が削除された配列を作成します。 値false、null、0、 “"、未定義、およびNaNはfalseです。

_.concat(array, [values])

配列を連結します。

_.difference(array, [values])

二つの配列を比較して、第一引数に渡した配列要素のうち一致しないものだけを返します。

等価比較のためにSameValueZeroを使用して、他の配列に含まれていない配列値の配列を作成します。 結果値の順序と参照は、最初の配列によって決定されます。

_.differenceBy(array, [values], [iteratee=_.identity])

difference()と違う点としては、第三引数に渡した関数の戻り値を比較する点です。

このメソッドは、配列の各要素と値が比較される基準を生成するために呼び出されるiterateeを受け入れることを除けば、_differenceに似ています。 結果値の順序と参照は、最初の配列によって決定されます。 iterateeは1つの引数で呼び出されます。

_.differenceWith(array, [values], [comparator])

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).

_.drop(array, [n=1])

n個の要素を先頭から削除した配列のスライスを作成します。

_.dropRight(array, [n=1])

最後からn個の要素を削除した配列のスライスを作成します。

_.dropRightWhile(array, [predicate=_.identity])

最後から削除された要素を除いた配列のスライスを作成します。 述語が偽を返すまで、要素は削除されます。 述部は、(value、index、array)という3つの引数で呼び出されます。

_.dropWhile(array, [predicate=_.identity])

最初から削除された要素を除いた配列のスライスを作成します。 述語が偽を返すまで、要素は削除されます。 述部は、(value、index、array)という3つの引数で呼び出されます。

_.fill(array, value, [start=0], [end=array.length])

公式ドキュメントの例を見るかぎり、第三引数は配列のindexで第四引数はlengthなんですかね。ちょっと注意が必要そうです。

配列の要素をstartからendまでの値で塗りつぶします。

_.findIndex(array, [predicate=_.identity], [fromIndex=0])

条件に最初に一致した配列要素のindexを返します。
一致しない場合は-1を返します。
_.indexOf()よりも複雑な条件が指定できます。

このメソッドは、最初の要素述部の索引を戻す点を除いて、_.findに似ています。

_.findLastIndex(array, [predicate=_.identity], [fromIndex=array.length-1])

このメソッドは、コレクションの要素を右から左に繰り返す点を除けば、_.findIndexに似ています。

_.flatten(array)

配列要素として配列が含まれる場合、一階層展開します。

_.flattenDeep(array)

配列要素として配列が含まれる場合、深い階層のものまで全て展開します。

Recursively flattens array.

_.flattenDepth(array, [depth=1])

第二引数で展開する深さを指定します。
第二引数に1を渡すと、_.flatten()と同じ結果が得られます。

_.fromPairs(pairs)

要素が二つずつ入っている二次元配列をkeyとvalueにして、連想配列に変換します。

_.toPairsの逆。 このメソッドは、キーと値のペアから構成されるオブジェクトを返します。

_.head(array)

arrayの最初の要素を取得します。

_.indexOf(array, value, [fromIndex=0])

条件に最初に一致した配列要素のindexを返します。
一致しない場合は-1を返します。

等価比較のためにSameValueZeroを使用して、arrayの最初に現れる値が見つかるインデックスを取得します。 fromIndexが負の場合、配列の最後からのオフセットとして使用されます。

_.initial(array)

arrayの最後の要素を除くすべてを取得します。

_.intersection([arrays])

二つの配列を比較して、第一引数に渡した配列要素のうち一致するものだけ一意な値として返します。

等価比較のためにSameValueZeroを使用して、指定されたすべての配列に含まれる一意の値の配列を作成します。 結果値の順序と参照は、最初の配列によって決定されます。

_.intersectionBy([arrays], [iteratee=_.identity])

intersection()と違う点としては、第三引数に渡した関数の戻り値を比較する点です。

このメソッドは、各配列の各要素に対して呼び出されたiterateeを受け入れて比較する基準を生成するという点を除けば、_.intersectionと似ています。 結果値の順序と参照は、最初の配列によって決定されます。 iterateeは1つの引数で呼び出されます。

_.intersectionWith([arrays], [comparator])

intersection()と違う点としては、第三引数にによって条件を指定できる点です。
公式ドキュメントの例では_.isEqualを渡していますが、より複雑な条件などにも利用できそうです。

このメソッドは、配列の要素を比較するために呼び出されるコンパレータを受け入れるという点を除けば、_.intersectionと似ています。 結果値の順序と参照は、最初の配列によって決定されます。 コンパレータは、(arrVal、othVal)という2つの引数で呼び出されます。

gitその0001-04 git rebase入門 ブランチを統合する

参考にさせて頂いたページ

Git - リベース

はじめに

公式ドキュメントからの引用ですが。

Git には、あるブランチの変更を別のブランチに統合するための方法が大きく分けて二つあります。merge と rebase です。

ということで、mergeとrebaseについて少しやってみようと思います。

vimの操作方法についてはこのページでは細かくは触れません。

gitのコミットidはご自身の環境として読み替えてください。

準備

以前の記事「gitその0001-01 git rebase入門 indexと準備 - Motomichi Works Blog」のとおりrebase_tutorialリポジトリを準備して、masterブランチとhogeブランチを作成しましたので、それを使います。

mergeコマンドでの統合をやってみる

記事タイトルがrebase入門ですが、まずmergeコマンドからやってみます。

hogeブランチのログを表示してみる

以下のコマンドを実行して、hogeブランチのログを表示してみます。

git checkout hoge
git log --oneline

以下のように表示されました。

3d16339 6行目を追加
e3e9b30 5行目を追加
356d95e 4行目を追加
97029ec 3行目を追加
407e6f9 2行目を追加
30596dc 1行目を追加
d5d7400 Initial commit

masterブランチのログを表示してみる

作業ブランチをmasterに切り替えて、masterブランチのログを表示してみます。

git checkout master
git log --oneline

以下のように表示されました。

1a35929 sample_2.txt 1行目を追加
97029ec 3行目を追加
407e6f9 2行目を追加
30596dc 1行目を追加
d5d7400 Initial commit

mergeコマンドで統合してみる

現在の作業ブランチが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コマンドでの統合をやってみる

rebaseコマンドでの統合をやってみます。

hogeブランチのログを表示してみる

以下のコマンドを実行して、hogeブランチのログを表示してみます。

git checkout hoge
git log --oneline

以下のように表示されました。

3d16339 6行目を追加
e3e9b30 5行目を追加
356d95e 4行目を追加
97029ec 3行目を追加
407e6f9 2行目を追加
30596dc 1行目を追加
d5d7400 Initial commit

rebaseコマンドで統合してみる

現在の作業ブランチが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

公開リポジトリにプッシュしたコミットをリベースしてはいけない

以下のページからの引用になります。

公開リポジトリにプッシュしたコミットをリベースしてはいけない

Git - リベース

同じ編集内容にもかかわらず、C4C4'の異なるコミットidが存在することになり、コンフリクトしたり混乱を招くことになる。ということについて書かれています。

rebaseに限らずコミットidが変化してしまうコマンドは、公開リポジトリにプッシュしたコミットに使用してはいけないということになります。

記事中でresetを使用していますが、resetも公開リポジトリにプッシュしたコミットに使用してはいけないということになります。