【フロントエンド】ワクワク要素5選！広がるクリエイティブな世界！

はじめに

「RUNTEQ Advent Calendar 2024」に参加させていただきました。レイと申します！

この記事では、私がフロントエンドに惹かれた5つのポイントをご紹介します。
特に初心者の方や、これからフロントエンドを始めてみたいと考えている方に、少しでも参考になれば幸いです。

内容も少し長くなってしまってるのでさらっとみていただければ嬉しいです。

この記事が、新たな一歩を踏み出すきっかけや、フロントエンドの楽しさを知るヒントになれば嬉しいです！

1.目に見える部分が変わるから楽しい！

フロントエンド開発の一番の魅力は、コードを変えると目に見える変化がすぐ画面に反映されるところで、自分の思い通りにビューが仕上がっていく瞬間は、本当に楽しいものです！

特に、デザインとアニメーションの要素が大きな魅力だと考えます。それぞれの楽しさを詳しく見てみましょう。

デザイン

自分のイメージを形にできる楽しさがフロントエンドの魅力です。デザインを忠実に再現するならCSSを理解しておけば大抵のものはコーディングできるでしょう。

自分でCSSをスタイリングするのはもちろん、CSSフレームワーク(Bootstrap、TailwindCSS)を使うとあらかじめ用意されたパーツ(ボタン等)をすぐに画面に反映させることができます。

色の選択やレイアウト、フォントの使い方など、細部にこだわることで、印象を大幅に変えることができます。

アニメーション(動き)

アニメーションや動きをつけることがさらなるフロントエンドの面白さにつながるでしょう。またデザイン性だけでなく、アニメーションや動きをつけることでさらに惹きつけられる開発になること間違いなしです。

CSSだけでも、keyframesやtransitionを使うことで簡単なアニメーションが実現できます。JavaScriptを使わなくても、軽量で効果的な動きを表現可能です。

私が以前に個人開発したアプリだとファーストビューをkeyframesを使ってアニメーションを実装しております。

コードはこちら

Rails

<div class="slide">
    <div class="slide-image"><%= image_tag 'fv1.jpg', class: 'bg-cover bg-center object-cover h-full w-full' %></div>
    <div class="slide-image"><%= image_tag 'fv2.jpg', class: 'bg-cover bg-center object-cover h-full w-full' %></div>
    <div class="slide-image"><%= image_tag 'fv3.jpg', class: 'bg-cover object-top object-cover h-full w-full' %></div>
</div>

CSS

