XonshとHyperを勢いで導入した話

# はじめに

寒さがひとしお身にしみるころとなりました。そこでターミナルも衣替えをしようという突然の思いつきから、勢いで[Xonsh](https://xon.sh/)と[Hyper](https://hyper.is/)を導入してみました。それらのインストールからデフォルトのログインシェルとしてまともに使えるようにするまでを書きます。ほとんどハマることもなく案外簡単に導入できました。

## Xonsh

存在は[ばんくしさん](https://twitter.com/vaaaaanquish)のTLで知りました。
[公式サイト](https://xon.sh/)によると、xonshはPythonで動くシェルで、初心者からエキスパートまでを対象としているそうです。シェルでPythonコードが動きます。
1日触ってみた感想としては、固定観念を覆すような変なシェルですが、条件分岐や繰り返しで、`if ... fi`や`do ... done`のようなキモい構文（個人的感想）を強いられず、`for i in range(n):`のような書き方が使えるので、Pythonに慣れていれば案外気持ちよく使えるのではないかといった感じです。

こんなことができます。`$PATH.append()`でPATHを通せるあたり違和感があります。

```shell
$ from os import listdir
$ for name in listdir("."):
..    print(name, end="")
python ruby javascript
$ ls
python    ruby    javascript
$ echo $PATH
/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin
$ $PATH.append("~/study")
/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin:~/study
```

## Hyper

[公式サイト](https://hyper.is/)によると、Electronベースのターミナルアプリです。HTML/CSS/JSで構成されているため拡張が簡単ということらしいです。
詳しいことはよくわかりませんが、Hyperを使っている人のターミナルはだいたいオシャレなイメージがあるので、以前から興味はありました。

以下は公式サイトから引用した画像で、簡単な設定でこんな感じの外観にできます。

![hyper](https://hyper-plugin-screenshots.now.sh/hyper-material-theme.png)

# 導入

## Xonshのインストール

[公式サイト](https://xon.sh/#installation)に従ってxonshをインストールしていきます。

Macの場合はHomebrewでインストールできます。

```shell
$ brew install xonsh
```

どうやら`bash-completion`を入れるとTab補完が効いて良いそうです。

```shell
$ brew install bash-completion2
```

インストールできたらxonshを起動してみます。

```
$ xonsh
                       Welcome to the xonsh shell (0.8.3)                       

   ~ Ever wonder why there isn't a Taco Shell? Because it is a corny idea. ~    

--------------------------------------------------------------------------------
xonfig tutorial    ->    Launch the tutorial in the browser
xonfig wizard      ->    Run the configuration wizard and claim your shell 
(Note: Run the Wizard or create a ~/.xonshrc file to suppress the welcome screen)
```

成功しているとこのような画面に歓迎されます。
試しに以下のようなコマンド（コード？）を実行してみると、

```shell
$ print("hello")
hello
```

しっかりPythonが動いています。

## Xonshの設定

設定はbashやzshと同じで`.xonshrc`に記述します。見よう見まねで自分好みにしていきます。

```python:~/.xonshrc
$XONSH_COLOR_STYLE = "default"
# インデントをタブ4つに
$INDENT = "    "
# 対応する括弧類を補完
$XONSH_AUTOPAIR = True
$XONSH_SHOW_TRACEBACK = True
# いい感じのプロンプトに
$PROMPT = "\n{CYAN}{short_cwd}{branch_color}{curr_branch:|{}}{PURPLE} ❯ "
# brewのパスを通す
$PATH.append("/usr/local/bin")
```

設定を反映させるためにxonshを再起動するとこのような見た目になります。

![スクリーンショット 2018-11-30 23.35.19.png](https://qiita-image-store.s3.amazonaws.com/0/65493/2fca5e39-d001-7a31-7426-0884b11fe5c5.png)

## ログインシェルにする

ログインシェルをxonshに変更してみます。

```shell
$ which xonsh | pbcopy
```

xonshの場所を確認して`/etc/shells`に追加します。

```:/etc/shells                                                                           
/bin/bash                                                                   
/bin/csh                                                                    
/bin/ksh                                                                    
/bin/sh                                                                     
/bin/tcsh                                                                   
/bin/zsh                                                                    
/usr/local/bin/fish                                                         
/usr/local/bin/xonsh
```

あとは、ターミナルの環境設定から開くシェルのパスをxonshのものに変更してやればログインシェルに設定できます。

![スクリーンショット 2018-11-30 23.26.00.png](https://qiita-image-store.s3.amazonaws.com/0/65493/fcd42fc1-d36a-927e-0a45-2f7b6fcc06f7.png)

## Hyperのダウンロード

しかし今回は、[Hyper](https://hyper.is/)を使いたいので、まずはHyperをダウンロードします。
公式サイトからダウンロードして、開くとデフォルトでいい感じの見た目のターミナルが開くと思います。

## Hyperの設定

`⌘,`を押すとテキストエディタが開いて設定ファイルが編集できます。

```js:~/.hyper.js
module.exports = {
  config: {
    // ログインシェルにxonshを指定
    shell: '/usr/local/bin/xonsh',
    ...
  },
  ...
};
```

保存してHyperを再起動すると、xonshがログインシェルになっています。
あとは、好みでもう少し外観の設定をいじってみます。

```js:~/.hyper.js
module.exports = {
  config: {
    // ターミナルの枠の外観設定
    hyperBorder: {
      borderColors: ['#cc6666', '#f0c674'], // 枠の色（2色の間をグラデーション）
      borderWidth: '3px', // 枠の太さ
    }
    ...
  },
  ...
  plugins: ["
    hyper-pane", // 画面分割
    "hyper-tabs-enhanced", // いい感じのタブに
    "hyper-statusline", // 下側にステータスを表示
    "hypercwd", // 新しいタブを開いたときに同じディレクトリへ移動
    "hyperborder" // ターミナルに枠をつける
  ],
  
};
```

こんな感じになりました。そこそこ見栄えのいいターミナルになったのではないでしょうか（yarnのwaringがダサいという話は置いておいて）。

![スクリーンショット 2018-12-03 2.46.00.png](https://qiita-image-store.s3.amazonaws.com/0/65493/0e308940-c163-a229-ab84-46e64f0bdc21.png)

## envの問題

しばらく遊んでいると少し問題が発生しました。

Pythonのバージョンをpyenvで管理していたのですが、どうやら`.xonshrc`でpyenvの初期化をしてもうまくいかないようなので、困りました（rbenvも同様です）。

調べてみると`source-bash`というコマンドでbash用の設定を読み込めるようで、それを試してみたところ、すんなりと動きました。

適当に`.xonsh_profile`というファイルを作成してpyenvとrbenvの初期化を書きます。

```:~/.xonsh_profile
eval "$(pyenv init -)"
eval "$(rbenv init -)"
```

このファイルを`.xonshrc`から`source-bash`で読み込むと、

```:~/.xonshrc
source-bash ~/.xonsh_profile
```

しっかり、pyenv、rbenvが動作していることが確認できます。

```shell
$ which python
/Users/yoidea/.pyenv/shims/python
$ which ruby
/Users/yoidea/.rbenv/shims/ruby
```

# ナウでヤングなターミナルの完成

![スクリーンショット 2018-12-03 3.14.59.png](https://qiita-image-store.s3.amazonaws.com/0/65493/a4a4be70-b040-48c1-8a0d-dbfbd8baf714.png)

シンタックスハイライトがまだ思い通りの色になっていませんが、Hyperとxonshの使用感は快適です。

この先何か問題が発生するかもしれませんが、現段階では、

- Shell ScriptよりPythonのほうが得意
- ターミナルの外観にこだわりたい

という方にはXonshとHyperの組み合わせを強くおすすめできると言えるでしょう。