はじめに

以前私がWebサイトの制作の勉強をしている時に使用していた、ATOMというテキストエディタについて紹介したいと思います。

まだ使用するエディタが決まってない方の参考になればと思い、記事を書きました。

 

特徴

ATOMの特徴としては以下のようなものがあります。

・オープンソースであり完全に無料で使用できる

・コーディングの際にコードの補完機能がある

・パッケージという追加機能をインストールすることで、自分好みのエディタにカスタマイズできる

 

目次

１．ATOMの起動手順

２．事前設定

３．ファイルの作成や既存ファイルの開き方

４．使用できる便利な機能について

５．パッケージのインストール

 

１．ATOMの起動手順

ATOMを起動するにはまず、下記のサイトから起動用のファイルをダウンロードします。

https://atom.io/

上記画像のDownloadをクリックします。

ダウンロードしたファイルをダブルクリックすると、自動的にATOMが起動します。

起動されると最初に上記の画面が表示されます。

右上の青のボックスは、「No,Never」を選択しておけば以後表示されなくなります。

また「Welcome Guide」,「Telemetry Consent」というパネルが表示されていますが、これらは使用ガイドとATOMの改善に協力するかどうかの確認のパネルです。

ただ×ボタンで閉じると、起動するたびに毎回表示されてしまいます。

ファイル等の作成など、作業しているとどんどんパネルが増えていくため、不要なパネルが表示されないよう下記の手順で進めます。

左側の「Telemetry Consent」の方はどちらか回答すれば以後表示されなくなります。

右側の「Welcome Guide」の方はチェックボックスのチェックを外します。

 

２．事前設定

次に実際にファイル等作成する前に、下記の設定をしておくと画面が見やすくなります。

・タブ、スペース等の可視化

・文字列の折り返し

まとめて設定していきます。まずは、Flieタブ→settings→Editorと選択します。

次に、タブやスペース等を可視化するため、「Show Invisibles」にチェックを入れます。

続いて、文字列の折り返しを設定するため、「Soft Wrap」,「Soft Wrap At Preferred Line Length」の２つにチェックを入れます。

画像の上部にある「Preferred Line Length」で、一行で表示する文字数を指定できます。(defaultでは８０）

 

３．ファイルの作成や既存のファイルの開き方

Fileタブから「New File」や「Open File」を選択することで、新規にファイルを作成したり既存のファイルを開くことができます。

また「Open Holder」を選択すると、フォルダごと中に入っているファイルをまとめて開けます。

 

４．使用できる便利な機能について

次にATOMで作業をする際の便利な機能をいくつか紹介します。

 

複数のファイルを同時に表示

表示したいファイルの上で右クリックします。

「Split Right」を選択すると画面が分割され、下の画像のように右側に選択したファイルが表示されます。

Webサイトの作成時にHTMLファイル、CSSファイルを同時に表示させておけば、ファイルを切り替える必要がないため効率的に作業できます。

 

コードの補完機能

コーディングをする際にコードを補完してくれる機能があります。

画面右下の言語のリストから、これから作成するものを選びます。

途中まで入力すると、選択した言語の候補が表示されます。

Enterを押すと、下の画像のようにコードが補完されます。

 

５．パッケージのインストール

最後にパッケージのインストールについて紹介します。

パッケージをインストールすることで、様々な機能をエディタに追加することが出来ます。

実際にいくつかWebサイトを制作するうえで、便利なパッケージを入れてみたいと思います。

 

Color Picker

まずは「Color Picker」というパッケージを入れてみます。

パッケージのインストールには、Fileタブ→settings→installと選択します。

検索ボックスでインストールしたいパッケージ名を入力します。

該当のパッケージが表示されたら、Installをクリックします。

右クリックすると、メニューの中に「Color Picker」が追加されているので選択します。

実際の色とコードを画面上で直接確認できるようになります。

 

highlight-selected

次に「highlight-selected」というパッケージを入れてみます。

こちらは選択した文字列がファイル内に複数ある場合、それらをハイライトで表示してくれる機能になります。

先程同様、Fileタブ→settings→installと選択します。

該当のパッケージをインストールします。

選択した文字列と同じものがハイライト表示されます。

同じクラス名を複数個所に設定しているときなどにこの機能があると、どこに設定しているのかすぐに確認ができるので便利です。

 

上記で紹介した以外にもまだまだ便利な機能が多々あり、パッケージも非常に数多く公開されています。

いろいろと使ってみて自分好みにカスタマイズしていくのも面白いかと思います。