【GIF付解説】Atomエディタのインストール/日本語化/使い方/便利パッケージまとめ

atom
ハナキ ノボル
書いた人 ハナキ ノボル

どうも!ハナキノボル(@novl_h)です。

今回はプログラミング初心者に最適なテキストエディタ『ATOM』についてご紹介していきます。

ATOMはプログラミング初心者から上級者まで全ての方にオススメできるテキストエディタといえます。この記事では、これからATOMを使い出す方が押さえておくべき情報をお届けします。

この記事を読んで、ATOMの基本的な使い方や鉄板パッケージをインストールしたら、下記の記事を見てさらにカスタマイズしてみてもいいかもしれません。

他のエディタにも興味がある方はこちらの記事を見ていただければと思います。

そもそもテキストエディタとは?

ご存知の方からしたら当たり前のことですが、ここでは入門者の方もいらっしゃるので一応解説しておきます。

テキストエディタとはその名の通り、テキスト(文章)を編集するためのアプリケーションです。プログラミングでは、プログラム(コンピュータへの命令)をテキストで書いて、実行します。

ですので、プログラマーにとってのテキストエディタ選びは「プログラマー人生が変わる」ほどの選択になります。

ATOMが初心者におすすめな理由

無料なのに高機能

まず、一つ目に、ATOMは「フリーソフト」だという点です。つまり無料で使うことが出来ます。

インストールや設定も非常に簡単で、この記事を読めば、今すぐ使いはじめることが出来ます。また、無料にも関わらず、非常に高機能です。プログラミングを効率良く行う上で必要な機能はほぼそろっています。

拡張性がある

もともと、高機能なATOMですが、『パッケージ』と呼ばれる、拡張機能をつけることが出来ます。

このパッケージをインストールすることによって、自分ごのみのテキストエディタ」を創ることが出来ます。プロのプログラマーは、商売道具のテキストエディタを常にカスタマイズしています。まるで、侍が刀を研ぐようですね。

このパッケージ機能のおかげで、他のテキストエディタにできて、ATOMに出来ないことはほぼ存在しないです。

将来性がある

このATOMはGithubという、プログラマなら誰でも知っているような有名な組織が開発しています。さらに、オープンソースという技術を取り入れているので、世界中の優秀なエンジニアが日々ATOMを進化させています。

ですので、これから先も最強のテキストエディタはATOMである可能性が高いのです。

ATOMのインストールと日本語化設定

さて、テキストエディタとATOMの良さを理解した所で、早速ATOMをインストールしてみましょう。

ATOMのインストール

まずは「ATOM」をダウンロードしましょう。「Download」をクリックしてインストールをするだけです。
スクリーンショット 2015-12-07 20.40.00

ダウンロードとインストールが完了したら、開いてみましょう。

ATOMの起動方法

Macの場合

インストール先(主にアプリケーションフォルダ)に入れているATOMをダブルクリックして起動出来ます。

また、普段からターミナル(コマンドで操作する黒い画面)を使うプログラマは、

というコマンドから起動させることが可能なので作業が捗ります。

atom_cmdopen

Windowsの場合

インストールしたタイミングでデスクトップにショートカットができています。
そこからダブルクリックで起動しましょう。

テキストエディタの起動設定をATOMに変更

テキストファイルやHTMLファイルなど、「このファイルをダブルクリックで開いた時にはATOMを使いたい!」という場合があるかと思います。
特にATOM以外のテキストエディタも利用している場合、この設定をしておくと捗ります。

Macの場合

対象のファイルの種類(例の場合は”index.html”というHTMLファイル)をCtrlを押しながらクリックします。
出てきたメニューの「情報を見る」をクリックして、「このアプリケーションで開く:」という部分でATOM.appを選択します。
最後に「全てを変更」のボタンを押して確定させれば、指定したファイルの種類(例の場合HTMLファイル)をダブルクリックするとATOMが起動するようになります。

mac_atom_default

Windowsの場合

ATOMで開きたい対象のファイルの種類を右クリックした後、「プログラムから開く」から「規定のプログラムの選択」を選びます。
ATOMが存在すればATOMをを選択して下さい。
もし出てこない場合は画像のようにインストール先の”.exe”のファイルを指定する必要が有ります。
(インストール先は人によって違う場合があります。見つからない場合はショートカットの内容を確認するか検索しましょう。)

txtchnge

ATOMの日本語化

ATOMには様々な特徴が有りますが何と言ってもその豊富過ぎる「拡張機能が凄いんです!
便利パッケージは後から紹介して行きますので、ここではまずATOMの日本語化を行いましょう。
ATOMはインストールの完了後、↓ のような画面が表示されます。その後、「Install a Package」をクリックします。
(メニューバーのATOMの「Preferences」からでも開くことが出来ます。)

atom-welcome

「Search Packages」に「japanese-menu」と入力し、「Install」ボタンをクリックします。※編集部のMacには既にインストールされているため、日本語表記になってしまっています。

