はじめに
誰だって楽をしたい！
「口に出すかどうか」と、「どのフェーズを楽にするかの価値観の違い」だけで、誰しもそう思っているはずだ！
そんなに苦労が美徳なら、プログラミングをアセンブリ言語でやるといい！それは嫌だろう？
もはやご飯を食べるぐらいWebサイトを作ることは当たり前で簡単なことになってきた。ご飯はコンビニで買えば楽なように、Webも先人たちが作ってきたものを使えば、Webサイトなんて、すげー楽に作れる。
カッコいいサイトを楽に作るのに、一昔前までは有料のツールでも無い限り、苦労はつきものだったが、今はもう無料でここまでできちゃうんだぜ！
もちろんWordPressとかのCMSを既存テーマだけで使うなら、もっと楽だから、このキジは必要ない！
俺はHTMLやCSSをゴリゴリ書くからそんなものは使わないなんて変態もいるかも知れないし、検討してニーズにマッチしなくて使わない真面目ちゃんもいるかも知れない。しかし、これらのツールを知ってて使わないのと、知らないで使わないのだと雲泥の差だ！
ちゅーわけで、今日は、爆速で楽勝にコーディングできそうなフレンドリーな口調で書くぜ！
「お前は馬鹿か！俺はもっと便利なの知ってる！！」って先輩は、マジ教えてくださいお願いします！！
筆者について
SE/PGを12年目。脊椎反射で会社を捨て、フリーランスエンジニアになる。
業務アプリがメインだが、何も知らぬ友人からWebサイトを作ってくれと言われるので、無い知識を脳みそ絞って作ってみている。
自分のサイト
最近の作成サイト
株式会社shi.ze.n - オリジナルデザイン
たむそんナチュラル・マーケット - WordPress既存テンプレート
使えそうなヤツラ
ここからどれを使うかは、君たちの自由だ！
使いやすそうなのを使うと良い！
HTMLコーディングを高速かつ楽にする
Webである以上、何らかの形でHTMLを作る必要がある。そんなのは当たり前だのクラッカー。
2つの方法がある。
- コーディングを補助してくれるツールを使って開発する
- 独自の記法で変換を掛ける
違いは、後で修正する時にHTMLを修正するのか、独自記法を修正するのか、の違いだ！
プロなら想像できると思うが、前者のほうが教育コストは少ないが、ファイルはHTMLになるから後は今までと同じだ。
後者は修正にもその記法でできるという違いだ！
Emmet
zen-codingと言う名前は辞めたらしい！
まずは、Emmet公式サイト（英語） に動画があるので見ればわかる！
これはテキストエディタにプラグインとしてインストールすりゃいい。お気に入りのエディタが対応してないって？まさか？してるやつを使いな！
これは、動画を見てわかっただろうけど、独自の省略記法をタイプしてTabキーなどのショートカットキーを押せばHTMLに変換される！
例えば、#box>ul>li*3>aで
<div id="box">
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
いっちょ上がり！
Pug(Jade)
こっちはEmmetとは違ってコンパイルする方式のほうだ！後述のSaasっぽいな！
環境の準備が大変そうだが、こんな感じに書くらしい！
doctype html
html(lang="en")
head
title= pageTitle
script(type='text/javascript').
if (foo) bar(1 + 5)
覚えるのはこれだけ！Pug(Jade)のよく使う9つの書き方
SASS / SCSS
HTMLを早く書けるようになったら、
次はわかるな・・・？
そう、CSSだ！CSSもEmmetを使っても良いし、
他の選択肢としては、SassとかScssとかあるらしいぞ！
生意気にもsがいっぱいでややこしいから、使いたい人が調べてくれ！
Sass？ Scss？！ Less！？ CSSと何が違うの？ ・・まとめてみた。
ライブラリ・フレームワーク
CSSフレームワーク
Bootstrapが世界で一番使われているはずだ！知らんけど！
グリッドレイアウトでレスポンシブデザインも楽勝！
違うのが良い御仁はこちらを！
2017年の CSS フレームワークベスト 5
開発ツール
静的サイトジェネレーター
実際のWebサイト開発現場では、複数店舗持ったクライアントのサイトを店舗分作ったり、複数ページで同じ内容を表示したりなんてのはよくあることだ！
CMSを使うぐらいなら、こっちを使ったほうが、表示速度も早くていいんじゃないかと思う！
これらのツールで共通部分をテンプレート化したり、イマドキはMarkdownでページを作ることができるぞ！いろんなジェネレーターがあるから好きなのを使ってくれ！
これが有名みたいだ！
- Go環境ならHUGO
- javaScript(node.js)環境ならNext
- RubyならJekyll
- 日本語ドキュメントがあるのはMiddleman
他のジェネレーターはStaticGenというサイトにまとまっているぞ！
ブラウザでコーディング（ライブコーディング）
ブラウザでコーディングしちゃおう！って発想はサーバーでJavaScriptを動かしちゃおう！って発想に似てるな！
よく聞くのはこの辺！他にも色々あるが、いくつか触ってみて、やっぱり好きなのを使ってみると良い！
君が使いやすいツールなんて俺は知らない！
おまけ
Web Maker - チョロメの拡張機能にもあるらしいぞ！Emmetへの対応はわからん！以上！
ブラウザの自動更新
そうは言っても、好きなエディタを使いたいよな！
俺たちはブラウザの更新ボタンを押す手間さえも惜しい！
Blisk
このブラウザは自動更新だけでなく、スマホ表示とPC表示を合わせて見れるステキなブラウザらしいぞ！
インストーラーでインストールが必要だ！
チョロメや火狐を使うなら、こっちもある！
Browsersyncを利用してお手軽ブラウザ確認環境をつくろう
こっちはちょっと環境の準備が必要だ！
もっと手軽にこんなやつもあるし、それぞれのブラウザに拡張機能も探せばあると思う！
FirefoxのアドオンAuto Reloadは、HTML以外のファイル更新時にも便利
その他にも
ソースコードの整形
これは常識かつ必須だが、テキストエディタに搭載されているか、プラグインやらで追加できるはずだ、自分のテキストエディタに相談してみてくれ！
バージョン管理
静的サイトでも、リリースバージョン、開発バージョン、複数のファイルを管理する必要がでて来ると、ソースの管理がどんどん複雑怪奇骨折になる！
しかし安心してくれ！自力で管理する必要はない。
Gitを使おうぜ！
サーバー環境によっては、コマンド一発デプロイもできる！
GUIで操作するためには、ソースツリーを入れよう！
ロゴの作成
今はロゴもブラウザで一発だ！
おわり
便利なのが見つかったら随時追加してくぞ！