コンテンツにスキップ
Twin:te 勉強会 2026

Day 3 Phase 1 — React・Astro・Vue

著：ちゅるり

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

事前準備

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

React・Astro・Vue

ここからはReactとAstroとVueという3つの技術を学びます。ここではそれぞれの特徴について説明します。

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

React と Astro の比較

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

Astro

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

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

このサイトがAstroで作成されています。

Astroを始める方はこちら

React

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

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

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

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

Reactを始める方はこちら

Vue

VueもReactと同じように、動きの多いWebアプリケーションを作ることを得意とするフレームワークです。

Vueの大きな特徴は、普通のHTMLにとても近い書き方ができることです。ReactがJavaScriptの中にHTMLを書くスタイルなのに対し、VueではHTMLにv-ifのような専用の属性を書き足していくスタイルで画面を作ります。さらに、1つの部品の「見た目（HTML）」「動き（JavaScript）」「デザイン（CSS）」を1つのファイルにまとめて書けるため、これまで学んできた知識をそのまま活かしやすく、入門しやすいフレームワークです。

一方で、v-ifのようなVue専用の書き方をひととおり覚える必要があり、複雑な処理を書くときにはReactの方が柔軟に書ける場面もあります。

Twin:teでは次のようなシステムがVueを採用しています。

Vueを始める方はこちら

参考文献