こんにちは。 株式会社 CHILLNN という京都のスタートアップにて CTO を担っております永田と申します。 本記事では、GraphQL を活用した、規模が拡大しても崩壊しづらいソフトウェアアーキテクチャについて考察していきます。 自分は普段はバックエンドを書いているのですが、先週は少し React を書いていて、その中で考えたアーキテクチャについて紹介させていただきます。 はじめに 弊社では API として GraphQL を利用しています。 API レスポンスの型をフロントエンドと共有できるため、API 設計を行う際に UI の構成を強く意識することができます。 弊社でのバックエンドの開発フローはざっくり以下のような流れになっています。 UI デザイナーが Figma で UI を作成する UI の構造を反映させた ViewModel（GraphQL Schema）を定義する Vi
WebフロントエンドにおけるGraphQL（あるいはバックエンドのAPI）との向き合い方 / #241106_plk_frontend
コンパウンドプロダクト開発の質とスピードを支える Protobuf と Connect #アーキテクチャ_findy / Boosting Compound Product Development Efficiency with Protobuf and Connect
Fivotに参画してから約半年が経過しました。 参画当初から数ヶ月間、さまざまな課題に取り組み、方針も固まってきたため、 これまでの取り組みを整理し共有します。 背景 参画時点では、Flutter WebからNext.jsへの移行が完了したばかりの段階でした。 もともと別のプロダクトでFlutterアプリを活用していましたが、Flutter Webでの開発はメンテナンスが難しく、Next.js（v13）への移行が決断されました。 エンジニア2人体制で担当しましたが期間が短かったこと、フロントエンドが専門でなかったこともあり、コードの品質は課題が多い状態でした。 参画当初、早期の新規開発も求められていましたが、技術的負債の解消も並行して進めなければいけないと考え、改善活動に取り組みました。 技術的負債解消の取り組み オンボーディング改善 環境構築に必要な情報をREADMEに記載し、ドキュメン
Announcing AWS AppSync Events: serverless WebSocket APIs to power real-time web and mobile experiences at any scale | Amazon Web Services
Front-End Web & Mobile Announcing AWS AppSync Events: serverless WebSocket APIs to power real-time web and mobile experiences at any scale Today, AWS AppSync announced AWS AppSync Events, a feature that lets developers easily broadcast real-time event data to a few or millions of subscribers using secure and performant serverless WebSocket APIs. With AWS AppSync Events, developers no longer have t
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? こんにちは、とまだです。 突然ですが、みなさんは「ヴァンパイアサヴァイバーズ」（以下、ヴァンサバ）というゲームをご存知ですか？ 私はこのゲームが大好きです。 クリアしてはデータを消してまた最初からプレイするというサイクルを繰り返しているぐらい、どハマりしています。 そんな中、最近ふと気づいたのです。 「あれ？このゲーム、エンジニアの人生設計にめちゃくちゃ似てるぞ...？」 ...と。 今回は、そんなヴァンサバから学べるエンジニアの人生設計について、7つのポイントをお話しします。 ヴァンサバの概要 本題に入る前に、ヴァンサバについて簡単に
高速に動作する 管理画面もフロントも速いです。キャッシュの仕組みもしっかりしてるので、普通のサイト（？）だったら、カラフルボックス や mixhost などのレンタルサーバーでもストレスなく運用できます。 実際に今日時点で33,000件以上の記事が登録されているサイトでもストレスなく閲覧・運用できています。 アップデートが活発 アップデートが頻繁にリリースされます。新機能の追加、機能の向上・改善などが頻繁に行われます。開発元の Pixel & Tonic の熱さが伝わってきます。 また、バグレポートをリポジトリの Issue で報告すると、すぐさま修正版がリリースされることも多々あります。これは安心ですよね。 アップデートが簡単 管理画面からワンクリックでアップデートできるのも魅力です。逆に、運用の安全を担保するために、管理画面のアップデートを停止して、コマンドラインでしかアップデートでき
すでに夏の終わりも近づいてきていますが、いかがお過ごしでしょうか！ どうもお久しぶりの投稿です、ユートニック テックリードの衛藤です。 今回はCloud Firestoreにまつわる怖い話・・・ と言っても結局は自分の実装で初歩的ポカをやっていただけという話なのですが、発覚した経緯も含めて赤裸々に書きたいと思います！ Cloud Firestoreについて僕の最初の投稿でも触れた通り、ユートニックのバックエンドのDBレイヤーはCloud Firestoreを使っています。 簡単に特徴についてだけ記載しておきます。 Cloud Firestoreの特徴これまでCloud Firestoreを数年使ってきてましたが、改めてメリットデメリットをまとめるとこんな感じになります。 メリット リアルタイム同期、スナップショットリスナーによるドキュメントフック処理の簡潔さ 強整合性担保でかつマルチリージ
リバースプロキシを使ってサードパーティ製のツールでもCloud RunのIAM認証を突破できるようにする - バイセル Tech Blog
はじめに こんにちは。開発1部の小松山です。現在はバックエンドを主軸にリユースプラットフォームCosmosの開発に携わっています。 Cosmosでは全面的にCloud Runを採用しており、同様に私のプロジェクトでもAPIサーバにCloud Runを採用しています。本記事ではそんなCloud Runの運用中に遭遇した課題を、ちょっとした工夫で解決した事例を紹介します。 はじめに 背景/前提 プロジェクトの構成 IAM認証付きのCloud Runサービスにリクエストを通す 課題 サードパーティのデプロイツールでIAM認証が突破できない Hasuraのデプロイについて 従来の方法の問題点 リバースプロキシを挟んでサービスアカウントの認証情報を付与する 実装方針 net/http/httputilを使用したリバースプロキシの実装 os/execを使用した外部コマンドの実行 まとめ 背景/前提 プ
2024年10月くらいのAWS最新情報ブログとかをキャッチアップする – AWSトレンドチェック勉強会用資料 | DevelopersIO
こんにちは、臼田です。 みなさん、AWSの最新情報はキャッチアップできていますか？(挨拶 社内で行っている AWSトレンドチェック勉強会 の資料をブログにしました。 AWSトレンドチェック勉強会とは、「日々たくさん出るAWSの最新情報とかをブログでキャッチアップして、みんなでトレンディになろう」をテーマに実施している社内勉強会です。 このブログサイトであるDevelopersIOには日々ありとあらゆるブログが投稿されますが、その中でもAWSのアップデートを中心に私の独断と偏見で面白いと思ったもの(あと自分のブログの宣伝)をピックアップして、だいたい月1で簡単に紹介しています。 10月は84本ピックアップしました。多いなぁ…。個人的な推しはAmazon Q CLIがCloudShellにやってきたやつです。もうこれ無しでは生きられない！ ちなみにAWSの最新情報をキャッチアップするだけなら週
AWS AppSync Events の発表: サーバーレス WebSocket API で、あらゆる規模の Web およびモバイルのリアルタイムエクスペリエンスを実現 | Amazon Web Services
Amazon Web Services ブログ AWS AppSync Events の発表: サーバーレス WebSocket API で、あらゆる規模の Web およびモバイルのリアルタイムエクスペリエンスを実現 2024 年 10 月 30 日、AWS AppSync に AWS AppSync Events の機能が追加されました。この機能を使うと、開発者は安全で高性能なサーバーレス WebSocket API を使って、リアルタイムのイベントデータを数人または数百万人のサブスクライバーに簡単にブロードキャストできます。AWS AppSync Events を使えば、開発者はもう WebSocket インフラストラクチャの構築、コネクション状態の管理、ファンアウトの実装を心配する必要がありません。開発者は単に API を作成し、WebSocket 接続が行われているクライアントにサ
Python＋Amazon Bedrockでプルリクの説明文とレビューをAIで自動生成｜noteエンジニアチームの技術記事
推薦チーム所属 MLエンジニアの漆山です。 私たち推薦チームは2人体制と小規模であるため、開発においてのコミュニケーションを円滑にすることが大切です。そこで、AIによるプルリクの概要とコードレビューの自動化を行いました。 概要の自動生成レビューの自動生成この記事では、自動化前の課題や実装方法、初期の成果、新たな課題と今後の展望について詳しく紹介します。 課題と背景自動化をする理由①人数体制推薦チームは現在、2人体制です。少人数で開発をすべて担う必要があり、それぞれの担当範囲が広い状態です。 2人で開発で困るのは、プルリクの管理です。一方がプルリクを出すと、必然的にもう一方がレビューを行うことになります。自分の作業を止めなければなりません。 このような状況が続くと、開発の効率が著しく低下し、リリースに間に合わないリスクが常に付きまとってしまいます。仮に1人が体調を崩した場合、即座にチーム全体
HTML4 × Shift_JIS のサイトをNext.js × ヘッドレスCMSに置き換えた話 - Qiita
※1 プラグインについて サイトのUI部分に関するプラグイン（例：パンくずリストやページネーションなど）が使えないだけで、カスタム投稿タイプやカスタムフィールドの設定、記事管理に関するものなど一部のプラグインは使えます。 ログインページ（wp-login/wp-admin）の露見について 今回最終的にSSG/CSRとなったので「画像パスからWordPressサイトのURLが分かる状態」です。しっかり隠したいならやはりフェッチ元パスは環境変数に設定してSSR/ISRするとかが良いかと思います。そうなるとそれらに対応したホスティング先を検討・選定する必要が出てきますが……。 また、セキュリティ関連のプラグインを使ってログインアドレスを変更できますが極力プラグインを増やしたくなかったのと、ロジック部分（WordPress）とデザイン（Next.js）部分の棲み分けをしたかったこともあって今回の方
Gatsbyにフォームを追加/設置/設定する方法What is Gatsby? GatsbyとはGatsbyは、Reactベースの静的サイトジェネレーターです。Gatsby.jsやGatsbyJSと呼ばれることもあり、表示が早くリッチなコンテンツを作るためのフレームワークとして、人気を集めています。プラグインやテーマファイルなど、周辺のリソース充実も積極的に行っており、単純なサイトのベースというよりは、本格的なアプリケーションまで視野にいれた展開を図っています。 Gatsbyは、2015年にKyle Mathewsによって開発されました。当初、Gatsbyは、React.jsをベースとしたウェブサイトを作成するためのフレームワークとして開発されました。2017年にバージョン1.0がリリースされ、正式に静的サイトジェネレーターとしての機能を持つようになりました。その後、Gatsbyは、Gra
FastAPI と Strawberry で作る GraphQL Server ~SQLAlchemy を添えて~ - Qiita
※ 注： こちらの記事は PyCon APAC 2024 に向けて、スライド作成の下書き的な立ち位置で書いている内容です。現時点では、適宜修正している可能性があります。 はじめに こんにちは。株式会社PORTAMENTのCTOをやっているzoetaka38（川添）です。 弊社の OpsGuide（オプスガイド）というサービスでは、Python で GraphQL サーバーを構築しています。 今回は、弊社のこのサービスで GraphQL サーバーの構築に使っている Strawberry というフレームワークについて、実践的な利用法と一緒に紹介させていただきたいと思います。 コード 本記事のコードは下記にあります。参考にしてください。 https://github.com/zoetaka38/poc-graphql-react-fastapi/tree/099ffa653149f8721dec
自己紹介 フィヨルドブートキャンプで学習しています、motohiroと申します。 完全未経験（元医療職）から学習を開始し、現在自作サービスのプラクティスに着手しています。 Kaigi on Rails 2024に参加しました！ 2024/10/25~26で有明に行ってきました！ 初めてのKaigi on Railsでとても楽しみにしていました🙌 kaigionrails.org scrapbox.io 自己紹介 Kaigi on Rails 2024に参加しました！ 発表全体について 印象的だった発表 10/25 基調講演 Palkanさん Rails Way, or the highway igaigaさん Railsの仕組みを理解してモデルを上手に育てる - モデルを見つける、モデルを分割する良いタイミング - kotatsuさん 推し活としてのrails new yana-giさん
【テキストエディタNOVA】便利な拡張機能の紹介
テキストエディタNOVAの拡張機能で私がよく使っているものを紹介します。 マークアップエンジニア目線で、インストールしておくと便利なものとなっています。 拡張機能のインストールまず拡張機能のインストール方法です。 メニューバーにある「機能拡張」から「機能拡張を管理する」をクリックします。 すると下記のような画面が開きます。 ここから入れたい機能を検索して、「インストール」ボタンをクリックしてインストールします。 もちろん下記のように機能の説明も見ることができます。 便利な拡張機能Emmet「Emmet」を使うと、HTMLのコードやCSSのプロパティを短縮して書くことができます。 VS Codeにもあるので知っている方は多いと思いますがNOVAにもあります。 例として公式サイトにも記載されているものですが、HTMLの場合 ul#nav>li.item$*4>a{Item $}このように書くと
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
技術的負債の発生を抑制する、UI指向アーキテクチャ
フロントエンド（Next.js）現場に入って数ヶ月で技術的負債の改善に取り組んだ話
ヴァンパイアサヴァイバーズから学ぶエンジニアの人生設計 - Qiita
Craft CMS のどこが好きか呟きたい | Craft CMS | かたつむりくんのWWW
ある夏のFirestoreのこわい話｜Takeshi Eto
Gatsbyにフォームを追加/設置/設定する方法 | SSGform
Kaigi on Rails 2024に参加しました！ - motohiLog