今更ながらATOMを導入して、DWやSublime Textのように使ってみた。

2016.11.4 - Fri
2000 Like

こんにちは。
デザイナーのはなち○こです。
 
皆さん普段からコーディングのエディターは何を使っていますか?
 
僕は案件によってまちまちなんですが、基本的には「Dreamweaver」6割「Sublime Text3」4割くらいで使って作業したりしています。
 
世の中のコーダーさんはどんな感じなんでしょう?
 
昔からのクセで「Dreamweaver」の使い方やテンプレート化機能になれてしまい、オーサリング的側面を一切無視して、ほぼエディターとしてしか使ってないDWからいつまでたっても脱することができない僕なんですが、
 
 
結構前から
 
「ATOM」がええんやで。
 
という声を聞くようになりました。
 
 
何回か使ってみようと思ったことはあったのですが、別に今のままでも困ることはなかったので、気づけば1年以上スルー。重いという噂もあったし。
 
 
が、最近定期的にWebの講師をさせて頂く機会を頂きまして、
 
「今の業界のトレンドは「ATOM」だね。
すごい人はみんな切り替えてるよ。
うん。僕もその一人。」

 
みたいなことを講義の中で言いたいなと思ったので、
溢れんばかりの下心を動機に「ATOM」を導入することにしました。
 
 
多分僕みたいに、ちょっと使ってみたいけど、あとでいいやーっと思って
若干乗り遅れてしまった人って結構いると思うので、
ちょっとおさらい。
 

ATOMとは?

atom_ss
 

ATOMとはあのGitHubが開発したオープンソースのテキストエディタです。
2015年6月26日に正式なバージョン1.0がリリースされたので、
もうなんだかんだで1年くらい経ってるのですが、そろそろ実務に取り入れても
いいんじゃないかという頃合い。
 

Windows/Mac OS X/Linuxに対応しているので、
僕みたいにWindowsとMacを併用している方でも安心。

 

ATOMのいいところ

 

無料で使えるエディタ

DWみたいにライセンスが必要だったり、Sublime Textのように「そろそろ寄付しておくれ」メッセージからも開放されます。
 

豊富なテーマやパッケージによってカスタマイズできる

Sublime Text同様豊富なパッケージが公開されています。他のエディタであったあんな機能やこんな機能は大抵パッケージが用意されているので、Emmetを導入したりなど自分の使いやすいようにカスタマイズ可能!
 

エディタ上からターミナルが使えたり、gitと連動したりなんかすごい。

とにかくエディタでいろいろできるので、今まで別々で開いてやっていたことがこれひとつで簡潔できたりします。
 

使いやすいUI

画面分割できたり、ファイルごと開けるなど、使う人のことを良く考えている作りです。いろいろカスタマイズできちゃうので、そういう意味ではUIはカスタマイズ次第と言えますが、全体的に使いやすく、見やすい。デザインテイスト的にもオシャレさん。

 

ATOMの導入と初期設定

atom_ss
 

ATOM公式サイト

URL:https://atom.io/

 
まずはリンクの公式サイトからATOMを落としてインストールしてみましょう。
今回はMacでやってみます。

 

atom_ss2
特に細かい設定もなくインストール完了。
実際に起動。いい感じですね。
 
 
 

使いやすいようにATOMを日本語化

英検3級をあと2点で取ることができた僕には、まったくもって無意味なことですが、
一応使いやすいように日本語化パッケージを適用します。
atom_ss3
 

ATOMの日本語化する方法

・Atom起動画面からメニューバーにある「Help」の「WelComeGuide」を選択。
・「Install a Package」を選択し、「Open Installer」をクリック。
・左側の「search Packages」に「japanese-menu」と入力し、「Packages」で検索。
・パッケージ一覧の中から「japanese-menu」をインストール。

 
以上で日本語化完了。
良かった。これで安心して使えます。
 
 
 

タブスペース・半角スペース・改行 を見えるように設定

ATOMの初期設定ではタブや半角スペースが見えないため、判別ができません。
なので設定を変更してこんな風に見えるようにします。
atom_ss5

 

スペースコードを見えるようにする方法

