Atomエディタの初期設定とオススメプラグイン

Atom（アトム エディタ）とは

そもそもAtomとはどんなエディタなのでしょうか？wikipediaを抜粋すると以下。

Atom（アトム）は、GitHubが開発したオープンソースのテキストエディタである。
GitHubの共同創業者であるクリス・ワンストラスによって2008年に開始されたプロジェクトだが、同社のビジネスが成功したことでワンストラスが多忙となり開発が一時停止していた。
その後、2011年から開発が再開され、2014年2月26日に招待制のベータバージョンとしてまずMac OS X向けがリリースされた。
同年5月6日、MIT Licenseのもとでソースコードを公開。2015年6月26日にバージョン1.0がリリースされた[2]。
デスクトップアプリケーションだがChromiumをベースとして開発されており、ユーザーインターフェースはウェブ技術であるJavaScript、CSSなどを使ってカスタマイズ可能となっている。

出典： Wikipedia

大きな特徴としては、github制のエディタで、クロスプラットフォームに対応している。
オープンソース化されているので、カスタマイズはpluginの作成が自由である。と言った所でしょうか。
見た目はIntelliJに似ており、β時代は検索が重いなど、パフォーマンスに問題を抱えていましたが、
正式バージョンの1.0ではかなり改善されている模様です。

ただ。やはりsublime textにするとややもっさり感はありますね…

日本語化

Atom > Preferences > install > 検索ボックスに「Japanese-menu」と入れてEnter

 

テーマの設定

Atom > Preferences > theme

から色々とエディタのthemeを変更する事が出来ます。

とりあえず私はド定番でこれを入れる事に。
https://atom.io/themes/monokai

Atom > Preferences > install >「テーマ」を選択して > 検索ボックスに「monokai」と入れて Enter

package

導入したパッケージ

・Autocomplete

コード補完用のプラグインです、最新のアプリならばデフォルトで入って有効になっている模様です。

・highlight-line

https://atom.io/packages/highlight-line

現在フォーカスが当たっている行をハイライトしてくれるやつ。sublime的な。

・Minimap

https://atom.io/packages/minimap

Sublime Textのようにスクロールバーの部分にミニマップを表示させることができます。sublime的な。

・minimap-autohide

https://atom.io/packages/minimap-autohide

Minimapを自動で表示、非表示にしてくれるパッケージ。
実際にガリガリコードを書くときはminimapは邪魔なのであると便利。
これはsublimeには無いのでありがたいですね！

・bracket-matcher

対応する括弧を光らせたり、対応する括弧にジャンプしたりできるやつ。sublime的な（しつこい）
これもデフォルトで入ってました。

 

・highlight-selected

https://atom.io/packages/highlight-selected

選択したテキストが同じファイル内に有る時にそれらをハイライトするパッケージ。
動作的にはSublimeTextそのまんまって感じ。

・project-manager

https://atom.io/packages/project-manager

Atomはデフォルトだとプロジェクトの管理機能がとても弱いらしいのですが、それを補ってくれるパッケージ。
使用感はSublimeTextのプロジェクト管理とほぼ同じらしいのですが、そもそもsublimeでプロジェクト管理を使ってなかったので、これを期にやってみようと入れてみました。

メニューのOPENでプロジェクトルートを開いて、

Packages > Project Manager > Save Projects でプロジェクトを保存。

あとは ctrl + comm + p でプロジェクトを開けるという感じです。

開いてたタブやファイルを記憶してくれるのが便利ポイントらしいです！

 

その他ざっくりとした使い方はここ
http://qiita.com/hnakamur/items/e23162b1976b4d032eb2

 

・file-icons

https://atom.io/packages/file-icons

アイコンをおしゃれにしてくれる。
別にそれだけなんだけど、意外と見やすくなっていい感じになる。

 

・term3

https://atom.io/packages/term3

ターミナルをタブのひとつとして開いてくれるプラグイン。
プロジェクトを登録しておけば、プロジェクトルートで開いてくれるので便利。

