AtomインストールからJavaScriptのコーディング準備まで

atom

長年Javaエンジニアやってきた中で、Vimは結構愛用してきたツールですが、最近はめっきり開発フィールドから遠ざかっていたため、便利な使い方を忘れました。
また、バージョン管理ツールはもっぱらSubversionを使用していましたが、現在はGitが主流となり、時代の移り変わりを感じます。。

昨今、フルスタック言語として大きな興味の渦に巻き込まれているJavaScript関連の技術を習得ことをやっていますが、今度はVimを離れてAtomでJavaScriptをやってみようかと思います。

この記事の目的は、あくまでもJavaScriptを習得するためにエディターとして必要な最低限の環境をAtomで準備することです。
それ以上の機能は今後徐々に整えてきたいと思います。

フロントエンドエンジニアになりたい人の Webプログラミング入門

Atomのインストール

AtomはGitHubが開発しているオープンソースエディターであり、デフォルトでGitとの連携も可能のようです。

Sunsetting Atom
We are archiving Atom and all projects under the Atom organization for an official sunset on December 15, 2022.

サイトにアクセスすると自動的にアクセスしているOSを識別して、適切なインストーラーがダウンロードできます。私はWindowsなので、「Atom-Setup-x64.exe」をダウンロードしてインストールしました。

インストール手順は以下を参考にしました。

Sunsetting Atom
We are archiving Atom and all projects under the Atom organization for an official sunset on December 15, 2022.

ダウンロードしたファイルを起動すると自動的にインストールが開始されます。そしてインストールが完了するとatomエディターが自動起動します。

起動直後の画面です。今からワクワクしますw

インストールが完了すると、デスクトップにatomのショートカットが作成されます。

メニューの日本語化

まずは日本語化しましょう。

日本語化メニューを提供しているパッケージがあるので、それをインストールします。インストール自体はAtom自体から実施できます。

Sunsetting Atom
We are archiving Atom and all projects under the Atom organization for an official sunset on December 15, 2022.

Atomでは拡張機能のことをパッケージというみたいです。呼び方はアプリケーションによってパッケージだったりプラグインだったりしますね。

AtomのFileメニューから「Settings」を選択し、「Install」を選択するとパッケージインストール画面が表示されるので、「japanese-menu」と入力します。上記で紹介したパッケージが表示されるので「install」を実行しましょう。

しばらくするとインストールが完了し、自動的に日本語に切り替わります。

これで日本語化されました。

JavaScriptを少し書いてみる

それでは少しJavaScriptを書いてみましょう。

コードを書いているときのコード補完機能はさすがに標準で使える状態です。
対応する括弧の自動挿入や波括弧{}後の自動インデントも素敵な感じですね。
デフォルトのカラースキームはイマイチビミョーな感じですが、そのうちお気に入りのスキームパターンに変更するでしょう。
今はデフォルトでここまでコードが書きやすいのであれば全然オッケーでしょう。

ですが、、元Vim使いの私にとっては、Vimのキーバインドのないエディターは編集し辛くてしょうがないので、Vimキーバインドパッケージを探してみます。

Vimキーバインドパッケージのインストール

Vimキーバインドのパッケージは様々ありますが、どうやらvim-mode-plusというパッケージがよさそうです。

というのも、もともとvim-modeというパッケージがgithubから提供されていましたが、現在はdeprecatedとなっており、代わりにvim-mode-plusを使用せよという説明がされているためです。

ということで、vim-mode-plusをインストールします。

インストールすると、vim-mode-plusで設定できる項目が表示されます。
必要に応じて後で変更するかもしれませんが、今は取り急ぎデフォで使っていきます。
※とにかく、今は早くJavaScript書きたい。。

もう一つ、vim-mode-plusだけでは少し足りてないのが、exモードのコマンドです。
コロン+コマンドですね。
例えば、:wで保存とか、:1,$s/置換元/置換先/gでファイル全体を一括置換とかで、vimユーザーにとっては必須機能です。

これは少しだけex-modeで実装されています。
注意が必要なのが、vim-mode-plus-ex-modeというパッケージもあり、そちらを選んでしまいそうになりますが、こちらをインストールしても、「ex-modeを使用せよ」というメッセージが表示され、機能しませんでした。

「少しだけ」という意味は、未対応な機能があるのです。
例えば、置換処理はグローバル一括置換しか対応していません。ファイル内の”true”というファイルを”false”という文字に確認しながら置き換えたい場合、vimでは「:1,$s/true/false/cg」というexコマンドで実現できますが、このex-modeパッケージでは「cg」という”confirm and global”、これができません。

むー、、さすがにvimの使い勝手を求めるのは難しそうです。。

タブスイッチャーパッケージのインストール

今時点の状態でAtomを使ってUdemyの講座で提供されている様々なサンプル実装をやってみました。
その時に、便利で面倒なタブの存在に気が付いたので、何とかならんかと思い、このパッケージにたどり着きました。

例えば、1つのサイトを開発している最中は、htmlやらcssやらjsやら複数のファイルを相互に行き来しながらコーディングを進めるので、各ソースをタブで開いておいて必要に応じていつでも参照や編集ができる状態にしておくのはとても便利です。

ですが、そのたびにいちいちタブを切り替えるためにマウスを使って操作するのは、かなりストレスになることに気が付きました。
vimでは、window分割機能やらバッファ機能やらを使って、ほぼマウスを使用せずに複数ファイルを編集できていたので、マウスを使わないとコーディングができないというのは何ともストレス過多の状態です。

そこでAtomでもマウス無しで同じようなことができないかと探してみたら、ありました。Tab Switcherなるパッケージを見つけました。
見つけた瞬間歓喜ですw

Sunsetting Atom
We are archiving Atom and all projects under the Atom organization for an official sunset on December 15, 2022.

これをインストールしました。

後で対応しているvimキーバインドも含めて、Atomエディターで頻繁に使用するショートカットも整理して紹介しようと思いますが、取り急ぎタブ切り替えはAlt+[、もしくはAlt+]です。

選択可能なタブ(で編集しているファイル名)が表示されて、好きなタブを選択できます。

いやー、これメチャメチャいいですよー。

マウス操作が不要なタブ切り替えによる作業の効率化はハンパないです。
3歩ぐらい楽園に近づきましたw

まとめ

AtomでJavaScriptを開発する最低限の環境は整いました。
今は、とにかくJavaScriptを習得することを目的としてAtomを使うことに専念します。

記事の最初にも書きましたが、今後、例えば、Atom上からJavaScriptを実行したり、デバッグしたり、効率的なコーディングをするための便利な機能について、徐々に整えてきたいと思います。

コメント

タイトルとURLをコピーしました