読者です 読者をやめる 読者になる 読者になる

なっく日報

技術やら生活やらのメモ

Windowsでシェルスクリプト書きたいときはShellJSが使える

久々のブログ更新となります。

シェルスクリプトWindows用に移植したい・・・という場面でShellJSが便利だったというお話です。

ShellJSとは?

github.com

ヤツです。

採用実績

YeomanとかZeptoとかJS界隈の有名どころで使われています。
GitHubスター数も5,835(2017/05/03現在)なので結構人気あるライブラリと言ってよいのではないでしょうか。 自分は ESLintで使われていて知りました。

何で必要になった?

当初JSファイルをcatして結合するだけの単純なスクリプトシェルスクリプトで書いてました(LinuxWindows(MSYS2)だけで動けばよい)
ところが、Windowsコマンドプロンプト使っている人が・・・
コマンドプロンプト用にバッチファイル書いて二重管理とかアレだなぁと思っていたところ、ふと存在を思い出しました。

イメージ

https://github.com/shelljs/shelljs の例そのままですが、↓のようなノリで書けます。

var shell = require('shelljs');

if (!shell.which('git')) {
  shell.echo('Sorry, this script requires git');
  shell.exit(1);
}

// Copy files to release dir
shell.rm('-rf', 'out/Release');
shell.cp('-R', 'stuff/', 'out/Release');

// Replace macros in each .js file
shell.cd('lib');
shell.ls('*.js').forEach(function (file) {
  shell.sed('-i', 'BUILD_VERSION', 'v0.1.2', file);
  shell.sed('-i', /^.*REMOVE_THIS_LINE.*$/, '', file);
  shell.sed('-i', /.*REPLACE_LINE_WITH_MACRO.*\n/, shell.cat('macro.js'), file);
});
shell.cd('..');

// Run external tool synchronously
if (shell.exec('git commit -am "Auto-commit"').code !== 0) {
  shell.echo('Error: Git commit failed');
  shell.exit(1);
}

自分の場合

catして結合したテキストをgrep -vして書き出すスクリプトがこう変わりました。

シェルスクリプト

cat src/*.js | grep -vE '^\s*//.+' > target/bundle.js

ShellJS版

npm install shelljs でインストールしておく。この辺のNode.jsの説明は省略。

const shell = require('shelljs');
shell.cat('src/*.js').grep('-v', '^\s*//.+').to('target/bundle.js');

パイプもいい感じに書けます。

まとめ

Windowsシェルスクリプトが書きたい→ShellJS お試しください。

fishシェルはじめました

これは(ターミナル開発環境のメンテに疲れた|zshの設定に挫折した)人向けにfishシェルをオススメする記事です。

自分がzshで手放せなかった機能達

  • プラグインマネージャ・・・zgenを使っていました
  • テーマ・・・pureというシンプルなテーマを使っていました
  • ディレクトリ移動・・・zで、一度cdしたディレクトリを記録して、次からはファジーな感じで移動できるようにしていました
  • 補完・・・zshの補完機能 + auto-fuで、いい感じに勝手に補完してくれるようにしていました
  • Ctrl + R で履歴検索・・・peco + 設定ファイルを書いて使っていました
  • Ctrl + Gでリポジトリにジャンプ・・・peco + ghq + 設定ファイルを書いて使っていました。

これらを、なるべく設定せずにfishシェルで使えるようにしてみます。

zshだと、この辺のツールの導入はちょっと手間ですが、fishなら瞬殺です!

もろもろインストール&開発環境構築

実は、以下3つのコマンドを打てば設定なしでも上記の機能が一通り動きます。

# fishシェルとfzfを入れる
brew install fish fzf
# プラグインマネージャのfishermanを入れる
curl -Lo ~/.config/fish/functions/fisher.fish --create-dirs git.io/fisher
# fishermanでもろもろプラグインを入れる
fisher install z fzf decors/fish-ghq rafaelrinaldi/pure

なんということでしょう。

これなら、休日の疲れた状態(今の私)でも問題なく環境構築できますね!

上記でインストールしたモノの補足

プラグインマネージャ

fishermanというfishシェル用のプラグインマネージャを入れました。

ちょっと前まではoh-my-fishがオススメという記事もありますが、最近はコチラを推奨している記事が多い気がします。

テーマ

https://github.com/fisherman とか oh-my-fish/Themes.md at master · oh-my-fish/oh-my-fish · GitHub を探せばいっぱいあります。

自分はzshのときと合わせてpureにしました。

ディレクトリ移動

zがfisherman公式リポジトリにあったので、そのまま入れました。

