React 用のデザインおよびコーディングツールをお探しですか？今週、新しい取り組みである Utopia がアルファ版としてリリースされました。
FacebookがスポンサーとなっているReactは、ユーザーインターフェースを構築するための最も人気のあるJavaScriptフレームワークです。StackOverflow 2020の調査では、開発者の35.9%がReactを使用しており、25.1%のAngularを上回っています。また、React Nativeなどの他のプロジェクトでもデスクトップおよびモバイルアプリケーションに使用されているほか、Next.jsサーバー側レンダリングフレームワークやGatsby静的サイトジェネレーターなどの他のフレームワークの基盤としても使用されています。
JavaScriptとHTML/CSSでデザインする場合、通常はコードを書いて実行し、見た目を確認するのが一般的です。ビジュアルデザイナーも存在しますが、純粋なコードの柔軟性と制御性とグラフィカルデザインツールのスピードを兼ね備えることは困難です。アルファ版がリリースされたばかりのUtopiaは、「完全な双方向同期」を謳っており、デザインとコードが瞬時に更新されることを意味します。
Utopia: React.js 用の新しい双方向コードエディターとデザイナー
記憶力のある開発者なら、当時の他の高速開発ツールとは異なり、DelphiがWindowsアプリケーションで（大きな効果をもって）これを実現したことを覚えているでしょう。また、Adobeが買収したMacromediaのDreamweaverや、MicrosoftのFrontPageといったツールで、Web開発にも同様の機能を提供しようと試みられました。FrontPageは使い勝手は良かったものの、質の低いコードを生成したり、サーバーサイドの拡張を必要としたりすることで悪名高かったのです。
「Utopiaの創設者です。そうです、FrontPageのアイデアは大好きでしたし、多くのことを学びました。しかし、実際にはとてもひどいものでした」と、マルテ・ヌーン氏はHacker Newsでの議論の中で語った。
このプロジェクトのコンセプトは、「実際のコード、実際のプロジェクトで動作する」というものです。これにより、Figmaでモックアップを作成するのではなく、実際のReactコンポーネントを使ってプロトタイプを構築し、コードを損なうことなく迅速なビジュアルデザインが可能になります。「Utopiaが（まだ）理解できないものは、そのまま残します」とドキュメントには記載されています。
Utopiaは開発者やデザイナーに特定の作業方法を強制しないという主張もある。「Utopiaはエディタであり、ライブラリでもフレームワークでもありません。そのため、Vanilla JavaScriptとReactをそのまま使用（そして習得！）できます」と開発チームは述べている。
このエディタはVisual Studio Codeをベースにしており、ESLint（JavaScriptの静的解析ツール）とPrettier（コードフォーマッタ）を備えています。また、デバッグコンソールも搭載しており、Utopiaウェブアプリケーションをご利用の場合は、外部ユーザーとプレビューを共有する機能も備えています。キャンバスセクションは入力に合わせて更新されるほか、編集モードに切り替えることでグラフィカルな編集ツールとして使用できます。これは同期されており、視覚的な要素を選択すると、コードエディタ内のその位置にカーソルが移動します。
その他の機能としては、動的データ、動的CSSレイアウト、コードで設定された変数に応じて変化するユーザーインターフェースなどを扱うことができます。ビジュアルJavaScriptとCSSデザインを難しくする要因の一つは、様々な画面サイズやフォームファクター（レスポンシブデザイン）に適応し、動的に生成されるコンテンツに応じて変化する点です。また、ストーリーボード機能も搭載されており、開発者は複数のシーンでデザインを設定できます。
Utopiaはオープンソースで、MITライセンスに基づきGitHubでホストされています。「このデザインツールはまだ初期段階です」と開発チーム。ご自身のPCで試してみてはいかがでしょうか？プロジェクトのクローンを作成し、ローカルでビルドするだけです。
勇敢な筆者は、Windows Subsystem for Linux 2 を使用して、やや不完全な手順に従おうと試み、Webpack (JavaScript ビルド ツール) と NixOS (シェルおよびパッケージ マネージャー) を少しいじり、コンパイルされなかった TypeScript コードにいくつかの調整を加えた後、部分的に成功しました。
とはいえ、結果として得られたローカルウェブアプリケーションのVS Code部分は、私たちのビルドでは動作しません。一部の開発者は、クラウドで完全にコーディングするよりも、これを動作させたいと考えているのではないかと思います。
しかし、チームの意図は、開発者がホストされたバージョンを使用し、セルフビルドについて心配する必要がないようにすることです。
- JavaScript調査：Reactはどこにでも、Jest、Webpackは増加中…静的型付けがあればいいのに、と開発者はため息をつく
- Mac用デザインアプリ「Sketch」の「大型アップデート」でリアルタイムコラボレーション機能が追加 - ただしサブスクリプション料金が必要
- でも、Avidは使えるのでしょうか？Regがビデオ制作のプロにピカピカの新型M1 MacBookをプレゼント。Blender、Handbrake、そして…HypercardでこのMacBookに勝てる人はいるでしょうか？
- オープンソースオーディオの人気アプリAudacityのバージョン3.0は、新しいファイル形式と160以上のバグ修正を誇ります
ビジネスモデルはどのようなものでしょうか？「シングルプレイヤーモードは無料で提供し（「時間、信頼、そして利用を獲得するものであり、縛り付けるものではありません」）、経済的価値の創造に繋がる機能については課金していく予定です。当初はチームに焦点を当てたものになる可能性が高いですが、今年の残りの期間はシングルプレイヤーモードを最優先に考えています」とヌーン氏はDiscordで語りました。
その他のよくある質問としては、React Native で動作するかどうか（「残念ながら現時点では動作しません」）や、HTML 5 Web コンポーネントや React 以外の JavaScript フレームワークで動作するかどうかなどがあります。
「Web標準は私たちにとって非常に重要なものです。製品がもう少し成熟したら、真剣に検討し始めるつもりです」とヌーン氏は述べた。「Vueのような他のJSフレームワークでも同様です。」®
