Bracketsのプラグインでもっと快適に効率よく仕事をしよう!

スポンサーリンク




こんにちは!

会社では普段いろいろな仕事がある中で、コーディング作業をする時はもちろんAdobe社製のプロ用のソフトウェア「Dreamweaver」を使用しているのですが、自宅などでちょっとした作業をする時は違うソフトを使用して制作する事があります。そんな時に使用するのが、前回もご紹介したフリーでも高性能なエディタソフト「Brackets」で現在も使用しています。無料で使用する事ができてとにかく便利で高性能なエディタソフトです。

こちらのソフトについては前回詳しくご紹介した記事をお読みください。
実際のWEBサイト作成現場で使用してみて良かった無料ソフト「Brackets」

前回この「Brackets」についてご紹介した時は本当に基本的な部分の説明をしたのですが、その基本的な機能だけでもかなり便利で他のエディタにはないものがあります。例えばリアルタイムプレビューなどは、他の無料エディターにはあまり搭載されていない機能なのですが、非常に便利で自分の中では必須と言えるくらいこの機能をよく使用しています。

もちろんHTMLのソースをみれば、おおよそどこの部分のタグなのか、CSSは何を使用しているのかは当然この仕事に携わっているので分かります。というかソースを見て理解できなければこんな仕事はできません(笑)
でも、例えばソースやCSSを修正しなければいけない事案が発生した場合に、複雑なコーディングをしてあったりすると、ぱっと見ただけではどの部分が該当する記述なのか?どのファイルのどの部分のCSSが適用されているのかを見つけるのが難しく、解析するのにとても時間がかかってしまう事があります。そのような時にはこのリアルタイムプレビューはとても力を発揮してくれます。
いちいち変更して保存して、ブラウザで確認してという作業を必要としないのですぐに確認できてしまいますので本当に効率よく仕事がはかどります。

でもこの「Brackets」は、さらに便利な点があります。それはプラグインという拡張機能を導入する事によってさらに便利さが増すという点です。
今回はこのプラグインを使用して、コーディングという作業をもっともっと楽にして効率よく、気持ちよくお仕事をしましょうというお話をしたいと思います。

機能を拡張する事ができるプラグイン

「Brackets」には様々なプラグインが存在しています。これを全てご紹介するにはどれだけあっても時間が足りないので、今回はその中から知っていて損はしないおすすめのプラグイン「Emmet」をご紹介したいと思います。

「Emmet」って何?

「Emmet」は、以前はZen-Codingと呼ばれていたものでかなり昔から開発されてきたもです。

Emmet公式サイト
https://emmet.io/

何やら英語で書かれていますので、難しいと思いますが、簡単に言うと「Emmet」はHTMLやCSSのコーディングを簡略化して記述する事が出来るツールという事です!(雑)
一度このプラグインを使用してコーディングをしてしまうと、従来のコーディング方法には戻れなくなるくらい便利ですので使用してみましょう!

「Emmet」のインストール

「Emmet」を使用するには、プラグインをインストールする必要があります。
下の画像の赤丸の部分のアイコンをクリックします。すると拡張機能を検索してインストールする画面が表示されます。その画面の検索窓に「Emmet」と打って検索をかけるとEmmetプラグインが表示されます。
私の環境ではすでに「Emmet」はインストールされていますので「インストール済み」となっていますが、インストールしていない場合はボタンを押してインストールします。

とくに難しい設定をする事もなく、これだけですでにこのプラグインの使用を開始する事が出来ます。

「Emmet」の使い方

「Emmet」の使い方は、省略する記述方法を少し覚える必要があります。ただ、基本的なものであればそれほど複雑ではないのですぐに覚えられると思います。
流れとしては、省略する記述を書く→TAB(windows)を押して展開する。これの繰り返しとなります。
まずは簡単なものから記述してみます。

●1階層のタグを書く
これは非常に簡単です。
例えばdivと書いてTABキーを押してみましょう。すると簡単にdivの開始タグと終了タグが記述されると思います。これはpタグなどでも使用する事が出来ます。その際もpと書いてTABキーを押せば記述する事が出来ます。

●入れ子のタグを書く

この場合は、簡単なルールがあって「>」を書きます。例えばdiv>pと記述してTABキーを押して展開してみます。
すると、下のようにdivタグの中にpタグが記述されるのがわかります。

このような方法で記述すると同時に、その中に文章もいれる事が出来ます。

div>p{これはテストです}

上記のように記述してTABキーを押すと

と簡単に記述する事が出来ます。

これくらいのタグであれば、それほど通常でも難しくないので面倒くささはないと思いますが、例えば次のようなリストタグを書くとします。

 

通常の書き方で一つ一つ手打ちをしているととても面倒だと思いますが、これもEmmetであれば簡単に記述する事が出来ます。

div>ul>li

たったこれだけ記述するだけで書けてしまいます!とても便利ですよね?さらにliタグを複数挿入したい場合も「*」を使って数を入れるだけで簡単に記述する事が出来ます。
今回はliタグを5つ挿入して見ます。

div>ul>li{これはテストです}*5

このように記述してみると、一瞬にしてタグが打てます。これを手打ちしているとそれなりに面倒な作業になると思いますが、Emmetの記述法を知っていれば複雑な物も簡単に書く事ができますので、かなり作業が捗ります。

●classやid属性を入れる

今まで見てきた書き方ではdivやulなどのタグに「class=”●●”」や「id=”○●”」などの属性を入れる事が出来ません。でも安心してください!これも簡単に入れる事が出来る書き方があります。先ほどの記述に以下のように.を付けて記述するとclassが、#を付けて記述するとIDを付与する事ができます。

div>ul#list>li.btn{これはテストです}*5

下の動画ではbtnのクラスにCSSであらかじめ文字を赤に設定しています。

このように簡単にタグを書く事が出来るEmmetですが、書き方を一つ一つ覚えるのは大変だと思います。でも公式サイトにはこうしたタグを分かりやすくチートシートにしてくれています。しかもうれしい事にpdfでダウンロードする事も出来ます。これを使用してコピー&ペーストするだけで簡単にタグを打つ事が出来ます。

https://docs.emmet.io/cheat-sheet/

まとめ

今回は無料ソフトを対象として説明していますので「Brackets」でご紹介しましたが、プロ用ソフトウェア「Dreamweaver CC」でもEmmetは搭載されています。
このようなものも利用しながら、タグを打てば今まで大変だった作業も非常に効率よくできますので、知っているのといないのとでは時間のかかり方が大幅に変わってくると思います。もし、コーディングは面倒くさいなと思っているのなら、是非このEmmetを積極的に活用して見てください。きっと楽過ぎて、以前のタグ打ちに戻れなくなると思います。

スポンサーリンク




記事をシェアお願いします