

Guest
こんにちは
Guest
え。今週もUIT INSIDEをやっていきましょう。はい、はい、まず初めにこのポトキャストについて説明いたします。
Guest
このポットキャストは、ユーザーインターフェースとテクノロジーを愛するエンジニアたちが、毎週最新のフロントイングの動向について語るためのポットキャストです。
Guest
最新のev標準の動向や開発、フレームワークの変遷、
Guest
またまたuyやuxに関することまでえ、最新のトレンドをキャッチアップすることを目的としています。
Guest
はい、
Guest
このポトキャストについて、ご意見やご感想もお待ちしております。
Guest
ハッシュタグシャープ、UIT、インサイアンダースコアインサイドシャープUIT、アンダースコアインサイドでついていただくと、
Guest
今後のコンテンツ作成の参考にさせていただきます。で、今回はUIT所属のジェーサーである玉田と、
Guest
あと、ポテトodは、谷さんとあと、いくたさんの3人でお送りしたいと思いますそれではよろしくお願いしますお願いします。
Guest
でえ、今回の話題なんですけれども、はい、2週前にビス勉強会について紹介して、まあ、一応連載
Guest
みたいな感じでやっていこうっていうことを言ったので、その第2回みたいな感じで、今回はやっていきたいと思います。一応、
Guest
もう1回繰り返し説明になるんですけれども、キサーテックミーティングの企画として、ユスの
Guest
内容について勉強していこうっていうえことをやっています。でま、それのこう出張版として、UITeサイズでも、その
Guest
振り返りをやっていこうという趣旨でえ続けております。で、今回がその2回目ということですね。はい、
Guest
でえ、今回の内容なんですけれども、えー。ビュースの変更点のうち
Guest
えグローバルAPIの変更について、今回はえー特集していこうというものになっております。はい、
Guest
で、もう1回振り返ますと、ビュー3のグローバルエピAPIが変更
Guest
になるというえーものがあります。でえ、これは何かというと、まあ、ビュードット、ネクストティックとか、ビュー
Guest
ドットブザーバブルみたいな。ビビのえートトップレベルのエアから直接入ってるえ、iがなくなって、ネームの
Guest
エクスポーツから利用するっていう形になるというものですね。はい、
Guest
ま、これがなぜこういう変更があったかっていうことを
Guest
見ていきたいんですけど、も、サマリを見ると、ツリーシェーキングをえしするために、え、このAPIが変更になったという
Guest
えいきさつがあります。なので、まずその追試金
Guest
という、そんな名前が何を指しているのかっていうことをちょっと説明いただきたいんですけれども、じゃあ、ポトフォーディーさんちょっと説明をお願いしてもいいですか。
Guest
そうですね、3シーキングっていうのは、まえと、いわゆるjsのバンドルファイル。え、最近だとまbjsとかリアクトjに限らず、spaとか作る時って、
Guest
そのえ、jpスクリプトのライブラリの中身とかをたくさん読み込んで、1つのアプリケーション作ると思うんですけど、まあ、そのバンドルサイズのえ、合計値を減らすみたいな技術とあります。
Guest
要はですね、これ、あのツリーシーキングっていうのは、まあその木を揺するって感じですけど、まあ、木を揺すると葉っぱが落ちてくるま、それによってえ、刑事全体の葉っぱが減るっていうのと同じように、え、不要なものを防いでいくような
Guest
えものをえ、実際の木の枝に木の木に例えてえ3シエキングと呼んでます。
Guest
具体的に何を行っているかって言うとですね。ま、今回え後ほどネームエクスーツの説明があるかなと思いますけど。ジャバスクリプトのですね、インポートエクスポートのえ、処理をですね
Guest
ウェブパックだとかのえーま、バンドルツールっていう方法でですね。性的に解析をした上でえ、読み込まれてないもの
Guest
っていうのを、javascriptの成果物から省くっていうのをえやるための技術となっております。ま、これによってですね、最終的なファイルサイズが削減されることによって、そのクライアントま、例えばデバイス、え、スマホだとかpcだとか
Guest
ていうのが実際にダウンロードするjsのえ、量っていうのがえ、少なくなることによって、まあ、例えばページが高速化したりだとか、実際のjs実行が早くなったりとかっていうメリットがあるような
Guest
技術のことをツリシェイキングと呼ばれております。
Guest
はい、そうですね、ありがとうございます。
Guest
ただ、なんかこの辺いさんがそもそも、ツシーキングがjsより前のところから文化から来てるみたいな話をこの間してたんで、私全然その辺知らないんですけど、元々結構昔からあるやつなんですかね。
Guest
ま、ツリーシキングの元々のアイデアでいうのは、あの、1990年代のディスプっていう言語
Guest
で、あのまあ使ってないでま、デッドコードですね。たどり着きようのないコードがあの含まれてるのを
Guest
払い落とすっていうところから始まって、そのあとgoogleがダートとかの技術で取り入れ始めてから、え、
Guest
フロントエンド界隈で流行り始めたまバンドルとか、spaとかその辺りから流星が始まったので、その辺りから盛んに使われるようになった記号ですね。はいは、い
Guest
ま元々そうですね。バンドルっていう概念が邪魔する人に
Guest
なかったけれども、そういうバンドルっていうプロセスが増えるっていうことは、ま、そこでも性的解析するチャンスがまあそう生まれた
Guest
わけします。確かに、その時タイミングでこう。また、性的の解析をして、歳数を減らすっていうことがそうですね。
Guest
今までは、スクリプトタグを連続して、読み込む時に全部読み込まないといけないっていうのがあったんですけど、インポート、エクスポート、名刺的に宣言できるようになったので、使ってるか、使ってないかの判断もつくようになったっていうことですね。なるほど、はいはいはい、
Guest
はいえ、まあツシはま、そういう感じで、使ってないコードのま振り落としっていうところが、まあコンセプトなってるんですけど、も、
Guest
はい、じゃあ、でま、その
Guest
ツリーシーキングの。まあ、結果みたいなのを実は。ウェブバックでは見ることができまして。プラグインでバンドル、アナライザーというものがあります。
Guest
でえ、これを使うことで、その
Guest
出力されたjsの中で、どのライブラリがどれぐらいのサイズを占めているかっていうことを、可視化することができます。はい、でま、これを
Guest
ぜひ皆さんもし使ってなかったら、1度使ってみてほしいんですけども、これを見るとすごい結構興味深いですよね
Guest
例えば、まこのライブありがすごい大きいなっていうことが分かれば、
Guest
サイズを減らす。そこから、そこをま起点として、そのどどのサイズ、どのライブラリに対して対処すべきかっていうことが分かるっていうのは、すごい高速化
Guest
の上でも有効なところですよね。ま、特に最近だとjcがびっかくなりがちなので、ま、そういうところから、こういう見ていきたいっていうのはありますよね。はい、
Guest
実際見てみます
Guest
今見れます
Guest
じゃあ、あなくそになっちゃいますけど、ポッドキャストのやつでも見てみますか。おなくそも、結局、
Guest
bcのビルトと同じものを経営するとか、パックのビルドをやるんで、試しにビルドしてみたいと思います。これは、多分スクショを出しても怒られないと思う
Guest
でやりましょう。いや、雑雑なんで怖いですね多分、多分モーメントがでかいと予想します。
Guest
モーメントメントって、あれ、減らせないんですかね、ありがとうございます。
Guest
あ、はいはい、
Guest
東京だけ読ませたりとか。
Guest
あと、フロントエンドしか使わないなら、djイアとか使っても
Guest
そうですね。
Guest
ね、そんなことはなかった、そんなことはなくて、djsに書き換えていて、えい
Guest
えいが偉い偉い偉いとは偉いんですけど、問題があってあれですね。アイコン本ト自で読み込んでるんで、アイコン本トのバンドルがあ
Guest
あ、そっか。jsにアイコンホントが
Guest
あとで話題になると思うんですけど、あれですね。ちょっとポッドキャストのとこに入っちゃいますけど、あの、
Guest
ビーフェザーアイコンっていうのを使ってるんですけど、ミウェザーアイコンは片手がなくて、あの、あれなんですよ。一時的な対策として、リアやしちゃってるんですよね、
Guest
無理やり倒すかしかなくて、今リクアイアしちゃってるんで、今ョノトに多分書かれてると思いますけど、すごいデフェザーアイコンリストっていうのが、めちゃめちゃ重い
Guest
バンドルファイブが、バンダライズができてます。
Guest
すごいや
Guest
みたいな、はいはいで、やばいんですね。ってgジックで60キロバイト
Guest
ボールドなんもしてなかったら、500キロバイトぐらいあります。
Guest
それはダメですもういい
Guest
まあ、ジジップと60な60キロバイトなんか全然
Guest
結構あ、あれですね、へり減りますね。そうですね、
Guest
ジジップできそうな行動が多いということなきはしますけど、という感じですね。
Guest
冬のところ、このスクショ多分映るんですよね。
Guest
そうです、冬のところ見てもらうと、ビューディストってやつが結構大きいんですけど、うん、これがグローバルAPIがどうやっても省けなく、あ
Guest
たくっついた。はいはいはいはい、
Guest
12点xkで、どうしても小さくできなかった部分ですね。うん、
Guest
確かにこうやって見ると、割とビランタイムが
Guest
そうですね。スタサイズ221キロバイトですね、うんうん、結構大きいですね、ジジップで22キロバイトあるんで、
Guest
これがそもそも軽くなる上にツシェキング入るって感じで。
Guest
そうすね、素晴らしい。
Guest
さっき、あのえ、セザーのえことについて話していたと思うんですけども、じゃあ、ちょっとリクワイヤードでインポートするのがダメな理由っていうところをもうちょっと詳しく説明いただきたいんですけど、
Guest
来ますね。
Guest
あ、私でいいはいはい、あ、そうですね、まあ、皆さんも多分ご存じだと思うんですけど、ま、一応おさい的に話すと、
Guest
そもそもjavascriptま、ノードジェの環境かで、モジュールをインポとする。えー時って、コモンジェイスモジュールとしてまそのリクワイアをしたり、え。
Guest
あと、モジュールエクスポーツを使うようなエクスポート方法、あと、エスポーツドットウルみたいな
Guest
エクスポート方法と、あと、普通のインポート構文、エクスポート構文を使うやつがあると思うんですけど、
Guest
で、インポートエクスポートコブを使う時だけ、ツリーシェーキングがいて、リアアのエイコブを使う時は、え、ツリシェーキが効かないということが起こります。
Guest
で、これがなんでかっていうのをちょっと説明さしてもらうとですね。え、そもそも
Guest
えコモンジェイス、コンジェースのモジュールっていうのは、え、モジュールエクスポーツの内容をある程度動的に書き換えることができるっていう特徴があります。つまりはですね、実行してみないと、何がエクスポートされてるのかよくわからないから。
Guest
ビルトの段階では、どういうふうに動くかっていうのがわからないっていう状態になってしまいます。と、
Guest
これだったら、勝手にあのぱっと一旦か性的解析した状態で、これスポートされてないだろうっていうので、消してしまうと、実効ジエラーになってしまう動かないとか、まあ、変数がないとかっていう問題が起きてしまうんで
Guest
え。コモンジェースの場合は、そのリアはえーリアを使う場合は、次政権が効かないっていう問題になってしまいます。で対してインポート、エクスポート公文ていうのはですねえ、ビルトの時点でどういう風に動くかってのがもう分かっているんで、
Guest
ビルトだとか、一旦性的解析するベルで分かっているので、え、使わないやつを削除しても、全く問題がないっていうえ、形となります。今回の場合ですね
Guest
ビーフェザーアイコンっていうのは、多分100個か200個ぐらいアイコンが
Guest
入ってるんで、本来なら、全体のうちの多分180個とか、それぐらいの量のアイコンをツリシェイティングできるんですけど、
Guest
タイプスクリプトを今使っている都合上、えインポート構文を使う場合は、ちゃんと片定義がある、もしくは、自分でちゃんと片定義が書かれている場合
Guest
にしかちゃんと動かないんで、え。それの片手を全部書くのがしんどいんで、サボってリアにしてたら、エバンドルが追跡が行われなかったみたいなものですね。
Guest
片手ファイルがあると1番なんですけど、ビューフェスアイコンスの場合は、オリジナルのフェズアイコンを
Guest
読み込んで、その自動生成でjイスファイルを作ってるのは、ではいはいはい、そこに追従するのが結構片手として、しんどいみたいななしで、自分たちで書いていないみたいな
Guest
状態となっております。
Guest
そうですね、リクワイヤードをしてしまうと、とりあえず全部バンドルしないといけないっていう制約がそこで生まれてしまうんです。
Guest
なんで、一旦読み込んでから動かせるしかないみたいな状態です。
Guest
あんまり繋がってないかもしれないですけど、あの、インポートエクスポートの話が出たと思うんですよ。で、まそのビュー3でもそので、ビュー3でネームのエポーツに変わる
Guest
ですけども、やっぱりなんていうんですかね。そのデフォルトエクスポートから、ネウンドエクスポートにシフトする。流れみたいなっていうのが
Guest
あるんですかね、どっちなんでしょう、そういや、なんか僕個人的にはなんかどっちでもいいみたいな感じに。はいはいはい、なりがちなんですけれども
Guest
どうですか。そういう、なんか、自分でこうか。コード書いていくときは、こういう時は、フォトエクスポートで、こういう時はネモエクスポートみたいなはいいますか。
Guest
モジュール、もうほんとにそのファイル、そのスクリプトとモジュールっていう区分けの時の意味のモジュールじゃなくて、その
Guest
エクスポートするのが、なんか、クラスとか、シングルトのオブジェクト。はいはいは
Guest
そのまま渡してあげるし、もしくは関数を複数xポーズしてるutetファイルみたいなやつだったら、
Guest
ファンクショナルに使いたいやつだけ使ってねっていうので、ネームのエクスポートすることが多いですね。あ
Guest
ああ、わかりやすい。確かに、そのファンクション
Guest
って言うと、すごいなんて言うんですかね。そのみ、ニータブルかどうかわからないけど、まあ見かけ上そういう感じがするから、そういう感じ。
Guest
ネームのエクスポーツは、何ミュータブルなものみたいな感じの感覚っていうのは僕はわかりますね
Guest
確かにそれ良さそうな
Guest
気がします。うん、うん、うん。
Guest
私はそれが強制されている場合を除き、強制されている場合っていうのは、
Guest
ビーコンポーネントはエクスポート、ディフォルトだよね。とかはい、まあ、あと、そのそのライブラリの都合とかでえ。動く場合を除いて、基本的に全部ネームエクスポートにするかつ、インポとする側は、必ずリネームをしない
Guest
ていうえ、コンセプトをとっています。ま、た、だ、ライブラリ合はどうしてもえ許容するようにしていて、例えばえと
Guest
あれですね。私あんまりあのなんなんとかかんとかリゾルバーとかみたいな。なんか、そういう名前をあのショートハンドにするために、アズリルバーみたいにするのがすごい好きじゃなくて、ああま。その理由はいくつかあるんですけど、そもそもあの
Guest
あれですね。私の場合、えーリネームのしやリファクターのしやすさみたいなのを1番に基本行動を書きたい派で、
Guest
ネームドエクスポートをしているのも、名前が統一されてることによって、リネームに強いっていうところと、タイプスクリプトのインポート方法が統一される
Guest
いうところと、あとvsコードタイプスクリプト環境において、名前を書いた場合に、それがそのまま
Guest
あのエキスポインポートした上で呼び出す。保管が動くっていうのって、はいはい、
Guest
なんでええタ的にも絶対に間違わないようになっているし、リネームした時にそのあの間違いに絶対に気づけるし、
Guest
えっていう意味で。基本的にネームドクスポートと、ネームドでの一部のインポート。あ、あの
Guest
azastとかもで、アスターズみたいなもん。できるだけ使わない形のインポートを推奨しています。ただ、例外は結構あって、例えばあのexpres
Guest
周りの方で、あの、
Guest
それはリクエストみたいな方でエクスポートされてて、これをそのまままインポートすると、めちゃめちゃ強合するんで、そういう時は、あの、あず、エクスプレスリクエストとかにするんですけど、ま、そういった場合を除いて、
Guest
基本的にあずを使わないみたいなところを心がけているって感じ。そうですね。私、これは
Guest
ちょっと無理がある
Guest
っていうのはそうですね。確かにうんうんああそっかまあでも
Guest
わたしやすさとうん、esコードビリティーみたいなとか、あの、なんていうか、性的性解析できるビリティーみたいなの、
Guest
ウエスコードウィリティがいいですね。
Guest
ムスコード会が開かれてしまう、
Guest
立ったりします。
Guest
あ、でも確かにそういうファクタリングしやすさっていうのは
Guest
あれ。なんかこう書き捨てだと全然そんなのどうでもいいみたいななりがちですけど、大事ですね。うん、
Guest
私がビューコンポイントの名前をパスカルケースにする理由を話したのと、完全に同じ理由ですけど、これは、後からガッテリゲームしたい時に
Guest
抜け、盛りが起こらないようにする。特にま、jsのプロジェクトの場合は、あの分からない場合があるので、まdsだと、ある程度
Guest
返事できるけど、っていうのもありますね。というような感じでした。
Guest
いや、もうなんかめちゃくちゃ考えてますね、僕、割と気分
Guest
気分
Guest
書いちゃってる
Guest
気分もそうですけど、結構僕ファイルを分けがちで、はいはい、全部もうなんか複数エクスポート
Guest
なんか、エクスポートの数が増えてくると、もう僕、自然になんかファイルを分ける癖みたいなのが、あ、あ、はいはいついてしまって、
Guest
それこそあの、なんていうんですか。そのディレクト、あの、インデックスドットジェースって、その
Guest
わざわざインデックスって、あの、そのインポートの時に指定しなくても、はいはいはいすか、あれを活動しがちで、
Guest
ああ、なるほどなるほど、
Guest
なんかこうふく、あの、すごい複雑になってきたらだい。大体、その同じ名前のデクトリを作って、はいはいで、そん中にインデックストレスれるみたいなやつをやっちゃったり、これはいいのか悪いのかとか。
Guest
エクスポートはエクスポート、アスタレスクフロムでパス名かけるやつが、はいはいはい、アベルのプラグインであるはずなので、
Guest
ビのコアファイルとかは、なんかのディレクトロニックと、カズインデックスファイルがあって、エクスドットジェイスか。あ、はい、その並列で
Guest
名前がついてるものがあって、そのインデックスジェースで、そのディレクトリー内の全てのやつをエクスポドし直するの。あ、
Guest
はいはいはいはいはいはい、
Guest
そうすると、ディレクトリ回数が減ると思います。多分、全部ディレクトリー切って、インデックスだと、なんかディレクトリ開いて、ファイルが1個しかないと。ちょ、残念ですよね。
Guest
あの、そうですね、僕そうですね、確かにあの自分で書く時はまあ適当ですけど、ライブやり。もし、ライブやりとして提供公開するっていう場合だと、ちゃんと
Guest
はいはい
Guest
で。まあ、エスポートしたいっていう気持ちがある一方、あの、さっきそうおっしゃってた。そのデレクトで分ける。
Guest
下はデフォルトスポーツでトップレベルでネームタクスポーツみたいな。そういうふたに2通りで提供するのが、個人的には親切なんじゃないかなっていうん、はったりしますね。
Guest
結構そうですね、
Guest
検索しづらいすさが定義元にジャンプすると、インデックスジェースに飛ばされ、インデクスジェースにアスタリスクしか書いてないということで、
Guest
ありがちな
Guest
まチームで統一できてればいいんじゃないですかね。
Guest
また、あら争いが生まれてしまう
Guest
そうですね、なんか、あんまりそう。ツリーシーキングっていう目線で言うと、ま、確かにやす。もう。多分、ウェブパックだと全部
Guest
そこまで区別していたら、ツリーシーキングしてくれる、
Guest
そしてくれます。
Guest
そのオブジェクトでエクスポートをするっていう形じゃなければ、基本的に
Guest
プロジェクトもしてくれるんじゃない。あ、そっか、多分最近か
Guest
インのバージョンで、はいはい、インポートしたけど、使ってないよね。ってやつを区別してくれるようになって、
Guest
弾いてくれるはずです。で、ビクは
Guest
そのあで、ウェブファックのコンフィグのデボルトがそれになってるはずなので、基本的に何もしなくても、そのを受けられてるはずです。
Guest
ええ、いや、なんか確かにそのツーシェーキングっていうか、そのデットコードを削除する、
Guest
マジックがどれぐらい賢いのかっていうのは、ある程度把握した方がいいのかも。確かにしれない
Guest
意外となんか、自分でそのあのあのすごい頑張って。あの、最適化したけど、実は勝手に最適化してくれるみたいな
Guest
ことがあるかもあるかもしれないんですよね。
Guest
アユズドインポーツだったかな、なんか、
Guest
プロバイデッドエクスポーツと、ユーズドエクスポーツってやつがレフォルトで有効になってて、インポートしてるけど、使ってないねってやつを弾いてくれる。
Guest
なので、アスタリスクで読み込んでも、実際使ってなかったら弾いてくれるはずです。
Guest
賢い、すごいやっぱすごいですね、
Guest
ossは強いですね、やっぱ世界中の人が作ってるから
Guest
はいで、インポートエクスポートさえ使ってれば、基本的に明治的に名前をま読み込む、読み込まない、関わらず、ツリーシーキングしてくれるってことですね。ま、
Guest
2次的名前でインポートするのは、多分リーダビリティとか、そのコード書いてる人側の都合で、名前ちゃんと
Guest
明治的に書いた方が、他の人が分かりやすいよねっていう都合で選べるようになってるはずです。はい、
Guest
そうそう、他の人が使うことをちゃんと考えないといけない、
Guest
全部アスタリスクされると読めないっていう。
Guest
なんでも。ツリシー権というよりは、コラボレーションのレイヤーで、その選べるっていう感じに環境が整ってるはずです。
Guest
いや、それはなんなんてか心に刺さりますね。
Guest
開発者体験はかなり考えてくれてると思
Guest
というわけで、今週はまあ、インポートとエクスポートの話みたいな感じになって、え。
Guest
グローバルエチェンジの話から、リアイアインポテクスポートのは、沿線まで
Guest
割と広い話をお送りしていきました。はい、linUITsでは、
Guest
このようなチャバスクリフトやフロントエンドに関する話題について、日々議論が行われています。
Guest
社内ゲットハブの異臭をベースに毎週最新の情報共有え、金曜日の勉強会で、ナレッジを持ち寄って、共有する機会が行われています。
Guest
はいで、今回話した話題については、小納トにもリンクを貼っておきますので、え、ご興味ありましたら、ぜひアクセスしてください。
Guest
また、このゆポットキャストについて、ご意見やご感想もお待ちしております。ハッシュタグシャープ、UIT、アンダースコアインサイド
Guest
シャープUIT、アンダースコアインサイドでついていただけると、今後のコンテンツ作成の参考にさせていただきます。はい
Guest
ということで、今週はえービュースのえ、pi変更からインポテクスポートの話について、え、3人で話していきました、ありがとうございました、
Guest
ありがとうございました。