Web 開発の考え方が React Native でどのように私を迷わせたのか

最初の React Native アプリを構築したとき、私には Web 開発の経験がありました。 iOS と Android で React を使用することは、私のスキルの自然な延長のように思えました。

しかし、Web 開発者の考え方がネイティブ アプリ開発に必ずしもうまく反映されるわけではないことが、困難な方法ですぐにわかりました。

ナビゲーションを例に考えてみましょう。 Web では通常、各サイトが独自のページ レイアウトを作成します。ヘッダー、サイドバー、フッターはすべてカスタム構築されています。単純な要素から始めることもできますが、それは単なる空白のキャンバスです。機能的かつ視覚的に魅力的なものにするには、JavaScript と CSS を使用する必要があります。

このカスタマイズはあなたのブランド アイデンティティの一部になります。ヘッダーが別のサイトのものと似ていると、一般的であると感じられます。

私がネイティブ アプリ開発に移行したときも、同じ考え方を持ち歩きました。

すべてのカスタム コンポーネントを細心の注意を払って設計しました。戻るボタンとタイトルを備えた独自のヘッダーを作成しました。カスタムの画面遷移とアニメーションを作成しました。安全領域を自分で管理し、画面の向きを追跡してトランジションをアニメーション化することもしました。私はカスタムの下部タブを作成しました。これは、私のアプリが他の人のアプリと似ていないことを確認するためのものです。

これが間違いであると気づくのに、時間はかかりませんでした。

ネイティブ アプリのユーザーは、アプリ間で一貫したパターンを期待しています。また、ナビゲーションなどの基本的な UI 要素の品質にも大きな期待を寄せています。たとえば、iOS では、ユーザーは戻るボタンを長押しして、複数の画面を戻ることを期待します。それが欠けていると、その体験は不完全に感じられます。

では、なぜ車輪を再発明するのでしょうか?ネイティブ コンポーネントはすでにプラットフォーム用に最適化されています。カスタム ヘッダーを最初から作成する代わりに、単純にネイティブ ヘッダーを使用して色を微調整することもできました。さらに良いことに、カスタマイズを完全にスキップして、UIKit コンポーネントを直接使用することもできました。ユーザーは、「基本的」と感じるどころか、このアプリが iOS エコシステムにいかに自然に適合するかを評価したでしょう。

Apollo for Reddit のようなアプリの成功を例に挙げましょう。 iOS のネイティブなデザイン言語を採用し、プラットフォームの自然な拡張のように感じられるため、人々に気に入られました。

これは Web 開発とは大きく対照的です。ウェブでは、空白のキャンバスから始めて、すべてを自分で構築します。すぐに使えるプリミティブは、多くの場合、不格好で魅力的ではありません。ボタンはグレーです。入力には粗い輪郭があります。一貫したベースラインを得るために CSS をリセットすることも必要です。

Web UI ライブラリはこれらの不満を軽減するために存在しますが、パッチワークのソリューションです。比較すると、iOS のようなネイティブ プラットフォームには、一貫性のある美しく作られたデザインのプリミティブが付属しています。ナビゲーション、アニメーション、メニュー、タイポグラフィ、色、アイコンはすべて、シームレスなユーザー エクスペリエンスを生み出すために専門家によって慎重にデザインされています。これらは単なるツールではなく、数十年にわたる改良によって形成されたデザイン システムです。

これを理解するまでにあまりにも長い時間がかかりました。私も最初は Apple のヒューマン インターフェイス ガイドラインを読む気もありませんでした。

2019 年当時、React Native アプリはネイティブ アプリの高品質な模造品のように感じられることがよくありました。彼らはその役を見たが、それを完全には感じなかった。 React Native の哲学は、常に基盤となるプラットフォームに一致することですが、実際には、多くのライブラリは、本物を使用するのではなく、ネイティブのコンポーネントを模倣した JavaScript ベースのコンポーネントに依存していました。

たとえば、Android 上の React Native アプリではマテリアル デザイン ヘッダーがよく使用されますが、実際のネイティブ ヘッダー コンポーネントを利用するのではなく、JavaScript で実装されていました。

Web 開発者として、私はこの抽象化に魅力を感じました。これにより、カスタマイズを完全に制御できるようになりました。しかし、このアプローチでは、ユーザー エクスペリエンスを低下させる微妙な矛盾が生じることがよくありました。

React Native 開発者に全面的な責任があるわけではありません。当時、特に Expo を使用している場合、ネイティブ コードで作業するのは面倒でした。ネイティブ機能を追加するには、多くの場合、Expo を放棄してスタック全体を再構成する必要がありました。ネイティブ コードを含むライブラリは React Native の更新と頻繁に同期しなくなり、開発者は完全に理解していない Objective-C または Java ファイルに取り組むことになります。

「JS ベース」はライブラリのセールスポイントにもなり、開発者にネイティブの依存関係に対処する必要がないことを約束しました。

JavaScript とネイティブ コードの間のこの隔たりにより、私の Web ファーストの考え方が強化されました。すべてにおいて JavaScript を使用してみませんか?

ありがたいことに、React Native エコシステムは進化してきました。現在では、Swift と Kotlin を使用して、はるかに少ない構成でネイティブ モジュールを作成できます。さらに良いことに、Expo はネイティブ コードをサポートするようになりました。これらの改善により、ネイティブ ファースト開発がよりアクセスしやすくなり、ライブラリがネイティブ プリミティブを受け入れることが奨励されています。

たとえば、React Navigation はネイティブ コンポーネントの使用に移行し、開発者の広範なカスタマイズよりもシームレスなユーザー エクスペリエンスを優先しています。

この変化は、React Native の明るい未来を示しています。ネイティブ ツールが使いやすくなったことで、プラットフォームに属するかのような見た目と操作感のアプリを構築できるようになりました。

だから、私の間違いから学んでください。プラットフォームのツールを使用し、その設計哲学を受け入れてください。そして何よりも、ルールを破る前にルールをマスターしてください。

以上がWeb 開発の考え方が React Native でどのように私を迷わせたのかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。