元々Term2 というpackageが一般的だったみたいですが、まともに使えなくなってしまったらしいのでTerm3 を入れてみました。
キードードショートカットの扱いとかが変わって微妙な使いにくさはある。

とりあえず ctrl+alt+t で 現在のペインに新しいタブとしてターミナルを起動 できます。

その他キーバインドの設定等は別記事で。

※ただし肝心のターミナルの挙動はやや不安定。著者は結局iTermを並列で使うように戻しました……m(_ _)m

 

・tag

https://atom.io/packages/tag

 

マークアップ時に </ と入れると前のタグの閉じタグを入れてくれるpackage

sublimeで同様のプラグインを入れてて、それに慣れちゃってたので無いと困る。

 

気になるけどまだ入れてないパッケージ

・Emmet plugin Atom editor

https://atom.io/packages/emmet

簡単な記述でソースコードを生成してくれるパッケージ。
チートシートを見るとわかりやすい。

 

すごい良さそうだけど、これに慣れ過ぎるのに若干の怖さを覚えているので、導入はとりあえず見送った。

 

・rails-transporter

https://atom.io/packages/rails-transporter

Rails プロジェクト内のファイル移動を簡単にする。
model から関連する controller を開いたり、controller から 関連する helper を開いたり出来るみたい。

 

気になるけどrails今がっつり使ってないのでとりあえず様子見。

 

・color-picker

https://atom.io/packages/color-picker

カラーピッカー機能を追加するパッケージ。
色コードを直感的に選、現在のカラーと選択中カラープレビューが違い分かり易くめっちゃ便利らしい！
出力形式もRGB、HEX、HSL、HSV、VECを選択出来るのもよさ気。

超メジャーなプラグインだけど、 重いって言われてた奴は別でした。

 

入れたけど消した（無効にした）やつ

・Highlight-column

https://atom.io/packages/Highlight-column

カラム位置をハイライトしてくれるやつ。
見やすくなるかと思ったが、思ってた以上に視覚的にうざかったので外しましたｗ

 

 

・autocomplete-paths

https://atom.io/packages/autocomplete-paths

オートコンプリートにpathを追加
絶対pathがプロジェクトのルートじゃなく、PCのルートになってしまい、相対パスでしか使いみちが無い。
会社では相対パスなんて殆どつかわないのであんまり使えなかった。

・autocomplete-sass

https://atom.io/packages/autocomplete-sass

sass使うなら。私はscssだからダイジョブ。

・pigments

https://atom.io/packages/pigments
色情報に関して様々な機能を提供してくれるパッケージ。
設定等は http://qiita.com/snowsunny/items/f40c3291a580f3215797 ここが詳しい。
とりあえず色の表示の仕方だけdotに変えた。

 

※めっちゃ有名で便利なパッケージなのですが、こいつがクッソ重い問題のパッケージだったので泣く泣く無効化に。
min.cssみたいなサービス内CSSを全部まとめてminifyしたようなファイルを開くと一瞬で固まるので使い物にならない。

 

複数のPCで同じパッケージを使えるようにする【要Githubアカウント】

・sync-settings

Atomの設定をクラウド経由（GitHub）で同期させるプラグイン
Mac <-> Winでも同期可能で、一度環境を作ればどのプラットフォームにも同じ環境を展開させられる。

http://qiita.com/T_M/items/0fb0804eb1fd256aac4e

ここにいい感じにまとまってるので、もう少し環境が固まったらやってみたいと思います。

 

まとめ

結局入れたパッケージは殆ど「sublime的な。」になってしまいました。笑
高機能エディタですが、ぶっちゃけソースを書くのにあれもこれもは必要ない場合が多いですよね。

後はできるだけマウスに持ち替えたくないので、次はキーバインドの設定周りを見なおして行きたいと思います。

良いなと感じた点はUIがおしゃれなのと、思いの外パッケージが豊富に用意されていた事。
現在勢いのあるエディタなのでパッケージ開発も盛んな事でしょうか。

ペインの切り替え等も出来るので、ターミナル、エディタ、ファイル管理等をAtomだけで完結さられるようなるのは大きなメリットですね。

