フルスタックエンジニアのノウハウ
2020.02.22    2020.03.17

ATOM最初の1歩(基本的な使い方&入れておくべきパッケージ)

ATOM最初の1歩(基本的な使い方&入れておくべきパッケージ)

こんにちは、徳田 啓です。
Webプログラマー歴20年、【フルスタックエンジニア マスター講座】を運営しています。(生徒数1,800名突破)


前回、プログラマーのおすすめエディタとして「ATOM」というツールをご紹介しました。

皆さんはインストールしてみましたか?

まだ読んでいない方は以下よりご確認ください。

関連記事

プログラミングには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の初期設定と基本的な使い方です。

これからプログラミングを行っていく上で、一番使うソフトになりますので、ファイルを新規に作成したり、開いて編集したり出来るように慣れておきましょう。

おすすめ記事
無料メルマガ配信中