職務の概要
フルスタックエンジニアとして自社サービス(「テック教育ナビ」)の開発・運営に従事。これからプログラミングを学ぶ人が、自分に合ったスクールを見つけやすくすることを目的にスタート。また、サイト内でフロントエンド開発を中心に技術チュートリアル記事の執筆や動画講座の配信も行い、開発者のスキルアップを支援する活動にも取り組んでいる。
フロントエンド・バックエンドの開発から、インフラ構築、運用保守までを担当。
サイト構成
ユーザー向けの「フロントサイト」と、データを管理する「管理画面」の2つで構成され、共通のバックエンドAPIを通じてデータを提供。
![](http://freelance321.com/wp-content/uploads/2024/09/site-configuration-1024x545.webp)
バックエンドのシステム構成
![](http://freelance321.com/wp-content/uploads/2024/09/backend-configuration-1024x569.png)
使用技術
プログラミング言語(フレームワーク, ライブラリ) |
■ フロントエンド
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
MongoDB
■ ホスティング
API: AWS ECS
フロントエンド: Amplify Hosting
■ メール配信
AWS SES
■ ストレージ
AWS S3
■ 認証
AWS Cognito |
各種ツール |
■ テストツール
Playwright, Jest
■ バージョン管理/CI・CD
GitHub Actions
■ プロジェクト管理/コミュニケーションツール
GitHub, Google Chat
■ デザイン
In Design |
この仕事での学び
React.js、Next.jsの開発経験
検索サービスの特性を考慮し、サーバーサイドレンダリング(SSR)を活用したSEO最適化を実装。パフォーマンス向上のためにReduxを導入し、状態管理の効率化を図った。Vue.js(Nuxt.js)での開発経験を活かしつつ、React/Next.jsの新機能も積極的に取り入れ、技術選定や設計の選択肢を広げる経験を積んだ。これにより、Vue/React どちらの案件にも対応できるスキルを習得。
動画のストリーミング配信の実装
動画配信のためのストリーミング機能を実装。管理画面からアップロードされた動画データをAWS Elemental MediaConvertを活用してHLS形式に変換し、Lambda関数を用いてS3へ出力。さらに、AWS CloudFrontと連携し、署名付きURLによる配信を実現。これにより、アクセス制限やセキュリティを確保したうえで、安定した大容量動画コンテンツのストリーミング配信を可能にした。フロントエンドではhls.jsを導入し、HLSストリーミング配信を構築。
バックエンド/インフラ経験
Node.js(Express.js)を用いたAPI開発を担当。認証・認可はAWS Cognitoで実装し、セキュアなシステム設計を実現。APIの信頼性向上のためにSwaggerでの自動ドキュメント生成を導入し、開発効率とメンテナンス性を向上。AWSを活用したクラウドインフラ構築にも携わり、ECSを用いたAPIのデプロイ、ログの監視、Amplify Hostingによるフロントエンドのホスティング、SESを活用したメール配信の自動化などを担当。開発から運用まで一貫して対応できるスキルを習得した。
コメント