なお、後述しますが、zsh時代の設定に合わせるために、自分の場合は設定ファイルに2つほど記述を足しました。

set -U Z_CMD "j"
set -U Z_DATA "$HOME/.z/.z"

補完

補完系はfishのデフォルトで十分便利なので、auto-fuはやめました。

Ctrl + R で履歴検索

pecoにこだわりはなかったので、全く設定なしで動くという理由でpeco同等のfzfにしました。

fisher install fzfだけで使えるようになります。

Ctrl + Gでリポジトリを検索&ジャンプ

fisher install decors/fish-ghqだけで、使えるようになります。

その他補足

~/.zshrc的な設定ファイルは?

~/.config/fish/config.fish に設定します。

fishの文法がbash/zshと全然違う!

そうなんです。

ちょっと独特。

Shell Translation Dictionary · fish-shell/fish-shell Wiki · GitHub

bashの文法との対比表があるので、見比べながら書いたらよいかも。

↓設定に必要なものだけ書いておきます。

PATHの設定

export PATH=/usr/local/bin:$PATHをどうするか?ですが、

set -x PATH /usr/local/bin $PATHで大丈夫そう。

aliasの設定

alias rm='rm -i'alias rm 'rm -i'みたいな感じでいけます。

最終的な ~/.config/fish/config.fish

あってるか自信ないですが、いちおう動いたので、一旦これで。 https://github.com/yukidarake/dotfiles/blob/master/.config/fish/config.fish

あとがき

私は、これまでzsh + tmux + vimという感じで開発してきて、zshとかターミナル開発環境の知見をコツコツ蓄えてきました。

が、今はWindowsでジャヴァジャヴァしている関係でzshとかターミナル開発環境を整備する意欲がなくなってしまいました。

そんな折、Windows/MSYS2環境でbashが非力で辛いし、zshちゃんと動かんし、じゃあfishどうだろう?と導入してみたところ、えらく気に入ってしまったので、家のMacにも入れました。

この記事を読んでピンと来た人、ぜひ一度fishをお試しください。

(またconfig.fishの書き方に自信がないので、経験者の方、アドバイスあれば、ぜひ教えてください)

静的ファイルを配信する場合にはパスにバージョンを含めるのがいいんじゃなかろうか

最近、思っていることを。

なお、バージョンとは言ってますが、Gitのコミットハッシュ値でもUnixタイムスタンプでも何でもいいです

静的ファイル配信パターン

WEBアプリで静的ファイルを配信するパターンは以下3つあるんじゃないかとなんとなく思っています。

1. パスに特になにもつけない

<link rel="stylesheet" type="text/css" href="/static/css/hoge.css" />
<img src="/static/img/hoge.png" />
<script src="/static/js/hoge.js"></script>

2. パスにクエリストリングでバージョンを付ける

<link rel="stylesheet" type="text/css" href="/static/css/hoge.css?v=1" />
<img src="/static/img/hoge.png?v=1" />
<script src="/static/js/hoge.js?v=1"></script>

3. パスにバージョンを含める

<link rel="stylesheet" type="text/css" href="/static/v1/css/hoge.css" />
<img src="/static/v1/img/hoge.png" />
<script src="/static/v1/js/hoge.js"></script>

この中でどれがいい?

1はいろいろ辛そうなのでなしとして、2よりも自分は3がいいと考えています。

以下、その理由をば。

任意のタイミングで確実にリリースできる

これは2のパターンでも当てはまるので、3だけではないですが。

リリースしたタイミングで新しいファイルとしてロードされます。

クライアントのキャッシュを気にしないでも大丈夫。

新旧のバージョンが混在できる

LBから切り離して、アプリサーバを1台ずつローリングアップデートするパターンなんかでも問題なく。

古いアプリサーバにアクセスしたクライアントは古いバージョンのファイルを見て、新しいアプリサーバにアクセスしたクライアントは新しいバージョンのファイルを見て、動作します。

2だと(初めてアクセスした|キャッシュの期限が切れた)クライアントがサーバ側が古い状態で、最新の静的ファイルにアクセスしてしまう可能性があるかと(ブルーグリーンデプロイメントしているなら問題ないかもしれませんが)

事前にリリースできる

現在動作しているアプリには影響を与えず、安心安全に本番環境に事前にリリースできます。

これは2だと無理ではないでしょうか。

補足

ディレクトリではなく、ファイルにバージョンを含めるパターンはどうか?

<script src="/static/js/bundle-abcdefg1234xxxxxxxx.js"></script>

的な。CSS/JSはいいですが、画像のことを考えるとディレクトリにバージョンを含めたほうがいいんじゃないかと思います。

まとめ

