00:05
6月12日、日曜日。 時刻は朝9時を回りました。
本日の東京は、結構いい感じの天気ですね。
おはようございます。株式会社ゆめみのキースことくわはらです。
では、本日も朝活を始めていきたいと思います。
今日の引き続き、Solid.jsの公式サイトですね。
ドキュメントの章をずっと読んできたんですけども、
引き続き読んでいきたいなと思います。
多分、今日で一旦クッキリというか、終わりになるかなと思いますので、
ちょっと頑張って読んでいこうかなと思っています。
やっぱり読んでも、しっかりちゃんと書かないと学びにはならないんですけど、
コンセプトや概念とか、どういうような資質があるのかなっていうのを
サクッと知る意味でも、読むだけでも学びはあるかなというノリで読んでました。
はい、じゃあ今日も読んでいきます。
今日はですね、制御フローのところを入っていきたいなと思います。
では早速読んでいきたいと思いますね。
昨日も一応制御フローのコメントのところは一応読んだんですけども、
改めて今日読み直して繰り返していきたいなと思いますけど、
リアクティブな制御フローがパフォーマンスを発揮するためには、
要素がどのように作成されるかを制御する必要があります。
例えばリストの場合、単純なマップっていうのは、
これはJavaScriptのマップ関数ですね。
マップっていうのは常に配列全体をマップしてしまうので、
ちょっと非効率的であります。
まあまあそういうこともありますよね。
ケースバイケースによっては、
全部マップしなくてもいいじゃんっていう時はありますよね。
これはヘルパー関数を意味しますと、
制御フローってのはそういうことを意味するらしいですね。
これらをコンポーネントでラップすることによって、
簡単なテンプレートを作成するのに便利ですし、
ユーザーが独自の制御フローを構成構築することも一応できるようになります。
これらの組み込み制御フローのコンポーネントっていうのは、
自動的にインポートされます。
ポータルとダイナミック以外の全ては、
ポータルとダイナミックっていうのがちゃんとありますね。
制御フローの独自コンポーネントの中に
ポータルとダイナミックっていうのが2つあるんですけど、
これら以外の全てはソリッドJSからエクスポートされています。
DOMに特化したこれらの2つっていうのは、
ソリッドJSスラッシュウェブからエクスポートされます。
今の2つは別のところからインポートするようにしてくださいっていうことですね。
注意ですけど、
制御フローのコールバック、レンナー関数の子供っていうのは
全ては追跡されません。
これによって状態をネストして作成でき、
反応をより良く分離することができます。
分離するためにあえて全部の子供を追跡することはしないよってことですよね。
これはこれで確かにある意味正解かもしれないですね。
ただその分、細かく制御できるようにする、
03:00
柔軟性を持つってことはその代わり、
自分たちでしっかりコードを書かなきゃいけなく、
細かく自分たちでケアしてあげてくださいねっていうことを意味しているので、
そこは確かに注意が必要だというところはおっしゃる通りだなと思いました。
では一つずつ制御フローの独自コンポーネントですね。
ちょっと見ていこうかなと思います。
まず1つ目ですね。
1つ目は4です。
名前的に面白いですね。
ループするやつかなって思うんですけども、
案の定ループでしたね。
4です。コメントは単純な参照キー付きのループですと。
コールバックは第一役数として現在のアイテムを受け取りますってことですね。
ソースコードを見てますけども、
4っていう独自のhtmlタグですね。
置いといて、中の方で1イコール
ホゲホゲっていう配列ですかね、出してあげて、
で、フォールバックイコールで、
例えばローディングみたいなのをJSXで指定することができますね。
これはプロップスとしてもフォールバックイコール並み括弧で、
そのまんまですね、ベタベタにJSXをガンと書くことができるっていう感じですね。
なるほど、面白いですね。
で、1コマ目のeachってやつですね。
eachもプロップスで渡されるんですけど、
eachイコール並み括弧で配列の変数が今書いてあるんですけど、
ここはもしかしたらJSXをそのまま打ち込むことができるのかな?
あ、ごめんなさい、それはできないですね。
eachのとこに渡されるものはちゃんとタイプスクリプトの方で読みるとTの配列になってますね。
リードオンリーのTの配列になってますのでそこだけ注意してくださいってことでした。
で、フォールバックの方はJSXエレメントで好きに渡しなさいねってことですね。
はい。
で、挟んであげて、中の方はですね、中の方のチルドレン的なものを
またJSXで関数的に書いていくっていう感じになりますね。
はい、ここはちょっと直感的っていうか見た感じ確かに
あ、そうだ、これ使いやすくて分かりやすくていいなと思いました。
あと、個人的にはですね、僕がriot.jsを触ってたので
riot.jsのeach関数と結構似てるなと思いました。
これは独自にコンポーネントとして、ソリッドJSは切り出してるって感じですね。
で、中のチルドレンのフォールバック関数ですけど
この第1引数は1個1個配列の要素1つ1つが入ってくれるんですけど
第2引数はインデックスのシグナルになるらしいですね。
自動的にそのアイテムのインデックスが受け取れるようになると。
シグナルって言ってるので変更ができなくはないんでしょうけど
できなさそうかな、多分できない気がしますね、これ見た感じ。
ただ、シグナルなので受け取り方は
06:03
例えばインデックスという変数で受け取ったとしても
そのインデックスをそのままポンと置いてはダメで
シグナルなのでインデックス括弧という関数で実行してあげないと
そのインデックスの値を受け取れませんよっていうところだけ注意が必要ですね。
あくまでシグナルなのでゲッター関数が受け取れるって感じですね。
はい、そんな感じでした。
見たら分かると思いますけど、結構シンプルですけど分かりやすくていいですね。
はい、4という関数でした。
リアクトとかでJSXループ回しながらマップとか使ったりすると思いますけど
あれをもう少し細かく制御できるためのものなんじゃないかなっていうところですね。
別にリアクトっぽく書いてもぶっちゃけいいと思います。
この4を使わずに単純にJSXの中の方で
本来のJavaScriptの配列.map="'
リターンJSXを書いても多分これいいと思いますけどね。
明示的に4というのを付けた方がいいのかもしれないですね。
いわゆる子供の方のすべて追跡しないというふうに注意書きもありますし
その辺をダイレクトにやっていくとりあえずするので
そういう意味ではいいかもしれないですね。
はい、またテンプレート的に書いてあるので
パッと見て分かりやすいかもしれないですね。
では続いていきましょう。
次はshowというコンポーネントですね。
見せるという意味のshowです。
showのコメントですけれども
show制御フローというのは
ビューの一部を条件付きでレンダリングするために使用されます。
これはwhenがtrue cの場合にはチルドレンを
そうでない場合はフォールバックをレンダリングします。
これは参考演算子
when?chldren://みたいな形に似ていますけど
JSXのテンプレートに最適ですよということでした。
これも僕はライオットJSと比較してしまいますが
ライオットJSのshowの関数
関数というかAPIと結構似ているもので
それを独自のコンポーネント化したものだなという感覚がありますね。
使い方ですけれども
その時もshowという独自のhtmlを書いてあります。
さっきのforの話もそうなんですけど
制御フロー独自のものは
全て名前の頭が大文字ですね。
頭文字が大文字になっているので
そこだけ気をつけてくださいということでした。
使い方ですけど
showをhtmlで書いておいて
アトリビュートに
whenイコール
ほげほげというような状態ですね。
ここはJSの式が書けそうですね。
今見ているのはstate.countが0より大きいという
Javascriptの式が書いています。
これがtrueの場合は
truecの値ですね。
booleanのtrueであったりとか
文字列が書いてあったりとか
あればここがtruecになるので
09:00
その場合はこのwhenの方が
適用されて
チルドレンが
レンダリングされますね。
forcの場合は
もう一個のアトリビュートなので
fallbackですね。
fallbackイコールほげほげというのが
適用されるという感じですね。
fallbackはさっきと同様に
アトリビュートの方に直接JSXが書けますよ
ということでした。
というところですね。
whenの方のアトリビュートですけど
こっちの方に適
当てはまるのは
型定義的にはtもしくは
undefinedもしくはnullもしくはfalse
というところですね。
大体ほぼ全部入りますよという感じですね。
わかります。
結構シンプルですね。
もう一個コメントが来てて
showというのは
ブロックを特定のデータモデルに
キーイングする方法としても使用できます。
例えば
ユーザーモデルが置き換えられるたびに
この関数が再実行されますと。
何を言ってるかというと
ソースコードに書いてあるんですけど
先ほどのshowという例の中ですね。
fallbackは一緒で
whenの方です。
whenイコール並み括弧で
今回はstate.userというので
ユーザーの値のところですね。
を見ていますと。
これは
キーイングする方法として使用できて
ユーザーが置き換えられるたびに実行される。
これあれですね。
チルドレンの中身の方がちょっと特殊で
チルドレンが今回はJSXシンプルじゃなくて
関数になってますね。
中身は並括弧の
括弧ユーザーの
イコールshowなりで関数ですね。
アロー関数になっていて
リターンはJSXになってますね。
この中にdivの並括弧で
user.firstnameという風に書いてます。
ここのユーザーのところが
変わったりするとまた自動的に
再実行されるのかなというところですね。
これ結構ありがたいですね。
さらにここの値が
フォルシーだったら自動的にまた
fallbackの値。
ローディングって今のデフォルトで書いてますけど
ローディングにするか
値がないですよというような文句にするか
その辺は僕らが自由に制御できそうですね。
割とこれ結構便利だと思いました。
続きまして
次2つ書いてますね。
2つまとめて説明するっぽいですけど
次はSwitchとMatchっていうやつですね。
コンポーネントです。
名前的にちょっと
イメージもしやすいと思いますけども
えーっとですね。
シンプルですね。
SwitchはあれですけどMatchは
Matchとてもシンプルだ。
いくつか見ていきますけど
互いに配置的な条件が
2つ以上ある場合に便利なコンポーネントとなります。
単純なルーティングなのにも
一応利用できますよということですね。
ソースコード的には
12:00
Switchが親というか
囲う方で
子供としてネスとして
その中でMatchっていうのを使うっていうのが
シンプルですね。
シンプルっていうか
そういう書き方らしいですね。
型定義ですね。
タイプスクリプトの型定義を見ていきますと
Switchのほうは
プロプスとして受け取れるのが
フォールバックとチルトレインですね。
今回ウェンはないですね。
なのでフォールバックのほうは
先ほどと同様に単純な
JSX.ELEMENTですね。
なのでフォールバック="
ここにJSX
例えばDIVのNOTFOUNDみたいな文言を出してもいいよ
そんな使い方をしますと。
子供ですね。チルトレインとして
要は挟む中のものですけど
中のものもJSX.ELEMENTでしたね。
それがSwitch関連で
Switchのコンポーネントです。
要はどっちもJSX.ELEMENTでした。
次Matchのほうですね。
Matchのほうですけども
こちらはプロプスとしては
ウェンを受け取りますね。
ウェンは先ほどの
SHOWと同じような
使い方ですね。
ウェンはTもしくは
undefinedもしくはnullもしくはfalseです。
こちらも受け取るもの
プロプスとして
チルトレインを受け取りますけど
ここはJSX.ELEMENT
または関数ですね。
引数にTの型を受け取って
レスポンスにJSX.ELEMENT
という感じです。
基本的にはJSX.ELEMENTを受け取れますよ。
関数的に受け取って
やることもできますよということでした。
ソースコードを見ていきますけど
スイッチのほうは
先ほどと同様ですね。
プロプスにFALLBACK="JSX
中に
Matchが2つ
セットされてますね。
Match1つ目のほうですけど
こっちはウェン="state.root
homeという文字列だった場合は
homeというコンポーネントを
表示するように置いてますね。
2つ目のMatchのほうは
ウェン="state.root
セッティングスという文字列だったら
セッティングスというコンポーネントを
配置するというところですね。
ホーム画面か
セッティングスなので設定画面ですね。
みたいなところを
ルーティングするときに使えるよという
ものでした。
これ結構わかりやすいですね。
個人的には
非常にLiott JS感があって
急に親和性が高いな
と思いました。
僕は急に
ソリッド.JSが
急に好きになりそうになってきましたね。
ちょっとこれ
Liott JSは確か中身
画像とか
使ってた気がします。
全然違うものではあるんですけど
Liottとソリッド.JSの
比較記事とか書きたくなってきましたね。
Liottで呼ぶソリッド.JSみたいな
みたいなのを書こうかなと思います。
前にSvelteの記事書いたことあるんですけど
15:01
それのLiott版を
書こうかなと思いました。
以上
スイッチとマッチでした。
これ多分
今までの例としては
スイッチとマッチをうまく混合させて
ルーティング的なものを書いてますけど
別にそれぞれ単体で
書くこともできると思います。
スイッチでもいいしマッチでもいいと思います。
ウェンとかフォールバックが
プロップスで最初から受け取れるのは結構
ありがたくて、これを独自に
書くっていうのを
やれなくはないんですけど、こんなシンプルに
書けるのは結構ありがたいなと正直思いましたね。
一応、マッチの方は
コメントとして、キー付きフロー
として制御する関数の
ジルドレもサポートしてますというのを書いてますけど
そうですね。
型定義には書いてましたけど、サンプルのスコードには
載ってないか、一応関数でも使えますよということでした。
続いて
インデックスですね。
インデックスの方がわざわざコンポイントに切られてるらしいです。
インデックスの説明ですけど
キーを持たない
リストの反復、レンダリングされた
ノードは配列のインデックスが
キーとなりますということですね。
これはデータがプリミティブで構成されていて
値ではなくインデックスが
固定されている場合など概念的な
キーが存在しない場合に便利ですと
概念的なキーが存在しない場合に
しかもインデックスが固定されている場合
が欲しいと
時に使えますよということですね。
で、
サンプルコードですけども
サンプルコードの中で
アイテムと言いますけど
そのアイテムはシグナルになります
このアイテムって何をやっているかというと
ちょっとコード説明
入ってきますね。
インデックスというコンポイントなので
htmlタグをとりあえず書いておきます。
インデックスの方のアトリビュートの方で
1イコール
今回は配列でstate.listという
配列がセットされています。
で、またフォールバックですね。
フォールバックイコール
ナミカッコでJSXが載っています。
というところですね。
なのでこれは今まで見てきたやつと一緒っぽいですね。
eachとフォールバックは
使い方はやっぱり同様ですね。
eachの方は
readonlyのtの配列という
型がセットされますと。
フォールバックの方はオプショナルで
なおかつJSXのエレメントですね。
で、挟んであげて
中身の方ですね。
中身の方が今回はナミカッコで
アロー関数が書いてますね。
で、アロー関数のレスポンスは
JSXです。
で、受け取る引数の方は
2の
型っぽいですね。
tが受け取って
tもしくはインデックスのナンバーがセットで
渡されるらしいですね。
で、今回そのアイテムってものが
単純なインデックス
キーですね。というのが
インデックスが渡されますね。
で、これはシグナルなので
ゲッター関数になります。なので
サンプルコードの方は
18:01
ナミカッコアイテムの
アローを
ディブのアイテム
って感じですね。
ナミカッコとカッコがちょっとごちゃごちゃ
って難しいかもしれないですけど
要はアイテムがシグナルなので
ゲッター関数としてちゃんとカッコで
実行してくださいねって感じです。
すると値が受け取れますよと。
それをJSXの中に
組み込んでます。というのがサンプルコードです。
はい。
これは僕使わない気が
ちょっとしますね。
フォーの方で
同じことをやっていて
同じようにイーチとフォールバックがあって
イーチの方の中身で
アイテムとインデックスって2つ
受け取れるんですよね。
このインデックスがそのまま配列の
インデックスになるはずで
それをそのまま使えばいいんじゃないかなと正直僕は思いました。
なのでこれでいいと思いますけど
違いとしては
多分
キーを持たないリストの
反復。本当プリミティブな
配列データとか
のインデックスが使いたいとき
みたいな感じかなと思いました。
ということは
逆に言うとフォーの方の
チルノレンで
受け取れる配列っていうのは
キーが
付いている
ちゃんと書いてましたね。
レンソーキー付きのループだって言ってますね。
こっちレンソー配列なんですよつまり。
なるほどなるほど。
レンソー配列使うときはフォーを使えばいいじゃん
っていう。そのときはいいんですけど
レンソー配列でない場合の
インデックスが欲しいようなとき
ですね。っていうのは
インデックスっていう風な配列
こっちを使うといいのかどうかという話ですね。
そうした場合でも
こっちインデックスって
受け取れるレスポンスが
ちゃんとアイテムも受け取れるのか。
アイテムも受け取れるので
大丈夫そうですね。
これは
間違ってましたね。
アイテムの方は
その配列のバリューで
さらに
第2引数の方ですね。
第2引数の方で
インデックスしてあげると
本当にその配列の
単純なインデックスですね。たぶん012っていう
番号が振られるんじゃないかと思います。
こっちの方は
本当にネイティブな値ですね。
単純なプリミティブな値になります。
了解です。
連想配列のときは4を使いましょう。
単純な配列のときは
インデックス
っていうコンポーネントを使いましょう。
こっちで使い分けがありますね。
わかりやすかったですね。
続きまして
エラーバウンダリーですね。
こっちも名前的になるほどっていう感じが
ありますけど。
キャッチされなかったエラーを補足して
フォールバックコンテンツをレンダリングします
って書いてますね。
受け取り方ですけど
片手で決めると
プロプスとしてフォールバックを受け取ります。
こっちは同じようにフォールバックイコール並み
括弧でJSXを書いてくださいと。
21:00
今回これはオプショナルじゃなくて
必須ですね。フォールバック必ず指定してくださいよ
ってことになりますね。
そのためのコンポーネントなんでこれを指定してくださいと。
子供の方は
チルドレンとしてはJSXで
エレメントなので好きなJSXを書いてくださいと。
特殊なコンポーネントを配置してもいいですよ
ってことでした。
はい。
またはエラーとリセット関数を
渡すコールバック方式も
サポートしてますということですね。
なのでフォールバックイコールのところを
さっきは単純なJSXの文字列だけ渡したんですけど
フォールバックの中の方で
アロー関数を
書いておいて
そのリターンの中に
JSXを
書いておくってのもできますよ
でフォールバック
そのJSX関数ですね
で受け取れる
引数っていうものが
エラーってものとリセットっていう2つの
ものを
引数に受け取れますと。
エラーは型エニーなので
どんなエラーになるかわからないので
ここはさすがにエニーだということですね。
これは仕方ないなと思ってます。
で2つ目の方ですね。
2つ目の方はリセット関数なんで
ここは本当に単の関数ですね。
リセッターですね。
引数は特に受け取れるものは特になくて
リターンもボイドですね。
というところです。
インダクター氏ですね。
おはようございます。
ソリッドJSの公式サイトだらだら予報会っていうタイトル通りですね。
今は制御フローっていうところを
だらだらとひたすら読んでます。
多分にフロントっぽい話になってくるので
まあまあ
聞いていただければって感じですね。
普通にソースコードとか
公式サイトそのまま読んでるだけなので
一応公式サイトの
ドキュメントを見ながら聞く方が面白いかもしれないですね。
はい。
では続いていきましょう。
今のがエラーバウンダリー
っていうコンポーネントでした。
続いてサスペンス関数ですね。
サスペンスですけども
関数というかコンポーネントですけども
サスペンスは
その下で読み込まれた全てのリソースを
追跡してそれらが解決されるまで
フォールバックのプレイスホルダー
状態を表示するコンポーネントです。
これまさにリアクトの
18でリリースされたサスペンスと
同様の機能かなと思います。
サスペンスが小ですね。
となる場合
と異なる点か。
サスペンスコンポーネントが小というコンポーネントと
異なる点はノンブロッキングであることです。
現在ドムに存在しなくても
両方のブランチが同時に存在しますと。
はいはい。
小というコンポーネントは
ブロッキングするってことですね。
これ書いてなかったな。
なるほどですね。
確かにウェンとフォールバックで
小は制御していて、ウェンの値が
トゥルーシーだったら
チルドレンがセットされるんですけど
それまでこれブロックするんですね。
フォールバックが表示されるかされないか
されないのかこれ。
単純にホルシーだったら
フォールバックを返すんですけど
これちゃんと返されるまではずっとブロックするんですね。
なるほどです。であれば
基本的には
24:01
サスペンスを使う方が
ユーザー的には良さそうだなという感じがしましたね。
使い方としては
さっきの
小と結構似てますね。
コンポーネントの
引数として受け取るのがフォールバック
フォールバックイコール
ナミカッコでJSXを指定してくださいと。
これもHTMLにそのまま
書いても問題ないよってことですね。
かつフォールバックは今回オプショナルですね。
型定義見てますけど。
チルドレンの方も
JSXオートエレメントで
チルドレンの方はさすがに必須になってますね。
というところでした。
なので
ショーよりも多分サスペンスの方が
良さそうですね。
僕は見た感じ思いましたね。
ブロッキングするけど
ショーの方は
ウェンを使ってもうちょっと制御ができる
そういう細かなところを
使いたい人っていうのがショーを使うんですね。
ただまあやっぱりレージ的に
使いたい人って結構あるんで
非同期的なものを考慮したいとは思うので
そういう意味で言うと
単純にサスペンスがカバーしてるので
こっちで良さそうな気はしますけどね。
続いてサスペンスリストっていう
コンポーネントになります。
こっちはエクスペリメンタルって書いてあるので
まだちょっと実験的だったところですね。
ちょっとコメント見ていきますと
サスペンスリストでは
複数の並列した
サスペンスとサスペンスリストコンポーネントを
調整できますよと。
コンテンツの表示順を制御して
レイアウトの乱れを抑えて
状態を折りたたんだり非表示にしたりする
ようなオプションも備えていますというところでした。
結構実験的なもんなんで
まだサーバーサイドレンダリングとかでは
サポートしてないので
使えるとか使えないケースが
やっぱりありますよってところでしたが
ざっくりしか書いてないので
どういうところで使えないのっていうのがリストが欲しいなと
ちょっと思いますね。
使い方としては
ちょっと型定義から見ちゃいましょうかね。
型定義見ていきますと
引数としてチルドレンが受け取れますと
こっちは他のものと同様で
JSXとエレベントですと
あとは
2つ目で引数として
リビルオーダーというのがあります。
こっちは文字列ですね。
文字列で
フォワーズまたはバックワーズまたは
トゥギャザー。この3つのどれかしか
指定できませんよと。
最後の3つ目ですね。最後の
引数としてはテイルというものです。
こっちはオプショナルで文字列を渡してくださいと。
文字列はコールエイプス
とかヒルンのどっちかを
指定してくださいというものでした。
使い方を限定してされる感じですね。
使い方は一緒ですね。
サスペンスリリストという
HTMLタグを置いておいて
引数としてリビルオーダーとテイルというものの
特定の文字列を
指定してくださいと。
リビルオーダーは必須なのでこれ何か付けてくださいということですね。
このフォワーズとバックワーズと
トゥギャザーがどういう動きをするのか
というのは書いてないので
使ってみないとちょっとわからないですね。
名前的にはそんな感じはしますけど
予想はつくと思います。
中の方で
27:01
JSXを置いておいてください。
中の方で
サスペンスリスト
サスペンスリストというコンポーネントの
中の方にサスペンスというコンポーネントを
置くこともできて
フォールバックを細かく制御することもできますよ
という感じですね。
なるほどです。
名前の通りリストなんだな。
それぞれの状態において
表示するものを細かく
制御したりもできますよということですね。
というところでした。
それ使ってもいいけど
単純にサスペンスでガンと大きく囲っちゃっても
いい気はしますけどね。
というところでした。
じゃあラスト2つです。
ラストダイナミックとポータルですね。
ここだけちょっと特徴だという風に最初に
冒頭に書いてありましたけども
ちょっと見ていきます。
ダイナミックコンポーネントというのは
任意のコンポーネントやタグを
挿入してそのプロップスを
渡すことができます。
使い方は
ダイナミック1つ目のタグを置いておいて
引き続き
プロップスですね。
コンポーネントイコールホゲホゲと
サムプロップイコールなんちゃらみたいなのを
置いておいてください。
その中身を見ていくと
コンポーネントの方はオプショナルで
コンポーネントという型が
置いてあると。
これの説明がないから
ドキュメントだけだとちょっとわかんないですね。
サムプロップは本当に任意の
プロップスですね。
それが子供に渡すことができる
って感じですね。
チルドレンも一応渡せますけど
こっちもオプショナルなので
ちょっと使い方が
これだと分かりづらいですね。
ダイナミックっていう名前なので
介入してドンといきなり挿入することが
できるんだろうと思うんですけど
使いどころがわからないので
ちょっと書いてみたいと思います。
続いて
ポータルっていうコンポーネントですね。
これはですね
まず説明読んでいきますけど
要素がマウントノードに
挿入されます。
ページレイアウトの外側にモーダルを
挿入するのに便利です。
イベントはコンポーネント回送を
伝播することもできます。
ターゲットがドキュメントヘッド
でない限りはポータルコンポーネント
っていうのはDIVの中にマウントされます。
プロプスにある
UseShadowっていうのがあって
スタイルを分離するために
シャドウルートに要素を配置して
SVG要素に挿入する場合はDIVが挿入されないように
IsSVGっていうのが必要になります。
なるほど。
内部的にこれじゃあWebコンポーネント使ってそうですね。
名前の通り。
シャドウルートとかワードが出てくるぐらいなので。
プロプスとして受け取れるものが
4つありますね。
1つ目がマウントってものですね。
これオプショナルで
型としてはノードが渡されますね。
ノードか何かっていうのが
厳密に書いてないんですけど
僕らの持っているノードだと思っていいと思いますね。
2つ目がUseShadow
こちらもオプショナルですけど
こちらはブーリアンチが渡されますね。
3つ目がIsSVGでこっちも一緒ですね。
30:01
ブーリアンチが渡されます。
4つ目にチルドレンです。
こっちはJSXエレメントが渡されますね。
という感じでした。
使い方は一緒ですね。
ポータルとHTMLタグがあって中身渡してます。
サンプルコーダーは分かりやすくて
マウントイコール
ドキュメントのGetElementByIDで
モーダル
っていうIDを受け取ってます。
それかもしあるんだったら
中のコンポーネント
これ多分モーダルコンポーネント
を表示するみたいな感じになると思いますね。
というところでした。
結構分かりやすいですね。
このモードはやはり
僕らの持ってるHTML DOMのことですね。
が渡されますよ
っていう使い方です。
DIVの中にマウントされるけど
もしSVGとかの中に
挿入したいなという場合ですね。
SVGのタグの中でガンとやりたい場合は
ISSVGっていうのをちゃんとつけてあげないと
SVGの中に
ドンといきなりDIVが入っちゃうので
崩れちゃう可能性があるという感じですね。
という感じでした。
以上が制御フローのコンポーネントでした。
最後は
ドキュメントに回ってみていくと
特別なJSXの属性というのがあって
一応ここも
見ていくんですけど
かなり特殊なケースなのとソースコードがバーって
やっぱり出てきて
特殊すぎるというか
ケースバイケースで出てくる話だと思うので
こちらに関しては
今回割愛しようかなと思います。
ソースコードばっかりなので
さすがに
口頭だと理解しづらいという気もしますし
僕も読んでても不運で終わっちゃう可能性があるので
一旦ここは割愛して
今回のソリッドJSの
公式ドキュメントを見るは
こちらで終了にしようかなと思います。
あとは
他の概念とかチュートリアルというの
ページもあるんですけど
ここもガンガン手を動かしていくショーになるので
皆さんの方で読んでいただくのもいいんじゃないかなと思いました。
というわけで
以上にしたいかなと思います。
次回は会社の後輩が教えてくれたんですけど
ソリッドJSと
スベルトの比較記事というのを
リンクを送ってくれたので
次回はそこを読んでいこうかなと思います。
どちらも仮想ドームを使わない
Javascriptライブラリとして
海外の方で人気なものとしては
ランキングがすごく高い2つなので
それの何が違うのかというのを
比較記事を読むのが面白いかなと思っているので
そこを読んでいこうかなと思います。
じゃあちょっと時間
33分でオーバーしたんですけども
今日の朝活はこちらで以上にしたいかなと思います。
日曜日の朝から
眠い中ですけども
ご参加いただいたお二人の方ありがとうございました。
ゆるりと日曜日を
お過ごしいただければなと思います。
お疲れ様です。
