SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Developers Summit 2023 Summer セッションレポート(AD)

ユーザーと編集者の満足度を両立する? プレイド片居木氏が挑んだノーコードエディタ開発

【B-5】ユーザー体験と編集体験を支えるビルドアーキテクチャ

  • X ポスト
  • このエントリーをはてなブックマークに追加

ユーザー体験を向上させる実⾏コード⽣成ビルド、どう改善する?

 2種類あるビルドを、それぞれいかに最適化していくか。実行用コードのビルドでは、実行速度の最適化を重要視している。実行速度はスクリプトのファイルサイズが影響するので、ファイルサイズを小さくすることを目指している。

実行コード生成ビルド方針
実行コード生成ビルド方針

 実行用コードのビルドのポイントは、ビルド処理の中で不要なコードを削減できるようにすること。SDKのコードはビルド時にtree-shakingされやすいように記載しておく。例えば、コードの中にはプレビュー時の時のみなど特定の条件のみで動くコードがあり、そうした実行時に不要なコードはtree-shakingで削除されるようにする。また、インポート単位を細かく区切ることで、インポートするコード量を減らす。

 もう1つ、実行用コードのビルドでは、描画の処理にSvelteライブラリを使い、事前にビルドすることで、重いランタイムコード不要で実行できるようにしている。

 実は、以前のアクションではVue.jsを使用していた。Vue.jsではWeb標準であるHTML風に記述できるので、マーケターなど非エンジニアでも書きやすいのがメリットだった。しかし実行時ランタイムが必要で実行時の処理が重いというデメリットがあった。その点、SvelteはVue.jsと同様にHTML風に記述できて、その上事前ビルドすることでランタイム不要となるため軽量になる。今回のアクションでの要件にマッチしていたため採用となった。

編集者体験を向上させるプレビュービルド、どう改善する?

 次はプレビュー用のビルドだ。こちらはエディタでの変更の反映を早くするため、ビルド時間の最適化を重要視している。ビルド時間を早くするには、ビルド処理の中での不要な変換を減らすことがポイントとなる。また、ビルドするためのコード自体もブラウザにロードして使うため、なるべくサイズが小さいパッケージやrollup pluginを利用するようにしている。

プレビュービルド方針
プレビュービルド方針

 不要な変換を減らすために有効だったのが「全更新ではなく差分更新」をすることだ。プレビュー用のSDKのビルドでは、後行程で差分更新できるようにするための対応を盛り込んでいる。この対応が、SvelteのHydration機能だ。Hydration機能は通常ではSSR(サーバーサイドレンダリング)で使われるのだが、ここではエディタ上のビルドプロセスをサーバーと見なして動かすことで、ブラウザ内でのビルドでもHydration機能が使えるようにした。Hydration機能でDOMの変更だけを動くようにして高速化を実現している。これを有効にするにはプレビューSDKのビルド時にHydrationの設定が必要になる。

 加えてプレビュービルドでは、不要な処理を避けるためにminifyのような処理は避ける。またソースコードが小さいパッケージを使うためにTypeScriptのトランスパイルにはsucraseというパッケージを用いる。またJSONを使う場合、よく使われる@rollup/plugin-jsonのようなプラグインではなく、ブラウザ標準のJSON.parser/JSON.stringifyなどの関数を利用する。

 さらに、多くのnpmのパッケージはESM対応されておらず、ブラウザで利用しようとすると変換が必要になる。ブラウザ内で変換すると時間がかかってしまうため、ESM対応しているプロキシサービス経由でパッケージを取得している。

 こうしてプレビュー用のビルドではSvelteのHydrationで差分更新し、余計な処理は行わずブラウザの標準関数を使用し、ESM対応のプロキシからパッケージを取得することでビルド時間の短縮を目指す。

次のページ
2つのビルドをいかに両立させたか

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Developers Summit 2023 Summer セッションレポート連載記事一覧

もっと読む

この記事の著者

加山 恵美(カヤマ エミ)

フリーランスライター。茨城大学理学部卒。金融機関のシステム子会社でシステムエンジニアを経験した後にIT系のライターとして独立。エンジニア視点で記事を提供していきたい。EnterpriseZine/DB Onlineの取材・記事や、EnterpriseZine/Security Onlineキュレーターも担当しています。Webサイト:http://emiekayama.net

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

川又 眞(カワマタ シン)

インタビュー、ポートレート、商品撮影写真をWeb雑誌中心に活動。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

CodeZine編集部(コードジンヘンシュウブ)

CodeZineは、株式会社翔泳社が運営するソフトウェア開発者向けのWebメディアです。「デベロッパーの成長と課題解決に貢献するメディア」をコンセプトに、現場で役立つ最新情報を日々お届けします。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

提供:株式会社プレイド

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/18202 2023/09/22 12:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング