ヒトナツログ

健康でハッピーになりたい

生存状況 powered by Pixela

混沌の雰囲気で静的Webページを手づくりできる「DEKOMORI」作った

お知らせ 作った インターネット

ゴミを作ったのでお知らせです。日記ではなくて、以下ずっと静的webページ手づくりのはなしが続きます。

DEKOMORIという名前の静的Webページを作るためのキットを作った。

f:id:hitonatsu:20170929111946p:plain

DEKOMORI

1natsu172.github.io

いわゆる「オレオレボイラープレート」で、同様の雰囲気のものとしては佐野さん(@sanographix)の「Rin」や、ここ最近見かけためっちゃ似たやつだと「Real world website boilerplate」などがある。

webページ制作に明るくないひとに誤解を与えるといけないので書きますが「マウスでポチポチしてたらウェブサイトができあがる」的なやつではない

DEKOMORIの特徴としてはただの静的ページを作るにしては重量級でJSは"安定版"ES.next(今年はES2017)も書いていけて色々な設定がだいたい済まされているという特徴がある。完全にオレのボイラープレートなので採用ライブラリも僕の好みが基準になっていて、構造は非常に拙いヤツという雰囲気がある。

JSに関しては実際にこのあたりのことを本番(実際のWebページづくり)に投入しようとするとやれトランスパイラだのポリフィルだのモジュールバンドラだの色々ある。webpackに突っ込んだせいでloaderが必要になったりエイリアスが必要になったりして今まで雑に読み込んでたライブラリを使うためだけに労力を要したりする。環境構築の段階で学ばないといけないことが多くてすんなりhello worldさせてもらえない。気づけば混沌の世界に足を踏み入れていたりする。
昨今はJS以外にもHTML/CSS/画像/アイコン/付随するブラウザ対応…などなど各分野においても様々な文脈があり、一言では書ききれないほど色々考える事がある。各文脈ごとにいい感じのものをこしらえるのに毎回ググったりしていて時間を取られたりする。

こういった静的ページ側のフロントエンド各分野の必要最低限の設定を僕の基準でいい感じにすでに済ませてあるのがDEKOMORIです。他にもESlint・Prettierのようなものも僕の設定ではあるものの既に設定済みなのですぐ試せる(はず)。

ようするにオレオレが全部入りという雰囲気です。

とはいえDEKOMORIにもないものはあって、BootstrapやFoundationのようなフレームワークや汎用スタイルシートのようなものはほぼ含めていない。あらかじめデザインが盛り込まれたテンプレートも一切用意していない。グリッドシステムはNEATに依存しているのでcol-sm-6みたいな手法もない。flexboxを利用したグリッドに関しては思うところがあり、いま現在は自分で素朴にプロパティ書くのがいいということに自分の中ではなっているので特に盛り込んだりしていない(CSSgridも同じく)。"手づくり"に目を据えているのでDEKOMORIはあくまで土台というスタンスで、できあがるWebページのデザイン部分には極力触れない設計にしている。

できること

  • 静的ページが手づくりできます！
雑にいうと
  • HTML
    • Pugで書く
  • CSS
    • Sassで書く
  • JS
    • だいたいES.nextで書ける
    • jQueryはimport/requireなしで使えるようにしてある
      • 使いたくなったら$って書きましょう
  • そのほか
    • いい感じに

上述したように、ようするに僕の設定が書いてあるので土台にしてよしなにウェブページ作っていってくれという気持ちです。

デプロイ機能も(雑だけど)あるので出来上がったらGitHubリポジトリ経由でGitHubPagesかNetlifyに公開できるはず。

機能とか構成とか

採用ライブラリなどはpackage.jsonを見てもらえばよいと思う。
そのほかについてはペライチのサイトおよびgitbookドキュメントにGoogle翻訳99.5%で雑に書いた。

gulp
  • gulpに完全に依存している

静的ホームページ手づくりにおいて基本的にgulpは手放せないというか手放さなくてもよいというかタスクランナーなのでタスクがある以上捨てなくてよい、餅は餅屋という気持ちなのでがっつりgulpに乗せている。JSまわりだけwebpackに担ってもらう形式を取っている。ちなみにgulpは誰も使ってないであろうバージョン4.0を使っていて3.9.1までを憶えた人に一切優しくないので最悪だと思う。しかもdevelopとproductionのタスクを分けるために3枚構成にしていて強引にbabel moduleで窓を割って各タスクをexportAllしたりしていて、やった自分でもいま非常に厳しい気持ちになっている。

JSまわり
  • webpack+babelに寄せている

