この文書はFramerを学ぶ日本のユーザーのために、日本語の資料不足による困難を解消するために作成されました。公式ブログの記事を翻訳し、実務で役立つ情報を追加しました。Framerを使用する皆さんに少しでもお役に立てれば幸いです。

主なポイント

• 優れたパフォーマンス: Reactの効率的なレンダリングと状態管理により、ウェブサイトが高速にロードされ、応答性も向上します。

• 優れたユーザー体験: コンポーネントベースの構造でスムーズで一貫したユーザー体験を提供します。

• 未来に向けた拡張性: Reactは、現在と未来に適した柔軟かつ持続可能なウェブサイト開発を可能にします。

今日のウェブに求められるもの?

今日のウェブでは単に美しい画面を超えて、途切れずに反応し、没入できる体験を作ることが重要です。そのためには、パフォーマンスだけでなく、管理、拡張、協業を考慮できるツールが求められます。

インターネットの黎明期のウェブサイトは主に情報消費のために設計された静的なページの集合でした。これらの伝統的なHTMLとCSSに基づいたサイトは軽く、性能が優れていましたが、現代のユーザーが期待するインタラクティブ性と動的機能は欠けていました。

現代のウェブは動的でインタラクティブに進化し、ウェブサイトは完全なアプリケーションになりました。ウェブサイトはAPIと統合され、なめらかで効率的なアニメーションやトランジション効果でユーザーの関与を促進し、リアルタイム更新を提供し、デスクトップからモバイル、タブレットまでさまざまなデバイスをサポートしています。

伝統的なウェブ開発の方法は今日でもウェブ開発の重要な部分ですが、最新のツールなしでこの方法を続けることは今日のウェブアプリケーションに必要な複雑なユーザーインターフェースや機能を構築する上で困難を招く可能性があります。

ここでReactのようなツールが役立ちます。ReactはMetaが今日のウェブサイト制作を念頭に置いて開発した、今日最も人気のあるフロントエンド開発ライブラリの一つです。Reactは規模に関係なくどんな企業の開発者も現在のユーザー期待を満たし、さらにそれを超える高度なウェブアプリケーションを開発できるようなツールを提供します。

パフォーマンスとユーザー体験の向上

ウェブサイトがますます多くの機能と複雑なUIを含むにつれ、ロード速度の低下と応答性の問題は一般的な課題となりました。特に低スペックのデバイスや遅いネットワーク環境では、パフォーマンスの問題を引き起こすことがあります。

ブラウザはユーザーインターフェースを更新するために「ピクセルパイプライン」と呼ばれるプロセスを経ます。レイアウト計算、要素のペイント、レイヤーの合成プロセスを含みます。このプロセスはインターフェースの変更に不可欠ですが、多くのリソースを消費し、メインスレッドをブロックし、時には更新中にインターフェースが応答しなくなることもあります。

Reactはこの問題を解決するために「Virtual DOM」という概念を導入しました。これは実際のDOMを直接更新せずに、メモリ上に仮想のDOMを配置して変更を計算し、実際のDOMに保存する方法です。

このプロセスは調整（reconciliation）と呼ばれ、Reactの比較（diffing）アルゴリズムを使用して、実際のDOMを更新するのに必要な最小変更を見つけます。次にReactはDOMの更新を一括で処理し、単一のパスで実行し、更新プロセスを最適化して、リソースを多く消費するリフロー（reflow）とリペイント（repaint）プロセスを最小化します。

また、Reactはユーザーのインタラクションやデバイスのレンダリングパフォーマンスに基づいて更新の優先順位を定めるスケジューリングメカニズムを提供します。Framerはこの仕組みを利用して、ユーザー入力のような重要な更新に優先順位を付け、スムーズで反応性の高いユーザー体験を維持します。

Reactは完璧なパフォーマンスを必ずしも保証するわけではありませんが、今日のウェブのパフォーマンス問題を解決するためのツールを提供します。Reactは更新プロセスを最適化し、ユーザーインタラクションの優先順位を調整し、Virtual DOMと調整といった技術を活用して、開発者が優れたパフォーマンスと反応性を維持しながら複雑でインタラクティブなウェブアプリケーションを構築できるようにします。

コンポーネントベースの設計

従来のウェブ開発においては、HTML、CSS、JavaScriptを別々のファイルとして記述し、巨大な単一のコードファイルを作成することが多いです。Reactはコンポーネント単位でUIを設計することで異なるアプローチを取ります。コンポーネントはカプセル化され再利用可能なUI要素として作られ、これらの複数のコンポーネントを組み合わせて複雑なユーザーインターフェースを構築できます。このコンポーネントはJavaScriptの関数やクラスを使用して作られ、コンポーネントの動作方法や表示内容を変更する入力（props）を受け取るように設計されています。

これにより開発者はシンプルな構成要素で今日の複雑なユーザーインターフェースを体系的に構築できます。これらの構成要素はアプリケーション全体、または複数のプロジェクトで簡単に共有および再利用できるため、コードの再利用性と一貫性を向上させます。

Framerはコミュニティによって制作された専門的に設計されたReactコンポーネントの集まりを提供し、このコンポーネントベースのパラダイムを最大限に活用します。これらのコンポーネントをプロジェクトにスムーズに統合し、特定の要件に合わせて使用しながら、Reactコンポーネントベースのモデルの再利用性とモジュール性を容易に活用できます。

未来志向の構造

絶えず変化する今日のウェブにおいて、Reactが優れている理由は変化に対応しやすく設計されているからです。従来のインターフェースプログラミング方式では、DOM操作のプロセスを逐一記述する必要があります。

// index.html

<div>
  <input type="text" id="itemInput" placeholder="Enter new item" />
  <button id="addItemButton">Add Item</button>
  <ul id="itemList"></ul>
