はじめに
はじめまして、WEB フロントエンドエンジニアの nuintee です。
この度かねてより関心があった 4 つのフロントエンドフレームワークに入門する覚悟が出来たので、
それらを用いてアプリケーションを開発しつつ理解を深める過程をアドベントカレンダーにしてみました。
少しでも興味のある方は、ぜひご覧ください。
フロントエンドの世界 2024 について
「フロントエンドの世界 2024」は普段 Next.js を書いている筆者が、同じフロントエンドライブラリである Svelte(Kit), Remix ,SolidJS, Qwik(City)の 4 つにアソート形式で触れ、理解を深めていく様子を収めたアドベントカレンダーです。
もくじ
- フロントエンドの世界 2024: はじめに
- Svelte(Kit)の世界: Svelte とは？ #1
- Svelte(Kit)の世界: プロジェクトのセットアップ #2
- Svelte(Kit)の世界: UI 構築とトランジション #3
- Svelte(Kit)の世界: データ取得と状態管理 #4
- Svelte(Kit)の世界: ビルドとデプロイ #5
- Svelte(Kit)の世界: Runes (おまけ) #6
- Remix の世界: Remix とは？ #1
- Remix の世界: プロジェクトのセットアップ #2
- Remix の世界: UI 構築とトランジション #3
- Remix の世界: データ取得と状態管理 #4
- Remix の世界: ビルドとデプロイ #5
- SolidJS の世界: SolidJS とは？ #1
- SolidJS の世界: プロジェクトのセットアップ #2
- SolidJS の世界: UI 構築とトランジション #3
- SolidJS の世界: データ取得と状態管理 #4
- Solid の世界: ビルドとデプロイ #5
- Qwik(City)の世界: Qwik とは？ #1
- Qwik(City)の世界: プロジェクトのセットアップ #2
- Qwik(City)の世界: データ取得と状態管理 #3
- Qwik(City)の世界: UI 構築とトランジション #4
- Qwik(City)の世界: デプロイと応用例 #5
- Qwik(City)の世界: Resumable (おまけ) #6
- フロントエンドの世界 2024: 4 つのフレームワークをモノレポ管理
- フロントエンドの世界 2024: おわりに
モチベーション
本シリーズを執筆する事へのモチベーションとしては、巷で流行っているフロントエンドフレームワークに入門したかった事が大前提で、それを 1 日 1 記事 「デ ○ ゴスティーニ」や「1 日 1 ページ、読むだけで身につく世界の教養 365」のような形式で投稿したら面白そうだなと思ったのが大きいです。(N 番煎じ)
また、それらと同じくらいモチベーションを占めているのが Qiita アドベントカレンダー 2024 の「完走賞」です。
なんと 25 記事を投稿した参加者全員に Qiitan ぬいぐるみ、Qiita T シャツやその他のグッズがもらえるのです！
これは良い機会だなと思い、ようやく重い腰を上げて記事を書く事を覚悟しました。
ゴール
各フレームワークを用いて基本的なアプリ開発が行えるようになるのは前提で、
それぞれの特性とトレードオフを理解し技術選定・設計フェーズで最低限の知見を活かせるようになる事が今回のゴールです。
制作物
進め方としては技術に触れつつ何かを作ってみるのが一番良いかなと思ったので、簡単なアプリケーションを開発することにしました。
今回開発したものは PokeAPI を用いたポケモン当てクイズです。
このアプリに決めた背景としてはポケポケが流行っていた事と、各フレームワークの基本的な記述方法・構文をはじめとして、条件付きレンダリング、状態管理、非同期通信等の基礎分野が体系的に使えるかなと思ったためです。
今回開発したもの
最後に
本シリーズを通してお気軽にコメントお待ちしております。
完走賞も目指しているので応援是非お願いします！
この記事は フロントエンドの世界 Advent Calendar 2024の 1 記事目です。
次の記事はこちら Svelte(Kit)の世界: Svelte とは？ #1