久しぶりにブログを書きました。

もし違うよとかもっといい方法があるよということであれば、コメントしていただければ幸いです。

ではでは。

Windowsを少しでもMacの環境に近づける

最近転職しました。

で、現状、PCがWindowsしかない + VirtualBoxとかVM使う系禁止という縛りがあるわけです。

というわけで最近のWindowsMacに近づけられないかという記録をば。

Homebrew(Cask)が恋しい

Chocolateyというブツがありました。

chocolatey.org

Windows用のパッケージマネージャだそう。

Homebrew(Cask) 同様

choco install vim とかでいろんなアプリをインストールできます。

※ただし、もちろんコマンドプロンプト or PowerShellから!

Alfredが恋しい

ランチャーがないのが辛い。

いくつか候補があった中で、Woxにしてみました。

gigazine.net

が、クリップボード履歴とかスニペット機能がない。。

しゃーなくこちらを導入。

クリップボード履歴と定型文機能があります。

forest.watch.impress.co.jp

窓の杜とか久しぶりなんだが。。

ターミナル環境が恋しい

で、最大の問題がUnix系のコマンドが使えないこと。

CUI大好き人間だったので、ないのが辛い。。

Cygwin?いやいや・・・

coLinux

昔使ってたなぁと思ってみてみたら、

http://www.colinux.org/

どうも開発は止まっているよう。

まぁ、今の時代にあんま需要なさそうだしね・・・

MSYS2(Git for Windowsにも付いてくる)

qiita.com

なものがあると。

この辺も参考になるかもしれません。 d.hatena.ne.jp

これだ!と思ったが、自分の環境では動かないので断念。。。

Babun

こんなものがあるそう。

Babun - a windows shell you will love!

一言でいうと使いやすくしたCygwin

いちおう動いたけど、キーをタイプしてレスポンスが遅いのが辛い。。

ConEmu

Unix系のツールが揃うわけではなく、 単なる端末エミュレータだけど、コマンドプロンプトよりは幾分まし。

conemu.github.io

いろいろやったけど、、、

やっぱり無理ある。。

まとめ

5年ぶりくらいにWIndowsを触ってみて、それなりに進化はしているのだけれども、 やっぱりMacサイコーという気持ちが強くなりました。

CTRL+N、CTRL+P、CTRL+E、CTRL+A・・・とかのEmacsキーバインド使えないのも辛い。

Bash on Ubuntu on Windowsがちゃんと使えるようになれば、幾分ましになるのかなぁ・・・

ターミナル派の人はHyperTermに近いうちに乗り換えると良いかもしれない

HyperTermというターミナルソフトウェアが大変興味深かったので、そのご紹介を。

hyperterm.org

HyperTermとは?

公式サイトで JS/HTML/CSS Terminal と謳っている通り

Electron + React + Redux製のターミナルです。

他のElectronアプリのご多分にもれず、JavaScriptで機能を拡張できる作りになっています!

公開されてから、まだ1ヶ月そこらですが、現時点で既に6000以上GitHubスターを集めています。

github.com

インストール

今のところMacでしか動かんとのこと。

とりあえず試したい方は https://hyperterm.org/#installation から落とすか

Homebrew Caskを使っている人はいつもの

brew cask update
brew cask install hyperterm

で。

初期設定

通常のMacアプリ同様設定変更できます。

⌘, を押すと、HyperTerm上で設定用のJSONファイル(~/.hyperterm.js )が開きます。

デフォルトのフォントとテーマが気に入らなかったので、↓みたいな感じに変更しました。

{
  config: {
    fontSize: 13,

    // font family with optional fallbacks
    fontFamily: '"Droid Sans Mono for Powerline", Menlo, "DejaVu Sans Mono", "Lucida Console", monospace',

    // 中略
  },
  plugins: [
    'hyperterm-seti',
  ],
}

使ってみた感想

iTermとかと比較しても全く遜色ない感じ。

この使い心地でこの拡張性なら乗り換えよう!と思いました。

が、↓の問題点があったので踏みとどまりました。

現状の問題点

日本語は表示できますが、打てません!

github.com

これが解決されないとメインでは使えないかな。。

その他参考リンク

awesome-hyperterm

https://github.com/bnb/awesome-hyperterm

仕事早いですね〜

テーマやその他プラグインはこちらから探すのが吉です。

日本語の記事

ターミナル作業が爽快になるターミナルエミュレーター: HyperTerm

まとめ

日本語さえ入力できるようになれば、iTermから乗り換えると思う。

Presentational and Container Components

yukidarake.hateblo.jp

結構日にちが経ちましたが、まだボチボチ読まれているようなので、この記事の補足など。

