コンテンツにスキップ
jsys Web 研修 2026

Day 3 Phase 1 — React・Astro

著：ちゅるり

このフェーズでは React・Astroの基本 を学んだのち、学んだフレームワークを用いて実用的なアプリケーションを作成します。

事前準備

このフェーズでは、常に手を動かしながら学ぶことが求められるため、作業をするためのディレクトリが必要です。このフェーズの学習を始める前に、自分の作業ディレクトリに phase1 ディレクトリを作成してください。以降、このフェーズにおける演習は phase1 ディレクトリ内で作業するものとします。また特に断りのない限り、エディタには Visual Studio Code（VSCode） を使用するものとします。

ReactとAstro

ここからはReactとAstroという2つの技術のどちらかを学びます（両方を進めても問題ありません）。ここではそれぞれの特徴について説明します。

ReactもAstroも「フレームワーク」と呼ばれる、Webアプリケーションを作るのを簡単にするための技術です。これらのフレームワークでは、開発者はReactの場合はJSXファイル・Astroの場合はAstroファイルを作成し、フレームワークがこれらのファイルをこれまで学んできたHTML/CSS/JavaScriptのファイルに変換します。

React と Astro の比較

jsysではこれらの技術をそれぞれの長所に合わせて使い分けています。ここからはそれぞれの特徴や違いについて紹介します。

Astro

Astroはコンテンツの表示に特化したWebフレームワークです。そのためブログやイベント・Wikiページのような、表示内容とスピードが求められる場面で利用されます。また、記述方法がこれまで学んできたHTML/CSS/JavaScriptなどと似通っており始めやすいながらも、AstroとReactを併用するといった使い方もできる柔軟性を持ち合わせています。

一方で、Webアプリケーションの開発を目的としているわけではないので、多数の要素をアプリケーションのように動かす目的にはあまり向いていません。

jsysでは次のようなシステムがAstroを採用しているほか、この研修サイトもAstroで作成されています。

Astroを始める方はこちら

React

Reactは複雑な操作や、多くの要素を効率的に描画することを得意としており、XやInstagramのように、世界中で利用されているWebアプリケーションで使われています。

Reactの大きな特徴としてすべての要素がJavaScriptの関数として実装されていることがあります。これにより複雑なロジックを簡潔に記述することができるため、よりプログラミングに近い形になります。

一方で記述にはJavaScriptの中で要素を表示する方法などReact固有の概念を学ぶ必要があり、使いこなすまでには少々時間が必要です。

jsysでは次のようなシステムがReactを採用しています

Reactを始める方はこちら

参考文献