・Atomのメニューバーにある「環境設定」を選択。
・「Editor」もしくは「エディタ設定」の項目を選択。
・中間くらいの項目にある「不可視文字を表示」にチェック。

 
これでタブスペース等が見えるようになります。
不可視文字の表示マークを変更したい場合は、同じ「エディタ設定」の「不可視文字」から
表示内容を変更可能です。

atom_ss3

 
 
 

見やすいように自動で行折り返しを設定

初期のままだと、自動で折り返しが行われないため、長いコードだと横スクロールをしないとソースをみることができません。
atom_ss06
 

なので下記設定方法で行折り返しを設定します。
ウィンドウサイズに合わせて自動で折り返しする設定と、
指定した文字数で折り返しを行う方法があるようです。

atom_ss07

 

自動で行折り返しを設定する方法

・Atomのメニューバーにある「環境設定」を選択。
・「Editor」もしくは「エディタ設定」の項目を選択。
・「ソフトラップ」にチェックを入れる。

 

指定した文字数で折り返しを設定する方法

・Atomのメニューバーにある「環境設定」を選択。
・「Editor」もしくは「エディタ設定」の項目を選択。
・「右端ガイドの位置でソフトラップ」にチェック。
・「右端ガイドの位置」の値を任意の値に変更。

 

atom_ss08
こんな感じで見やすくなりますね。
※画面は文字数指定で折り返し設定をしています。

 
 
 

パッケージを入れて快適な環境をつくる

ATOMの良さはなんと言っても拡張できるプラグインパッケージが豊富な点。
デフォルトのままでも十分使いやすいですが、
 
今回の目的は、「Dreamweaver」や「Sublime Text」にあった便利な機能をATOMでも使えるようにしたいのと、ATOMでしかできない機能を導入して快適な環境を作り上げること。
 
そこで、ATOMを使う上で絶対に入れてほしい便利なパッケージを別記事でご紹介。
 

パッケージまとめ紹介記事

 

atom_ss3
ATOMで使える最初に入れるべきマストパッケージまとめ13選
https://2l-cave.com/717

 
 

ATOMを使ってみたまとめ

ATOMを実際に使ってみると便利なことばかりで、
もっと早くに使い始めてれば良かったと思う点が多かったです。
勿論サイトのつくりによっては、DWの方が作りやすいなんてこともあるかと思うので、完全にATOMのみとまではいかないですが、少なくとも「Sublime Text」はもう使わないかな。
 
 

個人的に他のエディタと比べてATOMのよかったところ

ターミナルがエディタ上で操作できる。
gitとの連動ができるので、視覚的にも変更点がわかりやすい。
・ATOMでも「Emmet」が使える。
・githubが作ったので将来性があり、安心して長く使えそう。
・若干他項目に被ってますが、パッケージプラグインがみんな優秀。

 
 

ATOMのデメリット

やはり「Sublime Text」と比較すると重いという部分でしょうか。初期の頃から比較すると、以前よりも安定してきているようですが、まだまだ重いという声が多いです。
 
特に起動時や、行数が多いファイルだと若干重い場合があります。
それでもネットで言われているほどではないと思いますが。。

もしATOMが重くて嫌になる前に、対処をまとめてる方がいらっしゃったので、
コチラを参考に。
 
 

引用参考サイト

Atomエディタが重いときに動作を軽くする5つの解決方法
https://iwb.jp/atom-editor-setting-faster/

  
 
。。まぁ、動作の重さは今後の課題と言ったところでしょうか。

 
 

まだまだ課題が残るATOMですが、日々改善や改修を重ねていることもあり、将来性がある子なので、次の浮気相手が現れるまではしっかりと愛情を注いでやるさ!

梁瀬隆行
2L CEO - Lead Designer
他の書いた記事
  • FaceBookでシェアする
  • Twitterでシェアする
MENU
  • 新しい記事

  • 人気の記事

  • ピックアップ

関連するオススメ記事

  • 2017.01.08 - Sun
    ATOMで使える最初に入れるべきマストパッケージまとめ13選

SHARE

SNS Share

CONTACT

Contact Us