Smart and Dumb Components -> Presentational and Container Components

medium.com

Redux作者の記事ですが、途中で呼び方を変えた模様。

Presentational and Container Componentsの方が好みだとのこと。

Reduxの公式ドキュメントもPresentational and Container Componentsという呼び方になってますね。

http://redux.js.org/docs/basics/UsageWithReact.html#presentational-and-container-components

Presentational Components には Presentational Componentsしか含まれちゃだめなの?

そんなことないと。

Container > Presentational > Container > Presentational

みたいなパターンもあり得ると。

自分も現場で実際にありました。

新たに見つけた他参考になるリンク

AbemaTVでの事例

参考になります!

www.slideshare.net

自分と同じようなことを考えている人

この人はSmart/Dumb Componentsという言う方を好んでいるようです。

なかなかわかりやすいスライド。

speakerdeck.com

ブログはこちら。

jaketrent.com

主人が英語の勉強を始めて185日が過ぎました

yukidarake.hateblo.jp

yukidarake.hateblo.jp

の続きです。

$ date '+%j'
185

だいぶ空いてしまいましたが、185日過ぎてもぼちぼち続けているのでその報告も兼ねて。

気づいたら今年の折り返し地点過ぎてましたね!

3月:モチベーションの低下

中だるみでしょうか。英語を勉強するモチベーションが下がってきました。。

これじゃいかん・・・と思っていたところ、

運良く同僚から、社内の外国人エンジニアを交えての英語ランチというモノに誘ってもらいモチベーション回復。

さらに、ランチ時にあまりにも言葉が出ないので英会話に対する危機意識が高まりました。

4月:DMM英会話を始める

周りでの評判が良かったのと、体験レッスン2回無料という言葉に釣られて、勢いで始めてみました!

↓ コレ。

英会話

結果、良かった!

発音や文法等は相変わらずダメだし、講師から質問されても返せなかったりするものの、英語で話す/書くことへの恐怖心が薄まりました。

また、講師を予約するというシステムに強制力があるのが良かったみたいで、毎朝8時に英会話をしてから出社という習慣ができました。

5月:引き続きDMM英会話

1ヶ月過ぎても良かったので、続けました。

そして、この頃から発音記号毎の発音を3Dで見れるという神アプリを使い始めました。

↓ コレ。

これは発音の教材でよくある英語教師の正面の口元をアップした映像だけではわからない口の中の事情(?)を3Dで解説してくれるというモノです。

リエゾンとか英語の音の変化が何故起きるのか?というのが視覚的に理解できたのでこれは良かった。

発音を勉強したいと思っている人は買いだと思います。

6月:またまたモチベーション低下からのチャットに切り替え

しばらく、DMM英会話を続けていたものの、成長が止まった感が出てきました。

モチベーション的にもなんだか下がってきたのでこれじゃイカンと一度英会話を離れてみることにしました(DMM英会話は退会してもまたいつでも再開可能とのことなので)

次はライティングの練習がしたいと思ったので、Eigoooというアプリを試してみました。

↓ コレ。

これはいつでも(8時30分〜25時)英語の講師の方とチャットができるというサービス。

会社への行き帰りの電車内でもできるので、なかなかいい感じ。

実は去年少し試したのですが、当時は教師から話かけられても会話ができず退散しました。

しかし、DMM英会話のおかげもあり、とりあえず会話が成り立つようになってましたw

注意点としては、フリートーク/本日のTOIECの英単語/本日のテーマ のいずれかに沿ってチャットをする感じでメニューが少なめなので、長期間は継続しづらいかもしれません。

7月以降

Eigoooにもうちょっとなれたら、次は一時期話題になっていたHiNative Trekを試したいと思ってます。

thebridge.jp

月額9800円と、他のサービスと比較するとちょい高いけど、それに見合ったサービスを受けられそうな感じ。

ちなみに、外国語学習者同士で添削し合う HiNative というアプリ上でHiNative Trekのサービスを受けられるようですが、 これの無料機能はすでに使っています。

↓ コレ。

ちょっとした空き時間で自分の作った文章のネイティブの人からフィードバックをもらえたりしてこれもなかなか良いのではないかと。

まとめ

モチベーション的には上がったり下がったりはあるものの、何とか学習を半年続けられています。

英語力上がった!とははっきりとは言いづらいですが、GitHub上でプルリク送ったりとか英語で何かを発信することへの耐性はついてきたかなと。

個人的にはDMM英会話は英語学習に悩む人には一番オススメしたいと思ってます(実際周囲の人にオススメしまくってますがw)

また、数カ月後にどうなったか報告します!