はじめに

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

普段は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を動的にかっこよくよくできたと思うのですが、それはこれから実装してきたいと考えていますのでお楽しみに(誰も待っていない)

Nextjs

NextjsはReactのフレームワークです。Nextjsを利用するメリットはSSG(静的サイト生成)、SSR(サーバサイドレンダリング)をページ毎に簡単に利用できることです。

SSG(静的サイト生成)とは例えばページで外部APIを利用していた場合、ビルド時にAPIを実行してデータを取得してページを描画して静的なファイルとして生成することです。

SSR(サーバサイドレンダリング)はリクエス毎にAPIを実行してその結果をクライアントにレスポンスします。そしてNextjsはページ毎に簡単にSSGかSSRを設定できるのです。

今回作成したポートフォリオサイトですが、悲しいことにNextjsのメリットを活かしきれていません。技術ブログページがまだ未完成だからです。本当なら外部API(QiitaAPI)を利用してQiitaに投稿したブログ一覧ページはSSRとして表示させて、残りはSSGとして表示させたいと思っていました。

ブログ記事一覧ページについては今後実装しようと思っていますのでお楽しみに(誰も待っていない)！

参考

作って学ぶ Next.js/React Webサイト構築

さいごに

簡単ではありますがReact/Nextjsのポートフォリオサイト作りを通じてモダンなフロント技術について学んでみました。

はるか昔に jQueryを利用したことがあったのですが、今はReactなどのモダンなJavaScriptフレームワークを利用することで開発しやすく、保守もしやすく大変便利になっているようでした。

最後までご覧頂きましてありがとうございました。