当記事では、テキストエディタAtomのおすすめ機能を３つ紹介します。
特に初心者の方で、これからAtomを使用してHTMLやCSSをコーディングする方には、とても便利な機能となっております。
今回ご紹介するパッケージは、Atomユーザ必須パッケージと言っても過言ではないので、是非使ってみてください！
１．Atomエディタの入手・インストール
①Atomエディタをダウンロード
こちらの公式サイトからダウンロードしてください。
画面の真ん中右側にダウンロードボタンがありますので、クリックします。
②インストール作業
ダウンロードが完了したら、ダウンロードされたexeを実行しましょう。（AtomSetup-x64 (1).exe）
インストールが完了すると、ATOMエディタが自動的に起動します。
初回起動時は、下記のWelcome画面や設定確認画面が表示されることがありますが、チェックボックスをはずせば次回からは表示されません。
Atomおすすめパッケージ３選
①japanese-menu を使って、Atomを日本語仕様にしよう！
インストール直後のAtomは英語仕様となっています。英語仕様だとエディタが使いづらいという方に、是非おすすめなのが、「japanese-menu」というパッケージです。「japanese-menu」をインストールすることでAtomを日本語仕様にすることができます。では早速、パッケージのインストール手順をご説明します。
メニューバーより、「File」をクリックしてください。
すると、パッケージをインストールする画面が起動します。（下記画面）
下記図のとおり、検索窓にパッケージ名「japanese-menu」と入力して、「install」ボタンをクリックするとパッケージがインストールされます。簡単ですね。
インストールが完了すると、すぐにAtomが日本語仕様に早変わり！やはり日本語のほうが見やすいですね。
②atom-html-previw を使って、プレビュー 機能を追加しよう！
２つ目のパッケージは、HTMLをコーディングする方に、是非おすすめです。
「atom-html-previw」というパッケージをインストールすると、コーディングと同時に入力したHTMLがブラウザでどのように表示されるかが一目瞭然でわかるんです！
通常だと、コーディングした後に、ブラウザを起動して、HTMLファイルを開いて確認する必要があります。しかし、atom-html-previwをインストールすると、ブラウザとAtomをいったりきたりすることなく、即座にAtom上のプレビューで確認することができるんです！
では「atom-html-previw」というパッケージをインストールしてみましょう。
ファイル(F) ⇒ 「設定」 をクリックし、パッケージのインストール画面を起動します。
検索窓に「atom-html-previw」を入力して、パッケージをインストールしましょう。
インストールが完了したら、実際に「atom-html-package」パッケージを使用してみましょう。test.htmlを新規でファイル作成して準備してください。test.htmlには、定番の「Hello World!」とコーディングしてみましょう。
「Hello World!」のコーディングが終わったら、Atom上で、右クリックしてみてください。メニューが表示されますので、そこから、「Preview HTML」をクリックしてください。
すると、画面右側にHTMLが即座にプレビューで表示されます。
ブラウザとAtomをいったりきたりする必要もないため、コーディング直後のHTMLの状態を確認するのにとても便利な機能です！
③autoclose-html を使って、作業速度を倍にしよう！
最後におすすめのパッケージが「autoclose-html 」というパッケージです。
HTMLの言語特性として、コードを書くときは、開始タグと終了タグを必ずセットで書く必要があります。
「autoclose-html 」をインストールすると、「開始タグ」を入力すると、同時に「終了タグ」を自動で表示してくれるんです！
では「autoclose-html 」パッケージをインストールしてみましょう。
インストールが完了しましたら、HTMLファイルを作成して、Atomで開いてみましょう。
ここでは、「test.html」を事例にコーディングしてみます。
最初に h1 タグを記述します。
<h1 と記述して、 > でタグを閉じると・・・
なんと、終了タグの </h1> を自動表示してくれました！
あとは、<h1>と</h1>タグのあいだに、ブラウザに表示する文字を記述すればOK。
「終了タグ」の記述漏れを防止することが出来ますし、
何より、開始タグだけ書けばいいので作業速度も倍速ですね。
まとめ
今回は、Atomの便利機能を紹介しました。
Atomには、紹介しきれないほどの便利な機能がまだまだたくさんあります。
エディターが使いやすければ使いやすいほどコーディングの効率が
アップすること間違いなしです。
徐々に慣れてきたら、この記事で紹介した以外にも、
便利な機能を探してみてくださいね。
今回はHTMLを例にしましたが、Atomは様々な言語を
サポートしていますので、是非みなさんも勉強されている
言語に合わせていろいろ使ってみてください！
