noseblog

menu

2019.6.19

コーディング速度を向上させる3つのツール[初心者コーダー向け]

こんにちは、のせです。

今回はコーディング速度を向上させる3つのツールについて紹介していきたいと思います。

この記事はhtmlやccsの基礎を習得し、今後どんどんコーディング速度をあげていきたいという方向けの内容となっています。コーディング速度の向上は時給が上がるのと同じ意味なので一見の価値はあるかと思います。

紹介するツールは以下の3つです。

  • Emmet
  • Sass
  • Bootstrap[グリッドシステム]

では詳しく見ていきましょう

Emmet

EmmetはHTMLやCSSを省略して書くことのできる技術です。以下のようなメリットがあります。

  • 少ない記述でHTML/CSSが書ける
  • 導入が簡単
  • デメリットが全くない

少ない記述でコードが書けることによってコーディング速度を大幅に向上させることができます。例えばエディタこんなコードを書いてみます。

これを書いてキーボードのタブボタンを押すと、こちらのコードが出力されます。

普通ならulを書いてその中にliを書いて、コピーして、、、、という作業を、わずか5秒程度で記述することができます。

また、classやidも”.”や”#”を使って簡単に記述できます。初めは記述方法にをいくつか覚える必要がありますが慣れてくるともはやEmmetがなければコードを書く気すら失せるようになってくると思います。

また、EmmetはCSSでも力を発揮します。例えばCSSでこちらのように記述します。

これを書いてキーボードのタブボタンを押すと、こちらのコードが出力されます。

このようにCSSを省略して書くこともできます。ふつうに記述するより圧倒的にコーディング速度が向上します。

ほかにもいくつか自分がよく使う記述を紹介してみます。

  • p0-20 → padding: 0 20px;
  • m0-auto → margin: 0 auto;
  • lstn     →  list-style-type: none;
  • bgc      →   background-color: #fff;

他にもたくさん便利な記述があるのでまだ導入してないという方は導入方法が解説された記事を紹介するのでぜひ一度試してみてください

使い方[Emmet]

Emmetは基本的にエディタのプラグインとして導入する方法が一般的かと思います。

Atomで使う

Atom+Emmetで爆速なHTML,CSSコーディング環境を入手する

 

SublimeText3で使う

じっくり解説。SublimeText3にEmmetをインストールする

 

Emmetの紹介は以上になります。

Sass

SassはCSSをより簡単に書くための言語です。Sassには多くの機能があるのですが結果的に以下のようなメリットを得ることができます。

  • .ClassA .ClassB .ClassC というように何度も階層的にCSSを書く必要が少なくなる
  • 変数を使うことでフォントや色などの一括修正・変更が可能になる
  • よく使うコードをまとめて定義して、関数のように呼び出して使える
  • CSSのファイル管理が簡単にできる

Sassを使うとCSSを少しだけプログラミング言語っぽくかけます。

CSSを書いていると、.ClassA .ClassB .ClassC というようにわざわざ何度も階層的に書く必要がありますが、Sassを使うとそのようなストレスは無くなります。

また、少なく書ける文コードの可読性も良くなります。

例えばこんな記述をSassファイルに書いてみます。

このファイルに後述するコンパイルという操作を加えるとCSSファイルに以下が出力されます。

 

いちいちClassA .ClassBのように書かなくても良いことがわかります。

ここでは、Sassの”アンパサンド”、”変数”、”ネスト”という3つの機能を使っています。他にも便利な機能がたくさんあるのですが、ここではあまり深くは解説しません。

こちらの記事にSassの機能がとてもわかりやすく書かれているので、気になった方はご覧ください。

Sassで最低限覚えておきたい6つの機能

また、Sassはファイル分割の機能もとても優秀で、僕はSassファイルをフォントと色を定義する用、関数(mixin)を定義する用、その他を記述する用というように3つに分けてファイルを管理しています。

使い方[Sass]

Sassのデメリットとして導入するまでが少しめんどくさいという点があります(特にWindows)。

ググってみてその通りやってもエラーが起こる可能性もありますが、導入した方が絶対良いのでめげずにインストールすることをおすすめします。

以下に参考になりそうな記事を紹介しておきます。

Macで使う

SassをMacにインストールする方法

Win・Mac】Sassを導入&初めてScssを使ってみる

Windowsで使う

【Windows】Sassの導入手順

Bootstrap[グリッドシステム]

最後にBootstrapのグリッドシステムの機能を紹介します。

まずBootstrapとはwebサイトでよく使われる機能をCSSを記述せずに簡単に実装することができるCSSフレームワークの1つです。

そしてグリッドシステムとはBootstrapの機能の1つでサイトの横幅を12本の”グリッド”という単位に分けてレイアウトを指定する機能のことです。

グリッドシステム

出典:WEBSAE

グリッドシステムを使えば、複雑なレイアウトもcssを一切記述することなくレスポンシブで実装することができます。

このグリッドシステムを一から解説するともう2本ほど記事ができてしまいそうなので、今回は詳しい解説は避けて、他の記事を紹介することにします。

Bootstrapのグリッドシステムの使い方を初心者に向けておさらいする

使い方[Bootstrap]

Bootstrapはとても簡単に使えます。公式サイトからファイルをダウンロードして使用するかCDNを使って使用する方法があります。

こちらの記事にまとまっていたので興味があればみてみてください。

Bootstrapの使い方!Web開発初心者にもわかりやすく解説

まとめ

すいません、紹介しといてなんですが、自分はあまりBootstrapは使っていません。

理由は自分で一度書いたコードを使った方が速くすむことが多いからです。

しかし、今回はhtmlとcssの基礎を習得した人向けに解説しています。まだ自分のコードのテンプレがないという人も多いと思うので紹介させていただきました。

Emmetに関してはほぼ必須、Sassはできればかなり良い、Bootstrapは一度使ってみて判断するという感じで良いかと思います。

今回は以上となります。