RubyonRails入門- その4 前編
その3(Railsでの簡単なアプリ開発編)はこちら
その2(Rails起動編)はこちら
その1(Railsインストール編)はこちら
その0のようなもの(PrograteでRails触ってみた編)はこちら
※今回の記事はめっちゃ長くなったので2分割します。
後編はこちら
追記はこちら
また、筆者が使っているAtomのバージョンは「1.29.0」です。
Atomで開発環境を整えよう！
前回では入門サイトを参考にRailsのアプリを実際に作りながら、Railsの体系的な理解を深めました。
ただ、Railsアプリ構築中にふと思ったのが…もっとリッチな環境でRailsを作りたいと言うこと。
これまでRails開発をBracketsというエディタで行なっていたのですが…Rails開発用に環境を整えてたわけでもなかったので、少し息苦しさを感じていました。
「だったらRails開発向けの拡張機能を入れればいいじゃない」と思い調べてみましたが、どうやらBracketsではRails開発向けの拡張機能はあまりないらしく…。
どうしようかと思ってた矢先、偶然qiita記事でこんなタイトルのものを見かけます。
qiita.com
「うーんAtomかぁ…確かに色々ありそうだよなぁ…」と思いつつ、記事を詳しく見てみたところ…。
なんと！Atomの拡張機能を駆使すれば、ターミナル画面、ブラウザ画面、エディタ画面をすべてAtom内に統合出来ちゃうとの事です！しゅごい！！
これさえあれば、画面切り替えの煩雑さに悩まなくて済みそうです…(´；ω；)ｳｯ…!
長年(4ヶ月程度)使っていたBracketsちゃんの元を離れるのは名残惜しいですが…。
まぁこちらははてなブログ記事のMarkdown編集用に使う様にする、と言う事で。
早速AtomでRails開発環境を整えていきましょう！
なお、今回参考にした記事を下記に連ねておきます。
とっても参考にさせていただきました…ありがとうございます！
AtomでRailsを爆速開発する環境を作ってみた - Qiita
超捗る！AtomでRubyを書く前にいれておいたほうがいいパッケージ5選 + α - Qiita
2017年 Atomオススメパッケージ - Qiita
http://blog.suginoki.xyz/atom/2016/02/25/Atom-Plugins.html
インストールしたパッケージ
今回は、下記のAtomパッケージ22個をインストールしました。
- Rails快適環境構築の要
- browser-plus
- terminal-plus
- 快適コーディング用パッケージ
- デザイン関連で有用なパッケージ
- pigments
- 他のパッケージを使用可能にするためのパッケージ
- linter
- intentions
- busy-signal
- その他の素敵なパッケージ
- file-icons
- japanese-menu
- linter-ui-default
- open-recent
- project-manager
- sync-settings
- Show Ideographic Space
- regex-railroad-diagram
- 面白そうなパッケージ
- editor-stats
Rails環境に特化した様にカスタマイズしたい…と思いつつも、ついついあまり関係ないパッケージも入れちゃいました。
また、Git関連のパッケージも入れようかなと思いましたが…その辺りはまた後日ということで。
インストールしたパッケージについて
これだけパッケージをインストールすると、各パッケージにどんな機能があるか忘れちゃいそうなので…。
備忘録的な意味も込めて、インストールしたパッケージに関するメモを残しておきます。
browser-plus
Rails快適環境構築の要のパッケージの1つ、browser-plus。
Atom上でブラウザを開ける様になるパッケージです。
ctrl-alt(option)-oで、下記の様な感じでブラウザを起動できます！
なお、browser-plusのSettings -> HomePage より、起動時のURLを調整可能です。
デフォルトではbrowser-plus://blankになっているので…これをRailsの起動URLhttp://localhost:3000/に変更します。
これだけでも十分なパワーを発揮してくれますが、次のパッケージで更に凄いことになるのです…！
terminal-plus
Rails快適環境構築の要のパッケージのもう1つは、terminal-plus。
Atom上でターミナルが起動できる様になるパッケージです。
ctrl-shift-@で、下記の様にターミナルを開けます！
なお、このターミナルの色ですが…。
Atomスタイルシートに下記の様に記載することで、自由にカスタマイズが可能になります！
.terminal-plus .xterm { background-color: rgb(11,35,44); /* ターミナル画面の背景色 */ color: #ddd; /* 文字の色 */ ::selection { background-color: #cbcbcb; /* 選択範囲の背景色 */ color: #ddd; /* 選択範囲の文字色 */ } .terminal-cursor { background-color: rgb(60,189,204); /* カーソルの色 */ } }
また、Settings画面で起動後のシェルの種類やパネルの高さなどの細かい設定ができます。
もちろんシェルを複数タブで開くことも可能ですよ！
これでRailsを快適に開発できる環境が整いました…が、さらに快適にしていくためにいくつかのパッケージを導入していきます。
linter系統
linterは、コードを解析しエラーがある箇所を発見してくれるパッケージです。
ただ、linterというパッケージのみをインストールすれば使える様になる…と言うものではなく…。
このlinterパッケージに、各言語に対応した個別のlinter系パッケージもインストールしなければなりません。
そして、linterで検出されたエラーをGUI表示するパッケージlinter-ui-defaultも必要です。
更にこのlinterは、intentionsとbusy-signalパッケージに依存しているため…。
このlinterパッケージを使うには、最低でも「4つ+対応する言語」のパッケージをインストールする必要があります。
結構面倒なパッケージですが…コードを解析してくれるのはありがたいかなと思い、今回導入してみました。
なお、linterをインストールすると、Atom上にこんなステータスバーが追加されます。
下記の記事に、この辺りに関する説明がまとまっていたので参照に。
Atomでエラーチェックをするlinterステータスバーの見方・使い方
ちなみに自分は今回、HTML、Sass、Rubyのlinter系パッケージをインストールしました。
コーディングがちょっとしやすくなる小型(?)パッケージ
他にもソースコードファイルを自動でインデントしてくれるatom-beautifyや、
Rubyの〇〇~endブロックにハイライトしてくれるruby-block、
ソースコード中の単語をダブルクリックすると、ファイル内にある同じ単語全てをハイライト表示してくれるhighlight-selected
なんかを導入しました。
pigments
こちらは下記のように、記述したカラーコードの色をハイライト表示してくれるパッケージです。
他にも色をカラーピッカーで指定できる様になるパッケージとかもありましたが…。
色々一気に入れちゃうとごちゃごちゃしちゃうかなと思い、この辺りで留めておくことにしました。
その他パッケージ
その他にも様々なパッケージを導入しましたが…。
1つ1つ解説すると記事の長さ的にやばくなっちゃうので簡単に。
file-icons: ファイルの横に、そのファイルの種類を示すアイコンを表示してくれます。
アイコン表示の対応ファイルがかなり多いので、これさえ入れておけばこのファイルが何なのか、一発で分かるようになりますね。
japanese-menu: Atomを日本語化してくれるパッケージです。
そんなに難しい単語が使われているわけでもないので、やらなくても大丈夫っちゃあ大丈夫ですが…。
まぁ日本語で表示してくれてる方が分かりやすいですよね。
open-recent: 最近開いたファイルを簡単に開けるようにしてくれるパッケージです。
このパッケージをインストールすると、Fileメニュー欄にOpen Recentというものが選択出来、ここからこのパッケージの機能を使用できます。
project-manager: 現在開いているタブやファイル等の環境を「プロジェクト」として登録してくれるパッケージです。
登録をうまく行えば、例えばRails開発環境スタイル(terminal開いてbrowser開いて…)から普通のエディタスタイルに瞬時に切り替え可能になります。
結構有名なパッケージ(というか自分がインストールしたパッケージは有名どころが多いですが)らしく、使ってる人もかなりいるとのことです…！
sync-settings: 自分のAtomの環境設定を、Gistで保存してくれるツールです。
これを使えば、複数の端末で同じAtom開発環境を簡単に共有することが可能になります。
詳しくはこちらの記事を→Atom の設定を sync-settings を用いて共有する方法 - 情報系大学院生のWebメモ
show-ideographic-space: 全角スペースを視覚化してくれるパッケージです。
間違えて打ち込んだ全角スペースも、これで駆逐できますね！
regex-railroad-diagram: こちらは正規表現記法を視覚的に表現してくれるパッケージです。
正規表現の文章を選択し、cmd-rと打てば、下記のようなパネルが出てきます。
正規表現に慣れてなかったり、複雑な正規表現文を入力する際にお世話になりたいと思います。
また、ちょっと面白そうなパッケージも導入してみました。
editor-stats: こちらは「直近6時間分のマウスやキーボードの動きを可視化してくれる」パッケージです。
まぁ、これを導入したところで何か便利になる…みたいなことはありませんが…。
ひとしきり作業を頑張った後にここをみると、自分が頑張った形跡が見れていいかもしれませんね。
後編に続く…
まだまだAtomに関して書き残しておきたいことがあるのですが…。
この段階で既に相当の文量になっているので、記事を2分割しようと思います。
というわけで、後編の記事に続く…！
