だから僕はReactを始めた

Agenda

• □ なぜReact(NextJs)にしたか
• □ Vueと比較してみる
• □ オブジェクト指向とコンポーネント指向
• □ NextJsとReact

なぜReact(NextJs)にしたか

Webフロント開発のフレームワークは、今回紹介するReactJsを始め、Googleによって開発されたAngular、Svelte、Ember.js、Elm、jQuery、Flutter、VanilaJS()、そしてReactとよく比較されるVueJsなどたくさんの種類が存在します。

この中でなぜReactを選んだかと言うと、「友達にオススメされたから」が60%くらいで、残り40%くらいはNextJsという名前とロゴがかっこよかったからというくだらない理由です...

Vueと比較してみる

以下の表のような違いがReactとVueにはあるそうです。仕事でVueJSに触れていましたが、数か月程度。 Reactに関しては個人学習の域から出ていないので大規模に向いているなどは実感できていませんが、ライブラリの多さに関しては実感しています。 特徴のスマホアプリが作れるという点も個人的な推しポイントです。ReactNative+Expoで簡単に作成できるので、気分転換に触っています！

その他、違いとしてあげられるのはReactは世界規模で見ると圧倒的にVueよりは人気であること。日本に限定するとVueの人気が圧倒的だったそうです。(最近はReactも伸びてきているようです) 日本語の解説も多いのはその影響でしょうか

\	React.js	Vue.js
概要	UI構築のためのJSフレームワーク	UI構築のためのJSフレームワーク
特徴	ライブラリが多い、スマホアプリも作れる。	学習コストが低い、日本語の情報が豊富。
作成物	大規模なWebシステム	小規模なWebサービス
使用例	Facebook、Instagram、Netflix、Paypayなど	note、Retty、Gunosy、sansanなど
設計思想	宣言的なのでインタラクティブなUI実装が可能・コードがシンプル。コンポーネント指向なので複雑なUIを実装しやすい	段階的に開発できるようにゼロから設計。他のライブラリやフレームワークと統合しやすい

オブジェクト指向とコンポーネント指向

Reactはコンポーネント指向の考え方を前提として作られたライブラリです。コンポーネント指向とは、ソフトウェア開発において部品ごとに小さく分けて開発する考え方のことです。

以下の英文はオブジェクト指向とコンポーネント指向の違いについて言及していたものを引っ張ってきました。

That is to say that component oriented programming specializes Object Oriented
Programming by strictly enforcing and implementing some OO concepts.
Basically the whole idea is to create reusable code - in the form of components - that can be interchanged.
So, component oriented programming heavily relies on: polymorphism, encapsulation,
late binding, inheritance (through interfaces) and most importantly binary re-usability.

引用元 : stack overflow

コンポーネント指向はオブジェクト指向のコンセプトに従い、実装を行うことでオブジェクト指向を専門化したもの。 基本的な考えとして、再利用可能なコードで交換可能なコンポーネントの形として作ることを指す。こんな感じのことを言っているようすです！

あー、そーゆーことね　完全に理解した

具体例を考えてみる

いろいろサイトを漁ったりして、オブジェクト指向とコンポーネント指向の違いについて調べてみましたが、国語力の低い自分には難しかったです、、、 そんな私ですが、自分なりに咀嚼した違いについて具体例用いて記述残しておこうと思います。完全に間違えたことは言っていないと思いますが、正しいことを言えているとも思えないので、ご了承ください<(_ _)>

オブジェクト指向とコンポーネント指向の違いですが、よく設計書に例えられるオブジェクト指向に対して、コンポーネント指向は設計書からモノまで作っちゃいました状態だと思っています。

「再利用範囲」、「粒度」、「結合度」に焦点をあてて比較してみます。オブジェクト指向の説明のときに皆さんはよく車作らされていると思いますので、ガソリン車を具体例に考えてみます。ガソリンをエネルギー源に動くものはたくさんありますが、オブジェクト指向で開発を行うとそこであがった設計書はガソリン車を作ることにしか使えません(再利用範囲はアプリ内)。また設計はシート、エンジン、ハンドルといったように細かな部品ごとに行うと思います(粒度が小さい)。

\	オブジェクト指向	コンポーネント指向
再利用範囲	アプリ内	アプリ間
粒度	小さい	中くらい
結合度	強い	弱い

ここでコンポーネント指向で車の開発を行うことを想定します。ビビッと来て、クリティカルな具体例だと個人的には思っているのですが、マリオカートには開始前にタイヤと車体と飛行ユニットを選ぶ場面があると思います。あれがまさにコンポーネント指向で車の開発を行っていると言えるのではないでしょうか。

実はタイヤのデザインを選んでいるのではなく、"ガソリン駆動のタイヤ"だったり、"電気駆動のタイヤ"を選んでいるとしたら、これはオブジェクト指向に従い実装を行って交換可能なコンポーネントの形で作っていることになります。開発時はタイヤと車体をくっつけることだけ意識すれば良いので結合度はコンポーネント指向では弱いと言えます。

NextJsとReact

最後にNextJsとReactJsって一体何が違うの？について話します。 ReactJsはJavaScriptを用いてUI構築を簡単に行うためのものですが、そんなReactJsをより扱いやすくしたフレームワークがNextJsです。

Reactではページ遷移のためにRouterと呼ばれるものにルーティング設定。特定URLに対して表示するものをあらかじめセッティングしておく必要がありますが、NextJsではpagesディレクトリをルートディレクトリ('/')としてファイルパスがそのままURLとなります。noteページのトップはpages/narunaru/note/index.tsxファイルで実装しているので、URLが/narunaru/noteになっています。ファイルパスがそのままURLになるので、開発者は直感的に実装を行うことが可能となっています。

他には、SSG実装が行える点が挙げられます。SSGとはStatic Site Generatorの頭文字を取ったものになります。 対になるものとして、SSRというものがあり、こちらはServer Side Renderingの頭文字を取ったものになります。

スタティック・サイト・ジェネレーターのココがすごい！

SSGはプリレンダリングをして、クライアント側がWebサイトをリクエストしたらすぐに生成済みのものを返すだけで良くなっていることを指します。 プリレンダリングとは一体何かと言うと、HTMLの部分のみをビルド時にあらかじめ生成しておき、ボタン操作などに必要なJavaScriptの部分はリクエストを受けてから読み込むことです。

つまり何が凄いのか、UIに関わるHTMLはあらかじめ生成済みなので、超高速にWebサイトが表示される点です。

対して、SSRは名前の通りサーバー側でレンダリングしています。クライアント側がサイトを訪問し、リクエストを投げたタイミングでサーバー側でレンダリングし、HTMLを生成しています。なので、SSGに比べて速度は落ちます。

じゃあSSGだけあれば良いじゃないかと思うかと思いますが、もちろんデメリットも存在していて、SSGはビルドしたタイミングでレンダリングをしてしまうので、更新頻度が高いページには不向きになっています。なので、ブログや商品ページ、ドキュメントなどの静的なページに対してはSSGで実装。プロフィールやSNSのタイムラインのような更新頻度が高いページに対してはSSRで実装するといったように使い分けると良いでしょう！