//ルートにアクセスされたら/archiveにリダイレクトする

エイリーの備忘録

開発や音楽について書いていこうと思っています。

VSCodeからPhpStormに乗り換えて良かったこと・悪かったこと

この記事は、千 Advent Calendar 2018の21日目の記事です。

※ この記事はPhpStormを使い始めて2週間程度の人間が書いているので間違いや伝えきれない魅力が沢山あるかもしれませんのでご了承ください。

私はここ3年ほどVSCodeを使っていたのですが、最近VSCodeが重いのと周りがPhpStormに乗り換え始めて来たので便乗して使ってみると思ったより快適だったのでVSCodeと比較して良かってことと悪かったことをまとめたいと思います。

エディタに求めるもの

エディタを使うときは最低限上記項目の条件を求めています。

良かったこと

  • コードの補完が早い
  • 補完する項目を雰囲気で察してくれて使いそうな単語を自動的に上に来てくれる
  • 配列内のキー名を補完することが出来る
  • 英単語のタイポをすると教えてくれる
  • アカウント単位でエディタの設定を紐付けられているので新しい環境でPhpStormを使用開始すると設定の同期ができるのでエディタの設定をやり直したりせずに済む
  • ファイルの横断検索などでマウスを使わなくても検索することができる
  • エディタ内のターミナルのフォントを変更することが出来る
    • 筆者環境ではpower line系のフォントが必須なのでかなりありがたいです。

悪かったこと

  • デフォルトだと日本語に対応していない
  • (IDEなのでしょうがないのでしょうが) 何かの設定を変更する際にsetting.jsonなどが無く、設定を確認するのにいちいち設定項目を開かないといけない

終わりに

他にもまだまだ魅力はたくさんありますが、補完周りが強かったので凄くいいと感じました。 PhpStormはまだまだ使い始めて日が浅いのですが、私にとっては使いやすく、感動を与えてくれるエディタです。

今PhpStormにしようかどうか迷っている人にとって少しでも参考になれば嬉しいと思い記事にしました。

また、PhpStormをはじめjetbrainsのIDEには30日間の試用期間が設けられているので、一度試してみると感動のするほどいいエディタなので、迷っているなら是非一度使ってみてください!

JavaScriptでNull合体演算子

日頃jsのコードを書いていて、null合体演算子を使いたいと感じたことはないでしょうか? 例えば、

var hoge = null;
var fuga = hoge === null ? 'nullの時の値' : hoge;

上記例のfugaに値を入れるときに2回もhogeと書かないといけないのはイケてないですよね? ですので、こういうときのためにnull合体演算子が用意されています。

書き方

var hoge = null;
var fuga = hoge || 'nullの時の値';

この時にfugaに入っている値は nullの時の値 という文字列が挿入されています。

実証

ここでの実証はchromeのデバッガを使用しています。

// nullの時の値が挿入される
var hoge = null;
console.log(hoge || 'nullの時の値'); // nullの時の値

hoge = undefined;
console.log(hoge || 'nullの時の値'); // undefined

// hogeの値が挿入される
hoge = '適当な値';
console.log(hoge || 'nullの時の値'); // 適当な値

hoge = 1234;
console.log(hoge || 'nullの時の値'); // 1234

hoge = {};
console.log(hoge || 'nullの時の値'); // {}

感想

なんでjsの場合は || でnull合体演算子の挙動が出来るんだろう?・・・ (正直OR演算をしているようにしか見えないので可読性が低い気がする・・・)

gitを使うなら最低限覚えておきたいgitコマンド6選

gitを運用するなら覚えておきたいコマンドを紹介します

git add

変更のあったすべてのファイルをステージングします

git add .

特定のファイルをステージングします

git add <ファイル名>

git commit

git commit -m

ステージングされた変更をコミット(確定)します

git commit -m "<コミットメッセージ>"

git commit --amend

前回のコミットに現在のステージングされている変更を適用します

git commit --amend -m "<コミットメッセージ>"

git push

git push

特定のブランチをリモートブランチへpushします

git push origin <ブランチ名>

git push -f

ローカルで過去改変などをしてpushできなかった場合にローカルの変更で上書き ただし、これをやる場合は、 共同編集者のコミットをなかったことにしちゃった///てへぺろ ってなるかもしれないので最新の注意を払わないといけない

