FigmaのデザイントークンからCSSファイルを自動生成する手順①【ローカル開発環境】
この記事では、Figmaのデザイントークンを活用して、CSSファイルを自動生成する方法を紹介する。FigmaからJSON形式でトークンを出力し、Style Dictionaryを使って各プラットフォームで利用できるCSSやSCSSファイルを生成する手順をステップバイステップで解説する。全体
プログラミングスクール検索サイトの開発
職務の概要
個人開発のプロジェクトで、プログラミングスクールの検索サイトを開発。これからプログラミングを学ぶ方の選択肢を増やすことを目的にスタート。2024年10月から法人としてサイトを運営し、デザインリニューアルや、コンテンツ拡充を予定。
サイト構成
ユーザーが使用する「フロントサイト」、検索サービスのデータを管理する「管理画面」の２つのサイトを使用し、共通のバックエンドに接続。
バックエンドのシステム構成
使用技術
| プログラミング言語（フレームワーク, ライブラリ） | ■ フロントエンド HTML5 CSS3 TypeScript（React.js, Next.js） ■ バックエンド Node.js（Express.js） |
| 主なライブラリ | ■ フロントエンド MUI dayjs lodash react-redux react-hook-form react-markdown ■ バックエンド mongoose swagger-ui-express aws-sdk v3 crypto jsonwebtoken jwks-rsa |
| OS | Mac |
| インフラ | AWS
■ DB ■ ホスティング ■ メール配信 ■ ストレージ ■ 認証 |
| 各種ツール | ■ テストツール Playwright, Jest ■ バージョン管理/CI・CD GitHub Actions ■ プロジェクト管理/コミュニケーションツール GitHub, Google Chat ■ デザイン In Design |
この仕事での学び
React.js、Next.jsの開発経験
これまでVue.js開発経験を応用し、Reactでのシステム開発を経験できました。検索サービスなのでSEOを考慮し、サーバーサイドレンダリングの実装をしたり、パフォーマンスを向上させるために状態管理（Redux）を導入したりと、ReactでWEBアプリを開発する上で必要なスキルを身につけることができました。また、VueとReactの両方を経験したことで、技術や設計の引き出しが増えたことも有益だったと感じます。このサイトは引き続き開発・運営をしてくため、Next.jsの新機能などは積極的に使っていきたいと考えています。
バックエンド/インフラ経験
Node.jsを使用したバックエンドAPIの開発を通じて、効率的なデータ操作とセキュリティ対策を実施しました。認証・認可機能の実装や、swagger-ui-expressを用いたドキュメント自動生成により、開発効率を高めつつ、信頼性の高いAPIを提供しました。AWSのインフラ構築にも携わり、バックエンド開発からクラウドインフラの設計・運用まで、幅広く対応できるスキルを習得できました。
