PostHTMLのプラグインつくったぞーって話
どうも。
いろんなことに夢見て、そのたびに期待をアレされて悲しくなってるめろたんです。
最近はクリエイターズマーケットっていうイベントで購入したテラリウムを見て心を癒やしています。
そういえば、クリマでこれ買ったわ。 pic.twitter.com/RSv6XXTN0n
— わかり亭めろたん。 (@renyamizuno_) 2017年6月17日
はい。
今回はPostHTML
のプラグインつくったぞーって話を書こうと思います。
PostHTML
って?
と本題に入る前にPostHTML
ってなんぞって話なんですが、
PostHTML
とは、JS
でHTML/XML
を変換するツールで、HTML
をパースして、ノードツリーを操作するAPIを提供しています。
PostCSS
*1のHTML
版ですね。
これ単体だと、特になにも起きません。
で、色々公開されている、プラグインを使うことで、HTML
を良い感じに変換したりできます。
そのままのっけるけど、
import posthtml from 'posthtml' const html = ` <component> <title>Super Title</title> <text>Awesome Text</text> </component> ` const result = posthtml() .use(require('posthtml-custom-elements')()) .process(html, { sync: true }) .html console.log(result)
みたいにすると、
<div class="component"> <div class="title">Super Title</div> <div class="text">Awesome Text</div> </div>
と変換されてHTML
が返ってくるっていうやつです。
(このposthtml-custom-elements
っていうプラグイン筋悪くね…ってちょっとおもったゾ…)
静的なページを作るんだけど、複数ページつくらないといけなくて、header
とかは共通につくっておきたいなー
みたいなのにすごく便利では?って思ったり崎哲夫してました。
今回作ったの
で、今回作ったのはこちらですー
英語が苦手なフレンズなのでアレ。
それはさておき、何を作ったかというと、
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="~~~~" > </head> </html>
みたいに書いたときにstylesheet
を中に良い感じに展開してほしい、っていうのを作りました。
なんでいるの?とは思うかもしれませんが、HTMLメールとか?あと、AMPで中に書く必要があったりするじゃん?みたいなので、どうしても中に書きたい場合があるんすよ。
っていうので作りました。
実装はどうなってる?
非常に簡単な作りになっているのでぎっよはっぶでみてくれ、みたいなところはあるけど、まぁ軽く。
github.com これを参考にしてつくりました。
const parser = require('posthtml-parser'); const fs = require('fs'); const path = require('path'); module.exports = function(options) { const root = options.root || './'; const encoding = options.encoding || 'utf-8'; return function posthtmlInclude(tree) { tree.match({ tag: 'link', attrs: { expand: 'true', rel: 'stylesheet' } }, function(node) { // ① const href = node.attrs.href; let content; if (href) { const src = path.resolve(root, href); content = parser(fs.readFileSync(src, encoding)); // ② } return { // ③ tag: 'style', content: content }; }); return tree; }; };
これが全コードですね。簡単な作りです。
① ノードのマッチ
ここでlink
タグかつrel
がstylesheet
で、expand
がtrue
のときだけ展開する処理を行うようにしています。
全部展開されると困ることもあるでしょうし、任意のやつだけ展開したいことが多くあると思うので、専用の属性を設けました。
本当はdata-~~
とかにすべきなのかなぁとかも思ったけど、まぁ変換された後のHTML
が正しければいいと思うし、まぁいいやってなりました。
②選択したファイルのよみこみ
まぁとくに説明することはないですね。href
で指定されているファイルを読み込むようにしています。
それを展開するためにcontent
に保持しています。
③styleで書き出す
で、その①でマッチした所をstyle
タグに変換します。
中身は②で取ってきたやつですね。
テッテレ~
完成。
まとめ
もともとはすでにこういうのあるっしょ〜とか思ってたんだけど、無くて*2、期待をアレされて悲しくなってましたが、意外と簡単な作りだったので、自分でできて良かったです(小並感)。
後々になってposthtml-include
使えばよかったのでは?とか思ったけど、なんか気持ち悪いし作ってよかったなと思ってます。
今後、これも盛り上がっていくといいなぁとおもいつつ、無いだろうなぁとおもっためろたんでした。
あ、今回作ったやつnpmで公開しているので、興味がある人は使ってみてくだされ〜
チラ裏
ここからは、愚痴等。
で今、AMPのサイトつくろ〜っと思ってこれ無いやんってなったので作ったのですが、そこまでに至る経緯がクソだったので書いとく。
まず最初 Webpack3
出たし、Webpack
でやろ〜とおもってposthtml-loader
っていうの使おうと思ったんだけど、
これね
リリースに載ってないバージョンがリリースされてるんすよwwwwww
これ特定するのにまじで精神と時間をすり減らしたから訴訟したい(暴挙)。
で諦めて、cli
をつかってみようと思ったら、そっちもうまく動かなくて、精神と時間を溶かした人の顔になってた。
結局posthtml
を叩くjs
を書いた。
この時の僕の気持ちは最高にアレだった。
頼むから壊れたままにするのはやめてほしい。
そんなアレでした。
とりあえずnpm界隈はこれだから〜みたいな感じになった。
*1:CSSをパースしてASTを吐いてそれを操作するAPIを提供しているJSのやつ。めっちゃ好き。ロゴがイカしてる。 github.com
*2:ちゃんと探せていないだけかもしれない
*3:もしかしたら使い方が違うかもしれないとかそういうやつかもしれないけど、4時間近く色々試したし、loaderのコードに色々差し込んで確認したりしたから確固たる意志をもって書く。僕は間違っていない。
*4:parserを指定できるので、pug(jadeって言われてたやつ)をつかってみよーと思ったら、だけ出力されてキレてた。
*5:どうも、parserにoptionを渡す前提で作られていないので、optionを受け取る前提で作られているparserにはoptionを受け取るところで、html(というかpug)の文字列が入ってきちゃって、処理すること無く空を返すみたいな感じになってたっぽい。深くは見ていない。
第1回 React.js 導入事例で話してきた
どうも。
ちゃんとしたブログを作ろうと思ってずっと何も書いていなかっためろたんです。
ちゃんとしたこと書こうと思います。
第1回 React.js 導入事例で話してきました。
第1回 React.js 導入事例で話してきました。
これです。
大体僕のぐちみたいになってしまっていたけど、まぁよかったかなって思ってる。
発表資料は上のやつ。
僕のメールアドレスが隠れてなかったりしてちょっと焦ったりしてた。
準備不足ですね。
はい。
発表したってことはここまでにして、内容とかを書いていきたい。
よかったこと
まぁこの辺はホント色んな所に書いてあるとおりでそれ以上のことはないかなと思います。
DOMの操作がなくなる?
基本的にはなくなると思う。
実際やってると厳しいところが出てきて直接触らないといけないところが出てきたりするしね。
例えばこれの、
document.addEventListener('click', this.handleClickOutside, true);
これとか。
どうなん?
DOM操作では無いけどなんか怖くない?
まぁはい。
どのJSからどこを触ってるかわかる
JSXでかけば基本的にはそのJSX内で触るところが限定される(はず)だから色々わかりやすくはなるなぁという感じ。
なういJS
ES2015+ で書かないとどう書くのか全くわからん。強制的に今時な(?)JSを書かざるをえないのかなと思っている。class
が本当に良いかどうかはおいておいて。
まぁ変にprototype
を書いて大変な目に(継承とか)あうよりかは良いんじゃないかな。
と言うか各ブラウザ氏class
構文サポートしてたの今知ったわ。
Can I use... Support tables for HTML5, CSS3, etc
コンポーネント
なるね。 JSXだしね。
良いところはまあよくよくあるこんな感じだなぁーって思ってた。
はい。
やだなー
依存パッケージ
まぁこれはReact
には直接的には関係ないんだけど、色々大変だよね。
react-router
の件とかね。
あと npm
とか yarn
のパッケージの持ち方がわからん。
調べろよ。って話なんだけどね。
Redux
React
やるならRedux
だよね〜SPA
だよね〜〜〜〜〜
みたいなの多すぎませんかね。
そもそもFlux
レスでReact
やってもいいんじゃない?
何かの編集フォームだけReact
とか。何かの一覧ページだけReact
みたいにやっていいんじゃないかなぁっておもってる。
あと、Redux
以外になんかあっても良いんじゃないかなって思う。
僕の後の えるきちさん の発表でFlux
自体は割りと簡単にできる。っていうのもあったし、
一家に一台Flux
実装みたいなのがあっても良いんじゃないかな〜っておもってる。
極論だから別に良いんだけど。
あとRedux
だとAsync
なFunction
がうまく扱えないみたいなのがクソ辛くないですかね。
なんかそんな気持ちがもやもやするけど、Redux
だけが育っていく現状。自分もRedux
を使ってしまうというアレ。
React
とかRiot
とかVue
とかがかつて色々マウント取り合っていたのに、Redux
は何もなかった印象。あくまで印象ですがね。なんかもうちょっと戦いがあっても良いんじゃないかなって。
SPAつらい
つらい。 なにが必要なのかわからんし、どこまでハンドリングというか面倒みないといけないんだろうって考え始めるとキリがない。
というかブラウザというアプリケーションの上でアプリケーションを作るのって辛くない? みたいな気持ちが最近は大きい。 素人がやるもんじゃねえって思った。
個人的につらいなぁ嫌だなって思ってたのがこの辺ですね。
最近思っていること
そもそもReactでやる意味
なんでReact
でやりたいのか、やるのか。
というのを最近振り返ってみたところ、全くといっていいほどなんもねえなぁと思った。
React
でやればReactNative
があるゾ。ってあるけどそこまで魅力に感じないんですよね。個人的なアレだけど。
そうじゃなくてWebしかやらないんだよなって人はちょっと考えてみるといいのかなぁって思う。
仮想DOMがほしいなら、Vue
でもAngular
でもあるわけで。
コンポーネント指向で〜とかでも上の2つもそうだし。みたいなね。
React
をやるならJSX
を書かないといけなくて、JSX
ってFacebookが考えたものでES2015+の構文とかでもなんでもないんだし、なんかどうなの?みたいな感じ。
それよか、WebComponents
っていうのがくる(ぞーってずっと言ってる気がするけど…)し、そっちに夢見たほうがいいんじゃないかなぁって思う。
Babel
で最新のナウいJS
を書こうぜ!ってなってるのに、次世代のWebComponents
書こうぜ!みたいなのが全然無い気がするなぁって思うのが、なんだかなぁという気持ち。
僕の視野が狭いって話もある。
まとめ
完全にただの愚痴のブログみたいになってしまった。。。
ちゃんとしたブログとは。。。
とにかく、僕が言いたいのは選択肢はReact
だけじゃないと思うし、SPA
にしないといけないってことは無いはず。だからちょっとずつやっていけば良いんじゃないかな。
あと、もっと次世代に生きても良いんじゃないかな?って思うよ。
はい。
ここまで。
じゃあね。