Reactで開発する際のコツ

フロントエンド開発レッスン 絶賛やってます。

まだまだメンバー募集中ですので、本当にお気軽にー。

受講料無料で現役プログラマーがメンターをしてくれるレッスンはなかなかめずらしいと思いますので、ぜひぜひ。

そんなレッスン中のやり取りの中で、以下のような質問をいただきました。

React を使った本格的なサイトを作るのは初めてなので、 開発の際に意識することなど、コツがありましたら教えていただけないでしょうか？

実はこの質問、今のフロントエンド環境に鋭く刺さってくる質問だったりするのですが。

ざくっとお答えしていこうと思います。

まずは最低限で作る

実務レベルでももっともやりがちなケースなのですが、最初からゴールを大きく設定するメリットって存在しないと個人的には思っています。

最初からゴールを大きく設定してしまうと、単純にファーストリリースまでの開発期間が伸びてしまいますし、プロトタイピングの規模感も大きくなりすぎますし、チーム全体のモチベーションも下がってしまいます。

これは、インセプションデッキやユーザーストーリーマッピングをしっかりと行えば防げることが可能な問題ですが、逆に行わなければ防ぐことが厳しい問題でもあります。

今回質問してくださったメンバーであれば、最終的なゴールは「ブログの機能も持ち合わせたポートフォリオサイト」の作成となっています。

つまりこの記事を乗っけている kk-web のようなサイトの作成がゴールなわけですが。

こういう場合、ひとまずのゴールを「ブログ記事一覧のページ」と「記事のページ」の 2 画面の作成を最初のゴールとして定めるように提言しました。

つまりトップページも存在しないし、コンタクトフォームやポートフォリオを掲示するページの作成は後回しということですね。

こうすることで、最初にややこしいページの作成を済ませつつ、最低限リリース可能な状態を作り上げ、モチベーションの維持が容易となると個人的には考えています。

ただし、この段階から後々のことを意識したコンポーネント設計などが必要です。

たとえば導線の貼り方や、全体的なレイアウトやカラーの仕様の策定、レスポンシブ対応などはこの段階できっちりと実装しておくべきということですね。

自分の実装を極力減らす

賛否両論意見が分かれるところだと思うのですが、個人的には外部パッケージはガンガン使うべき派です。

世のフロントエンドプログラマーが React から離れられない大きな理由の 1 つに、便利なパッケージが大量に存在している、というのが挙げられます。

今 Svelte や SolidJS などを使用した場合、React で使えたたくさんのパッケージが使えなくなってしまうことになり、実装コストは予想以上に大きくなると思われます。

せっかく React を使うのであれば、便利なパッケージを使わないのはもったいないです。

もちろん言わずもがな、取捨選択は重要ですが、多くのメジャーパッケージは使用実績も多いため、使用の際にそこまで困ることもないと思います。

外部パッケージに頼ることでコーディングコストを抑えることができ、結果的に速度感も上がり、クオリティも上がる。

パッケージのバージョンと仕様にさえ気を配っていれば、こんなに素晴らしいことはないと思います。

コンポーネント設計はシンプルに

一般的によく提唱されているコンポーネント設計は、大きく以下の 2 つなのかなーと思っていまして。

• Presentational Components, Container Components
• Atomic Design

自分は両方とも好きな考え方ですが、採択するかどうかはケースバイケースだと思っています。

とくに Next.js の v13 からは両者の考え方を採択しないファイル構成も可能になったため、コンポーネント設計は自由度が高くなったと同時に、さらに難しくなった印象があります。

過去何度も言及してきましたが、本来コンポーネント設計は UI/UX デザイナーが行うべきであって、フロントエンドプログラマーが意識する必要はありません。

とはいえ、日本のデザイナーの力感ではコンポーネント設計をできる方が非常に少なく、プライベートの開発などではフロントエンドプログラマーがデザイン周りからコンポーネント設計まで行わなければいけないケースは少なくありません。

であれば、上記の考え方を採用するなり、しないならしないでテキトーにコンポーネントを切り出しても、なんら問題ないと思いますが。

なるだけシンプルなコンポーネントを切り出すことを意識できるかどうかで、コンポーネント設計ってまったく変わってくるのかなーと。

コンポーネントを切り出す際に、汎用性なんて意識する必要はないと個人的には思っていて。

切り出すべき粒度であれば切り出す、そうでなければ切り出さない、この考え方が重要だと思っています。

自力でデザインを生み出さない

本人は気づいているのか気づいていないのかはさておき、たまーにクソダサいデザインを生み出すプログラマーがいますよね。

日本のデザイナーは基本的に UI にはそこそこ強いのかなーと思っていまして、逆に UX は全然だなーと感じることが多いのですが。

ダサいデザインを行わないようにするためには、他人の気持ちを理解する必要があります。

他人から見られたときにかっこいい、かわいい、おしゃれ、などと感じてもらうことはとても大切です。

で、世の中にはそんなクールなポートフォリオが星の数以上に公開されているわけで、これらを参考にしないのは馬鹿がやることです。

自分はよく Dribbble を眺めて自身のデザインのアップデートを行うようにしています。

とにもかくにも、自分の感性を信じないように、常に疑い続けることがとても大切だよなーと。

そうすることで、少しでも独りよがりなデザインから脱却することができるのかなと信じています。

レスポンシブ対応を忘れずに

これまたデザインに関連した話となるのですが。

プロトタイピングを行う際に、まずは横幅 375px から作り始めることを意識しましょう。

小さいサイズのデザインを大きく広げることは容易ですが、大きいサイズのデザインを小さく縮めるのは至難の業です。

また PC とスマホで同じ情報をすべて表示する必要なんてありません。

スマホの場合ロングタップやスワイプといったアクションが可能なため、なるべく最低限の情報だけ表示することを意識しましょう。

一方でスマホにはホバーという概念が存在しないため、そもそもプロトタイピングの段階でホバーアクションやホバーアニメーションを付与するのって個人的にはダサいと思っているんですが、どーなんでしょうか。

そんな感じです。

上記に記載した内容は現時点での自分の考えでしかないため、明日には考え方が変わっているかもしれませんが、悪しからず。