Julia のIDE Juno を使って快適なJuliaとの生活をする手引き(前半）

# 注意

- Juno のメンテナーが VSCode に乗り移る動きがあります．今後は VSCode を使っていくと良いと思います．

  - [JuliaCon 2020 | (Juno 1.0) VSCode for Julia 1.0 | Sebastian P., Shuhei K., David A.](https://youtu.be/rQ7D1lXt3GM)
  - [JuliaCon 2020 | Using VS Code for Julia development | David Anthoff](https://www.youtube.com/watch?v=IdhnP00Y1Ks&t=3s)

# 本日は

昨年は Julia のバージョンが 1.0 がリリースされ，パッケージなどの対応が行われる最中だったのでパッケージが動いた・動かないで色々悲鳴をあげてましたが，ここ最近はだいたいの基本的なパッケージはすんなりインストールもできるようになってきています．技術書典ではJuliaの本が発売され（当日は勉強会があって参加できなかった・・・），6月に発売された [WEB+DB PRESS Vol.111](https://gihyo.jp/magazine/wdpress) には Juliaが紹介され，実際に業務・OSSの開発で使われている方によるJuliaの言語の基本コンセプトの紹介から文法・可視化ツールの使い方，パッケージ作成入門まで広く紹介されてるようになり，少しずつプログラミング言語としてのJuliaの認知度も少しずつ増えている気はします．一方で，Juliaのソフトウェア開発をサポートする上で便利なツールも進化しています．

最近 Juno がアップデートされたようですね 

See [ANN: Juno 0.8.8](https://discourse.julialang.org/t/ann-juno-0-8-8/26214)

今回はその一つとして IDE の Juno を紹介します．

# Juno とは

[Juno](https://junolab.org/) とは エディタのAtom上で構築されたJuliaの統合開発環境です.

> Juno is an Integrated Development Environment (IDE) for the Julia language. It provides powerful tools to help you develop code. Juno is built on Atom, a text editor provided by Github. Juno consists of both Julia and Atom packages in order to add Julia-specific enhancements, such as syntax highlighting, a plot pane, integration with Julia's debugger (Gallium), a console for running code, and much more.

[Juno Documentation より抜粋](http://docs.junolab.org/stable/)

# どんなことできるの？

パッと見て”お，こういうことができるのか！”というのを感じることができるスクリーンショットを作りました．

<img width="1912" alt="Screen Shot 2019-07-12 at 21.47.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135978/8d5d8c9c-dd19-8e90-6420-12e2fe2593a0.png">

- コードもかける．
- シンタックスハイライトもできる，
- コードの補完もサポートされた，
- 関数に付随するドキュメントや識別子の検索・閲覧ができる，
- 描画系のライブラリの可視化結果を表示することができる
- デバッガが動く，特定の条件下で break をサポートするデバッガ

などなどｺﾚﾎｼｶｯﾀﾔﾂと感じる機能が増えてきています．スクリーンショットでは表現しきれてませんが
- リモートのPCのJuliaを動かす（動作未確認）
- Docker 上のJuliaのREPLを動かす
- コードの整形
- Settings での UIの調整

といったこともできるようになっています．一方でUIがJulia専用に化けてしまいますので普段から業務で別の言語でAtomを使っていている方は導入には慎重になった方が良いです．

# 導入しよう

## 準備

- Juliaはここから導入できます．https://julialang.org/downloads/
 - まずはダウンロードしてJuliaのパスを指定しターミナルでJuliaが動くか確認しましょう.
 - MacはJuliaのバイナリーどこにあるかわかりにくいですが多分ここにあります：

```
/Applications/Julia-1.1.app/Contents/Resources/julia/bin/julia
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135978/fe586282-acab-07b8-79bd-252d7ad84b60.png)

こんな感じのができたらOKです．

- 開発環境としてのJunoはAtom上で動作するのでAtomを入れる必要があります．
  - https://atom.io/

## Juno 導入

See also(http://docs.junolab.org/latest/man/installation/）

Settings （Macだと `cmd+,` 他は `ctrl+,`がショートカットキー) -> Install -> Install Packages まで進んで下記の画像のように　uber-juno を見つけます．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135978/fd29b177-9b1d-f3d7-d3c0-1e8f3ddc57c2.png)

基本的にこれをインストールすればAtomの依存パッケージは導入できるので待ちます．必要に応じてAtomの再起動をします．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135978/5498ded2-7bec-82f6-579b-4a39470ea244.png)

ここではYesを押します．


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135978/518face8-1e36-64e1-7257-a09ccbf07d16.png)

エディタ左側に上図のようなボタンがズラーっと表示されるはずです（縦長なのであえて画像を転置しています．）．各々のボタンの意味はマウスを重ねると説明が見られますのでそちらで確認します．

## Remark

すでにJunoの環境を整えて久しぶりに動かす方はAtomのパッケージのアップデートが必要です．加えて Atom.jl のアップデートも必要です．

```julia
julia> using Pkg; pkg"update Atom"
```

# 動かそう（REPLで）

下から４番目にある `>_` のようなアイコンをクリックまたは Cmd+J+O でAtomのREPLが起動します．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135978/f8e2a6cd-e910-500a-acb4-e3418723df11.png)

ここで色々な計算をさせることができます．REPLを終了させる場合は四角マークのStop Julia(または `Cmd+J+K`)で終了させます．
余談ですが，julia-client の設定でも見られるようにJuliaのREPLの起動を高速にするためにプロセスをあらかじめ立ち上げておいて交互にホイホイと入れ替えるようですね．賢い．ここを切り替えるとリモートのプロセスを立ち上げられるんだと思います（未検証）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135978/f1be9140-b5ab-a94d-9c92-e5267b368e51.png)

# 動かそう(ファイルで）

ファイルにコードを書いて実行させたいでしょう．新しいファイルを作り （`</>` のアイコンをクリック）そこでコードをちらほら書きます．Juliaの拡張子は `.jl` です．なんでもいいですが例えば下記のようなコードを書きます．

```julia:sample.jl
# %%
i =1
j = 2
k= 3
@show i,j, k
# %%
@show 2i+3j-1k
```

とりあえず動かしたい場合は，ファイルにフォーカスが当たっている状態で 再生ボタンまたは `Cmd+Shift+Enter` or `ctrl+shift+enter` で実行することができます．
例えば次のような結果を得ます．

```julia
(i, j, k) = (1, 2, 3)
(2i + 3j) - 1k = 5
```

カーソルを当てた行または選択した範囲だけを実行する場合は `shift+enter` で実行できます．

See also [Basic Usage](http://docs.junolab.org/latest/man/basic_usage/) 


## `# %%` is what ?

Jupyter Notebook と同様にセル（Cell)という単位で実行をすることができます `# %%` ではじめと終わりを指定することでその中を一つのセルとして認識させることができるようです．これはJuliaだけでなくVSCode上でPythonのコードをノートブック形式に変換（またはその逆）をするためにも使えるテクニックです．なんにせよ Atom上では `option+enter` or `alt+enter`　で実行できます。

[See also Cell evaluation](http://docs.junolab.org/latest/man/basic_usage/#Cell-Evaluation-1)

ということなのでJupyter Notebook便利だけれどAtomエディタのキーバインドを使いたい, ipynb だと出力ファイルが汚い．バージョン管理しにくいという問題点を解消することができますね．

## workspace で変数を確認

本の見開きのようなアイコンをクリックして下図の段ボールをクリックしてMainと入力します

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135978/d5d233c6-3b8f-d1a4-489e-91c390b3e994.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135978/8573ae8a-9b9e-084f-2596-3c9021452617.png)

こうすると実行し評価された変数の値を閲覧することができます．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135978/9be5d1df-2fa2-ca5e-6793-3b6858a1059b.png)

余談ですが `ans` はREPLで最後に実行したコードの戻り値が格納されます．ipython のアンダースコアー `_` に相当するものです．

# コード整形したい

サンプルとして紹介したコードはスペースが空いてたり空いてなかったりして気持ち悪いですよね．そんなあなたに `Cmd+J+F` です．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135978/be726ba6-71b7-6648-1b5f-e21f778aaead.png)

上図のように縞々模様が現れしばらくするとフォーマットツールの処理が終わり体裁が整います

```julia:sample.jl
# %%
i = 1
j = 2
k = 3
@show i, j, k
# %%
@show 2i + 3j - 1k
```

こっちの方が見やすいですよね．フォーマッタもJITコンパイルされるせいか初回は遅いです．一度フォーマッタツールが動くとそれ以降はサクサクといった感じ．

Juliaを導入して開発するに当たりJITコンパイルのオーバーヘッドは（特に描画系のパッケージ）悩みのタネです．基本的に `$ julia <file名>` で実行という運用をせずにREPLないしはノートブックを常時立ち上げて運用するのが良いと思います．性能が高い CPU を積んだマシーンでJITを殴るか, PackageCompiler.jl でAOTによるパッケージのコンパイルをするという手段があります．Julia自体他の言語よりも若いので今後改善されていくと思います．

# 後半に続く

思ったよりも長くなりそうだったので[後半戦](https://qiita.com/SatoshiTerasaki/items/ee1ababe39e8ae347ff3) は別の記事にします．