【これからatomでhtmlを書く方必見!】最初に知っておきたい機能

こんにちは、ライターの遠藤です!

今回の記事では、開発者に人気のエディター「atom」でhtmlを書くうえでの便利な機能とパッケージについて紹介します。

「atomを初めてみたけど、普通のエディタと一緒じゃない?」
「htmlがすらすら書けるエディタを導入したい!」
「今書いてるhtmlをリアルタイムで確認できたら便利なのに…」

といったお悩みをお持ちの方へ向けて、

【基礎】atomとは
【基礎】atomでhtmlを書いてみよう
【応用】atomにhtmlのpreview機能をつけよう
【おまけ】その他のおすすめパッケージ

上記のような内容で説明致します。

この記事を読んでいただければ、atom初心者の方がhtmlを書くうえでの導入が理解できます。

ぜひ最後までお付き合いください!

atomとは

まずはじめにatomについて簡単に説明致します。

atomは、GitHub社が提供しているオープンソースのテキストエディタです。

ただ、メモ帳のようなエディタとは大きく異なり、atomではIDEさながらの様々な機能が付いています。

また、拡張機能によって後から好きな機能を追加し、ユーザの必要に合わせてカスタマイズすることも可能です。

多くのプログラミング言語にも対応しており、エンジニアの方に広く使われている注目のエディタです。

atomについて詳しく知りたい方は以下の記事を参考にしてください。

【ATOMエディタまとめ】インストール方法と使い方を紹介!
更新日 : 2021年7月14日

atomでhtmlを書いてみよう

でははじめに、atomでhtmlを書き始めてみましょう。

最初の画面ですね。

ここからどんどん書いていき…、ません!

まずはテキストタイプを設定しましょう。

画面の右下にある「Plain Text」を押します。

すると以下画像のようなテキストタイプを選択するボックスが出てくるので、「html」と入力し一覧から「HTML」を選択しましょう。

これをする事により、基礎的なautocompleteができるようになります。

試しにエディタ画面のところで「html」と入力してみてください。

候補にhtmlと出ていますね。

これをEnterすると、

htmlの基本となるタグが入力されました。

また、画像をご覧いただいてお気づきかと思いますが、テキストタイプの設定で色付けもされるようになります。

以前はパッケージを追加しないといけなかったのですが、今のatomではデフォルトで既に組み込まれているのでとても楽ですね!

atomにhtmlのpreview機能をつけよう

さて、ここでぜひ使っておきたい機能である、プレビュー機能を追加する方法を紹介します。

atomでhtmlのプレビュー機能を追加するには、「atom-html-preview」というパッケージをインストールする必要があります。

まずはその手順を紹介致します。

atom-html-previewをインストールしよう

インストールをする手順は以下になります。

      1. 設定画面を開く

    コマンドパレットから「Preferences」と入力しEnterを押すと、設定画面が表示されます。

    img

    ここで「+Install」を選択します。

      1. インストールするパッケージを選択する

    「Install Packages」の下にあるテキストボックスに「atom-html-preview」と入力し、隣のPackagesボタン(またはEnterキー)を押します。

    すると検索が開始されます。

    完了するとパッケージ一覧が表示されますので、その中から「atom-html-preview」の項目を選択します。

      1. インストールを開始する

    項目を選択した事でパッケージの詳細が出ますので、正しいパッケージであることを確認したら「Install」ボタンを押してインストールを開始しましょう。

    完了すると以下のようにInstallボタンに替わってUninstallボタン等が出てくるので、それを確認したところでインストール完了です。

    実際にatom-html-previewを使ってみよう

    インストールが完了したところで、実際にatom-html-previewを使って見ましょう!

    使い方は簡単です。

    プレビューを表示させたいhtmlファイルを開いた状態で、「Ctrl + Shift + H 」または右クリックで「Preview HTML」を選択するだけで表示されます。

    リアルタイムでプレビューを表示してくれるので、いちいち更新する必要もありません!

    その他のおすすめパッケージ

    プレビュー機能の他にもHTMLを書くうえで便利なパッケージが沢山あります。

    そのうち3つのおすすめパッケージを紹介します。

    なお、これらのパッケージの導入手順はatom-html-previewと同じ要領です。

    パッケージ名だけ変えれば検索ができます。

    tag

    こちらのパッケージは⌥ + ⌘ + .(ピリオド)のショートカットでタグを閉じてくれる機能を付ける事ができます。

    どれをどの順番で閉じれば良いか考えるのって意外と面倒ですよね。

    そんな手間を省いてくれる便利機能です。

    atom-beautify

    字下げ(インデント)がわかりやすくなるパッケージです。

    画像のようなインデントができていない状態で、右クリック→「Beautify editor contents」を押すと…

    ブロック分けとインデント整理がされました!

    先ほど紹介したtagと合わせて使うと便利です。

    color-picker

    こちらのパッケージは色を視覚的に確認できるようになるパッケージです。

    カラーコードを覚えなくても、「⌘ + ⇧ + C」 で以下画像のように色を確認しながら設定ができます。

    まとめ

    いかがでしたでしょうか?

    今回の記事では、

    【基礎】atomとは
    【基礎】atomでhtmlを書いてみよう
    【応用】atomにhtmlのpreview機能をつけよう
    【おまけ】その他のおすすめパッケージ

    を紹介致しました。

    atomはデフォルトから便利なうえ、パッケージを追加すれば更に使い勝手が良くなります。

    この記事で紹介した使い方やパッケージを導入して、快適にhtmlを書いていきましょう!

Writer

遠藤貴大

株式会社SAMURAI

1991年生まれ。双子座。
理系大学で認証システムを学んだ後、アプリ開発者となる。
新しく学ぶ人に寄り添った記事を心がけて執筆します。
芸術が好き。いつか猫と暮らすのが夢。

あなたの目的に合わせた
SAMURAI ENGINEERの運営サービス

SAMURAI ENGINEER Pro

未経験でも挫折しないプログラミングスクール

詳細はこちら

SAMURAI ENGINEER Plus

日本最大級のサブスク型オンラインITスクール

詳細はこちら

SAMURAI ENGINEER Freelance

「一人で稼げる」スキルを身につける

詳細はこちら