フルスタックエンジニアに必要なスキルを考えてみた
目次
フルスタックの範囲はどこまでか
「フルスタック」という言葉は、どこまでの範囲を指していると思いますか？
僕はざっくりフロントエンド～バックエンドまでの認識でした。しかし、具体的に説明するとなると、どこまでが範囲か迷ってしまいます。フルスタックとは、一般的には以下の範囲を指します。
- フロントエンド（UIやUXなどのブラウザ側の実装）
- バックエンド（サーバー、API、認証）
- データベース（データ設計、クエリ）
- インフラ（サーバー環境、サーバーレス環境）
これらの範囲の実装を行える人をフルスタックエンジニアと呼びます。
一言でいえばオールマイティーですよね。これら全てを実装するのは、かなり幅広いスキルや経験が必要になってきます。では、そのスキルとはどのようなスキルのことでしょうか？
フルスタックに必要なスキル
僕はフロントエンドでの経験が長かったため、フロントエンドに必要なスキルを挙げるなら以下の4つだと考えています。
- HTML
- CSS
- JavaScript
- React
静的ページの作成なら HTML / CSS で十分ですし、動的な実装を行うなら JavaScript、状態管理や SPA を構築するなら React のスキルが必要になります。
SPA の構築は Vue.js や Angular などがあるため厳密には React だけではありませんが、世界中で多く使われているライブラリであるため、とりあえず React を学んでおけばフロントエンドエンジニアとしては通用するだろうというイメージです。
上記のフロントエンドのスキルに加えて、フルスタックは以下のスキルが必要になります。
- TypeScript
- Tailwind CSS
- Node.js
- SQL、ORM
- React Router（フレームワーク）
- Git
- JWT
- サーバーレス
- GitHub
これらのスキルはこのサイトを構築するために使ったスキルを思いつく限りざっと挙げたものです。他にも必要なスキルは山ほどありますが、僕が実際に実装したスキル群となります。
それぞれ説明していきます。
TypeScript
TypeScript は JavaScript を拡張したスーパーセット（拡張言語）です。Microsoft が開発しています。
もとが JavaScript のためフロントエンドで JavaScript を使っていたなら入りやすい...と思いきや、理解するのにかなり苦労している言語でもあります。
JavaScript との一番の違いは「型」指定です。
JavaScript は変数に数値を入れた後、それを文字列に変更したとしても特にエラーは起きません。しかし TypeScript だと number という型を指定したのに途中でそれが文字列になると「数値じゃない」と TypeScript さんからお𠮟りを受けます。
この仕組みがなぜ必要なのかというと TypeScript は最終的にコンパイルされ JavaScript に変換されてアプリ上で動きますが、数値でない場所に文字列が入ってしまうとバグの温床となるため、開発中にそのバグに気づくことができるのです。
これが JavaScript だけで開発した場合、実際にビルドしてアプリを動かしたときに初めてバグが発生することになるため、作った後バグだらけという状況を回避することができます。
ここまでの話なら数値なら number を指定すれば問題ないとシンプルに聞こえてしまいますが、ここに配列やオブジェクト、データーベースなどの型指定が絡んでくると一気に難しくなります。
C言語などは変数に型を指定する仕様だと思うので、C言語を使ったことがあるプログラマーなら入りやすい言語かもしれません。
Tailwind CSS
Tailwind CSS は CSS のフレームワークです。あらかじめ クラスが用意されているため、そのクラスを直接指定することで CSS を設定することができます。
用意されているクラスを覚える必要がありますが誰が書いても同じ設定になるため、複数人で構築する場合は表記ブレが起きにくくなります。
何といってもクラス名を考えなくていいのが地味に嬉しいです。
Node.js
Node.jsは、JavaScriptをブラウザ外で実行するための環境です。
一般的なJavaScriptはブラウザの中だけで動くものでしたが、これがサーバーサイドや開発環境で動かすことができます。React Router や Cloudflare Wokers の開発環境も、このNode.jsで動いています。
SQL、ORM
SQL はデーターベースを操作するための言語です。本サイトではCloudflare D1を使って情報をデーターベースに保存しているため、SQLの操作が必要になります。
ORM は Object-Relational Mapping の略で、SQL を JavaScript や TypeScript のコードで操作することがきでます。
ORM は TypeScript と相性がよくデーターベースの型を ORM から設定（スキーマ定義）したり、コードの編集中にエラーが表示されるため SQL の実行前に気づくことができます。
React Router（フレームワーク）
React Router はもともと React のルーティングライブラリでしたが、React Router v7 から Remix と統合してフルスタック開発ができるフレームワークに進化しました。
React Router はルート単位で定義するため、フロントエンドとして仕事をしてきた僕の立場からするととても分かりやすい仕組みでした。
一般的には Next.js がフルスタック開発のフレームワークとしては使われていますが、僕がなぜ React Router を選んだのか、その理由はまた別の機会で記事にしたいと思います。
Git
Git はコードの編集履歴などを管理するためのバージョン管理ツールです。
エラーやバグが起きた時に問題が出る前までのバージョンに戻したり、またはフレームワークのアップデートなどで旧バージョンのバックアップとして履歴を残すことができます。
Cloudflare Workers と GitHub を連携させれば GitHubにプッシュするだけで Cloudflare Workers にデプロイすることができるため、Git は管理ツールとしてだけではなくデプロイの自動化としても役立つツールです。
JWT
JWT は JSON Web Token の略で、署名付きのトークンを発行してユーザー側に情報を持たせる方法です。
管理画面へのログイン後は毎回認証が必要ですが、従来の方法はサーバー側に情報を保存して毎回情報をチェックして認証するセッション管理が一般的です。
しかし、JWTの場合はユーザー側に情報を持たせるため、毎回DBの情報にアクセスする必要がありません。
Cloudflare Workers のような全世界にサーバーが分散しているエッジ環境では、ユーザー側で情報を持つ JWT の方式だとどのサーバーでも認証が通るため相性がいいとされています。
サーバーレス
サーバーレスと聞くとサーバー自体がないのかと勘違いしてしまいますが、OSのセットアップやアップデートなどサーバー管理が不要な仕組みのことをいいます。
サーバーレスはリクエストが来た時だけ実行される従量課金のサービスのため、サイトの立ち上げ時などまだ訪問者が少ないときは低コストでサイトを運用することができます。
ちなみにこのサイトの運用費はドメイン代の約300円だけしか今のところかかっていません。かなり低コストで運用できています。
Cloudflare Workers は Google Chrome と同じ V8 というJavaScript エンジンを使っていて、世界中の人々がアクセスしてもユーザーに近いエッジサーバーにアクセスして高速でJavaScriptの実行環境を構築するため、ブラウザにページを表示するスピードが速いのが特徴です。
GitHub
GitHubはクラウド上にGitのリポジトリを作成して、そこからコードを取得したり保存したりする開発支援のサービスです。
GitHub には GitHub Actions という仕組みがあって、コードをプッシュするとビルドやデプロイを自動的に走らせることができます。
Cloudflare Workers では GitHub と直接連携できる機能が備わっているため、その設定を行えばローカルでコードを書いてプッシュするだけで Cloudflare Workers にデプロイすることができます。
わざわざ FTP で繋いでファイルをアップするという手間がなくなるため 開発の効率化やスピード向上につながります。
まとめ
このようにフルスタックの開発には多くのスキルが必要になります。スキルを見ただけでも使ったことのないスキルが数多くあるため、フルスタックの開発はかなりハードルが高い部類です。
ではこのスキルを勉強してから開発に挑んだのかというとそういうこともなく、実際にコードを書いて動かして学んでいったのが僕の勉強スタイルになります。
今は AI もいるので分からないことは AI に聞き、実装が難しい部分については AI エージェントに実装をしてもらっています。
また Cloudflare Workers のサーバーレス環境だと無料枠が多いため、個人の開発段階だけで費用が発生するのは稀なケースだと思います。
フルスタック開発に挑戦するなら Cloudflare Workers のサーバーレスは個人開発にとても適した環境です。
費用面やスキル面で二の足を踏んでいる方も、フルスタックエンジニアを目指して一度トライしてはいかがでしょうか。