【html効率化】4年間のコーディングで使ったツールまとめ
Webで生計を立てて4年目ぐらいになります。
最初はatomにひたすらベタ打ちでhtmlを書いていましたが、最近はコーディングが楽になるツールを色々使っています。
自分用のメモと共にコーディングで使っているツールの書簡をまとめたので、休憩がてらに読んでみてくださいませ。
emmet
emmetはhtml/cssをコーディングする際に強力にサポートしてくれるツールです。
これがあるだけで、めちゃくちゃコーディング早くなります。
どれだけ早くなるかは下のgifアニメ見るとわかるかと。
上のgifのコードは↓なのですが、これが10秒ぐらいで打てるようになります。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8″>
<title>Document</title>
</head>
<body>
<div class="page">
<nav>
<div class="nav">
<ul>
<li><a href=""><span></span></a></li>
<li><a href=""><span></span></a></li>
<li><a href=""><span></span></a></li>
<li><a href=""><span></span></a></li>
</ul>
</div>
</nav>
</div>
</body>
</html>
何をしたのかというと、emmetのショートカットキー的なのを展開したんですよね。
例えば最初「!」 だけだったのが、いきなり
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8″>
<title>Document</title>
</head>
<body>
</body>
</html>
こんなコードが展開されましたよね。これはemmetを使って展開しています。
「!」の後ろにカーソルを置いて、emmetが発動するコマンド（僕の場合はtab）を入力すると展開されます。
使い方は、https://designup.jp/html-emmet-307/これとか見るといいかな？
読むとわかりますが、何も難しくありません。
導入もテキストエディタにemmetのプラグインを入れるだけなので楽勝ですね。
僕は、Atom、Sublime Text3、Branketsでプラグインがあるのを確認しました。VSCodeはデフォで入っています。
最近のテキストエディタならemmetのプラグインはありそうです。
また、emmetはhtmlだけでなく、cssにも使えます。
tac
が
text-align:center;
となります。
18文字が3文字で打てるわけですから、どんだけ楽なのかは誰でもわかりますね。
これあると非常に楽になるので、使ってない人は早いとこ導入しましょう。
Sass(Scss)
お次はSass。有名ですかね？
Sassで何ができるかというと、cssをプログラミング的にかけるようになります。
基本はcssですが、色々と便利になってます。
例えば定数を定義できたり、ネストでかけたり、関数が定義されていたり、、、
色々便利にcssが書けるようになります。
全部覚えると大変なので、とりあえずネストができるようになるだけでかなり便利になるのかなと。
.page{
.nav{
width:980px;
margin:0 auto;
display:flex;
li{
width:100%;
}
}
}
これをコンパイルすると
.page .nav{
width:980px;
margin:0 auto;
display:flex;
}
.page .nav li{
width:100%;
}
こんな感じになります。
つまり入れ子でかけるようになるんですよね。
これだけで結構楽になります。
なお、Sassには2種類あり、sassとscssがあります。
何が違うかというと記述方法が違って、sassだと「{ 」、「}」この閉じるやつがありません。
無いと見にくいので僕はcssに近いscssを使ってます。
ちなみに上のネストもscssで書いてます。
とりあえずcssをsassで書くだけで超楽になるので入れてない人はいますぐ入れることをお勧めします。
Sass使うにはSassをcssに変換するツールが必要
なお、Sassを使うには変換するツールが必要です。（変換するのをコンパイルと言います）
具体的にはPreprosやGulpなどのタスクランナーですね。
簡単にSassを導入するなら、以下記事をご覧ください。
タスクランナー：Gulp
https://gulpjs.com/簡単に言うとSassをコンパイルする奴です。
が、他にも色々便利な機能があり、その機能の方がSassのコンパイルよりもGulpのいいところです。
僕は以下のことをGulpでやっています。
- htmlを整形
- htmlをejsでテンプレート化
- ソースを更新した際に自動でブラウザリロード
- scssのコンパイル、ミニファイ
- javascriptのミニファイ
- 画像の自動圧縮
Gulp使うにはターミナルが必要なのと、nodejsの知識がないとちょっと難しいので、ターミナル苦手な人は無理にやらなくていいかなと。
Gulp便利ですが、Gulpよりも便利なツールいっぱいあるので無理にやる必要なし。（やってもいいけどね）
GUIタスクランナー：Prepros
PreprosはGulpよりも簡単にコンパイルできるタスクランナーです。
Sassだけでなく、pugとかもコンパイルできます。ターミナルじゃなく、設定画面から色々できるので使いやすい。
初心者がSass使うならGulpじゃなくこれでいいなと思います。
https://uetani33.net/prepros/テンプレートエンジン：EJS
https://ejs.co/htmlをヘッダーやフッターなどに分解して作る時にEJSを使っています。Sassと同じようにejsをコンパイルすればhtmlが生成されます。
html分解のためにejsを使っているんですが、コンパイル速度に最近不満があり、多分EJSは首になりそうです。笑
数ページならejsでいいんですが、100ページとかなるとコンパイルに時間がかかりすぎるので、何か別のものが必要だなと。
EJSの代わりすでに見つけてるんですが、導入に億劫で数ヶ月見送っています。（笑）
テキストエディタ：Brackets
https://brackets.io/僕は一時期メインで使っていたテキストエディタです。どっちかというとマイナーなのかもしれませんが、無料で使えて中々使いやすいやつなのです。
Bracketsのいいところは、どんな環境でも安定して使えること。
テキストエディタってパソコンによって動作しないものがあったりして、テキストエディタの導入は中々面倒なのですが、Bracketsは中々安定して使えています。
Macならまず使えるのですが、Windowsだと動作がおかしくなったり、プラグインが起動しなかったりすることがちょいちょいあります。
性能も申し分なく、使いやすいUIに多くのプラグイン。また、Adobeが開発しているようでPSDファイルをBracketsで直接開けたりします。
が、不満があるとすれば、起動に若干時間がかかること。Sublimet Text3ほどのスピードは出ません。（あれ起動早いですよね…）
Bracktesを使う前はSublime Text3だったので、ちょっと起動が遅いのが不満な点ですね。
それでもAtomよりも速かったりするので、めちゃくちゃ遅いわけじゃありません。
テキストエディタ：Sublime text3
https://www.sublimetext.com/今でもたまに使っているテキストエディタです。僕が触ったテキストエディタで一番起動が早いです。
Sublime text3はデフォルトで一斉置換が複数行でできるので、それをしたい時だけ使っています。
軽いので、「あのファイルのちょこっとした修正をサクッとする」みたいな時にもいいかなと。
テキストエディタ：VSCode
https://code.visualstudio.com/今メインで使っているテキストエディタです。
色々使いましたが、一番これが使いやすいので後数年はVSCodeだなーと思います。
一番の理由は、
- エディタの設定がやりやすい
- 使いやすいプラグインが多い
この2点です。ちょっと前まではエディタの設定はjsonファイルを触らないといけなかったんですが、ちょっと前のversionからjsonいらなくて設定画面から行けるようになりました。
VSCodeの解説記事でjson触らせようとする奴が多いですが、あれは古い記事なのでご注意下さいませ。
最新版は、基本json触らずにいけます。
まとめ：ツールあると楽で早くより効率的に
最初はひたすらベタ打ちをしていた僕ですが、今ではツール無しにコーディングはできません。
ツールを使うと楽で早く効率的にできるんですよね。そうするとミスも減ります。
昔はcssのスペルをよく間違ったりしてたんですが、ツール使うようになってミスが激減しました。
ツールは導入が少しだけ面倒くさいですが、導入が出来たらめちゃくちゃ楽になります。
自分の目的にあれば何を使っても良くて、gulpじゃなくて gruntやwebpackでもいいし、テキストエディタもatomでもbracktesでもなんでもいいんですが、楽になれるツールがあるならすぐに導入した方が幸せだなあと。
【読み放題】kindleアンリミテッドで実は技術書が読める
Amazonに、読み放題のkindleアンリミテッドがあるのですが、実は技術書もあります。
技術書は、3,000円とかが当たり前の値段だったりして結構高いのでkindleアンリミテッドで技術書を読むのも結構アリだなと思ってます。
kindleアンリミテッドは月額980円するのですが、全部無料で読むことができるため、本を買うよりお得。
月に1冊技術書を読むのなら、確実に得するので、本で勉強するのが好きな人は、kindleアンリミテッドに入るのがおすすめです。
初回は30日の無料体験ができて微妙ならすぐに解約できるので、一度登録してみるのはアリなんじゃないかと。