.slide {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.slide-image {
  background: center / cover no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  animation: slider-1 24s linear infinite;
}

.slide-image:nth-child(1) {
  animation-delay: -2s;
}

.slide-image:nth-child(2) {
  animation-delay: 6s;
}

.slide-image:nth-child(3) {
  animation-delay: 14s;
}

@keyframes slider-1 {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  4.16% {
    opacity: 1;
  }
  33.33% {
    opacity: 1;
  }
  41.66% {
    opacity: 0;
    transform: scale(1.2);
  }
  100% {
    opacity: 0;
  }
}

RailsはTailwindCSSを使用しておりますのでご注意ください。

他にも、ボタンにホバー(hover)効果をつけて、思わずクリックしたくなるような演出を加えるのも面白いでしょう。

さらに、JavaScriptを活用することで、画像スライダーやアコーディオンといった複雑なUIコンポーネントも実現可能です。

2.最新技術を取り入れる楽しさ！

フロントエンドの流行りといえば、ReactやVue.js。そこからReactはNext.js、Vue.jsはNuxt.jsといったフレームワークを活用して開発されます。

さらに、多様なライブラリを活用することで、オリジナリティのあるアプリケーション開発を楽しめます。

ここではフレームワークとライブラリで分けてまとめています。

フレームワーク

フレームワークとは、アプリ開発に必要な機能が揃っているものであり、あらかじめ用意されているものから試行錯誤して独自のものを開発します。

• Next.jsは、ReactのフレームワークでSSR(サーバーサイドレンダリング)や静的サイト生成をサポートします。

• Vue.jsも同様にフロントエンドフレームワークでデータバインディングやコンポーネントを活用してアプリを構築します。Nuxt.jsがVue.jsのフレームワークでSSRや静的サイト生成を簡単に行えるようにしています。

• Angulerもフロントエンドのフレームワークですが、今回は触れません。

バックエンドと併用して、フロントエンド側はこれらのフレームワークを活用することで開発の幅と楽しさを広げてくれます。

そしてさらに、TypeScriptを使うことで型安全性が向上し、特に大規模なアプリケーションでのバグ防止に役立ちます。

ライブラリ

ライブラリもたくさんあるのでいくつか触れていこうと思います。

React

ライブラリで特に有名なものとしてやはりReactで、コンポーネントベースで、状態管理やライフサイクル管理が可能です。

Material UI(MUI)

Reactと一緒に使われることが多いフレームワークです。豊富なコンポーネントが用意されており、高速に開発を進めることができます。

Shadcn

Next.js(React)と一緒に使えるコンポーネントライブラリです。一通りのコンポーネントが揃っており、使いやすいです。

最近だと「V0」というデザイン生成ツールを併用することで、UI構築を効率化できます。開発スピードが上がるので非常にオススメです！

Framer-motion

こちらもReactと使える動きをつけるためのライブラリで、リッチなアニメーションを実装できます。

react-spring

UIアニメーションライブラリで、物理演算を活用したリアルな動きを実現できます

3.学習教材が充実してる！

YouTubeやUdemy、書籍など学習のための教材が豊富にあります。逆に選択肢が多すぎて悩むこともあるかもしれません。

そこで、ここでは私がおすすめする教材を有料・無料に分けてご紹介します。自分に合ったものを見つけて、効率よく学習を進めましょう！

有料

React

以下のUdemy講座は、初心者から中級者まで幅広く対応しており、実際に私も活用しています。

無料

React・Next.js

お金をかけずに学びたい場合は、YouTubeの動画も非常におすすめです！

しまぶーさんのReact解説

Next.jsベストプラクティス

ショートカットキーで効率アップ

開発効率を上げるためにショートカットキーを活用するのもおすすめです！

Vue.js

Vue.jsを学びたい方には、公式チュートリアルとガイドが特におすすめです。これらは日本語にも対応しており、安心して学べます。

公式チュートリアル

公式ガイド

TypeScript

TypeScriptについては、以下の書籍がおすすめです。無料で網羅的に学べるのでこれ一冊で十分です。

サバイバルTypeScript

学習のポイント

基本をある程度学んだら、例えば「ToDoアプリ」や「ブログ投稿サイト」、「クイズ」などのミニアプリを作ってみると良いでしょう。アウトプットを意識することで、より実践的なスキルが身につきます。

4.無料でサービス運用・デプロイができる！

「Vercel」を使えば、無料でデプロイが可能です。また、スリープ対策も不要で、簡単にサービスを運用できます。

Vercelとは？

Vercelは、Webアプリケーションのホスティング、デプロイ、スケーリングを簡単に自動化できる無料のPaaS（Platform as a Service）です。開発者は、Vercelを活用することで、アプリケーションを素早く構築、テスト、デプロイできます。

主な特徴

• SSL（Secure Sockets Layer）の自動設定

→Webサイト通信の暗号化により、セキュリティが強化されます。

• Gitリポジトリとの連携

→プルリクエストがマージされるたびに、CI/CD(継続的インテグレーション/継続的デプロイ)が自動で実行されます。

• 無料プランでスリープなし

→一定時間利用しなかった場合にアプリの画面が消灯してしまう状態のことですが、Vercelならスリープの心配なくサービス停止の心配なしで、利用者がストレスなくアプリを利用することができます。

以前は「Heroku」でも無料でデプロイが可能でしたが、有料化により、現在は他の選択肢を検討する必要があります。

他PaaSサービス

• Fly.io
• Render

これらも無料プランや使用した分だけ請求されるプランが用意されていますが、例えばRenderではデータベース利用時にコストが発生します。工夫次第では無料で運用を続けることも可能ですが、バックアップや定期的な移行が必要で、手間がかかる場合もあります。

フロントエンドに特化したVercelの強み

Vercelはフロントエンドに特化したPaaSであり、簡単にデプロイして運用を始められます。スリープの心配も不要です。

もっと使い勝手を向上させたい！

ここでは、Vercelを使う上でさらに追加使用したいサービスについて紹介します。

Supabase

Supabaseを使えば簡単に無料でデータベースを動かすことができます。SupabaseはPostgreSQLベースのデータベースに加え、ファイルストレージや認証機能も提供しています。

Supabaseなら、MYSQLやPostgresqlの代わりにもなり、ユーザー登録やログイン情報の保存、投稿データの管理（CRUD操作）が簡単に実現できます。

microCMS

CMS(Contents Management System)だとWordpressが有名で、ブログでよく使われています。しかし、microCMSを使えばブログのようなサイトを作ることができます。今後はSPA構築に適したCMSとしてmicroCMSに軍杯が上がってきそうな予感がしています。

Stripe

決済系のサービスを導入するなら、Stripeを使うといいでしょう。これで無料運営しながらも利益を上げられるかもしれません。

たくさん知ろう！

たくさんの技術を扱えるようになることで、自分のできることや視野が広がっていろんなアイデアや革新的なサービス開発につながるのではないでしょうか。

5.需要が高い！

フロントエンド開発の需要は非常に高く、このスキルを持つことでキャリアの選択肢が大きく広がります（もちろん、フロントエンド以外の分野も注目されています）。

ここでは、求人市場や副業案件について見ていきます。

求人市場の動向

例えば、レバテックさんの情報によると、エンジニアの求人倍率が10倍以上と非常に高い水準で、今後もこの勢いが続くと予想されます。

これらのデータから、フロントエンドを含むIT分野のスキル需要が高まっていることが明らかです。

それに経済産業省のデータでは、2030年までにITエンジニアが約79万人不足するとの予想がされています。

これらのデータから、フロントエンド含むIT分野全体の需要のさらなる高まりが示唆されています。

副業案件の豊富さ

フロントエンドスキルを活かした副業案件も多数存在し、以下のようなプラットフォームで幅広い案件を探すことができます。

• ココナラ
• ランサーズ
• クラウドワークス
• レバテックフリーランス
• findyフリーランス

案件内容は以下のように多岐にわたります。

• LP(ランディングページ)制作やWeb制作
• ReactやVue.jsなどを使用したフロントエンド開発
• デザインスキルを活かしたUI/UX関連案件
• バックエンドスキルと組み合わせたフルスタック案件

さらに、自身のネットワークや営業力を活かすことで、知人や友人を通じた案件獲得も可能です。

フロントエンド開発の柔軟性

フロントエンドスキルは「小規模な案件」から参入しやすいという特徴があり、空いた時間を活用して自宅で働くこともできます。また、以下の理由から、ライフスタイルに合わせた柔軟な働き方が実現しやすい分野でもあります。

• リモートワークとの親和性が高い
• 短期間で成果物を納品できる案件が多い
• 副業やフリーランスとしての働き方が一般的

これらの特性により、フロントエンド開発は今後も多方面での活躍が期待されると思われます。

おわりに

今回は「フロントエンドのワクワクする5つのポイント」をお届けしました。

少し長くなりましたが、この記事がフロントエンドの楽しさや可能性を感じるきっかけになれば幸いです。

それにお世話になったRUNTEQ Advent Calendarへ参加できたのは嬉しいです！

もしも記事で気になるところや間違いがあれば教えていただけますと幸いです。

フロントエンドは学び甲斐があり、新しいことを追いかけていける分野です。楽しく、学んで、ぜひフロントエンドの世界を広げていきましょう！

参考

CSSフレームワーク
bootstrap
tailwindcss

アプリ

ライブラリ
react
mui
shadcn
v0
framer-motion
react-spring

学習教材Udemy

学習教材Youtube
【完全保存版】Next.js App Routerのベストプラクティスを解説
【Next jsで学ぶReact講座 #1】
プログラミング始めるなら必須のショートカットキー72選

Vue.js
Vueチュートリアル
Vueガイド

TypeScript
サバイバルTypeScript

各種サービス
Vercel
Heroku
supabase
microcms
stripe

求人
レバテック

案件
ココナラ
ランサーズ
クラウドワークス
レバテックフリーランス
findyフリーランス