SHOEISHA iD

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

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

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

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

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

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

2つのビルドをいかに両立させたか

 これまでブラウザでの実行速度高速化(ユーザー体験の最適化)と、エディタでの編集速度高速化(編集体験の最適化)のための工夫を述べてきた。ここからは、これら2つのビルドを両立するためのアーキテクチャを解説する。

 ビルドが2つあることで、実行時とプレビュー時で挙動に違いがでてしまう課題が生まれていた。内部で生成されるJavaScriptのコードは違っていてもよいが、挙動が違うのでは困る。プレビューではビルドできるものの、実行のためのビルドではエラーになることもあった。

 ずれが生じる原因はパッケージバージョンのずれや、Svelteの影響である。対策として、まずビルド処理を単一のパッケージにまとめた。処理が同じで設定だけ違うインターフェースをそれぞれ用意して、2つのビルドで同じ処理を通すようにする。これでライブラリバージョンや環境差分を抑えられる状態となった。

2つのビルドを運用する工夫
2つのビルドを運用する工夫

 さらに、同一のソースコードから複数の実行コードを生成しないといけないが、同じコードを使うとインポート先が固定になってしまう。実行時には実行時のSDK、プレビュー時にはプレビューSDKを使用し、それぞれ別のSDKを利用したい。そこでplugin-aliasを活用し、ビルドプロセスにより読み込むパッケージやSDKを切り替える。これにより開発用のSDKの切り替えも可能となった。

 まとめると、実行速度を優先する実行用のビルドではtree-shakingとSvelteを活用し、ビルド時間を優先するプレビューのビルドでは全更新ではなく差分更新することと不要な処理を省くようにする。そして2つのビルドで不整合が生じないようにするため、ビルドパッケージを共通化し、SDKを切り替えられるようにした。このような工夫により、KARTEではユーザーと編集者双方の体験を最適化する。

 片居木氏は最後に、「データを使って、より良い顧客体験を提供することが我々のミッション。より良い顧客体験のためのフロントエンドを作ることを重視している」とセッションを締めくくった。

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

  • 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」など、さまざまなカンファレンスを企画・運営しています。

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

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

メールバックナンバー

アクセスランキング

アクセスランキング