【Atomエディタの公式IDEパッケージ!】atom-ide-uiまとめ

こんにちは、ライターの遠藤です!

今回の記事では、Atom IDEについて紹介します。

「AtomはIDEとして使えるの?」
「どういう機能があるのか知りたい」
「導入方法が知りたい!」

という方へ向けて、

・Atom IDEとは
・Atom IDEの機能について
・Atom IDEの導入方法

を紹介致します。

導入手順もそれほど難しくないので、ぜひ最後までお付き合いください!

Atom IDEとは

まずはじめに、Atom IDEについて説明します。

Atom IDEはAtom開発元であるGit Hub社がFacebookと共同で開発したAtomにIDEのような機能を持たせるためのパッケージセットの事を言います。

Atomをすでに使用されている方はもうおわかりかと思いますが、こちらはパッケージですので、Atom上で「設定>Install」で導入するだけで普段のAtomにIDEとしての機能をつけられると事が可能です。

Atom IDEについてより詳しく知りたい方は、Atom IDEの公式ページやAtomのブログのAtom IDEの紹介記事を見てみましょう。

なお、Atom IDEで現在対応している言語は以下になります。

・TypeScript & JavaScript
・Flow
・C#
・Java(Java 8 runtime required)
・PHP(PHP 7 runtime required)

Atom IDEの機能について

Atom IDEについて分かったところで、Atom IDEを導入して使えるようになる機能について確認しましょう。

パッケージを導入して使える機能は、以下のようになっています。

機能名機能内容
Diagnosticsエラー等の診断
DefinitionsCmd + クリックで定義へ移動する
Find Referencesカーソルを合わせ、右クリック > 「Find References」で検索する。別ファイルの記述も検索される
Outline Viewアウトラインを確認できる。ジャンプも可能
Datatipsカーソルを合わせると、その関連情報が表示される
Code FormattingShift + Cmd + C でコードをフォーマットする
Code ActionsDiagnosticsに対する追加のアクションを実行できる
Code Highlightシンボルにカーソルを置くと、関連する箇所が強調表示される
Busy Signal何が起こっているか(処理中か)を示すアイコンが追加される
Auto Completeオートコンプリート機能。入力途中で補完してくれる

Atom IDEの導入方法

Atom IDEの概要が分かった所で、導入手順に入りましょう。

導入するのに必要な手順はおおまかに以下となっています。

    1. atomのアップデート
    2. atom-ide-uiパッケージのインストール
    3. 必要な言語のパッケージをインストール

atomのアップデート

古いバージョンでは動かない事があるため、まずはじめにatomを最新の状態にしましょう。

手順は以下になります。

    1. About Atomを開く

Macユーザ:メニューバーのAtom > About Atom
Winユーザ: ツールバーのHelp > About Atom

以下のような画面が表示されます。

    1. アップデートがあるかを確認

Check now」ボタンを押し、アップデートが必要かどうか確認します。

    1. アップデートする

アップデートがある場合は「Check now」ボタンが「Restart and install」に切り替わります。その場合は再度ボタンを押し、アップデートをします。

自動で再起動し、アップデートがされます。

atom-ide-uiパッケージのインストール

アップデートが完了した所で、atom-ide-uiパッケージをインストールします。

インストール手順は以下になります。

    1. 設定画面を開く

コマンドパレットから「Preferences」と入力しEnterを押すと、設定画面が表示されます。

サイドバーの「+Install」を押してパッケージをインストールする画面へ遷移します。

    1. インストールするパッケージを選択する

Install Packages」の下にあるテキストボックスに「atom-die-ui」と入力し、隣のPackagesボタン(またはEnterキー)を押し検索をします。

完了するとパッケージ一覧が表示されますので、その中から「atom-die-ui」の項目にある「Install」ボタンを押します。

完了すると以下のようにInstallボタンに替わってUninstallボタン等が出てくるので、それを確認したところでインストール完了です。

必要な言語のパッケージをインストール

atom-ide-uiパッケージのインストールが終わったら、今度は必要な言語のパッケージをインストールしましょう。

言語とパッケージ名の対応は以下のようになっております。

TypeScript & JavaScript : ide-typescript
Flow : ide-flowtype
C# : ide-csharp
Java : ide-java
PHP : ide-php

 

インストール方法はatom-ide-uiと同じです。

ここまでできましたら、あとはコードを書くのみです!

まとめ

いかがでしたでしょうか?

今回の記事では、


・Atom IDEとは
・Atom IDEの機能について
・Atom IDEの導入方法

について紹介しました。

atomは元々沢山パッケージがあって、どれを入れれば良いか分からないという方も多いかと思います。

その点今回のAtom IDEは公式で展開されている洗練されたパッケージセットなので、とりあえずでも入れておいて間違いなしです!

Atomでコードを書いている方、これから書こうという方はぜひAtom IDEを入れて、快適なコーディングライフを送りましょう!

LINEで送る
Pocket

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

遠藤貴大

遠藤貴大

1991年生まれ。双子座。
理系大学で認証システムを学んだ後、アプリ開発者となる。
新しく学ぶ人に寄り添った記事を心がけて執筆します。
芸術が好き。いつか猫と暮らすのが夢。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説