SaCSS Special13 SaCSS SUMMER FESTIVAL 第2弾 FRONTENDで登壇してきました。

Posted on:2017-08-11

先週の土曜日にSaCSS SPECIAL 13の「おれが使うさいきょうえでぃた」で登壇してきました。
当日は15分のショートセッションだったのですが、、時間配分をまったく考えず話したので、めっちゃオーバーしてしまいました。。orz
ほんとすみません。。すみません。。m(_ _)m

スライドもそんなに無いし、ダラダラと話しすぎました。。もう少し考えて構成考えるべきでした。。

「おれが使うさいきょうえでぃた」という戦争が起きそうなタイトルで話をしましたが、
個人的な意見で言えば、エディタは何を使っても良いと思っています。
※人それぞれ使いやすい使いづらいというものなので。

今回の内容は、エディタの布教活動目的という内容ではなく、
これからエディタを選ぶ人・他のエディタに変えてみようという方向けに
どういった基準で今のエディタを選んで使っているのかなどを紹介してみました。

  • エディタの選ぶ基準
  • 愛用エディタの使い分け(おれ編)
  • おれが選んだ理由
  • おれが惚れてしまったテーマや機能の紹介 PhpStorm

メインのエディタ(ツール)は、Sublime Text 3とPhpStormを併用して使っています。

今回のタイトルでエディタという言葉を使って話をしたのですが、
PhpStorm自体は、統合開発環境 IDE(万能ツール)のため、厳密にはエディタ?ではないのですが、
自分がコードを書くメインのアプリだったので含ませて話をさせてもらいました。

エディタの選ぶ基準

どんなエディタを使いたいか。どういった機能がついていると使いやすいか。
まずは、どこに基準をおいて自分のエディタを選ぶところが重要です。

私自身の選ぶ基準としては、いくつかあるのですが強いて言えば以下になります。

  • デフォルト状態でも機能が備わっている
  • EditorConfigが利用可能
  • Emmentが利用可能
  • シンタックスハイライトを自由に変更できる
  • スニペット登録できる
  • ウィンドウ分割できる
  • 検索や置換(正規表現が使える)ができる
  • テーマを変更できる(ダークでマットな質感が個人的好み)
  • 設定ファイルを端末共有できる

デフォルト状態でも機能が備わっている状態が良いのですが、
実際いろいろなエディタを触った中でデフォルトでも使いやすいエディタはなかったりしています。
ある程度自分でカスタムして使うことが一般的です。

それでもカスタムする部分が少ないのが一番良いと思います。
環境構築がさくっと設定できる・すぐ業務に取り掛かれるのが一番ですね。

最近とくに重要視しているのは、EditorConfigとEmmentは必須ということです。
EditorConfigは、改行コードのズレやインデントを強制的に設定してくれるツールになります。
業務において、エディタで使えるようにして改行コードやインデントを統一することが目的になります。
複数人で作業している時に、設定ができない場合エディタを使用すると、エディタの設定をみてしまうため改行コードやインデントが違いおき差分がどこにあるのかわかりづらくなるという問題がおきたります。

Emmentに関しては、HTMLやCSSを書く時にしようするマークアップの手助けをしてくれるツールになります。
「Zen Coding」という名前から変わったのがEmmentになります。
自分は「Zen Coding」ときから使っているので、このツールがないと効率的に書くことができなくなります。。

他にも、シンタックスハイライトを変えれたりスニペット登録・設定ファイルの共有などが基準としてあります。
私自身も、最低限あれば必要な基準を設けてエディタを選び今の形になりました。
まず自分がほしい機能をピックアップをしてから探してみるのが良いと思います。

愛用エディタの使い分け(おれ編)

フロントエンド業界では、色々なツールを使うことが求められます。
エディタにもツールとして対応している・対応していないなど色々あるのですが、
業務の内容に応じて、エディタを使い分けることも大切だったりします。

Sublime Text3

  • マークダウンでメモ書き・ドキュメント・ブログを書く時
  • 急いでいるときやちょっとしたソース調整などを行う時

ドキュメント・ブログ以外にも、メールや長文になりそうなチャットなどでも使用しています。

