MORIAWASE

好きなもの、好きなだけ、盛り合わせ

今日の人気記事です!

コードエディターはドットインストール対応のATOMがおすすめ!

      2016/04/13

これは便利すぎる。なぜ今まで使ってなかったんだろうか。

今までコードエディターはMac対応のBrackets(ブラケッツ)を使ってたんですが…ATOM(アトム)最強でしょ!

とりあえずアトムのおすすめポイントをいくつか挙げてみる。

  1. 無料
  2. コードを書くとリアルタイムで反映される
  3. 一つの画面でなんでもできる
  4. Dropboxと連携ができる
  5. ドットインストールと連携できる(これ大事)

…こいつ、すごくないですか?

え?気になるって?それじゃあ、ちょっと見てってくださいよ〜

ATOM(アトム)の設定

アトムを紹介している記事はいくつかあったけど、ちょっと古い情報だったので改めて紹介してみます。

「あれ?セッティングっていう項目がないぞ…?」と悩んじゃった方もいるのでは?(僕がそうでした)

まず、こちらの公式ページからアトムをダウンロード&インストールします。

 

インストールが終わったら日本語に変換しましょう。

「Packages」→「Settings View」→「Install Packages/Themes」

atom-1

 

「japanese-menu」で検索後インストール。

atom-18

 

このように日本語になります。

atom-3

 

次に「dotinstall-pane」で検索しインストール。

これでドットインストールのレッスンが見れるようになります。

atom-19

ATOM(アトム)の使い方&ドットインストールと連携

設定が終わったので実際に使ってみましょう。

ドットインストールの画面を表示して動画を再生してみます。

  • 「shift」+「option」+「D」でドットインストールの画面の表示⇆非表示
  • 「shift」+「option」+「Enter」でドットインストールの動画の再生⇆停止

atom-17

 

「config」の下のエリアで右クリックしプロジェクトフォルダを作成。

atom-6

 

クラウドで管理できるようにDropbox内にファイルを作成します。

atom-7

 

適当にフォルダ名をつけます。

atom-8

 

作成したフォルダを開きます。

atom-9

 

作成したフォルダ内に新規ファイルを作成します。

atom-10

 

HTMLファイルとCSSファイルを作成してみます。

atom-11

 

この画面いいですよね!画面分割してるわけじゃないですよ!

atom-12

 

こんな感じ。

atom-13

 

HTMLでつけたidやクラスが予測変換で出てきます。これ便利〜

そして、右がプレビュー画面。

atom-14

 

リアルタイムで結果が反映されるんですよ…!

リロードする必要がないと、かなりストレスフリーです。

atom-15

まとめ

これまでは、

  1. GoogleChrome
  2. Brackets
  3. Cyberduck
  4. ターミナル

と、たくさんのアプリを開いてました。

iMacの大画面だと問題ないんですが、MacBook Proの画面だとアプリの切り替えがかなり面倒なんですよ。

 

その点ATOMは、一つのアプリ内で全てのことができます。

しかも、リアルタイムで反映されるので、作業自体もスピーディーになります。

これは他のコードエディターをお使いの方にとっても魅力的ではないでしょうか?

atom-16

 

まだATOMを使ったことがない方。

かなりおすすめなコードエディターですよ!

 - プログラミング学習