デメリットというかマイナスは点はやはりレスポンス。。
どうしてもややもっさりな感じが否めません。これは私のPCが古くてスペック的にキツイせいもあるかもしれませんね。

あとはCSS、HTML、JSなどでUIが構成されてる関係か、パッケージのスタイルや修正が当たるまで
ウィンドウを開いてから少しラグがあったりします。

インストール型のアプリケーション使ってるのに、ちょっとwebのブラウザベースな感じがしてしまうのは私だけなのでしょうか…

なにはともあれ、sublimeもいい加減飽きてきた所だったので、しばらくはAtomを使い倒してみたいと思います！

 

おまけ

iTermみたいにウィンドウが半透明に透けてるのが好みなんじゃー！
という方は以下を参考に。

gheよりソースコードcloneしてきて、設定をちょちょっと変えてリビルドしてあげれば可能なようです。

http://qiita.com/yusugomori@github/items/22db3774f6fa9f0c6553

 

透け透けがお好き！

その他、導入にあたって参考にしたサイト様

今注目のテキストエディタ「Atom」の使い方と便利機能まとめ [code部]
http://blog.codecamp.jp/atom_utility/

WordPress編集用にWEB開発エディター「Atom」の初期設定をしてみました [寝ログ]
http://nelog.jp/wordpress-atom

Atom でインストールしている package 一覧 [qiita]
http://qiita.com/iorionda/items/b108e73e51ff40049c60

【超おすすめ！！】Atomのパッケージ、テーマ、キーバインディング、設定を紹介してみる（※随時更新）[qiita]
http://qiita.com/snowsunny/items/f40c3291a580f3215797

初心者のためのテキストエディタ。迷ったら Atom がおすすめ。[Mdesign Works]
http://www.mdesign-works.com/blog/web/atom-text-editor/

Atomとapmを本腰入れて使い始める [qiita]
http://qiita.com/gogotanaka/items/63b5cf173feb7bc8f160

[Atom Editor] 俺の設定とプラグインをさらす[qiita]
http://qiita.com/agektmr/items/4da2c362fef6598fc382

いま入れてるAtomプラグイン（パッケージ）メモ（2015年5月）[きじとら]
http://kijtra.com/article/my-atom-packages/

Atomで最近使っているパッケージ [たけぞう瀕死ブログ]
http://takezoe.hatenablog.com/entry/2015/12/07/105842

 

BEM入門編

なぜBEMが必要なのか

私たちはHTMLとCSSを使うことでしか、Webサイトを作ることができませんが、HTMLとCSSにはプログラム的な機能が備わっていません。そのために、フロントエンドエンジニアは次のようなトラブルに遭遇することがままあります。

スタイルの優先順位のコントロール不能状態

id属性を使ったスタイル指定や、深すぎる入れ子は、スタイルの優先順位のコントロールが難しくなります。そこで、禁忌とされる!importantの多用を誘発することとなり、その結果、さらに優先度のコントロールが難しくなってしまいます。

汎用的に使えないスタイル

HTMLの要素セレクタに直接スタイルが指定されていると、例えば、同じ見た目のまま見出しレベルだけを変えてスタイルを流用したい場合や、メニューの現在地だけリンクを外しつつスタイルは維持したいという場合に、CSSに手を加える必要があります。

.box h2 { border: 3px solid gray; }

例えば、上記のような指定をしていると、同じスタイルのまま見出しレベルをh3にしたい場合、.box h2, .box h3 { ... }のようにセレクタを追加しなければなりません。さらに、同じ.box内に別のデザインの見出しを追加したい場合、border: none;などで上記のスタイルを打ち消さねばなりません。

もし要素セレクタでなく、class属性を使ってスタイルを指定していれば、このような問題は起こりません。

パーツを別の場所に流用すると表示が崩れる

パーツ単体で独立しておらず、別のパーツに依存したスタイル指定になっていると、パーツを別の場所に移動した場合に、表示が崩れることがあります。

