【時短】コーディング爆速化への道｜スタッフブログ

【時短】コーディング爆速化への道

こんにちは！コーダーの大野です！

コーディングを初めてから、約1年半になります。
色々振り返って見ると、1年前くらいの方がコードを書くスピードが早かったような気がします。
というのも、コーディングを始めたての頃は今よりも知識がなく、「どうやってこの形にするか」ということしか考えてなかったからでしょう。

今はパーツ化、アクセシビリティ、文書構造、サイトの高速化などを意識しながらコーディングしているので、
同じページをコーディングするにも、作業量や考える時間がすごく増えたように感じます。
そもそものワークフローの時点で変わってきている気がしますね。

最近僕がコーディングをしながら意識していることは
「決められた工数で、自分が必要なだけの考える時間を確保する」
ということです。

そのためには、
「コードを書く時間は極力少なく。」
ということが不可欠になります。

もちろん記述の仕方にも左右されますが、
今回は「早くコードを書くために使っているもの」に焦点を当ててご紹介したいと思います！

今使っているもの(2020/11/10現在)

Emmet
Visual Studio Code拡張機能
Sass
MAMP
Clipy

1. Emmet

EmmetはHTMLを短縮して書くツールのようなものです。

※倍速です。こんなに速く打てません。

僕の使っているVisual Studio CodeではEmmetが標準装備なので、プラグインも入れる必要はありません！

Emmetは難しそうという先入観で導入を躊躇っていたのですが、
使ってみるとCSSのセレクタような直感的な書き方で簡単に書けます。
むしろなぜ今まで使わなかったのか、、、、と思っています。

参考：「はじめて」でも簡単！Emmetの使い方とよく使うパターン集

2. Visual Studio Code拡張機能

エディターはずっとVisual Studio Codeを使っているのですが、良いところは、拡張機能が豊富なところですね。
自分に合った拡張機能を探して使うと効率化を図れそうです。
その中でも特に重宝しているのが「html tag wrap」と「Auto Rename Tag」です。

保守や更新時に多いのですが、既存のHTMLタグをdiv等で囲みたい時、開始タグと終了タグを別々で記述する必要があります。
これが意外と手間がかかるんですよね。
上記は従来の実装方法のサンプルです。

上記がVisual Studio Codeの拡張機能、「html tag wrap」を使って実装したサンプルです。
Macの場合、範囲を選択後、Option + W で選択範囲を包括するタグを生成できます。

また、既存のHTMLタグを変更したい場合、こちらも開始タグと終了タグを別々に変更する必要があります。
変更箇所が多いと、変更漏れや閉じ漏れ等で表示崩れを引き起こす可能性が高まります。

上記の後半で、divタグをsectionタグに変更していますが、
開始タグを変更した時点で、終了タグにも変更が反映されています。
こちらもVisual Studio Codeの拡張機能である「Auto Rename Tag」を使用しています。
特に呼び出すコマンド等はなく、拡張機能を有効にした場合に自動的に反映されます。

ミスするリスクを減らし、尚且つ記述量を減らしてくれるのでとても重宝しています！！

参考：htmltagwrap
　　　Auto Rename Tag
　　　コーダー必見！Visual Studio Code 設定と拡張機能フルまとめ

3. Sass

当ブログで何度Sassのことについて書いたかわかりませんが、
HTMLとCSSで実装しているのであれば、Sassは導入しておくべき！と個人的には思っています。

直感的に使えて、導入コスト・学習コストも低いので、使えて損なし！
という感じだと思います。
※導入コストの低さについてはgulpでコンパイルしない場合を想定しています。
　書き方については、SCSS記法を前提とします。

Sassは何が良いか

ネストで書ける

上記のようなCSSを書くとき、いつも思うのですが、
何回も同じコードを書くのって手間ですよね。
コピペしたとしても面倒です、、、、

上記だと、ul.list liって何回書かんといけんのや！！！！
という気持ちになります。

Sassのネストを使うとこのような形になります。

ネストが深くなると、かえってわかりづらくなるので、
個人のルールとしてネストは3つまでというルールを設けています。(そのため、上の画像と詳細度を変更しています)

同じ表記を繰り返さず、ネストして直感的に書くことで無駄な記述が減りスピードアップに繋がります！
これだけでもSass導入してよかったと思えますね、、、、、

その他にも、変数が使えたり、自作関数が使えたりと様々な機能がありますが、
Sassのその他の機能についての説明は割愛します。

参考：【CSS】Sassは絶対使った方が良いよ！使い方入門編

4. MAMP

MAMPは、オープンソースソフトウェアで構成されるソリューションスタックで、個人的Webサーバをセットアップするためのワンクリックソリューションです。数回クリックするだけでWeb開発環境をインストールできます。

macOSまたはWindowsを実行しているコンピュータ上で動的Webサイトを実行するために利用できます。独立したPC上で、別のWebサーバを必要とせずに、Web開発環境を構築できます。

です！！！！！！！

WordPressを使う案件で、ローカルでPHPを書けたら、headerとfooterをパーツ化してしまえて、ちょっとした修正で全ページのHTMLを書き換えなくて済むよね！！という動機です。

実際、グローバルナビゲーションの軽微な文字修正で15ページある全てのソースを書き換えていたことがあったので、あまりにも非効率すぎて導入しました。

PHPでサクッとパーツ化しておいて、１箇所の変更で済ます。
有能。無駄な作業は減らそう。

本当はローカルでWordPressを構築できる「Local by Flywheel」を使おうと思っているのですが、未だに手が出せていません、、
最終的には「Local by Flywheel」に移行する予定です。

参考：MAMP
　【MAC】MAMP（フリー版）のインストールから初期設定＋バーチャルホスト設定までをまとめてみた
　　　 LOCAL
　　　超簡単にローカル環境が構築できるLocalbyFlywheelの使い方