00:10
はい、みなさんこんにちは。keethことくわはらです。本日もやっていきましょう。
keethのエンジニア雑談チャンネル。この番組では、ウェブ業界やエンジニアリング、いろんな技術についての情報を、雑談形式で発信していきたいと思います。
で、今日はですけども、フロントエンド周りの技術のお話にわたってしまうんですけど、
フォーマッター、リンターとして新しいツール、ビオームって読むんですかね。バイオームって読むのかちょっとわからないですけど。
読み方は後で調べますが、静的コード解析のツールとしてビオームっていうのがあると。
何かというと、今までの僕らフロントエンド開発者の中で、リンターというと大体 ES Lint を使ってきました。
タイプスクリプトを使っている人たちは、昔 TS Lint を使っていた方もいらっしゃいますでしょうし、
リンター周りだと ES Hint とかJS Hint とかでしたっけ。なんかもう名前忘れましたけど。
そういうかっこういろんなものがあったんですけど、最終的には ES Lint で着地をしたというふうに私は思っています。
フォーマッターですね。コードの整形をしてくれるツール。フォーマッターとしては、プリティア、プリッターでした。
正しい読み方は確かプリティアじゃないらしいですね。というものを使ってましたけど。
他のフォーマッターと何があるんですかね。
ES Lint でフォーマットみたいなオプションがあるので、それで一緒にフォーマッティングをするということもできたりはしましたけど、
基本的には多分プリティアを使っていたと思います。
なんですけど、その2つの設定周りとかを個別に書いたり、ES Lint の修正するフォーマットのオプションをつけると、
ES Lint の修正で変更が走って、またフォーマッターの方で変更が走ってみたいな、よくある落とし穴も昔はあったんですけど、
一応今は ES Lint のプラグイン的にプリッターが出たので、それを使っていたと思いますが、
新しくウェブ開発のためのたった一つのツールチェーンというところで、その Linter フォーマッターをガチャンと統合して、
もう一つのツールで良くないっていうものを開発したチームがあって、
それのライブラリーとして BIOM っていうのが最近生まれました。
フォーマット Lint を一つのツールでやれますし、今までのツールと違って全然早いですよっていうところですね。
昨今、猫もシャクシもラストで置き換えられている中の一つです。
ラストで作られたラストアナライザーというものがありまして、それにインスパイアされた革新的なアーキテクチャを使っているそうですね。
僕はそんなにアーキテクチャどういうものを使っているか詳しくは存じ上げないですけど。
やっぱりツールが統合されて一つになったということで、設定周りもかなりシンプルになっているはずですね。
一つのファイルで行けるはずですし、これが本当にありがたいなっていうところが一つありますね。
スピードが上がったってことは逆に言うと、いわゆるスケーラブルなものもできるよということですね。
スピードに立脚しているかどうかは知れませんけど、あらゆる規模のコードベースにも対応するようデザインされているらしいですね。
今までの他のライブラリーとかの互換性とかも少しは加味されていて、すぐに今の開発環境にも使えるようなものを使えるようなデザインになっているらしいですね。
03:09
特にTypeScriptとかJSXへのサポートも第一にやっているというので、これが本当に嬉しいですね。
昨今のJavaScriptのフレームワークとかライブラリーって基本的にはJSXもしくはTSXを使う、TypeScriptで書かれるみたいな環境がほぼデファクトと言っていいんじゃないかと思ったりしています。
一部は別にJSXの規模じゃないライブラリーもまだまだありますけども、おおむねJSXで作られているものが多いなというところですね。
それはリアクトがこれだけフロントエンドの世界をほぼ石鹸したと言っていいでしょうというので、JSXで書かれていることが多いと思います。
後発的に最近生まれたライブラリーも大体JSXで書かれることが多いので、それをサポートを第一にしているというのは正しい戦略を取られているなというような感触があります。
あと各機能とかの内部処理もなるべくは統合して再利用されているらしいですね。
というところでいろんなものを最適化もしていますし、ツールの改善というのがそのツールを向上させているという面もあるので、その辺も加味して新しいものとして作りましたよというところですね。
あと気になっているのは情報量とかですね、どれだけのドキュメントが流通しているかとか、どれくらいユースケースというのを加味したものが機能としてオプションに用意されているのかというのはすごく気になります。
公式サイトを見る限りは豊富な情報量でその辺はなるべくサポートしますというような記載はありますけど、そこは今までのESLintとかFlitterのいろんな記事だったり、脅しやバグだったり、ユースケースというのを加味してこれが必要でしょうというドキュメントを多分選出していると思うんですよね。
その中でそれをまとめたというので豊富な情報量と書かれている気がします。
これまたありがたいことに公式サイトはちゃんと日本語を対応されているんですよね。これが僕ら島国の人からずっと嬉しいです。
対応しているのは英語と日本語と中国語とポルトガル語という4カ国ですね。選んだ国はよくわからないですけど、そんなところで動くと。
ちゃんと動作環境としてもWindowsのWSLも含んだWindows環境、MacOSもしくはLinuxでも動きますし、ARM64も動きますし、基本的にはノードJSのバージョン14以上、14.18以上と書いてますね。
スタンドアローンの実行形式を使用する場合は別にそれはいらないですけどという話でした。
はい、というのでいろんな環境にも対応してまして、ラストで作っているから割と対応環境は結構多いけど、
インストールするときはちゃんとNPMもあるし、YARNもあるし、PNPMもあるし、BANもあるということですね。
いや、BAN触らなきゃなんていつまで言うねんって感じですけど、BANもどっかでやりたいですけど。
BANアットでちゃんと使えるようになってますよと。一般的な人はNPMで良いんじゃないかと気はします。
僕は最近PNPMを使ってますのでこっちでやりたいかなと思いますけど。
注意としてですね、ローカルではなくてグローバルにインストールすることも一応可能なんですけど、あんま推奨はしてないと。
06:00
各プロジェクトごとにインストールすることを公式としては推奨してますみたいなところですね。
で、またBIOMをインストールする際はバージョンの範囲の演算子、指定できるじゃないですか。
アットバージョンみたいな感じですけど、それを使用しないことを強く推奨しているというところです。
かなり強めなところですね。なんでなんでしょうっていうところですけど、ちゃんとバージョニングのページも用意されていて、
そこでどういう理由ですかっていうのが書かれているので、細かいところは皆さんのほうで見ていただければと思いますけど、
ざっくり概要のところだけ若干読みますと、
アリントルールとかフォーマットレイアウトなどの修正によりスクリプトが通らなくなる可能性というのがありますと。
これらの変更の性質上、範囲演算子を使うのではなくて正確なバージョンをパッケージエースに保存することを強く推奨しているということですね。
これによってスクリプトは予期せず失敗することがなくなるので、動く範囲のところでちゃんとバージョンを指定するというのが良いよというお話でしたね。
なるほどでした。
明確なバージョン指定をした方が良いということでしたね。
あとはセマンティックなバージョニングもBIOMは採用していますようですね。
ツールチェーンという性質上、どのような変更がメジャー、マイナー、パッチと目指されるか、
割と不明確になる場合があるでしょうというのが予測されているので、セマンティックバージョンというのを使っています。
バージョンアップのガイドというのも下に書かれていて、
ちゃんとパッチリリースとマイナーリリースとメジャーリリースというので、それぞれについてのガイドラインがちゃんとあります。
これのガイドラインに従ったバージョンをアップしますよというところですね。
気になるのはやはりメジャーバージョンのアップでどれだけ破壊的変更があるかというところですけど、
フォーマットやリントエラーに影響を与える設定のオプションとか追加削除、もしくはデフォルト値の変更とかがあったらそれはメジャーバージョンにします。
BIOMの公開API自体がまた変更になるとそれもメジャーバージョンとして入れます。
あとは特に注目を集めるべき新機能とかツールの昇格というところですね。
この辺が本当に大きく破壊的変更に近い内容はメジャーバージョンです。
あとはそれぞれマイナーとかパッチはありますけど、読んだ感じ今まで他のライブラリーのリリースとそんなに大差がない感じですけど、
ここをちゃんと言語化しているのがすごくいいなと思いましたね。
あとはVSコードの拡張機能もしっかりありますかね。
あるんだけど、プレリリースタグっていうのはサポートしていないよというところだけ注意してください。
安定版リリースは偶数のバージョンで、プレビュー版は奇数のバージョンを使用するので、
明確にタグは打ってないですけど、僕らはそういう使い方しているよというところだけ気をつけてください。
Node.jsのバージョンに多分従っている気はしますね。
偶数バージョンが安定版としてリリースされてますもんね。
新機能とか入れたプレビュー版が奇数ですよというところがありますので、その辺気をつけてください。
biomは設定ファイルはコンフィグみたいなやつじゃなくて、
普通にbiom.jsonファイルっていうので作ってやると。
ユニットを叩くと、npmユニットかnpxのユニットですね。
叩くとbiom.jsonが生まれますよということで、中身は適当に見てみてくださいよと。
よくあるJSONの設定ファイルっていうのは書き方なので、その辺はあんま変わらないなってことですけど。
使い方としては今までのESLintとかFormatterみたいなところのやり方と割と似てますね。
09:05
使いやすそうな気がしますし、すぐに設定ファイルガンと書き換えても良さそうな気がしますね。
さすがに今動いている本番環境用のソースコードにガンと適応するのは難しいですけど、
開発途中とかのものであったり、実験的に使ってみる分には全然もう使って良さそうっていう感じはしますし、
割と本番でも動きそうなイメージはあるので、もしいけそうであればもうプロダクトであったとしても置き換えを検討しても良いかもしれないですね。
少なくともLinterとFormatterのパフォーマンス、スピードが格段に速くなってるんじゃないですかね。
そこが大きいと思ってますので、そこの辺を検証環境とか用意してると思いますので、その辺で試してみるのも一つかなって気はしました。
それぞれにあったドキュメントで、Formatterの使い方、Linterの使い方、CLIオプションの使い方とか設定オプションも
ドキュメントも分けられてますので、ここもすごくありがたそうだなってことですね。
ラストはDiscordでちゃんとコミュニティーがあって、そこでも色んなやり取りをしてますので、困ったらここに投げていただいても良いよってところで、ちゃんとユーザーコミュニティーの紙をしてあると。
これはありがたいですね。
はい、以上。そんな感じでBiomってのがありますという話でした。
最近Library、また新しくJS周りがどんどん生まれてきてて、統合する流れが今ちょっと来てるのかなって気はしましたね。
メインのUIのフレームワークの方でも統合するものだったり、いろいろフルスタックと言われるようなJavaScriptフレームワークも生まれましたね。
名前忘れましたけど、Redwood.jsとか電気的なアイコンのもう一個別のフレームワークもありましたけど、フルスタックのフレームワークがもう一個あった気がします。
なんかね、統合するものが増えてきてる印象があります。
その流れとしてこういうのが生まれたんだろう、Biomも生まれたんだろうと思いますが、
ラストで書き換えられてるだけあって本当に速いんだろうなってところが強そうなので、一回試してみて、どれだけのパフォーマンスの差が出るかというのは検証してみたいなと思いますね。
なるべくコンポーネントをすごく細分化したものとか、コンポーネントの数がすごく増えてしまったり、ページ数が結構多いプロジェクトとかあったら、
それのブランチ一つ切って、そこで実験してみるというのは一つやってみたいかなと思いますね。
やはり計測するに越したことがないし、やっぱ体感として速くなるんだったらそれは一番の武器になったりしますから。
というので、今日はBiomというのがあるというのをずっと知ってたんですけど、あんまりドキュメントを見なかったり、使ってみてなかったので、
そろそろ思い越し上げて使ってみようかなというふうに思った次第ですね。
はい、これちゃんと、このツール自体がアナライザーも加味して機能として持っているのはこれもまた結構デカいですね。
アナライザーなんだかんだ欲しいですからね。パフォーマンス改善のところで必ず必要になってくるので。
というところで、また使って感想とか技術ブログに書くか、また僕の開発日誌の方で書くか、
またこの配信でしゃべるかわからないですけど、どこかで発信していきたいと思いますので、皆さんも興味あったら使ってみてください。
はい、今回はこんなところで終わっていきたいと思います。いつも聞いてくださり本当にありがとうございます。
12:02
ではまた次回の主力でお会いしましょう。バイバイ。
