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

書き初めとして open-package というAtom のパッケージを作って公開した

プログラミング Atom JavaScript

Atom に慣れてきたので、2017年の書き初めも兼ねてパッケージを作ってみることにした。
個人的信条として、エディタに限らず何かしらのプラグインを作る時には、まず既存プラグインのコードを色々眺めるのが鉄則だと思う。

  • 実現したい機能・UI の参考になる
  • ドキュメントには書かれていない API の使い方がわかる
  • プラグイン作成のプラクティスを探れる

ということで、開発中に既存パッケージのコードをさくっと読めるように、インストールされているパッケージのディレクトリを Atom で開く open-package というパッケージを作った(Github レポジトリはこちら)。

apm install open-package

起動すると Command Palette 風の UI でパッケージ名を絞込み検索できる。パッケージを選択すると新しいウィンドウでパッケージのコードを開くことが出来る。

以下、実装や実際にプラグイン開発をしてみて思ったことなどについて。

注 : プラグイン開発の How To 記事ではないです。

実装について

プラグインのコードは CoffeeScript と ES6 のどちらでも書けるようだが、CoffeeScriptAtom 以外で使う場面が思いつかなったので ES6 で書くことにした。はじめての JavaScript

また、UIにはatom-select-listSelectListViewfuzzaldrin-plusによる絞込みを使っている。この辺は組込みのcommand-palette(Shift-Ctrl-P or Shift-Cmd-P で出るアレ)を大いに参考にした結果である。

Core の API は主に以下を使った。

API 概要
atom.packages.getAvailablePackageNames() インストール済みパッケージの一覧を取得
atom.packages.isBundledPackage(name) パッケージが組込みか否かを判定
atom.packages.resolvePackagePath(name) パッケージのファイルパスを取得
atom.open({ pathsToOpen: paths }) ファイル/ディレクトリを開く

できてないこと・これからやりたいこと

組込みパッケージのオープン

残念ながら現在はlanguage-rubycommand-palleteなどの組込みパッケージを開くことができない(SelectList の選択肢にも出していない)。

組込みパッケージのコードは参考資料として非常に有用なので、なんとか対応したい(たぶん適当なパスで asar を解凍する必要がある)。

テスト作成

まだ何も書いてないですごめんなさいマサカリ投げないで。

ぶっちゃけJasmineの使い方も、パッケージのテストで何をどうアサートすべきかも全然わかってない。この辺も既存コードから見ていきたいところ。

テスト実行の自動化

せっかくテストが実行できるので、CI環境でテストしたい。 Atomパッケージはマルチプラットフォームでテストしたいので、Travis CI(for Linux & Mac)とAppVayor(for Windows)が理想形?

publishの自動化

手元でapm publishを実行するのは面倒なので、「v0.1.0というタグをGithubにpushしたら、CI環境で0.1.0としてpublishする」という流れにしたい ……と書いたところで

  • 手元でタグを Github に push したら自動でapm publishが走る
  • 手元でapm publishしたら自動でタグが作成されて Github に push される

の2つはどちらも労力が変わらない気がしてきた。(むしろ CI 設定が必要ない分、後者の方が楽?)

Sublime Text との比較

Sublime Text でもいくつかプラグインを作っていたので違いについて考えてみた。

API の粒度

「UI は HTML・CSS で構築する」という精神なのか、Atom は UI に関する API は少ない(と思う)。 Sublime では Command Palette のような UI は API を使ってかなり簡単に実現することができた(裏を返せば、API が無い UI の実現は困難だった)。Atom で同じことをやろうとすると、自分で DOM を構築して絞込み検索も自前なりライブラリなりを使わないといけないのでなかなか面倒。

一方、エディタとしてのコア機能に関する APISublime Text と同等かそれ以上に揃っていると思う。他のworkspace(≒ ウィンドウ)の情報を取得するAPIが見つからなかったが、たぶん探せばあるんだと思う。たぶん。

ドキュメント

ドキュメントは Atom の方が充実しているし、読みやすい。
API関数毎に Github の該当コードへのリンクが張ってあるのが地味に嬉しい。これはオープンソースならでは、という感じ。

エコシステム

これは明らかにAtomの方が優れている。 開発ツール、テストフレームワークnpmとの結合、CLI によるパッケージ公開など、必要なものがちゃんと揃っている。 Github と必要以上に密結合になっている気もするが、まあ AtomGithub 社製であることを考えると多めに見るか、という気持ち。

おわりに

まだまだ写経の域を出ていないが、とりあえず見様見真似でコードを書いて公開するところまではできた。

あと、なんだかんだで能動的に JavaScript を書くのはほぼこれが初めてだと思う。 普段 Web なことはロクにやっていないので色々と手間取ったが、Atomプラグイン開発で学んでいけたらと思う(なんか逆な気も)。

思い出せる限りの参考資料はこちら: