最近友人がwebを触り始めているので、その人用に資料でも作ってどうせならブログにも書くかと思ってここに書いてます。
公開すると強い人に目をつけられてしまいそうですが、何かございましたらtwitterとかgitlabとかに連絡くれると助かります。
とりあえず、モダンなwebの書き方を教えたいのですがweb関連のツールとか言語とかは半年とかもっと短いサイクルで移り変わっているのでモダンとは言い切れません。なので自分が今使っている環境の紹介です。
この記事を見てとりあえず自分でググれるようになってくれたらいいなって思ってます。
とりあえずhtml系css系js系3編でまとめます。
HTMLはつまるところのXMLなので<タグ></タグ>というもので囲むようにして文書をかく奴ですね。初めて触ったのは中小学校の授業で<CENTER>タグとか<TD FONT="RED">とかで頑張って凝ったデザインで自己紹介とか書いた覚えがあります。
そして若かれし僕は思ったはずです、タグを一々閉じるのめんどくさ。そんな適当な理由で使っているのがPugです。
わんちゃんのイラストのPugです。特徴としてはhtmlのタグの内包関係をPythonみたいにインデントで代用することができます。これにより閉じタグを書かなくていいし、何より可読性が高くなりました。うれしい。
html
head
titile ここはタイトル
body
h1 大きい見出しどーんPugではこんな感じで5行でかけます、マトモにhtmlで書いたら8-10行かかりますね。
さらに言えばimportができるのも嬉しい。headerやfooterなどの共通部分はは別ファイルへ切り出してページを作っていけます。さらには変数・関数・forなどもあります。
小中学校でやったhtmlの授業では文字に色つけるには<p font-color="red">みたいにやったり空白作りたくて</BR></BR>...みたいなことやってたと思うんですが、今のwebではhtmlの属性にスタイルを入れるのは非推奨です。
理由は色々あるみたいですが、何よりhtmlは文章や写真などのコンテンツに専念してスタイルはcssで書いてね、です。このご時世クローラーとかスクレイピングとかもあるし、webページを見るのは人間だけではないのでhtmlに余計な情報を書かないようにしていきましょう。
CSSを書いていて辛いことは、element{...}の形式で書いていくときに、htmlは入れ子構造を持つのに対してCSSにはありません、これを解決するためにidとclassにわかりやすい名前をつけていくわけですが、cssが肥大化したり複数ファイルに別れたときにはアホな僕には扱いきれません。ムズカシイ
そんなわけで、cssを便利に書くための言語があります。
cssに関してはScss・Sassを使っている人が多いイメージですが僕はStylusを使っています。前者の２つははCSSを拡張したものです、細かい話は自分でググってね。CSSにimportとか変数とか関数とか入れ子構造などの仕様を追加したものです。
そしてStylusです、追加されている仕様はほとんど同じなので出来る内容は一緒ですが記法が違います、Stylusの作者はPugと同じ人なのでインデントで構造を表します。これにより入れ子構造がわかりやすいので、class名がかぶったり記述場所間違えたりでスタイルが上書きされてもすぐに解決できます。良き良き。
ついでに言うと、レスポンシブ対応で頑張ってmedia query書いてたり、フレームワーク使ったりしてたのがこういったcss以外のものを使えば関数と言う形で楽にかけます。🍣
最後にjsです、正直普通に書いてても困らないよね。UX的にjsが必要で書いたりする分にはそこまでコードも肥大化しないと思うし、現行のブラウザであればES6も動くよ。
jsに関してはプログラミング言語と言うこともあってかディベロッパーが頻繁に仕様を変更・追加しているのでここ数年だけでも描きやすくなっています。improt(require)もサポートしてるし、コード圧縮も問題ないです。
それでもjsに満足できない人たちはいっぱいいるので、同様に派生言語があります。今有名なのはTypescriptかな、jsに仕様を追加した形態を取っているのでjsのまま文法を書いても動きます。
今までの3つは別の言語を生み出していましたがjsに関してはjs->jsと言うものが必要になることが多いです。さっき言ったように短期間で仕様をボンボン追加しているので、最新のブラウザでは動くけどアップデートしてないブラウザでは動かないことがザラです。みんなIEを恨んでるのはこのせいです。Androidとかもやばいよね。
そこで候補互換を持たせるためのツールが色々あります、どれが有名とかよくわからないんですが僕はBabelを使ってます。ググると出てくるweb frontのロードマップ図に書いてあるやつ使えばいいと思います。
とりあえず3遍でまとめたけど、これらは全てnodejs上で動くCLIツールとして提供されています、npmかyarnで入れて使います。毎回コマンド打って変換するの面倒だからタスクランナーとか使うと便利です。僕はGulpを使ってます、ちょっと違うけどwebpackとかが有名ですかね？そもそも今何が流行りなのかわかりません。
とりあえず僕はこんな環境でやってるぞ！と言う表明でした。
- gulp
- pug
- stylus
- js(es6)