git push -f origin <ブランチ名>

git pull

特定のリモートブランチの変更をローカルのカレントブランチへ反映します 正直git pull origin master以外あまり使わないですが・・・

git pull origin <ブランチ名>

git checkout

git checkout

特定のブランチへ切り替える

git checkout <ブランチ名>

git checkout -b カレントブランチの派生ブランチを作成してブランチを移動

git checkout -b <ブランチ名>

git reset

git reset 直前のコミットを取り消す。ただし、ファイルの変更は破棄されない

git reset @^

git reset --hard

コミットまでのファイルの変更を破棄する

git reset --hard

直前のコミットを取り消す。ファイルの変更も破棄される

git reset --hard @^

終わりに

以上がgitを使うな最低限覚えておきたいgitコマンドになります。 ~~ 正直はエディタのgitクライアントも優秀なので、極力手をキーボードから離したくないという方や、CUI最高↑という方以外はコマンドを覚えなくてもいいと思います。 ~~

vscodeがとうとう4画面分割に対応!

はじめに

6月リリース(version 1.25)が正式安定版としてリリースされました! vscodesublime textやvimで出来ていた4画面分割が今まで出来ていなかったのですが、とうとうvscodeでもできるようになりました!

code.visualstudio.com

今回のリリースでは、画面分割(Grid editor layout)が目玉の機能かなと思いつつ、触ってみて触りやすかったので、 (記事にするほどの内容でもないですが) 記事にしてみました。

4画面分割ってどうなるの?

↓こうなります f:id:youmjww:20180710235643p:plain

どうやって画面分割するの?

上メニューから[表示]->[Editor Layout]->[Grid(2x2)]を選択するとぱっと4画面分割してくれます。 f:id:youmjww:20180710235824p:plain

また、タブを直接ドラッグしていい感じに持っていくとこんなカオスな画面分割もできてしまいます。 f:id:youmjww:20180711000337p:plain

タブを閉じるとせっかく分割した画面がもとに戻ってしまって嫌という方へ

vscodeの設定ファイルに下記のおまじないを書いてください "workbench.editor.closeEmptyGroups": false するとあら不思議 f:id:youmjww:20180711000652p:plain

タブをすべて閉じてもちゃんと分割が保持されたままになっているではありませんか!

あとがき

今回のアップデートは本当に神アップデートだと思います。 今まで、これが出来なかったからATOMに戻ろうか何回か考えるレベルです(そういえばGitHubはMSに買収されていたがATOMvscodeに結合されるのか生き延びるのかどっちなんだろう)

気がつけば、左にアウトラインの項目ができており、ファンクションの一覧が見れるようになってるのもいいですし、ありがたい機能がアップデートでたくさん来るのは本当にありがたく、使いやすいエディターなので、これからも、vscodeを応援していきたいです。

vimで繰り返し入力を自動化

はじめに

みなさん、エディタを使っているときに同じ作業の繰り返しを行うことは無いでしょうか? 例えば、1行で書いていた連想配列を要素ごとに改行したりするのって手作業で行うのってめんどくさいですよね?

vimでやってみてはいいのでは?

vimにはキーボードマクロという機能があり、キーボードマクロを使うとキーボード操作を記録してn回自動でぶん回すということが簡単に行うことができます。

実行方法

特に記載がない限り、ノーマルモードで実行とします。

記録開始

qa

上記コマンドで a にキー操作を覚えさせるという意味になります。 例えば、 qi で記憶させると i に記録されます。

記録を終了

q

記録モード時に q を入力することにより、記録を終了することができます。

記録したマクロの呼び出し

1回だけ実行する

@a

n回実行

n@a

nの部分に繰り返したい回数を入れます。 例えば、10回実行したい場合は 10@a と入れることで10回実行することができます。

あとがき

vimは調べれば調べるほど便利な機能がたくさん出てきて面白いエディターです。 (そしてメイン使いしているvscodevimの機能を求めて調べても実装されていなくてがっくりする・・・) 早くvimに完全に乗り換えたいです!

:NeoBundleInstallをvimの外から叩く方法

