コーディング速度改善方法について

Question

###前提・実現したいこと
最近、新規ページのコーディングを行う機会が増えてきており、制作時間をもっと短縮したいと考えています。

例えば、

・Emmetを使用する
・◯◯のツール・ソフトを使用する
・自分専用のモジュール一覧を作成しておき、そこからソースコードをコピペする
・画像の書き出し方法を◯◯のように改善する

等が挙げられると思いますが、
皆様がコーディング速度効率化のために行なっていることを教えていただけないでしょうか。

Answer 1

私は静的サイトジェネレーターを使っています。生のHTMLもCSSもJavaScriptも、ここ最近は、本番ページ用に書いたことはありません(生で書くのはteratailで回答するための動作テストぐらい)。あとは部分的にReactで一部コンポーネント化しているぐらいです。

---

【蛇足】

HTMLは元々SGMLの一つでした(HTML5からは違います)。お世辞にも、SGMLのコードは人に読みやすいものでも、書きやすいものでもありませんでした。また、その複雑さから、パーサ(解析する方)も複雑になり、SGMLであったHTML4まではブラウザ毎に違う解釈をすることもよくあることでした(ブラウザ間で表示が異なると言う問題)。

厳密な解析が可能になるように作られたのがXMLです。HTML5にもXML版のXHTML5が用意されています。しかし、XMLはさらに冗長になり、書きにくさ、読みにくさが増す結果になりました。HTML5は慣習を大事にし、ある程度SGMLらしい省略可能を設けながら、パーサの仕方を細かく指定することでブラウザ間の違いを無くしました。そのため、SGMLとは互換の無い部分が出てきたため、すでにSGMLではありません。しかし、タグという猛烈に書きにくい書き方は残されたままになってしまいました。

CSSはスタイルがC言語風でした。C言語やそのスタイルの言語(Javaとか)を知っていれば受け入れやすいし、それらのパーサは既にあったので特に急ぎ作る必要も無かったと言えます。では、C言語風のスタイル(;と{})は果たして書きやすい、読みやすいと言えるのでしょうか？C言語が作られた当初、パーサはまだ貧弱で今ほど研究も進んでいません。人間にとって読み書きやすさよりも、(パーサの役割をする)コンパイラにとって解析しやすさをとったと言っても過言ではありません。そう、同じく書きにくいスタイルなのです。例えば、同じC言語風にみえるようなGoは末尾の;を省くなど工夫をしています。そういったことを何も考えずにCSSを作ってしまいました。

もう一つCSSには問題があります。プログラマティックなことを何も考えてなかったからです。変数や階層構造はパーサを作る方に負担がかかりますが、そういったことはせず、CSSを書く側に負担を求めたのです。似たようなことを何度も何度も書くこと強いたのです。冗長になる所をなんとかしようとか考えもしなかったのです。

JavaScriptも同様です。同じくC言語風になっています。逆に、JavaScriptは;が省略できる場合があるなど、中途半端に複雑で曖昧な仕様になってしまいました。その他、JavaScriptは言語自体に問題点が数多く存在し、決して良い言語とは言えないものです。

つまり、私が何を言いたいかというと、生のHTML、生のCSS、生のJavaScriptはいずれも人間が直接書くことに適していないということです。いくら工夫しても、生で書き続ける限り、その苦労はほとんど減りません。本当に効率よくしたいのであれば、HTML、CSS、JavaScriptを生成する技術に注目すべきなのです。Jade、Slim、HAML、Sass、Less、nextcss、TypeScript、Babel(ESnext+JSX)、CoffeScript等々、すでに多くの道具が揃っています。これらを学ぶのがいやというのであれば、いつまで経っても生で書くしか無く、この地獄からは逃れら方法はないでしょう。そんな状態なら、ホームページビルダーなりDreamweaverなりを買ってくるか、さっさとWordpressとかのCMSに移行した方がいいと思っています。

Comments

[aki0923f]

ご回答ありがとうございました。
そうですね。仰る通り、私も効率化＝手作業で組むこと自体が間違っているというのは大いにあると思います。

今後は人工知能が発達し、ますますコーディングはロボットの作業になる時代になりそうですね。

[think49]

> 私は静的サイトジェネレーターを使っています。
具体的には、何の静的サイトジェネレーターを使っているのでしょうか。

[raccy]

> 具体的には、何の静的サイトジェネレーターを使っているのでしょうか。
主に使っているのはMiddlemanですけど、やけに重いときがあるので、別のものに変えようかなと色々検討中です。

[think49]

To: raccy さん
なるほど、ありがとうございます。

Answer 2

基本的なSnippetプラグインのインストール

HTML、JavaScriptやCSSの基本的なスニペットはプラグインとして配布されているので、それをインストールします。
自動補完でよく使うものは出てくれるようになるので便利です。

スニペットを自作する

コーディングガイドラインがあれば、基本的な書き方や組み方があると思います。
それをスニペットとして作成し、単純なキー操作で即座に呼び出せるようにします。

HTMLファイルで「tmp」と打つ→テンプレートが出力される など。

その他よく他からコピペして使うものを登録します。
テンプレートのようなケースを除き、登録するコードの単位は小さくした方が使いやすいと思います。

Comments

[aki0923f]

ご回答ありがとうございました。
スニペットは一度使用していましたが、エディタがEmmetと競合してバグを起こしてしまい使用をやめておりました。
再度使用することを検討してみます。

Answer 3

contents: "";
position: absolute;
top: 0;
right:
bottom: 0;
left: 0;

sassのmixiを多用するのが一番効果が得られると思います。上のような記述毎回書いていませんか？
あとはsublime textのプラグインのhayaku。
jQueryやWordPressの関数のスニペットなど、いちいち検索に時間を使わないことですね。

Comments

[aki0923f]

ご回答ありがとうございました。

会社でSassを使うハードルが高く（というか、使えない人がいるので容易に導入できない）プレーンなCSSを書くしかありません。。
Sassを導入するだけでも速度は変わりそうですが、導入できないのが辛いです。。

Hayakuは魅力的ですね！
会社はSublime Textが使用できないので業務では活躍できませんが、プライベートで使ってみようと思います

[matometaru]

そうなんですね。
私の会社も1年前までcssでした。公開までscssでコーディングを行い、それ以降は誰でも修正しやすいようにcssで更新すればいいと思います。便利だと気づけばみんな使うようになりますよ。

テキストエディタ指定されているんですか。厳しいですね。