スクリーンショット_2015-12-07_21_09_15

すると、なんと、英語表記だった「ATOM」が日本語表記に変化を遂げます!
これでATOMの日本語化が完了です。

スクリーンショット_2015-12-07_21_19_11

この様にATOMは自分の好みに応じてカスタマイズできる万能エディタです。

日本語対応フォントの設定

文字を扱うテキストエディタにとって、どのフォントで表示をするかは重要な問題です。
今回は日本語にも対応していて、プログラミングのコードも見やすい「Ricty Diminished」を導入したいと思います。

フォントデータの準備

まずフォントのデータをGitHubのRictyDiminishedの「Download」ボタンからダウンロードします。
Zipファイルを解凍して中に入っている”.ttf”というフォント情報の入ったファイルをダブルクリックで実行するとパソコンにインストールされます。

テキストエディタ側の設定

メニューバーのATOMの「環境設定」をクリックして、設定画面を表示します。
FontFamilyの値を”Ricty Diminished”として設定します。
設定後フォントが変わっていることを確認しましょう。

スクリーンショット 2016-03-07 19.43.35

ATOMの基本的な使い方

と言っても、これといって特別な使い方はありません!使い方は他のエディターと対して変わりはしません。

ATOMでファイルを編集

ATOMを起動してメニューの「ファイル」=>「開く」で編集したいファイルを選んで編集を開始出来ます。
開いているATOM(またはショートカット)に編集したいファイルや、編集したい複数のファイルが入っているフォルダをドラッグ・アンド・ドロップすることで全てのファイルを開くことが出来ます。
編集を反映させるには「ファイル」=>「保存」を行いましょう。

ATOMで画面分割

ATOMははじめから画面分割をする機能が付いています。
ファイルのタブやツリー上のファイルをMacの場合はCtrl+クリック、Windowsの場合は右クリックで、画面分割をしてどこに表示させるかを選択できます。

atomsplit

複数のファイルを同時に編集したい場合にとても便利です。

ATOMの便利&かっこいいプラグイン

ATOMは便利なプラグインをどんどん入れていくことで、自分だけのテキストエディターが作れます!ここからは編集部おすすめの便利&お洒落プラグインをご紹介していきましょう。

アイコンをカラフルにする(file-icons)

この「file-icons」は、デフォルトで入っている質素なデザインのアイコンにカラフルなカラーをつけてくれます。それになんといっても見やすい!

人間は五感の約80%を視覚に頼っている生き物です。色が違うだけで、0.5秒くらいは時間短縮できるかもしれないですね。

file-icon

インデントを見やすくする(highlight-column)

この「highlight-column」を導入すれば、インデントがわかりやすくなります。インデントとは、直訳で「字下げ」の意味。

いいコードは誰が見てもわかりやすいものです。インデントがしっかりしているか、していないかは見やすい、見やすくないに反映します。このプラグインを導入すれば、チェックしやすいようになります!

スクリーンショット_2015-12-09_16_41_47

ソースの全体図を表示する(minimap)

この「minimap」は、ソースの全体図を画面内に表示してくれるパッケージです。今自分がソースのどの辺りを書いているのか把握でき、迷子になることを防ぎます。

スクリーンショット_2015-12-09_16_45_54

選択した単語をハイライトする(selection-highlight)

単語をダブルクリックすることで、選択した単語がハイライトされます。また、ステータスバーに単語の出現回数を表示する機能も付いています。

atom-1

色を視覚で選択する(color-picker)

CSSやSASSなど、「色」を扱う時に非常に便利なプラグインです。通常、数字のみで把握しなければならないのですが、直感的な色彩選定ができます。

現在のカラーと選択中のカラープレビューが表示されるので、かなりわかりやすいです。

atom-2

色をソース上で視覚化する(pigments)

前出の「color-picker」とかぶりますが、こちらも「色」に関して直感的な情報提供をしてくれるプラグインになります。

メインの機能は色コードをキャッチして、バックグラウンドにその色を付けてくれる機能。
その色コードがどんな色なのかを直感的に理解出来るので、とても便利です!

atom333

自動で閉じタグを挿入(tag)

atom-2.1
URL:tag

「Option + Command + .(ピリオド)」の同時押しをすると自動で閉じタグを挿入してくれるパッケージです。結構便利です。

メソッド、関数コメントを自動で閉じる(docblockr)

atom-2.2
URL:Docblockr