皆さんこんにちわ
vimの環境構築は自動化していますか?
自動化した環境で、プラグインのインストールはどうしてますか?
NeoBundleを使っていると、ここだけ手動になるのがめんどくさくないですか?
今回は、これを解決してみます。

# 実際に外部から:NeoBundleInstallを叩いてみる

$vim +":NeoBundleInstall" + :q

はい。これだけです。

もし、他のコマンドを実行したかったら、`:NeoBundleInstall`の部分を他のものに書き換えてください。
そして、最後に`:q`をするのを忘れないでください。これを忘れると、自動でvimが終了してくれません。
これだけでvimの環境構築で本来なら一度、人間がvimを開かないと出来ない操作を自動化することが出来ます。

環境構築スクリプトをワンライナーで配布する方法!

みなさんこんにちわ! みなさんは環境構築はスクリプト化していますか? スクリプト化していたらどうやって実行していますか? クラウドからコピペでスクリプトファイルを作って実行していたりしないですか? 今回は、コマンド一発でスクリプトをwebから引っ張ってきて、実行する方法を紹介したいと思います。

導入事例

まずは、導入事例を見てみましょう。

https://www.meteor.com/install

https://brew.sh/index_ja

ぱっと探しますと、homebrewとmeteorがワンライナースクリプトで配布を行っていました。 しかも、homebrewに関してはここで紹介する方法と同じ方法で配布を行っています。(実行言語はrubyだけど。)

上記で上げたとおり、大きなコミュニティでも使われている方法ですので、楽にインストールを行えるというのが伺えると思います。 では実際にこの配布環境を作ってみましょう!

用意するもの

手順

  1. githubのpublicリポジトリスクリプトをうpする
  2. githubリポジトリにうpされたスクリプトのrowのURLを取得する
  3. curlスクリプトを取ってくる
  4. 実行する!

詳しい手順

githubのpublicリポジトリスクリプトをうpする

ここでは詳しい説明を割愛しますが、必ずpublicリポジトリにpushしてください。 publicでないとファイルを取ってこれない(はず)です

githubリポジトリにうpされたスクリプトのrowのURLを取得する

ここからが本番です。 一度、ブラウザで実際のファイルを確認してみましょう。 まず、ブラウザのURL欄に下記URLをコピペしてください。

https://raw.githubusercontent.com/account/repository/branch/filename

そして、後ろ4つのパラメータを自分に当てはまる形に修正してください。

account = githubのアカウント名
repository = リポジトリ名
branch = ブランチ名(masterがおすすめ)
filename = 目的のファイル名

例:https://raw.githubusercontent.com/youmjww/vimSetup/master/vimSetup.sh

これで実際に見てみると、目的のファイルのrowが見えるはずです。

実際にコマンドラインから実行してみる

ここは本当に簡単で、ワンライナーで実行します。 URLの部分は自分のURLに書き換えてください。

$curl https://raw.githubusercontent.com/account/repository/branch/filename | sh

ここでは、curlコマンドでgithubからソースをダウンロードしてきて、ダウンロードが完了したらshで実行をしています。 shの部分を書き換えると好きなシェル環境で実行できますが、筆者個人的には、どんな環境でも動くshで実行できるようにコードを組むのがいいかなと思います。

このスクリプトのメリット・デメリット

メリット

  1. リポジトリのREADME.mdにでも実行用のコードを書いておけば一回コピペして実行するだけなので操作する時間を大幅に削減できる。
  2. 友人などにおすすめだから使ってみてって渡す時に気楽に環境をインストールしてもらえる
  3. シェルスクリプトで書いておけば、大体のUnix/Linux環境で動く
  4. かっこいい!←ココ重要
  5. スクリプトをメンテしてもURLは変わらないので一度作ってしまえば永久に使えるコマンドになる

デメリット

  1. AnsibleやChefみたいに、環境構築専門の言語じゃないので、エラーが出ても止まらない。
  2. シェルスクリプトを書くのが辛い・・・

あとがき

この方法でのスクリプトの配布は本当に便利でして、あまり時間がない時にサックっと環境構築をしたい時にワンライナーを実行するだけでいいので、おすすめです! みなさんも是非やってみてください!(そして、いいなと思ったらツイートやコメントをくれると嬉しいなw)