.entry-page  .title { border: 3px solid gray; }

例えば、上記のCSSの場合、.titleだけを別の場所に流用したいけれど、流用先は.entry-pageではない場合、このスタイルを流用することができません。

もし.titleだけを独立したパーツとしていれば、どこにでも流用できます。

制作者本人しかわからないclass名の命名ルール

class名の命名ルールが決まっていないと、他の人がそのHTMLを見たときに、どこからどこまでがひとつのパーツのまとまりなのかわかりません。

パーツの流用時、JavaScriptが動かない

JavaScriptの挙動をセットにしてパーツ化されていないと、そのパーツを別の画面に流用したときに、該当するCSSとJavaScriptを正確にコピーできないことがあります。そうすると、スタイルはきちんと当たっているけれど、JavaScriptが動作しないといったトラブルが起こる可能性があります。

BEMで設計することで、これらの問題を解決できます。

BEMが解決を目指すポイント

BEMの公式ドキュメントでは、BEMという方法論が、どのような目標を達成すべく開発されたのかについて、次の3点を挙げています。

長期間メンテナンスできる設計で、ファーストバージョンの開発をすばやく

開発スピードが速く、しかも長期間メンテナンスしやすい設計を実現するには、設計ルールを明確に規定する必要があります。ルールを明確に規定することで、class名の命名ルールやファイル構造などで、個人個人が悩む時間が少なくなり、その分開発スピードが上がることが期待できます。

チームのスケーラビリティ

チームの規模拡大が容易であるためには、チームに入った新しいメンバーが、できるだけ短期間で即戦力になれる必要があります。チームに新しいメンバーが入っても、そのメンバーがBEMさえ理解していれば即戦力になります。また、時間がたってもチームが変わってもメンテナンス可能な状態を維持できるでしょう。BEMはチームの共通言語の役割をします。

コードの再利用性

コードの再利用性は、Webサイトを構成するパーツがどの程度、独立して設計されているかで決まります。パーツを完全に独立させることができれば、コードの再利用が容易になります。ここでの再利用とは、CSSによる見た目の話だけでなく、JavaScriptによる振る舞いも含んでいます。

BEMで設計する目的

BEMはもともと、プロジェクトの成長にともなって、既存のページが変化していくことを前提として考え出されました。また、変更がある場合は、その対応コストをできるだけ低減することを目的としています。

BEMは多くの人がかかわり、長く運用されるプロジェクトに、特に向いていると言えるでしょう。キャンペーンページなどの期間限定でしか使われないサイトでも、開発をすばやく行えるため、BEMを利用する価値はあるでしょう。

BEMを構成する3つの要素

BEMは、Block、Element、Modifierという3つの概念だけ理解してしまえば、あとはclass名の命名ルールに則って記述するだけの単純な方法です。

まずは、Block、Element、Modifierが、それぞれどのような関係にあるのかを、簡単に説明します。

世の中に存在する多くのWebページは、ヘッダー、ナビゲーション、商品説明、フッターなどといった、パーツの集まりで構成されています。BEMでは、これらのパーツをBlockと呼びます。

WebページはBlockの集まり

1つのBlockは、Block自身を構成する部品のようなものを有しています。例えば、検索フォームBlockなら、「入力フィールド」と「ボタン」の2つの部品で構成されています。これをElementと呼びます。

同じBlockであっても、通常の状態とエラー状態などのように、装飾が異なることもあるでしょう。BEMでは、そうした装飾に関する調整を、Modifierと呼びます。

だいたいの関係がわかったら、以降、実際のコード例に沿って、それぞれをどのような考え方で設計するのかを解説していきます。

Block（ブロック）

例えば、次のようなコードの場合、searchという名前のBlockに、inputと、buttonという2つのElementが属していることになります。

検索フォームのBlock

<div class="search">                           <!--Block-->

  <input class="search__input" type="text">    <!--Element-->

  <input class="search__button" type="submit"> <!--Element-->

</div>

一般的なWebページの場合、Blockは何度も繰り返し出現することが想定できます。そのためBlockを識別するためにはid属性を使わずclass属性を利用します。