PhpStorm

  • プロジェクト管理してソースを書く時
  • ファイル数が多く横断検索が多い時
  • ターミナル操作をまとめて操作したい時
  • ファイルのリビジョンがほしい時
  • Diffを取る時
  • PHPをいじらないといけない時

基本的に、プロジェクトで開発するときや開発ファイルの横断検索が多い時はPhpStormを使用しています。
また、ブランチが多い時などにGitのGUIを使いブランチを目視したいときも使用しています。

おれが選んだ理由

Sublime Text3

  • とにかく起動が速い
  • シンプルで使いやすい(機能拡張で自分好みにしやすい)
  • 求めている機能が充実している

PhpStorm

  • ファイルの横断検索使いやすい(ファイル数が多いプロジェクトなどは有効)
  • 強力な補完機能
  • ターミナル・Gitなどフロントエンドに必要なツールが最低限整っている

スライドでは、選んだ理由は多くあげたのですが、
特に上の3つが選んだ理由になります。

おれが惚れてしまったテーマや機能の紹介 PhpStorm

詳しく紹介できなかったので、PhpStotmのテーマや機能について少し書かせてもらいます。

PhpStormを購入したのが、去年の11月くらいでまだ使用歴が浅いので詳しく説明は出来ないですが、
約8ヶ月使ってみて、良かった機能やテーマなどをまとめたいと思います。

テーマについて

デフォルトのテーマは、基本使いたくない派(好きな色にしたい)だったので、
今の使っているテーマを紹介します。

PhpStormには、IDE全体のカラースキーマとエディタ内のカラースキーマを変更することができます。

私は、以下のプラグインは入れてUIを変更しています。
Preferenceからpluginを選びMaterial Theme UIと入力すればインストールが可能です。

エディタ内のカラースキーマは、「Predawn」というテーマを使わせてもらっています。
こちらは、Color Themesから「Predawn」を選びダウンロードしてPhpStormへインストールしています。
初期画面のConfigureからImport Settingsからダウンロードしたファイルを読み込みます。

PhpStorm Themesというサイトから好きなテーマを選ぶことができます。

keymapについて

Sublime Text使用歴が長いため、keymapはSublime Textに近いものを採用しました。
Githubで公開されているkeymapを使わせてもらっています。(もちろん、自分で作ることも可能)

約8ヶ月使ってみて良かった機能

  • TODO機能
  • 変数や関数の検索(Shift + option + o)
  • なんでも検索(Shiftキー 2回)
  • コミット時のコードレビュー
  • データベースのダイアグラム機能

たくさん機能はあるのですが、個人的に救われた機能をピックアップしてみました。

TODO機能

TODO機能は、他のエディタにもあるようですがPhpStormで初めて知った機能でした。
そのコードの行で、何の実装をするかなど書いておけば後で見返したあとに把握できる機能になります。
一覧でみることができるので、コードに絞った内容ではありますが簡易的なタスクツールとしても使うことができます。

変数や関数の横断検索

変数や関数の検索・なんでも検索は、とくに横断検索や規模が大きいソースを触る時に活躍できる機能です。
コードジャンプも可能で、目的なメソッドや関数などに飛ぶことができるので、無駄に検索を使う手間が省けます。

コードレビュー

コミット時のコードレビューは、コミットの時にレビューボタンがあるのでコミット前にコードのチェックすることができます。
最近では、タスクランナーなどで事前にエラーなどを出してくれるので、そこまで必要性が高い機能ではないですが、
レガシーな環境下などタスクランナーが入ってない昔のコードを改修する時は、使える機能になります。

データベースのダイアグラム機能

データベースのダイアグラム機能は、sqlのテーブルを可視化してみることができます。
SQLを開くことは滅多にないのですが、SQLのテーブルってどうなっているのかを見た目で把握することができます。CMSがどのようにテーブルになっているのかを知るにはいいツールだと思いました。

PhpStormの機能はたくさんあって学習コストは高いところもあります。
まだまだ知らない機能がたくさんありますが、使い続けて勉強していきたいと思っています。
機会があれば「おれの使うさいきょうえでぃた(改)」が出来ればと思っています。(もう少しエディタにフォーカスした内容で!!)

どのエディタも優れてはいますが、目的にあうものや自分が使いやすいものを見つけていくことが大切かと思います。
まずは色々なエディタを触ってみるところから始めてみてはいかがでしょうか。