ES.nextとはいえさすがにStage-0を使えるように整えてしまうのはどうなのかというのもあり"安定版"ES.nextつまりES6(ES2015)以降を基本としている(今年はES2017ですね)。ただ個人的にはStage-3はご利用は計画的にということで使ってもよいのではという気持ちがあってstage-3は使えるようにしている。
あとこの構成なので場合によってはpolyfillとかloaderが足りない場面が出てくると思う。そういう場合は都度各自で足してもらうしかないと思う。

そのほか
  • おおむねいい感じになっていてほしい

Pugはミドルウェアはさんでリクエストファイルのみ都度レンダーするようにしている。<head>タグ内のいい感じの書き方が毎回わからなくなってググっていてしんどいのでサイトの設定書いたら全自動でいい感じに吐き出してくれるようにした。
あとmixinでシェアボタン作る君を用意していて、呼び出したらいい感じのシェア内容になったボタンが勝手に生成されてお得な気分になれると思う。毎回いい感じのシェア内容になるボタンの作り方をググっていて不便だったのでラクになれると思う。公式ボタンの小さいやつとカスタマイズしたい人のためのaタグ形式の2種類がある。あと各ページで個々に外部CDN読んだりとかアナリティクスコード自動挿入してくれるとかいろいろある。

Sassは…SCSSじゃなくてすまんなという気持ちで、お手元にSCSSキットみんな持ってると思うから各自で乗せ換えて使って下さいという気持ち。NormarizeじゃなくてReset派なので、Normarize派のひとには標準値のマージンすらなくてつらいかもしれない(でもフルスクラッチで静的ページ作ると1からのCSS設計になって結局みんなNormalizeをさらにリセットしたりしているように思う)

名前について

DEKOMORIという名前についてはもともとの背景コンセプトに『デカいお皿に小さく盛る』というのがあり、これらの文字を取ってDEKOMORIになった。オシャレなイタリアンとかフレンチに行くと妙にデカい皿にめっちゃ小さく前菜やパスタが盛られていたりする場合がある。ああいうの僕は案外好きなのだけど、やっぱりちょっと過剰な感じがあるとも思っていて、心のどこかで「これ必要あるのか？」なんて思ったりする。ただの静的ページ作るだけなのにこれ必要あるのかみたいなのが心のどこかにあってリンクしている。皮肉と自虐が多分に含まれている。

ご利用したりご参考ください

おそらく宗教上の理由やアレルギーなどで気にいらない部分は沢山あると思うので、そういう部分は各自よしなにしたり自分の構成に置き換えたり煮るなり焼くなりしたりしてみてください。

ぶっちゃけデカい皿なので書ききれないことが多くて、細かいこととかはドキュメントのほうを読んだりしてみてください。

実際に静的ページ作らなくても一度落としてきてwebpack-configとかbabelrcとかを覗いてそっと閉じたりするエンターテイメント性はたぶんあります。

なにか質問があったりこれどういうことなん？みたいなのがなにかあったらissueかTwitterあたりで連絡してください。

f:id:hitonatsu:20170929112019p:plain

所感

なんでDEKOMORI作ったのかについての具体的な背景の記述には困難を極めるので書かないですが現実世界で聞かれたら答えます。表面的な理由としては自分の好みの構成のDEKOMORIみたいな土台になるやつが欲しかった、リリースまでいける素振り環境もとい練習試合場みたいなのが単に欲しかったというのがあります。

正直なところDEKOMORIが万人に使いやすくて使ってもらえるとは微塵も思っていなくて、オープンにはしたけど万人需要を見込んで作っていたわけでもない。かなり偏っていると思うのでこれがハマる層は狭い世界のなかでもごくごく少数だと思う。

babel module

gulpに加えてがっつりbabelに依存してbabel module形式でnamed import/named exportしまくっている。のでESM(mjs)の策定により後に来たるNode.jsで破滅を迎えそうな予感がある。

嘘のようなわりと本当のはなし

ここまでES.nextがどうのこうの言っているけど実務でJavaScript書いたことは体感値で片手で数えられる日数くらいしか経験がないしよくわかってない。よくわからないから雰囲気で書いている。jQueryはよくわからないで両手で数えられるくらいの日数書いていたような気がするけど、とにかくメソッドチェーンみたいな雰囲気で書いていたような記憶がある。

そういえば正確ではないけどそろそろホームページ手づくりし始めてから実日数で2年くらいが経つような気がする。

こちらからは以上です

DEKOMORIシェアしてください！！！

1natsu172.github.io