Atomの予測補完機能を使ったHTMLのコーディング環境を現役エンジニアが解説【初心者向け】
初心者向けにAtomの予測補完機能を使ったHTMLのコーディング環境について解説しています。テキストエディタAtomの特徴とパッケージの導入方法、開発の際に便利な機能について紹介します。Atomを利用する際の参考にしてください。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
Atomの予測補完機能を使ったHTMLのコーディング環境について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まるでしょう。
今回は、HTMLに関する内容だね！
どういう内容でしょうか？
Atomの予測補完機能を使ったHTMLのコーディング環境について詳しく説明していくね！
お願いします！
テキストエディタの種類と特徴
プログラミングコードを記述をするときにワードやメモ帳に記述してコードを作成できます。
しかし、テキストエディタを利用することで使いやすく素早い記述をすることが可能です。
テキストエディタには見た目の調整がしやすいものやコンパイルが簡単にできるものがあり、コーディングを早くするためにはテキストエディタの利用は必須となります。
様々なテキストエディタがあるものの、用途により使い分けたりすることもできるでしょう。
Visual Studio Code
Visual Studio Codeは、マイクロソフト社が提供をしているエディタです。
コーディングが見た目にも見やすく、使いやすいプラグインが多く存在するため広く使われています。
また、速くコードを完成させたい場合に使いやすいエディタです。
Atom
AtomはGitHubが提供しており、プラグインも豊富でコーディングを速くしたい場合にも使いやすいエディタだといえます。
Gitと呼ばれるプログラミングコードの保存や他人との共有がしやすく、GitHubに保存をすることが容易にできるのが特徴です。
サクラエディタ
サクラエディタは、フリーソフトで長く存在しているため、古いシステムの記述などに使われているエディタです。
JavaやC言語などの歴史の長い言語を編集する場合などに向いており、様々な年代の方がいる現場などでは共通したエディタとして用いられることがあります。
TeraPad
TeraPadは、1966年に公開されたフリーソフトです。
拡張して使うよりもシンプルなエディタとして使いたい方に向いています。
HTMLとCSSの基本を学ぶ場合に、予測補完機能などを使わずに学習用としてTeraPadを使用しているプログラミング教室もあります。
基本的な設定方法とプラグインのやり方
Atomはインストール後にパッケージと呼ばれるプラグインを入れて有効化することで、使いやすい機能を増やしていくことが可能です。
Preferencesのsettingからインストールの出来るPackagesを探します。
基本的なものとしては、日本人ならjapanese-menuを入れたり閉じタグを自動的に入れてくれるtag、プラグラミング言語ごとにアイコンの表示を変えてくれるfile-iconsなどをインストールしていくと良いでしょう。
各プラグインはターミナル上で実行することで下記のように記述し、パッケージをインストールすることも可能です。
また、同様にエディタ自体の見た目を好みの色などに変更するためにテーマをインストールできます。
settingの中にあるテーマの部分から各テーマを検索してインストールするこもできるでしょう。
パッケージをインストールしてできること
パッケージは無数にあり、その中から使いやすいものを適宜選んでいく必要です。
パッケージの中には、信頼のおけないものや実際に使いにくいものがある場合もあります。
インストールをされている数がインストール前に分かるので、多くの人がインストールしているものを選ぶことも判断の一つです。
今回は、日本語メニューや閉じタグが出来るプラグインを明記したものの、そのほかにもコーディングをする上で利便性の良いプラグインがあります。
全角スペースの打ち間違えを防ぐshow-ideoraphic-spaceやパス名を自動で候補を出してくれるautocomplete-paths、CSSのカラー編集をしやすくするcolor-pickerなどのプラグインもあります。
コーディングを速くしたい場合には、Emmetと呼ばれるものもあるため、使い分けていきましょう。
ほかのテキストエディタでも同様のプラグインがあるものの、Emmetの特徴は入力の予測補完機能が優れている点にあります。
HTMLの雛形などのコードや複雑な入れ子の構造などをすぐに記述してくれるため、スムーズなコーディングには欠かせない機能だといえるでしょう。
執筆してくれたメンター
| 木村勇土
TechAcademyの現役メンター。 現在は行政書士事務所を運営しており、お客様にはプログラマーやフリーランサーも多い。 WordPressを中心とした自社のWebサイトの修正などを行なっている。 |
Atomの予測補完機能を使ったHTMLのコーディング環境がよく分かったので良かったです！
ゆかりちゃん、今後も分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、参加してみてください。