</div>

// index.js

// 1. Get the button element
const addItemButton = document.getElementById("addItemButton");

// 2. Add event listener to button element
addItemButton.addEventListener("click", {

  // 3. Get input and list elements
  const itemInput = document.getElementById("itemInput");
  const list = document.getElementById("itemList");

  // 4. Create new list item
  const listItem = document.createElement("li");

  // 5. Set inner text to value of input
  listItem.innerText = itemInput.value;

  // 6. Add list item to list
  list.appendChild(listItem);

  // 7. Set input back to empty
  itemInput.value = "";
})

しかしReactは命令型の方式ではなく、宣言型の方式でインターフェースを定義するプログラミングです。

// itemList.jsx

import React, { useState } from "react";

function itemList() {

  // 1. Define the state
  const [items, setItems] = useState([]);
  const [newItem, setNewItem] = useState("");

  // 2. Handle button click
  function handleAddItem() {
    setItems(prevItems => [...prevItems, newItem]);
    setNewItem(""); // Clear input after adding;
  }

  // 3. Bind state and event handlers to the UI
  return (
    <div>
      <input 
          type="text"
          value={newItem}
          onChange={e => setNewItem(e.target.value)}
      />
      <button onClick={handleAddItem}>Add Item</button>
      <ul>
        {items.map((item, index) => <li key={index}>{item}</li>)}
      </ul>
    </div>
  );
}

Reactでインターフェースを定義する際には、「この状態のときにUIはこのように表示されるべき」と宣言するだけで済みます。その後データが変更されれば、Reactが定義したコンポーネントに合わせて自動的にDOMを効率的に更新します。

このような宣言的アプローチはコンポーネントを容易に共有し構成して、より複雑なユーザーインターフェースを構築できるため、コードの再利用性が向上します。開発者はコンポーネントの希望する状態や属性だけを更新すればよく、変化するユーザーの要求やウェブ標準に合わせて新機能を追加し調整するのが容易です。

また、ReactとFramerは不変性（immutability）の原則に従っています。一度生成されたオブジェクトを直接変更せずに、新しい下位オブジェクトを作成して更新する方式です。これはUIを予測可能かつ安定的にし、長期的なメンテナンスに有利にします。加えて、Reactは以前の機能との下位互換性を徹底しています。Framerも同様に古いコンポーネントが突然動作しなくなる問題なく、長期間安定したプロジェクト運営が可能です。

Framerはこれをさらに発展させ、ユーザーがキャンバスでデザインした要素を自動的に再利用可能なReactコンポーネントに変換します。つまりデザイナーはコード一行も書かずにReactのモジュール化されたユーザーインターフェースを作ることができ、最新のウェブ技術との互換性を維持できます。Framerで構築されたプロジェクトは最新のウェブトレンドとユーザーの要求に合わせて進化しつつ、以前の機能との互換性を維持します。またFramerはアプリケーションを最新状態に保つプロセスを単純化するのにも適しています。

コミュニティのサポート

Reactのもう一つの強みは、活発なコミュニティエコシステムです。Reactは開発者、デザイナー、企業がReactの成長と発展に貢献する幅広いエコシステムを備えています。このようなエコシステムを通じてReactはウェブ開発の最前線を維持し、最新のウェブの要求に合わせた進化を続けています。

Framerはノーコード基盤ですが、Reactエコシステムとつながっており、コミュニティが提供するアニメーション、API連携、高度な状態管理機能などを簡単に利用できます。これらのコミュニティ中心の革新技術の多くはFramerに完全に統合されており、ユーザーはコーディングすることなくより創造的で機能的なウェブサイトを制作できるようサポートしています。つまり、Reactを学ばなくてもReactエコシステムからの恩恵を受けることができます。

Reactコミュニティの知識とリソース共有のおかげでFramerユーザーはReactを直接学ばなくても様々なリソースを活用できます。特定のライブラリやツールに関するチュートリアル、ドキュメントからベストプラクティスやデザインパターンに至るまで、コミュニティの努力はFramerユーザーがプロジェクトにおいてReactエコシステムの潜在能力をより良く理解し、最大限に活用できるよう支援します。

また、既存のFramerデザインを基にReact開発者を採用してFramerプロジェクトを拡張することも可能です。Framerに組み込まれたMonacoコードエディタを使えば、React開発者は自動補完とIDEに似た環境を備えた使い慣れた環境でウェブサイトの機能を拡張できます。

Framerは個人クリエイターでも大規模なチームでも、ユーザーの限界を超える体験を提供します。Framerのノーコード方式からスタートしてプロジェクトが成長するにつれ、カスタムのReactコンポーネント、高度なロジック、最先端の機能をスムーズに統合し、拡張可能で維持管理しやすいコードベースを維持できます。Framerはコードの専門知識なくしても最新のウェブ向けウェブサイトを作成できるだけでなく、成長し進化する未来志向の環境を提供し、閉じられたエコシステムの限界に縛られず、今日の最新のウェブ内で可能な境界を思う存分に広げることが可能です。

結論

FramerがReactを採用した理由は明白です。パフォーマンス、ユーザー体験、未来への備え、コミュニティこの四つの要素が組み合わさり、Framerを単なるノーコードツールではなく、現代のウェブにとっての拡張可能なプラットフォームとして確立しました。

開発経験のある人はもちろん、非専門家でもアイデアを実現でき、必要に応じてReactエコシステムと人材を引き込んでプロジェクトをさらに進展させることができます。Framerを選ぶということは、すなわちReactを選ぶことです。それは単に今のプロジェクトを作ることにとどまらず、今後の変化にも揺るがない基盤を選ぶことを意味します。

本記事はFramer公式ブログの『Why Framer uses React to build sites』を翻訳・アダプトしたコンテンツです。