Top View
Author Daiki Urata

Fusicフロントエンド座談会 from 雅 2023/04/28

2023/04/28

Table of Contents

TL;DR

  • Arcっていうブラウザが良さげ
  • Pulumi AIで自然言語でインフラコードを自動生成できる未来がくる？
  • Node.js 20リリースされたよ
  • React Native Widget ExtensionでWidgetが簡単に作れそう
  • create-expo-moduleコマンドでExpo moduleを既存アプリに導入できるよ
  • Vite 4.3リリースされたよ。ビルド速くなったよ
  • 新しいNext.jsの入門でApp Directoryの使い方がわかるよ
  • TypeScript Compilation SIGが発表されたけど、よくわからん
  • 「フロントエンド開発のためのテスト入門」本が発売されたので読みたい
  • React Unity WebGLの話
  • UIコピペサイトのCSS Stockがいい感じ

議事録

Arc

  • Arc
  • 新しいブラウザ「Arc」がいい感じだ
  • Mac用ブラウザ「Arc」が優秀すぎた。今すぐ試すべき5つの理由
  • サイドバーが特徴的なUIの新しいブラウザ
    • お気に入り配置
    • ピン留めエリア
    • タブ開きまくるエリア
  • お気に入りのところがタブなので、タブが散らからない
  • タブエリアは1日でリセットされるので、取っておきたいのは上に移動できる
  • エンジンはChromiumなのでGoogle Extensionも普通に使える
  • ブラウザ内でSplit Viewとかもできるので便利
  • 開発ではまだ使ってないのでそこがどうかは不明
  • Googleアカウントの切り替えはまだ上手くできていない
    • アカウントの切り替えあれば文句なしで最強
  • スペース機能で仕事用とプライベート用とかも分けれるので便利
  • Mac専用で現在はβ版（waitlistに登録して待機）

自然言語からインフラ構成コードを自動生成してくれる「Pulumi AI」発表

Node.js 20リリース

  • Node.js 20 is now available!
  • いつの間に！
  • 暗号化のAPIが搭載されたらしい（公開鍵翻訳できるやつ）
  • 正規表現に変更があった
  • テストランナーがデフォで入ったのが一番大きそう
  • パーミッションモデルという実験的なモデルがあり、Denoでやってるアクセス制限許可しないと使えない的なやつが実験的に入っている？
  • Also of note is that Node.js 14 will go End-of-Life in April 2023, so we advise you to start planning to upgrade to Node.js 18 (LTS) or Node.js 20 (soon to be LTS).
  • OpenSSLが3にあがった
  • Openがついた名前多くてややこしい！！

React Native Widget Extension

npx create-expo-module --local

  • Expoの人のツイート
  • --localオプションがついて既存プロジェクトにそのままExpo moduleを導入できる
  • Expoモジュール作ろうとしたら独立して作る必要があったっぽいけど、既存のプロジェクトに対してそれ専用にExpoモジュールを作りたいときに使える
  • これまでネイティブ機能実装で苦労してたのが割とこれで大丈夫になりそう！
  • それでもやっぱりデバッグは苦労しそう
  • Expo Moduleはライブラリ開発者向けのものな気がする

Vite 4.3リリース

  • Vite 4.3 is out!
  • 今回はどちらかというとパフォーマンス向上がメイン
  • 起動がめっちゃ速くなった
  • Webpackの頃に比べたらすでにめっちゃ速かったので、既にパフォーマンスは満足してた
  • Vite5の話がもう出てる〜早い〜！

新しいNext.jsの入門

  • 新しいNext.jsの入門 ─ App DirectoryによるWeb開発をハンズオンで理解しよう
  • App DirectoryをつかったNext.jsのハンズオン
  • レイアウトやページが整理されて管理・追いやすくなった
  • 今新規のNext.jsプロジェクト作るのは悩む
  • 過渡期なのでマイグレーション問題などもあり、今Next.js使うの大変そう
  • メタデータも各page.tsx内で書けるから良さそう
  • これでServer/Client Component分け方はどうなる？
    • 先頭に’use client’かけばClient Componentはよさそう？
  • これはいろいろ変わるぞ〜！
  • 全部page.tsxになるので検索時はディレクトリ名入れる必要がある
  • いま導入するの危険そう

TypeScript Compilation SIG

  • TypeScriptをコンパイルしてWebAssemblyバイナリに、実現を目指す「TypeScript Compilation SIG」をByteCode Allianceが発表
  • TSでWebAssemblyが生成できるよってやつ
  • ガベージコレクション機能がWebAssemblyになかったけど対応された
  • TS以外でも今後対応言語が広がって行く的なことが書かれている
  • 使い所はどこ？
    • WebAssemblyにしたいモチベーションの背景知りたい
    • FigmaでもWebAssembly動いてるよね
    • RustとかC+で頑張って書いてる人がTS使える？
    • 速さを求めてWebAssemblyなのかな？はちょっと疑問
    • 画像解析とかFigmaで画像コピペとかめっちゃ処理するときとか使いそう
    • WebAssemblyの使い所を知りたい
    • GCできるのはでかい
  • 言語横断でWebAssemblyさわれるけど、それのガベージコレクション機能ってどういうこと…（なんにもわからない！）
  • WebAssemblyから直でDOMさわれるようにしてほしい
    • ブラウザやめよ（わいわい）

「フロントエンド開発のためのテスト入門」本が発売

デジタルツインで個室の利用状況を監視(React Unity WebGL)

  • デジタルツインで個室の利用状況を監視
  • 仕組みとしてはビルドしてWebAssemblyを吐き出していそう
  • UnityをJSで書くのって非推奨なの？
    • C#がよいよという話らしい
    • JS対応しなくなるなら使うの危なさそう
  • React Unity WebGLではUnityでJSさわってなさそう
  • Unityがもしネイティブアプリだけサポートするぞー！となると厳しくなる
  • Web広すぎてわからない
  • WebGLの話
  • React VRは昔あった
  • Flutter VRの話あったよね
  • メタバースが一瞬で過ぎ去ってびっくりしている

CSS Stock

  • CSS Stock
  • よき
  • ステップに従って見た目カスマイズしてコードをコピペしておわり（分かりやすい！！！）
  • サイトもきれい
  • アニメーションもすばら
  • 地味に実装に困るものが揃っていてよき
  • 最近イチからCSS書くこと無い
  • スピード重視の開発が多いのでUIコンポーネントライブラリ使う
  • 自社サービス系は自社UIコンポーネントライブラリ持ってるケース多いよね
Daiki Urata

Daiki Urata

Twitter X

フロントエンド/モバイルアプリなどを主に開発しています。

Related Posts

Fusicフロントエンド座談会 2024/12/04
#frontend
Daiki Urata

Daiki Urata

2024/12/13

Fusicフロントエンド座談会 2024/10/09
#frontend
Daiki Urata

Daiki Urata

2024/10/15

Fusicフロントエンド座談会 2024/09/11
#frontend
Daiki Urata

Daiki Urata

2024/09/13

Fusicフロントエンド座談会 2024/08/08
#frontend #javascript
Daiki Urata

Daiki Urata

2024/08/09

Fusicフロントエンド座談会 from 雅 2024/05/22
#frontend #javascript #miyabi
Toya Yamanishi

Toya Yamanishi

2024/05/24