2015年7月21日シェアツイートシェアブックマーク『Atom』というエディタの名前を聞いたことはありますか?登場したのは2015年と比較的新しいエディタながら、Web開発者が作業を効率化するための様々な機能を網羅している優れものです。拡張機能が数多く公開されたり、人気の拡張機能が標準機能として加わったりと、今も進化しています。使い始めると奥が深い、Atomの基本を簡単にご紹介します。Beta4の画像を使用しています。No.1のCodeCampが運営するプログラミング未経験の方のための学習メディアですCodeCampとは?(受講生体験記)「エンジニアは女性のキャリアとして魅力的」未経験からの転職体験記リモートワーク×多拠点居住の新しい生き方を実現する。便利なパッケージ使用にあたっての注意事項まとめAtomとはまずはAtomの基本情報や特徴などを紹介していきます。Wanstrath氏が「Web技術を用いて、Emacsのように自由にカスタマイズできる新世代のエディタを開発する」という思いから始まったオープンソースのエディタです。バージョン管理システムGitを用いた、ソフトウェア開発プロジェクトの為の共有Webサービス。詳しくは公式サイトをご参照ください。開発が中断された時期がありましたが、2014年2月にパブリックベータ版、そして2015年6月にバージョン1.0が正式にリリースされます。正式版リリースから数か月で月間アクティブユーザー100万人を突破しました。2017年7月時点の最新バージョンは1.19.0(Beta版が複数あります)。Atomのコミュニティにより2200あまりのテーマ、6500弱のパッケージが作られています。一つのウィンドウで単一のファイル、プロジェクト全体、複数のプロジェクトを開くことができる最大の特長はなんといってもその拡張性の高さ。一部の文字を入れるとその後の変換予測一覧を表示する「予測変換」や「キーバインド(ショートカット)」など、Web開発者には嬉しい機能が実現されています。愛さんにプログラミング学習・転職の経験談を伺いました。過去にはビジネスコンテストで優勝した経験もあり、チャレンジ精神が旺盛な彼女がどのようにエンジニアとしての転職を実現したのかを語っていただきました。※三吉さんが受講したコースは[CodeCampGate](https://codecamp.jp/gate)です。未経験からエンジニアに転職するまでを徹底的に支援するコースです。[![image](//s3-ap-northeast-1.amazonaws.com/mash-jp/production/uploads/9901/0e8d3a419c4954dc2561fedc66fd56eebfc73cc7.9930.desktop.png)](http://ac.ebis.ne.jp/tr_set.php?argument=qkDLyMCX&ai=a5964631fbbe7b)Atomの使い方ダウンロードから起動までは、とても簡単です。10の画像です公式サイトからexeファイルをダウンロードexeファイルを実行するとインストール中の画面が表示されます。(この画面のまましばらくかかります。)インストールが終わればソフトが起動します。画像です公式サイトからファイルをダウンロードファイルを実行するとソフトが起動します。初期設定では英語の環境ですが、パッケージを使用して日本語のメニューに変更することができます。(以下Macの例です。Preferences(※環境設定のこと)を選択します。設定画面が表示されます。+Installを選択します。右側の画面が切り替わります。検索ボックスに「Japanese-menu」と入力して「Packages」ボタンを押すと検索結果が表示されます。検索結果の「Japanese-menu」の枠内の「Install」ボタンを押します。メニューが日本語になりました。日本語を含む既存のファイルをAtomで開くと、よくわからない文字が出る、いわゆる文字化けが発生することがあります。この場合は文字コードを変更します。画面右下に、文字コードを変更するエリアがあるので、ここを選択します。文字コードの一覧が表示されるので、ここで文字コードを変更します。JIS)」から試していきましょう。Encoding」を変更します。Atomの標準機能でできることペイン分割(画面分割)一つのファイルを画面分割して表示できます。縦にも横にも分割可能です。タグの折りたたみタグとタグの間を折りたたみ、見やすくします。キーバインド(ショートカットキー)キーバインド(ショートカットキー)を設定できます。初期設定では画面は黒を基調としたモダンなスタイルですが、設定を変えて好きな色・スタイルに変更可能。テーマも無料で公開されており、パッケージと同じようにインストールして使用することができます。作業が捗るパッケージAtomの最大の特徴は、オープンソースでパッケージが数多く公開されていること。欲しいと思った機能がパッケージで実現されていないか探してみてください。選択します2.インストール(+Install)を選ぶと検索画面へ。過去に好評だったいくつかのパッケージはAtomに搭載されているので、設定画面で有効化をすれば利用できます。選択します2.パッケージ(Package)を選ぶと検索画面へ。Packages」のいずれかの欄に結果が表示されます。「有効にする(Enable)」ボタンを押します。※「有効にする(Enable)」が「無効にする(Disable)」になっていれば既に有効化されています便利なパッケージautocomplete-plus予測変換を表示します。このパッケージはインストール済みで、有効化されています。予測変換の機能は他にautocomplete-css:CSSの予測変換autocomplete-html:HTMLの予測変換などがインストール済みです。bracket-matcher対応する括弧を光らせたり、ジャンプしたりできます。color-pickerカラーピッカーを表示します。EmmetEmmetが使えるようになります。Emmetとは主にHTMLやCSSの記述・編集をサポートするプラグインおよび省略記法です。上記画像は「!」を入力後にTabキーを押した後の画面です。html>~の一連の記述が自動で入力されます。このように独自の省略記法で長いコードを記述するので、作業の効率化を図ることができます。Emmetについて、詳しくはこちらの公式サイトをご参照ください。minimapminimapが使えるようになります。minimapとは、今作業しているエリアがコード全体のどこかを示すもの。Textというエディタでも人気の機能です。使用にあたっての注意事項パッケージの検索や巨大なファイルの使用など、操作によっては動作が重くなることがあるので注意が必要です。パッケージを入れすぎて重くなったら、アンインストールを検討しましょう。CodeCamp提供のWebマスターコース当メディアを運営しているCodeCampではWebマスターコースを現役エンジニアのマンツーマンレッスンという形で提供しています。実際にWebサービスをを開発するのでポートフォリオとしても使用できる無料レッスン受講後の申し込みで10,000円クーポンをプレゼントしています!ぜひお試しください。\Webサイト担当者としてのスキルが身に付く/CodeCampの無料体験はこちら▶︎無料体験レッスンの申し込みはスマフォで1分で完了!まとめ以上簡単にご紹介しました。正式版のリリース以降、断続的に改修及びリリースが行われていて、今後も安定性やパフォーマンスの向上、魅力的なパッケージやテーマの公開に大いに期待が持てるAtom。自分に合ったエディタを見つけられていない人、新しい多機能のエディタを探している人は、ぜひ一度試してみてください。家事も仕事もプログラミングも。文先生〉プログラミング学習プログラミングツールシェアツイートシェアブックマーク関連記事サクラエディタ初心者なら必ず入れたい便利機能3選プログラミングツールプログラミング学習プログラミング不要!?驚くほど簡単にクールなWEBサイトが作れる、無料のWEB制作ツール7選。【2020年版】社会人でも通いやすいプログラミング教室5選|選び方の基準も解説プログラミング学習プログラミングスクール・サービス「エンジニアは女性のキャリアとして魅力的」モノづくり好き理系女子がWebエンジニアへ転職するまで受講生インタビュープログラミング未経験で介護師からエンジニアへ。家事も仕事もプログラミングも。受講生インタビュープログラミング習得後、フリーランスに転身。受講生インタビューフリーランス塾講師からエンジニアへ26才で転職。先生の支えがあって成長できました。学習ガイドtwitterLINE。