関連記事
僕のおすすめエディタ
2020.02.22
2020.09.09
ATOM最初の1歩（基本的な使い方＆入れておくべきパッケージ）
この記事の動画版はこちら（画像クリックでYoutubeに飛びます）
チャンネル登録お願いします！
前回、プログラマーのおすすめエディタとして「ATOM」というツールをご紹介しました。
皆さんはインストールしてみましたか？
まだ読んでいない方は以下よりご確認ください。
今回は、ATOMをインストールした後の「基本的な使い方」をご説明します。
また、入れておいた方が良い「おすすめのパッケージ」もご紹介しますので、プログラミングの第1歩として、ぜひ実践してみてくださいね！
ATOMの起動方法
ATOMはすでにパソコンにインストールされているものとして進めます。（まだインストールしていない場合は、前回の記事を参考にインストールしてから進めてください）
Windowsの場合
スタートメニューの「GitHub, Inc」の中に「Atom」がありますのでクリックして起動します。
起動後、タスクバーのATOMのアイコンを右クリックして「タスクバーにピン留めする」としておくと、アイコンが固定表示され、次回からはこれをクリックするだけで起動出来ます。
Macの場合
アプリケーションフォルダの中にある「Atom.app」をダブルクリックして起動します。
起動後、Docのアイコンを右クリックして、「オプション＞Docに追加」しておくと、Docにアイコンが固定表示され、次回からはこれをクリックするだけで起動出来ます。
初回起動時は、このようなWelcome画面や設定確認画面が表示されることがありますが、以下のように閉じれば次回からは表示されません。
ATOMでファイルを作成し、保存する方法
ATOMを起動すると、このような画面が表示されます。
早速、新しいファイルを作成してみましょう！
Fileメニューから「New File」をクリックすると、新しいファイルが作成出来ます。
まだ保存されていない状態なので、タイトルが「untitled」になっていますね（赤枠部分）
下のエリアが実際に文字（プログラム）を書いていくエリアです（青枠部分）
なお、タブが1つでも開いている状態であれば、赤枠の部分をダブルクリックすることで、素早く新規ファイルを作成することも出来ます。
それでは、実際に何か入力してみましょう！
TESTと入力してみてください。
編集した内容がまだ保存されていない場合は、このようにタブに青い印が付きます。
CrlキーとSキーを同時に押して保存しましょう。（Macの場合は「Cmd＋S」）
これは保存のショートカットキーです。頻繁に使うので覚えておきましょう。（メニューのFile＞Saveを実行するのと同じです）
すると、保存ダイアログが表示されるので、保存場所にデスクトップを指定して、ファイル名に「test.html」と入力し「保存」ボタンをクリックします。
これで、test.htmlという新規ファイルが作成されました。
デスクトップを見てみると、実際にtest.htmlというファイルが作成されていると思います。（PCの設定によっては、ファイル名は「test」と表示される場合もあります）
【ATOMでファイルを作成する流れ】
①ATOMを起動
②File＞New File（またはタブエリアをダブルクリック）で新規ファイル作成
③内容を入力
④Ctl+Sで保存
この流れで、ファイルを作成することが出来ますので覚えておきましょう！
ATOMでプロジェクトを管理する方法
ATOMではフォルダをプロジェクトとして管理することが出来ます。
現在は、画面の左側に先ほど保存したデスクトップが表示されていると思います。
ここに新しいフォルダを作成してみましょう。
Desktopという部分を右クリックして「New Folder」をクリックします。
作成するフォルダ名の入力欄が表示されるので、「project1」と入力してEnterキーを押します。
デスクトップの下にproject1というフォルダが作成されました。
実際にデスクトップを見ると、project1というフォルダがありますね。
次は、フォルダの中にファイルを作成してみましょう。
project1フォルダを右クリックして、「New File」をクリックします。
作成するファイル名の入力欄が表示されるので、「test2.html」と入力してEnterキーを押します。
project1フォルダの中にtest2.htmlが作成されました。
このように、ATOM内で直接フォルダ管理が出来るので、いちいちエクスプローラーやFinderからファイルを探してATOMで開くといった操作が必要なくとても便利です。
なお、すでにあるフォルダをATOMに追加したい場合は、フォルダごとATOMの画面上にドラッグ＆ドロップすればOKです。
パッケージの追加方法とおすすめパッケージ
ATOMでは、「パッケージ」という形で機能を後から追加することも出来ます。
世界中の開発者から多くのパッケージがリリースされており、自分の欲しいものだけを選んで組み込むことが可能です。
いくつかお薦めのパッケージがあるので、実際にインストールしてみましょう！
パッケージの追加方法
メニューからFile＞Settingsをクリックします。
Packagesという部分をクリックすると、導入済みのパッケージ一覧が表示されます。
Installをクリックすると、新しくパッケージを導入することが出来ます。
おすすめパッケージ
今回は、3つのおすすめパッケージをご紹介します。
①japanese-menu
→ATOMのメニューや設定画面を日本語化してくれるパッケージ
②tag
→HTMLタグの入力を補助してくれるパッケージ
③minimap
→画面の右側に、ソースコード全体を俯瞰で見れるミニマップを表示してくれるパッケージ
Install画面の検索ボックスに「japanese-menu」と入力してみましょう。
すると、検索結果の一番上に「japanese-menu」というものが表示されると思いますので、Installボタンをクリックします。
これだけでパッケージのインストールは完了です。
設定画面や、メニューの内容が日本語化されていますね。
同じように検索ボックスに「tag」と入力し、表示される「tag」というパッケージのInstallボタンをクリックします。
tagは、HTMLタグの入力を補助してくれるパッケージです。
例えば、「html」と4文字だけ入力してEnterキーを押すと・・・
このように、HTMLの枠組みとなる基本タグ一式が自動入力されます。
最後は、検索ボックスに「minimap」と入力し、minimapのInstallボタンをクリックしましょう。
minimapをインストールすると、画面右側にこのようなミニマップが表示されます。
縦に長いソースコードの全体像がすぐに分かり、スクロールもミニマップ上でドラッグ＆ドロップするだけで素早く簡単に行えます。
この3つのパッケージは僕も愛用しています。
便利なので是非インストールしておいてくださいね！
以上が、ATOMの初期設定と基本的な使い方です。
これからプログラミングを行っていく上で、エディタは一番使うソフトになりますので、ファイルを新規に作成したり、開いて編集したり出来るように慣れておきましょう！
徳田 啓（トクタ ケイ）
Webプログラマー暦20年。自分で使うツールは、基本的に1人でゼロから自作。オールマイティなプログラミングの知識とスキルを学べる「フルスタックエンジニア マスター講座」を開講中。生徒さん1人1人に合わせてしっかりサポートしていきます！
プログラミングの実践的なノウハウを発信中！
ぜひフォローしておいてください。
ぜひフォローしておいてください。
