dcWORKS

こんにちは！dcWORKSでシステムエンジニアをしているレンレンです。

昨今、SPA（※）の需要増大に伴い、弊社でも新規のSPA開発や既存アプリのSPA化といった案件をいただく機会が増えてきています。
※：Single Page Applicationの略。ブラウザによるページ遷移を行わずにコンテンツ切り替えを行うことで、Webページでありながらネイティブアプリのようなユーザー体験を実現可能なアーキテクチャ。

これらのニーズに応えるため、弊社ではSPAやその開発フレームワーク（Node.js、React等）に関する技術研究を日々重ねていますが、一般的なWebサービスの構築スキルに加えてSPA特有の周辺知識を習得する必要があり、Webアプリの開発を得意としている弊社においてもSPA開発に明るいメンバーはまだまだ多くないのが現状です。

これを解消すべく、弊社ではSPA初学者向けの勉強会を定期的に実施しています！
今回は、SPA開発案件において技術リード経験のある私が講師役を務める、React勉強会についてご紹介します。

勉強会の内容

第一回は、SPAのアーキテクチャ設計やReactアプリの基本構成について、講義形式での勉強会でした。
前半ではSPAの代表的なレンダリング方式について紹介し、アーキテクチャや開発フレームワークをどのような基準で選定すれば良いかを質疑応答を交えながら解説・議論しました。
後半ではSPA開発フレームワークの一つ「React」を使用し、Reactがどのような技術でSPAを実現しているかを解説しつつ、Reactアプリの全体構成についてサンプルアプリを通して理解してもらいました。

最初ということもあり、SPAとして最もシンプルなCSR（※1）アプリをサンプルとして使用しましたが、回を重ねるごとに別のアーキテクチャにも触れてもらおうと考えています（※2）。
※1：Client Side Renderingの略。SPAアーキテクチャの一つで、クライアント側でレンダリングを行う方式。
※2：CSRはパフォーマンス懸念やSEO的に不利となる欠点があるため、実際の案件ではSSR（Server Side Rendering）やSSG（Static Site Generation、派生形にISR）のようなサーバ側でレンダリングする方式を取るケースも多い。サーバを必要する場合、弊社では「Next.js」（Reactをベースに開発された、サーバ機能を有するフレームワーク）を使った開発実績もあるため、Next.jsアプリ開発についても今後の勉強会に取り入れていく予定。

第二回以降では、Reactアプリ実装の基本をハンズオン形式で学習してもらう予定です。
また、Reactアプリ開発技術の習得にとどまらず、システム開発全般で役に立つ考え方やテクニック等についても共有・議論したいですね！

勉強会を開催した感想

本勉強会は「講師役も聴講者も事前準備が不要」をコンセプトにして開催しました。
講師役の負担を減らしつつ聴講者が気軽に参加できるようにという意図でしたが、講師役の地力が試される場となり結果的にはなかなかタフでした...
ただ、参加者の皆さんが積極的に質問を投げかけたり議論に参加してくれたので、単なるSPA技術解説の場にとどまらない有意義な時間になったと思います。

参加者の実務経験年数やSPA開発経験の有無などがまばらであるなか活発な議論が行われたことで、経験が浅いメンバーにとっては難しい話もあったと思いますが、先輩エンジニアが設計やアプリベース構築時にどのようなことを考えているかを垣間見れる良い機会になったのではないかと思います。
コロナ禍によってリモート業務が増え、先輩の技術を見て盗むチャンスも減りつつあるので、それを補う場として活用してもらえるとありがたいですね！

メンバー募集のお知らせ

dcWORKSでは一緒に働く仲間を常時募集しています。僕たちと一緒に人々の心を動かすものを創りませんか？
今なら就職お祝い金プレゼントキャンペーンを実施中です。ぜひご応募ください。

興味がある方は以下からお気軽にご応募ください。