お久しぶりです！きゅんです。
またまたサボってしまいましたが、めげずに書いていこうと思います。
今回は、web制作をするうえで必要なエディタについて書いていこうと思います。エディタってやっぱりすごく大事だと思うんですよね。
皆さんはどんなエディタを使っているんですかね？
人気どころの
- Sublime Text
- dream weaver
- Brackets
- Coda
などなどあるかと思いますが、僕が浮気しまくった結果いきついたのがこのエディタだった・・！
Atomエディタ
以下で説明をしていこうと思うので読んで見てくださいなー
Atomエディタとは
GitHubの創業者Chris Wanstrath氏が「Web技術を用いて、Emacsのように自由にカスタマイズできる新世代のエディタを開発する」というすばらしい思想の元から始まったオープンソースのエディタとなります。
2014年2月にパブリックベータ版をリリースして、2015年6月にバージョン1.0が正式にリリース。
リリースから数か月でアクティブユーザー100万人が利用をしています。
様々なプラグインがあり、web制作においてとても便利なツールなのです。
特徴
sublimetextを利用している人であればすぐに理解できると思うのですが、タブ型でとても使いやすいユーザインターフェースとなっています。
プラグインも無料で利用できるものが多数なので、自分の使いやすいように利用ができます。テーマを変更して、見やすい色にしたりフォントを変えたり背景画像を変えたりと本当に自分の好きなように使えるのが特徴です。
なぜ選んだか？
完全に僕の好みだと思います。こればかりは派閥があると思っています。
BEMかSMACSSか
PSDかaiでのデザイン作成か
みたいなもんだと思っています。（どんなもんなのだ）
- Markdown（マークダウン）に対応している
- sublimetextの「有料にせんでええの？」なメッセージがうざい
- 単純にUIが気に入っているから
- gulpとの相性がいいと思っているから
- フォントが綺麗だから
個人的な理由が上記になりますね。Markdownは結構メモ取るときとか書いたりしているんですけどsublimetextはプレビューできなかったと思います。（今できるようになってたらごめんなさい）
Markdownは本当にメモ書きとか、会議のレジュメとか結構便利なのでおすすめです。
gulpとの相性はこれも個人的に思っているからです。こちらでgulpのこと書いてます。
あと全体的に思っているのがUIが綺麗なんですよね。フォントのガビガビ感もないし結構使いやすいなと思っています。
sublimetextのあのメッセージがすごく嫌なのが一番の理由かもしれません。お金払えよって感じですよねw
Atomのインストール
いきなりですけどAtomのインストール方法になります。ここは知ってるよ！って人は飛ばしてもらって全然大丈夫です。
そこまで複雑なことはしていないのですぐに進められると思います。
まず、下記でAtomをインストールしてください。それぞれお使いの対応OSに合ったインストーラーをインストールしてください。
現在だとこのような画面になっています(2018年7月現在)
Atomのパッケージ
ここでAtomの初期設定をー！と思ったのですが、この部分は多分みんな書いているので敢えてカットします。
やるとすれば日本語化くらいかなと思っています。
でもでもプラグインが一番大事だと思っているのでこの部分はしっかりお伝えしていきますよー！
atom-beautify
ソースの並びをさっくり綺麗に並べてくれる優れものです。これのいいところはフロントエンドでよく触るcssの部分かなと思っています。綺麗に整っていないソース見るとイラっとしてしまいますよね。そんな悩みを右クリック一つで整形してくれる機能です。
emmet
コーダーにはとてもありがたい機能です。HTMLを1から書いていくとすごく時間がかかってしまいますよね。これは記述をショートカットして早く書いてくれます。
よくあるやつだと下のようなことができちゃいます。
[box class=”black_box” title=””]![/box]
をTABキーを押すと
[box class=”black_box” title=””]
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<title>Document</title>
</head>
<body>
</body>
</html>
[/box]
これはいずれ書こうと思っていたのですが、こんなことができちゃいます！コマンドを覚えればもっといろいろな事が早く書けちゃうのでおすすめですよー！(Atomに限りません)
highlight-column
簡単に言うと、自分が今どの行でどの列でソースをj書いているかがわかるツールです。
列をハイライトしてくれたり、インデントのズレや、スペースが全角なのか半角なのかわかりやすくなります。半角全角問題はめんどくさいころとになるので初期の段階でこの問題は潰れます。
japanesemenu
メニューを日本語化してくれます。英語苦手な人はぜひ入れましょう。
markdown-writer
markdown記述を可能にしてくれる機能です。簡単に言うと文章を記述するためのマークアップ言語です。
これが書けるとマークアップできる人です。
tool-bar-markdown-writer
上で紹介したmarkdown記述をお助けしてくれるツールバーが表示されます。
書き方を覚えなくても直感で記述ができるようになります。本当に便利！
split-diff
Atomエディタ内で分割してDiffを見る事ができます。Macユーザなんかにはおすすめではないのでしょうか？
file-icons
サイドバーのファイルに見やすいアイコンがつきます。文字だけで判断するよりアイコンが合ったほうが判断しやすいのでぜひぜひ入れてください。
以上になります！もっと入れてると思ったんですけど、パッケージは入れすぎ注意です！予期せぬエラーが起きたり重くなったりしてしまいます。自分の最低限必要なパッケージを入れて動かしたほうがPCにも優しいかと思います。
僕は過去に重すぎてアンインストールして入れ直した！なんてことも経験しているので気をつけてください・・
個人的に思うコト
最低限技術的に知識がある人向けに書いてみました。パッケージの紹介とか必要最低限に絞って書かせてもらいました。
上でも書いたのですが、入れすぎは本当によくないと思います。サイト制作しててエディタが固まるのは非常にまずいことなんですよね。。HTMLもcssも全て死んだ・・なんてことになったら一番まずいです。
このAtomの欠点も書いてしまうと、sublimetextより重いと言うことにあるかと思います。
sublimetextは結構軽いのが特徴なんですけどAtomは重いんです。立ち上がりさえ気にしなければ、快適に扱えるんですけど最初のストレスさえ気にしなければ問題ないかと思いますよー！
使いやすいwebエディタなので使って見てくださいー！
