大規模SaaS 「カイポケ」の未来を支えるフロントエンドの技術選定 - エス・エム・エス エンジニア テックブログ
こんにちは、エス・エム・エスのフロントエンドエンジニアの城内です。 前職では、ヘルスケア系のスタートアップでソフトウェアエンジニアをしていましたが、2022年8月にエス・エム・エスへ入社し、介護事業者向けの経営支援サービス「カイポケ」の改善をするチームに所属しています。 カイポケの改善を進める開発チームでは、この度フロントエンド専任チームを立ち上げました。この記事ではフロントエンドチーム立ち上げの背景や、チームの立ち上げから進めてきた技術選定について書きたいと思います。 カイポケ改善プロジェクト 介護事業者向けの経営支援サービス「カイポケ」は、4万を超える事業所で導入されている SaaS 型のサービスです。介護事業には様々なサービスの種類（ex. 居宅介護支援、通所介護支援、訪問介護支援、etc…）があり、カイポケはそれぞれのサービス種類に対応した約40のサービス・機能を提供しています。カ
ほぼコードを書くことなく Figma からレスポンシブな React コンポーネントを生成する | Amazon Web Services
Amazon Web Services ブログ ほぼコードを書くことなく Figma からレスポンシブな React コンポーネントを生成する Amplify Studio が、Figma のコード化を通じて、レスポンシブコンポーネントのデザインを大幅に強化しました。バリアントを作成してブレークポイントをカスタマイズするだけで実現可能です。Amplify Studio は、あなたのレスポンシブデザインが組み込まれた React コンポーネントを生成することで、面倒な作業を人の代わりに行います。 どのように動作するか 最新のアプリケーション設計では、開発者はさまざまな画面サイズに合わせてアプリケーションを設計する必要があります。これは多くの場合、React コンポーネントの複数のバージョンを作成し、画面サイズに基づいてレンダリングするようにトリガーすることを意味します。 Amplify の
「デザインからコードを生成するツール」は実運用に耐えうるのか｜seya
A. 結論、現状存在するツールでは初期の開発フェーズに限られそう 先日 Figma から React のコードを生成する Amplify Studio というサービスのリリースが発表され一部の世間を騒がせたようなそうでもないような。 このような「デザインからコードを生成する」ツールというのは昨今続々とリリースされています。誇張抜きで100個くらいあると思います。なんなら私も一個作ってます。 デザインからコードを生成する そんなツールが出る度に人々は心を躍らせるものですが、それが実際にプロダクションで使われている、という事例はあまり聞いたことがありません。 それは、いざ使ってみると生成されたものに幻滅したり、ちゃんと生成するにはデザインやコードに一定の縛りが必要になってしまったり、既存のコードのアップデートにはあまり意味をなさなかったり…、様々な理由から実運用に耐えないものであるからでしょう
【Amplify と Figma の連携】Amplify Studio の UI Library を使ってみた - サーバーワークスエンジニアブログ
本ブログは動画での解説も行っています。 youtu.be はじめに 新卒1年目の近藤です。今回AWSのサービス「Amplify」で、デザインツール「Figma」との連携に関する（Amplify Studio）アップデートがありました。どちらも普段からよく使うものランキング上位のサービスなので、知りたい！ただそれだけの思いで設定を行ってみました。 何がうれしいのか デザインツールで作成した UI をコード（React コンポーネント）に変換できる Amplify Studio 上でコンポーネントを管理できる ローカルの開発環境へのインポートが簡単 私が率直に感じたうれしいポイントは上記の3つです。React などのフレームワークでは、Webページでよく使う要素（例えばボタンのUIなど）をコンポーネントとして管理することができます。通常、開発において、デザインツールで作成した UI をコードで
Figma ✕ React Storybook で作るプロトタイピング & スタイルガイド - Qiita
アプリを開発する前に予め、開発の全体像を把握するためにプロトタイプを作成します。 プロトタイピングツールで作成したUIは、実際のアプリ開発にも流用できるため効率的です。 今回は簡単な写真共有Webブラウザアプリを制作すると仮定して、 プロトタイピングツールFigmaでプロトタイプ作成 Reactコンポーネントへの落とし込み Storybookでの管理 という一連の流れを実際に実装しながらFigmaやStorybookを導入することでどういったメリットがあるのか・どういったことができるのかの検証を行います。 作成したプロトタイプの全体像 最初にどんなアプリなのかをスクリーンショットで提示してから、詳細な解説を進めていきます。 基本的なアプリに最低限必要な認証・一覧表示・登録・編集 機能をプロトタイピングで再現しました。 マテリアルデザイン（Material-ui）をベースとしています。 ログ
我が Design-Frontend Ops論〜フロントエンド開発を加速するためのデザイン - 仮説編〜｜seya
やはりデザイナーがアレだとフロントエンドエンジニアの生産性も著しく下がり、逆に良ければ上げることもできると思うので、自分が考えてる「デザインの側面からフロントエンドの生産性を考える」というのは割と筋がいいアプローチなのではという想いが深まった — フロントエンド大好きseyaさん (@sekikazu01) June 15, 2021 思いの外反響があり、もっと具体的に聞いてみたい・ディスカッションしてみたいというお声をいくつかいただきました。 せっかくの機会なので、現状自分が考えるデザインとフロントエンドの接合の最適化、カッコ良くいうと「Design-Frontend Ops論」を語っていこうかなと思います。 ※ 予防線貼っておくと、まだ全然実践できていないので話半分に聞いてください。タイトルに"仮説編"とついているのはそのためです。 ※ 一緒に探求してくれる気概あふれるデザイナーも募集
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