「/**」or「###*」or「/*」の後で「Enter」もしくは「tab」の入力でメソッドや関数コメントを自動で閉じてくれます。

複数のプロジェクト管理(Project Manager)

atom-2.3
URL:Project Manager

Atomで複数のプロジェクトを管理できるようになります。

「Command + Ctrl + p」で、簡単に切り替えられます。

ターミナルを開かなくてもGitコマンドを使える(git-plus)

atom-2.4
URL:Git Plus

ターミナル系アプリを使わなくてもGitコマンドを使えるパッケージです。優れものです。

ツールバーを使いやすくする(tool bar)

スクリーンショット 2015-12-14 17.43.07
Atom Tool Bar

エディタの上下左右好きなところにボタンを設置する。

基本的にメインメニューやコマンドパレットのショートカット。

次項目のflex-tool-barと組み合わせて好きなボタンが入れられる。

おまけ

なんとATOMのパッケージには、プログラミング学習サイトで名高いドットインストールを便利に使うためのパッケージが出ています。

「dotinstall-pane」というパッケージです。プログラミング学習中の方はぜひ追加してみてください。

687474703a2f2f7374617469632e646f74696e7374616c6c2e636f6d2f61746f6d5f7061636b6167652f73637265656e73686f742d64656d6f2e676966
URL:

テキストエディタ上のショートカットで動画を再生したり止めたり出来るので、自分のペースで学習できて早口なパートでも真似しやすく捗ります!

使い方は、

Dotinstall Pane の開閉:Mac 「Option + Shift + D」、Windows「Alt + Shift + D」

プレイヤーの再生/一時停止:Mac「Option + Shift + Enter」、Windows「Alt + Shift + Enter」

選択テキストの検索: 右クリックメニューから「ドットインストールで検索」を選択

ドットインストールを開いているビュー上でコピーもできるので、ソースコードをエディタにコピペするのも簡単です

と解説されています。

詳しい解説はこちらです。

まとめ

いかがでしたでしょうか?あのGitHub社が提供元なだけあって、高性能かつ高機能かつ愛情に溢れたテキストエディターであると言えるでしょう。

このアプリが完全無料というところにも、驚きます。初心者の方でも、比較的簡単に使えるようにデザインされていますので、ぜひチャレンジしてみて下さい!

冒頭にも載せましたが、下記の記事でさらに便利パッケージを紹介しています。もしよかったら、読んでみてください。


33歳、未経験だった僕がフリーエンジニアになれた理由
現在フリーでWEBエンジニアをやられている濱口直行さん。33歳で、プログラミングを学び始め、約半年という短い期間で独立までされた学習ログを余すことなくインタビューさせていただきました。

プログラミングを学習中の方はもちろん、独立をお考えの方まで幅広く活用できる記事になっています。この機会に是非活用していただければと思います。


最短でプログラミングを習得したい方へ

元々ITリテラシーのある方やプログラムの学び方がわかっている方は独学で習得することも可能でしょう。

ただし、実際の学習期間中はつまづいている時間がほとんどです。

「もう挫折したくない」
「本業と両立しながら、好きな時間で自分のペースで勉強を続けていきたい。」
「自分だけのカリキュラムで効率的に勉強したい」

そんな方はお気軽に侍エンジニア塾までご相談ください。

弊社では、

  • プログラミング基礎学習
  • オリジナルアプリ開発
  • 仕事獲得

までをひと通り学習できます。

まずは無料体験レッスンで、弊社のコンサルタントと一緒にあなた専用の学習方法やカリキュラムを考えてみませんか?

挫折しない学び方や、通常1000時間以上かかる学習時間を1/3にする方法などより具体的なアドバイスもさせていただいています。

詳しくは下の画像をクリックして弊社サービス内容をご確認ください。

cta1

学習者インタビュー

23歳、早稲田中退生が3ヶ月でフリーランスエンジニアになるまで
32歳ベンチャー企業元役員が起業してプログラミングを学んだ話
元ディスクユニオン店員が33歳からプログラミングを学びエンジニアになるまで
ヨガスタジオのマネージャーだった私が3ヶ月でWeb制作をマスターするためにした”たった1つ”のこと
Uターン女子がRubyを学んで理想のライフスタイルを手に入れた話
新卒、文系出身エンジニアが語る、経験0からプログラミングができるようになった理由

プログラミング学習者必見

専属講師に質問し放題、レッスンし放題!最短1ヶ月でフリーランスエンジニア
プログラミング学習カリキュラム無料公開中
Ruby学習カリキュラム無料公開中
Python学習カリキュラム無料公開中
 1記事最大10,000円!テック系ライターさん大大大募集!!!
LINEで送る
Pocket

この記事が気に入ったら
いいね!をしてフォローしよう

最新情報をお届けします

書いた人

ハナキ ノボル

ハナキ ノボル

侍エンジニア塾ブログ編集長。オウンドメディア運営、コンテンツマーケティング、SEO対策が得意分野です。プログラミングはすべての人が学ぶべきスキルだと思っています。0→1を作り上げるエンジニアはとてもかっこいい職業で世の中のイメージ(3K)を変えたい!と密かに思ってます。現在Swiftを勉強中。音楽鑑賞が趣味で、ライブやフェスによく行きます。
インスタやってます。
ツイッターやってます。
ブログやってます。