Blockの繰り返し

Blockはどこにでも置くことができ、Blockの中にBlockを含めることも可能です。ただし、CSSではBlockを入れ子にしてスタイルを指定してはいけません。

なぜなら、Blockは完全に独立し、Blockを別の場所に移動しても、単体で動作可能である必要があるからです。

Blockの中にBlockを含める

特定の条件によりスタイルを変更するには、後述するModifierを利用します。

Element（エレメント）

ElementはBlockの構成要素で、そのElementが属するBlock内でのみ意味を成します。

<div class="search">                           <!--Block-->

  <input class="search__input" type="text">    <!--Element-->

  <input class="search__button" type="submit"> <!--Element-->

</div>

Elementのclass名には、必ず所属するBlock名を含めます。

.search { ... }

.search__input { ... }

.search__button { ... }

Block名を含めることでclass名は冗長になりますが、次のようなメリットがあります。

·         CSS上でセレクタを入れ子にする必要がなくなり、スタイルの優先度で頭を悩ませる必要がなくなる。

·         ルールが統一されるため、HTMLを見ただけで、どこからどこまでがひとつのBlockなのかがわかりやすくなる。

ひとつのElementはBlock内で何度も繰り返し利用できます。

Elementの繰り返し

Modifier（モディファイア）

既存のBlockやElementと似ているけれど、見た目や動きが少しだけ違うものを作りたい場合には、新規にそれらを作るのではなく、Modifierを使うことができます。

例えば、同じリストで、行頭記号が2種類以上存在する場合や、同じメニュー内の「タブ」であっても、現在ユーザーがいるタブだけ、見栄えを変える場合などです。

Modifierは、BlockやElementのバリエーションの軸（例：行頭記号）や、状態（例：現在地）を表すプロパティの役割をします。

Modifierは名前（key）と値（value）を持ち、複数のModifierを同時に使用することができます。

Modifierには、Blockに対するModifierと、Elementに対するModifierがあります。

BlockのModifier

さきほどの例で考えると、同じリストで、行頭記号が2種類以上存在する場合です。リストというBlockにModifierが必要です。

BlockのModifier（リストの行頭記号が2種類ある場合）

この場合のclass名は「Block_key_value」で表します。

次のようなコードの場合、listというclass名のBlockに、typeのバリエーションがあり、それはdiscとcheckという2種類だ、ということがわかります。

<ul class="list  list_type_disc">

  <li class="list__item"></li>

  <li class="list__item"></li>

  ...

</ul>

<ul class="list  list_type_check">

  <li class="list__item"></li>

  <li class="list__item"></li>

  ...

</ul>

ElementのModifier

同じメニュー内の「タブ」であっても、現在ユーザーがいるタブだけ、見栄えを変える場合は、タブというElementに対するModifierが必要です。

この場合のclass名は「Element_key_value」で表します。

ElementのModifier（メニューの現在地を表す場合の例）

次のようなコードの場合、menu__itemというclass名のElementに、state（状態）が違うものがあり、それはcurrentという現在地の状態を表すものだということがわかります。

<ul class="menu">

  <li class="menu__item"></li>

  <li class="menu__item  menu__item_state_current"></li>

  <li class="menu__item"></li>

</ul>

class名の命名ルールとセパレーター

これまでのサンプルコードの中で、クラス名の中に__というように、アンダースコアを二重に使っていることに気付くでしょう。この__や、_、-は、単語と単語を区切るために使用していて、BEMではこれをセパレーターと呼んでいます。

BEMでは、誰が見てもわかるように、Block、Element、Modifierそれぞれの区切りに、一貫したセパレーターを使うことが重要とされます*。

*注：セパレーター

BEMは専用のツールを使ってWebサイトを生成する場合もあり、その場合はツールによって決められた、所定のセパレーターを使うことが重要となります。ですが、ここではツールを使わないことを前提として解説しています。どちらにしても、セパレーターを統一することは重要です。

セパレーターの種類

