React入門してみた！

りっきー（エンジニア）

2022.10.18

はじめに

福岡でバックエンドエンジニアをやっています、りっきーです。

普段はSpring(Java)を使ってバックエンドを担当していますが、最近、社内勉強会をきっかけにフロント技術のReactに入門してみました。

今回はReactポートフォリオサイト作りを通じて学んだモダンなフロント技術周辺の話や、Reactについてお話したいと思います。

なぜReact入門

普段の業務ではサーバーサイドを担当しているのですが、なぜフロント技術のReactを勉強しようと思ったのか、私の勉強へのモチベーションについてです。

技術の幅を広げたい

担当している業務のひとつ上とひとつ下の層を知ることは技術の幅を広げる意味で大事だと思っています。フロントを学ぶことで、今のバックエンド業務にも活かせることがあると信じています。

自己サービス開発

趣味で自己サービス開発しているんですが、フロントの見栄えをよくしたいと思っていました。Reactは動的なかっこいいデザインが作れるので、自己サービス開発にも導入したいと考えています。そしてどんどんサービス拡張してサイトの広告収入で不労所得を得ることが目標です。

面白そう

あとは単純に面白そう！！！これが一番大事ですね！！！

ポートフォリオサイト公開

React/NextJsで簡単なポートフォリオサイトを作成してみました。これでもちゃんとReactで動いています。

りっきーの部屋
https://ricky-room.vercel.app/

ポートフォリオサイト構成

ポートフォリオサイトのデプロイ先はNextjsを開発したVercel社のホスティングサービスを利用しました。無料枠を利用しています。

ローカルで開発したReactポートフォリオサイトをGithubにpushすると自動でVercel社のホスティングサービスにデプロイされ、すぐに閲覧可能になります。またサブドメインは自由に決めることができます。

Vercel社のホスティングサービスを利用すると手軽に、素早く、無料でアプリケーションを公開することができますので、みなさんもぜひ利用してみてはいかがでしょうか。

フロント技術の学び

React/Nextjsを用いたポートフォリオサイトを作りを通して、簡単ではありますが、React/Nextjsについて学ぶことができました。

React

今回Reactを使ってみてレガシーな jQueryと1番違うと感じたのはコンポーネント指向設計です。コンポーネントとして各UIが分離されています。今回作ったポートフォリオサイトも各画面のパーツはReactのコンポーネントでそれぞれ実装されています(ナビゲーション、ヘッダー、フッター、自己紹介などが各コンポーネントとして分離されている)。これはReactに限らず、Vuejsなどもコンポーネント指向設計が取り入れられているようでした。

各UIがコンポーネントとして切り出されることで、同じ機能の再利用、修正が容易になります。また、各コンポーネントが疎結合であるため、テストがしやすかったりします。

Reactを使えばもっとUIを動的にかっこよくよくできたと思うのですが、それはこれから実装してきたいと考えていますのでお楽しみに(誰も待っていない)