WebフロントエンジニアはOSの夢を見る

WebフロントエンジニアはOS の夢を見る  うじまる 

自己紹介  - B4  - うじまる  - Webフロントエンド  - TypeScript  -
Elm  - 最近Rustをやってます。  - Twitter  - @uzimaru0000  - GitHub  - @uzimaru0000 

今回話すこと 

え、OS作ったんですか！？ 

いいえ 

ポートフォリオサイトです  https://uzimaru.dev 

使った技術 

わかる 

まぁわかる 

???? 

Webキメラ 

仕組み  - いわゆるWebアプリケーション  - ReactやVueやElmといった  フレームワークで出来てる  - 大体のWebアプリケーションの  フレームワークは1つ  -
Twitter ---> React  - note ---> Vue 

仕組み  - 一般的なアプリケーション  - Windowという共通のフレームの  中にアプリが動いている  - アプリがどのように動いているかは自由  

仕組み  - OS  - 複数のアプリが起動している  - Systemはそれの管理をしている   - それぞれのアプリは（ry 

仕組み  - ベースとしてWebComponentsを利用している（TypeScript）  - その中のアプリケーションという形で様々な言語・フレームワークを利用  - React  - Elm  -
Vue  - Unity 

WebComponents  Web Components（ウェブコンポーネンツ）はHTML要素をコンポーネント化する技術群の総称、またそれらを用いて作成されたコンポーネントである。  ― wikipediaより  - CustomElement  - ShadowDOM 
- HTMLTemplate  YouTubeでもつかわれている！！  

LitElement  - 簡単にWebComponentsを作るための   フレームワーク  - 右のコードのような感じでWebComponentsを作ることができる  - lit-htmlというライブラリを使って宣言的なUI
を書ける 

構成  - `x-system`  - 全体を管理する役割、前のスライドのOSに当たる部分   - `x-window`  - windowを管理する役割 
アプリの削除・最小化・サイズ調整をしている   - `x-hoge`  - アプリケーションをmountする役割   一般的なSPAのWebアプリのエントリーポイント   余談  CustomElementは `(.+)-(.+)` の形式になってないとダメ！  

辛かったところ 

ShadowDOMとCSS in JS  の相性の悪さ 

ShadowDOM と CSS in JSの相性が悪い！  三行で  - 一般的なCSS in JSのライブラリは 
<head>の中に<style>を作る  - ShadowDOMはそのDOMの中で  閉じたCSSを使える（便利！）  - <head>で定義されたStyleは貫通しない 

Reactの場合 

を使いたかった 

が、使えなかったので 

free-style 

free-style  - CSS in JSをするためのライブラリ  - ”””自分でstyleタグを作る必要がある”””  ShadowDOMの中に<style>を作れる！！ 

Vueの場合 

単一コンポーネントファイル！ 

が、使えなかったので 

lit-elementのstyleに書く 

Vueの場合  WebComponents用にビルドもできるらしいがめんどくさそうだった  そもそもビルドにparcelを使ってるからどうやるか分からなかった 

Elmの場合 

rtfeldman/elm-css を使いたい！ 

使えます 

Elmの場合  なんで使えたのか  - rtfeldman/elm-css は純Elm製のパッケージ  - ElmはDOMを直接操作するAPIを提供していない  - 結果的にアプリケーションのDOMに <style>
を作っていたので  ShadowDOMでもStyleを当てることができた 

まとめ  - 自分の使える技術を1つのページに集めることができる！  - 各アプリケーションを小さいアプリにできるので作ってて楽しい！  - 情報が少ない   - やってる人がいなすぎる 
- Reactのイベント周りの処理でも不具合があった   - 日本語記事は無かった（気がする）   今後  - Rustを勉強中なのでWASMを使いたい  - もうちょっとリッチなアプリも実装したい 

最後に 

Webキメラなんて誰がつかうんや 

マイクロフロントエンドという  考え方 

マイクロフロントエンド  マイクロサービスを更に拡張した考え方 

ありがとうございました！  https://uzimaru.dev 

WebフロントエンジニアはOSの夢を見る

WebフロントエンジニアはOSの夢を見る

More Decks by uzimaru0000

Other Decks in Programming

Featured

Transcript