2016.11.22 web制作

最近コーディングで使っているツールをまとめてみた

最近の仕事の比重がライティング＜＜＜コーディングになっている感じの上谷です。

 

僕がコーディングを始めてなんだかんだで1年近くになるので、コーディングが楽になるツールを何個か使ってます。

 

最初はひたすらベタ打ちをしていた僕ですが、今ではツール無しにコーディングはできません。

やっぱりツールを使うと楽で早く効率的にできるんですよね。

 

また、楽になるとミスも減ります。

昔はcssのスペルをよく間違ったりしてたんですが、ツール使うようになってミスが激減しました。

 

ツールは導入が少しだけ面倒くさいですが、導入が出来たらめちゃくちゃ楽になるんです。

だからツールを使ってない人は、早いこと導入するのをオススメします。

 

自分のメモも兼ねて自分の使っているツールを晒していこうと思います。

 

emmet

emmetはhtml/cssをコーディングする際に強力にサポートしてくれるツールです。

 

これがあるだけで、めちゃくちゃコーディング早くなります。

どれだけ早くなるかは下のgifアニメ見るとわかるかと。

 

emmet 
<!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>

こんだけのコードがわずか10秒ぐらいで打てるようになります。

何をしたのかというと、emmetのショートカットキー的なのを展開したんですよね。

 

例えば最初「!」 だけだったのが、いきなり

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

こんなコードが展開されましたよね。これはemmetを使って展開しています。

 

「!」の後ろにカーソルを置いて、emmetが発動するコマンド（僕の場合はtab）を入力すると展開されます。

 

使い方は、http://designup.jp/html-emmet-307/これとか見るといいかな？

 

読むとわかりますが、何も難しくありません。

 

導入もテキストエディタにemmetのプラグインを入れるだけなので楽勝ですね。

 

僕は、Atom、Sublime Text3、Branketsでプラグインがあるのを確認しました。

最近のテキストエディタならemmetのプラグインはありそうです。

 

またemmetはhtmlだけでなく、cssにも使えます。

 

tac

が

text-align:center;

となります。

18文字が3文字で打てるわけですから、どんだけ楽なのかは誰でもわかりますね。

 

これあると非常に楽になるので、使ってない人は導入してみるのをオススメします。

 

Sass(scss)

お次はSass。知ってる人は知っているcssのメタ言語というものらしいです。

 

Sassで何ができるかというと、cssをプログラミング的にかけるようになります。

基本はcssですが、色々と便利になってます。

 

例えば定数を定義できたり、ネストでかけたり、関数が定義されていたり、、、

ここで説明すると長くなるので、別のサイトでみるといいかと。。。

これとか,http://albatrosary.hateblo.jp/entry/2013/05/25/195614

 

まあ色々できるんです（笑）

 

色々できるといっても使うものは限られています。

とりあえずネストができるようになるだけでかなり便利になるのかなと。

 

ネスト(.scss)

.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で書いてます。

 

使うにはコンパイルするツール、sassやscssをcssに直すものが必要になります。

僕はKoalaを使ってます。

koala

http://blog.sou-lab.com/koala/

コンパイルツールは、他だとCompasが有名なのかな？

 

Sassを使うためには、パソコンにSassとコンパイルするツールをインストールしなければいけないのでemmetに比べると面倒ですが、これからがっつりコーディングする人は導入すると楽かも？

 

テキストエディタ：Brackets

テキストエディタ：Bracktes

http://brackets.io/

 

僕はメインで使っているテキストエディタはBracketsです。

 

どっちかというとマイナーなのかもしれませんが、無料で使えて中々使いやすいやつなのです。

 

テキストエディタってパソコンによって動作しないものがあったりして、テキストエディタの導入は中々面倒なのですが、Bracketsは中々安定して使えています。

 

Macならまず使えるのですが、Windowsだと動作がおかしくなったり、プラグインが起動しなかったりすることがちょいちょいあります。

 

性能も申し分なく、使いやすいUIに多くのプラグイン。また、Adobeが開発しているようでPSDファイルをBracketsで直接開けたりします。

 

もちろん、emmetのプラグインもあります！

 

信頼できて中々便利なやつです。

 

不満があるとすれば、起動に若干時間がかかることですね。

 

Sublimet Text3ほどのスピードは出ません。あれ起動早いですよね…

 

Bracktesを使う前はSublime Text3だったので、ちょっと起動が遅いのが不満な点ですね。

それでもAtomよりも速かったりするので、めちゃくちゃ遅いわけじゃありません。

 

まとめ

こんな感じで最近はこの辺のツール使ってコーディングしてます。

もしこの辺のツール使ってなかったら導入すると幸せになれるかも…?

 

今回の内容を知った本

フロントエンドエンジニア養成読本 HTML、CSS、JavaScriptの基本から現場で役立つ技術まで満載! (Software Design plus)

コーディング勉強するならオススメの本

作りながら学ぶ HTML/CSSデザインの教科書

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

RECOMMENDこちらの記事も人気です。