技術スタック

カテゴリ スタック
Front end html
css postcss tailwindcss Mui
javascript typescript jquery
React Next.js
Vue Nuxt.js
apollo (Graphql)
openapi (Swagger)
ethers.js
Front end Graphic GSAP
three.js
Phaser3
Back end PHP Laravel Symfony
python Django
node.js express
aws Lambda
gcp Cloud functions
Solidity(Ethereum)
Infra AWS EC2
RDS
S3
AppRunner
ALB
CloudFront
Infra GCP Compute Engine
AppEngine
CloudRun
SQL
Firebase FireStore,Auth
Storage
DateStore
design & illust Photoshop ClipStudio
Illustrator
Figma adobeXD
management Github GithubIssue
Backlog
Monday
Notion
Google Workspace
Google documents
Microsoft office

開発のメイン構成

Nickel Lab. で開発を行う場合の基本構成です。特に指定がない場合は、こちらを用いた開発を主軸にし、要件により変化させています。

カテゴリ 構成
開発手法 アジャイルまたはDevOps クライアント様の開発参加が積極的な場合には、DevOpsを用いてステージングでプレビューを確認して頂き、すぐにフィードバックを頂ける環境を整えています。
デザイン Figma
ClipStudio
Illustrator Figmaでエンジニア含めチーム全体でデザインを共有し、オンラインでのデザイン確認、コメントを行っています。
ClipStudioでは、イラストを制作しています。

Illustratorでは、ロゴ、ビジネスイラストといったSVGで必要な素材を制作しています。 | | フロントエンド | React-Next.js ReactHooks Typescript tailwindcss + Mui openapi | Reduxを使わずにReactHooksですべてのステートを管理しています。

TypescriptによるVSCodeサポートをフルに使い、入力補助とコンパイルエラーでビルド前にエラーを発見できています。

デザインは、Muiで基本コンポーネントを流用することで、ボタン・リスト・タブと言った一般的なコンポーネントの開発をせずに、プロジェクト固有機能の開発のみに専念できます。それらをtailwindcssで整えることで、cssの記述ゼロでデザインを反映させることができるので、開発が高速化します。

openapiのスキーマをGitサブモジュールとして各リポジトリに取り込み、バックエンドAPIモデルやtypescriptの型を自動生成しAPI通信に適用することで、担当間のスキーマ不整合を防ぐこと、API仕様書の自動生成、コードの型チェックを実施しています。

| | バックエンド | Node.js Express または Laravel | フロントエンドのtypescriptの型定義をそのまま用いることで、設計を簡略化しています。 また素晴らしいフレームワークであるLaravelをバージョン3の頃から開発に使用しますので、PHPが要件の場合利用しています。 | | インフラ | GCP App engine GCP SQL または DataStore GCP Storage | Googleクラウドをメインに構成しています。サーバー費用などのランニングコストをクライアント様毎にまとめて管理し、請求書発行などの事務作業を素早く行えるようにしています。 |


実績

企業様Webサイトの継続的な制作

一般的なWebサイト制作を行っています。

ポートフォリオの詳細につきましては以下でご掲載させて頂いております。

[ポートフォリオリンク]

https://ivory-perigee-341.notion.site/751642d2c3cb403fb217ac3bce3019ec

<aside> 🛠 html tailwindcss React Figma

</aside>

工場ネットワークとPLC連動システムの保守運用