ここでは、BEM開発者の記述方法に合わせたセパレーターを紹介していますが、次の3種類の区切りをきちんと区別でき、それが一貫していれば、セパレーターの種類は自由です。

1.    BlockとElementとの区切り

2.    Block（あるいはElement）とModifierとの区切りと、Modifierのkeyとvalueの区切り

3.    BlockやElement名を、2つ以上の単語で表す場合の単語と単語との区切り

大切なのは、クラス名を見たときに、セパレーターの種類によって、それがBlockとElementの区切りなのか、Modifierの区切りなのか、それともただの単語の区切りなのかが、はっきり判別できるようにすることです。

BlockとElementの区切り

「Block__Element」と、区切り文字にアンダースコアを2つ繋げたものを使用します。

<ul class="menu">

  <li class="menu__item"></li>

  <li class="menu__item"></li>

</ul>

Modifierの区切りと、Modifierのkeyとvalueの区切り

「Block_key_value」または「Element_key_value」のように、区切り文字にアンダースコア1つを使用します。

<ul class="list  list_type_disc">

  <li class="list__item"></li>

  <li class="list__item"></li>

  ...

</ul>

<ul class="menu">

  <li class="menu__item"></li>

  <li class="menu__item  menu__item_state_current"></li>

  <li class="menu__item"></li>

</ul>

単語の区切り

BlockやElement名を、2つ以上の単語で表す場合は「単語-単語」のように、区切り文字にハイフンを使用します。

<div class="search-result">

  <div class="search-result__item">...</div>

</div>

コラム：キャメルケースや別種のセパレーターの利用

単語の区切りにハイフン（ - ）を利用せず、キャメルケース（searchResultなど）にすると、BEMのセパレーターとの区別がつきやすくなります。

<div class="searchResult">

  <div class="searchResult__item">...</div>

</div>

また、アンダースコアや連続セパレーターにこだわる必要もないため、次のように記述することもできます。

<div class="searchResult">

  <div class="searchResult-item">...</div>

</div>

どのようなセパレーターを使う場合でも、サイト内で統一されていれば問題ありません。

BEMのメリットとデメリット

BEMのメリットとデメリットについてまとめておきます。

メリット

BEMの公式ドキュメントには、デザイナー、フロントエンドエンジニア、プログラマーなどの、プロジェクトに関わるチームメンバー全員がBEMを理解することで、次のようなメリットがあると述べられています。

·         HTMLとCSSは、いつでもデザインの変化に対応できる

·         プログラマーとフロントエンドエンジニアは、お互いのコードに貢献し合える

·         皆が同じ言語でやりとりできるので、コミュニケーションが取りやすくなる

額面通りのメリットを実際に享受できるかどうかは、BEMの考え方を理解し、それぞれの立場で、間違いなくコードに反映できるかにかかっています。

特に、Modifierという存在は、かなり概念的なものであるため、実際にModifierをどのように使うかは、チームメンバー内で意思の疎通が必要かもしれません。

デメリット

筆者としては考えられるデメリットとして、次のような点があると考えます。

·         独特な記法のため、BEMを知らない人から見ると、違和感を持つ人もいる

·         ElementやModifierの名前が冗長になりがち

独特な記法に対する違和感ついては、デメリットという大げさなものではないかもしれません。従来のCSSを書き慣れている人が、BEMを使い始めると、感じるかもしれないことです。

名前が冗長になりがちな点に関しては、Blockの名前をできるだけコンパクトにするしかないですが、単語を省略しすぎると意味が伝わらなくなり、そちらの方が問題があるため、バランスを見ながらある程度は割り切りましょう。

まとめ

こういったHTMLとCSSの設計手法は、昔からいろいろと存在し、開発者それぞれが各自、似た考えを持って同じような設計*をしていたりします。しかし、そこまで具体的に系統だてられてルール化されている例は多くないと思われます。

*注：CSSの設計

ちなみにピクセルグリッドでも、BEMと似たような考え方でCSSを設計、運用しています。興味のある方は次のシリーズを参照してみてください。

「CSSの設計」シリーズ