AWS CDKのコード変更時にリアルタイムで構成図のプレビューを表示する
TL;DR プレビュー対象はcdk synthで出力されたCloudFormationのテンプレートファイル 構成図はVSCode拡張機能aws toolkitのApplication Composerでプレビュー表示(変更検知機能利用) nodemonを用いて、プレビューを開いた状態でtsファイル保存時にcdk synthを実行することで再表示させる nodemon -e ts --ignore cdk.out --exec 'cdk synth' 情報元: aws-summit-2024-iac-booth-demo/realtime-draw-diagram at main · aws-samples/aws-summit-2024-iac-booth-demo · GitHub 前準備 ※コンテナ開発/TypeScriptを前提とする。 1. CDKプロジェクト作成 すでに作成済み
decoratorを使ってログ出力コードの削減し可読性を上げた話 - NTT Communications Engineers' Blog
この記事では TypeScript ver4.x にて実験的な機能である decorator を使い、ログ出力コードを削減・コードの可読性を上げた経験を紹介します。 はじめに 背景 decorator とは decorator を使ったログ出力方法の検討 decorator を使ったログ出力の実装 実装時にハマったこと等 関数定義方法の変更 非同期・同期両方に対応 クラス名の取得 ログメッセージの統一 その他考慮した点 ライブラリの利用 実践結果 良かった点 悪かった点(苦労した点) まとめ 参考文献 はじめに こんにちは、NeWork 開発チームの加藤です。普段はオンラインワークスペースサービス NeWork の開発エンジニアをしています。 今回は TypeScript ver4.x にて実験的な機能である decorator を使った事例紹介をします。我々開発チームではログ出力のための
新規サービスのバックエンド開発で3ヶ月経ったので、試した技術や取り組みをまとめてみた
こんにちは、AIShift バックエンドエンジニアの石井(@sugar235711)です。 AIShiftでは去年の11月からAI Worker[1]という新しいサービスの開発が始まりました。（以下AI Worker） 本格的に開発が始まり3ヶ月弱経ったので、その間に試してきた技術やチームの取り組みについてまとめてみたいと思います。 はじめに この記事では、AI Workerのおおまかな概要・設計を説明し、それらのバックエンドを実現する上でどのような技術を試してきたのか、技術以外でのチームの取り組みについてまとめます。 少し分量が多いので、ライブラリについての情報を求めている方は、目次から気になる部分を読んでいただければと思います。 何を作っているのか ざっくりまとめると、Microsoft Teams/Web上で動くAIを活用した業務改善プラットフォームを作成しています。 GPTとRAG
Claude 3とAWS CDKを使い爆速でAWSの検証が出来る環境を手に入れよう！ - Qiita
はじめに 今回は、今話題の Claude 3 でAWS CDKというAWSインフラのプロビジョニングツールを使い、簡易的なメール通知の仕組みを作成しました。 基本的にはClaudeに尋ねながら構築を行っており、AWS CDKの最初のセットアップ以外はコードをほとんど書いていません。 なので、AWS CDKに馴染みが無い方でも、最初のセットアップさえ出来れば、Claudeを活用しながら、どなたでもAWS CDKをご活用頂けるのではと考えております。 技術要素の紹介 Claude 3 2024年3月4日に発表されたAnthropic社の最新モデルの生成AIです。 特に驚いたのは「マルチモーダル」対応という事で、画像やPDFの分析もしてくれます。 anthropic.comに登録すると、Claude 3 Sonnetをお試し頂けます。 今回はこちらを利用し、AWS CDKのコードを出力しています
【React・TypeScript】レビューに出す前に気をつけること - Qiita
はじめに ReactやNext.jsのフロントエンドを実装しています。 見た目部分のデザイン面のコーディングを主に担当しています。 今回は実際最近いただいたレビューから、今後気をつけたいこと注意するべき視点をまとめました。 1.コンポーネントの分け方・設計の観点で気をつけること コンポーネントの分け方は適切か コンポーネントは1つの責任を持つように設計されているか 各コンポーネントの責任と役割が分かりやすく設計されているか before export const Sample: FC = () => ( <DesignSetCondition value="test"> <Section> <div> <p></p> . . . </div> </Section> </DesignSetCondition> )
【DDD入門】TypeScript × ドメイン駆動設計ハンズオン
TypeScriptとドメイン駆動設計（DDD）を組み合わせ、APIを構築するハンズオンガイドです。この本では、DDDとは何かという基礎的なところからソフトウェア開発における戦略的設計、戦術的設計まで、包括的な知識を提供します。 戦略的設計では、ビジネスの要求に合わせたドメインモデルの設計をイベントストーミングを用いて行います。その後、戦術的設計では、具体的なコードの実装に関連するDDDの原則と実践を学びます。 TypeScriptを使ってコードを書きながら、DDDの概念を実際のプロジェクトに適用するヒントを紹介します。
TypeScriptで学ぶ！SOLID原則
はじめに 皆さんこんにちは、株式会社エムアイ・ラボのエンジニアです！ 今回はソフトウェア設計のSOLID原則について学習したので、弊社のメインの開発言語であるTypeScriptのサンプルコードを使って共有できればと思います。 SOLID原則は、オブジェクト思考プログラミングにおいて、ソフトウェアがメンテナンスしやすく、拡張や変更に強いソフトウェア設計を行うための原則です。 SOLID原則にはSOLIDの頭文字をそれぞれとった、５つの原則があります。 単一責任の原則（Single Responsibility Principle） 単一責任の原則とは、クラスが一つの機能や責任を持つべきで、クラスが変更される理由は一つであるべきというです。 クラスが一つの機能や責任のみを持つようにすることにより、コードは再利用可能でテストが容易になります。 単一責任の原則を遵守している例 以下のBirdクラ
React × SupabaseプロジェクトをVercelでデプロイ（webpack + TypeScript + React）
まえがき 「フロントエンドの処理は整った！でもデータベースもサーバーも設定しないとアプリとして公開できない...」「バックエンドは簡単に構築したい...」そんな願いをかなえるのが、BaaS（ = Backend as a Service）のひとつ、「Supabase」 です。 本記事は、そんなSupabaseの入門記事として、また 「React×Supabaseプロジェクトをいかにして公開するのか？」 を解決する記事としてお届けします。 本記事で解説すること 技術を予習する Supabaseとは？ Vercelとは？ 手順 GitHubリポジトリとローカルのプロジェクトを紐づける webpack + TypeScript + React のプロジェクトを用意 Supabaseでデータベースを構築 Supabaseでバックエンドを構築 Vercelでデプロイ 技術を予習する Supabase
GraphQLのスカラーとTypeScriptの考察
皆さんこんにちは。筆者は最近、TypeScriptからGraphQLを使用するためのコード生成ツールnitrogqlを開発しています（初手宣伝）。 直近は、GraphQLのスカラーに関する機能拡張を行っていました。この記事では、そこで得た知見と考察について共有します。 GraphQLのスカラーとは GraphQLにおけるスカラーとは、それ以上分解できないデータ型のことです。GraphQLのデータはスカラー・オブジェクト・enumに分類でき、データの末端はスカラーまたはenumになります。 GraphQL仕様では組み込みのスカラー型が定義されており、以下のものがあります。 Int Float String Boolean ID また、カスタムスカラーとして、追加のスカラー型をスキーマ上で定義することもできます。 スカラー値がサーバー・クライアント間でやり取りされるときはシリアライズする必要が
【Reactアプリ100本ノック】06 Profile - Qiita
はじめに こんにちは！！@Sicut_studyです！ こちらの記事が嬉しいことに多くの方に見ていただきました。 そこでReactが多くの初心者の方に注目されているんだなということを実感させられました。 私の記事では何度も言っている通り 最速で学ぶならとにかく何か作る というのが大事になってきます。そこで 「Reactアプリ100本ノック」 というのに挑戦していこうかと思います。徐々に難易度を挙げていってどこまでお題を作りきれるかの腕試しでやっていただければと思います。 今回は簡易的なプロフィールカードを作ってみたいと思います！ 前回のお題 Reactアプリ100本ノックルール 主要なライブラリやフレームワークはReactである必要がありますが、その他のツールやライブラリ（例: Redux, Next.js, Styled Componentsなど）を組み合わせて使用することは自由 Typ
丁寧なDeno+JSX - laiso
*1 サーバーレスFunctionsぐらいの気軽さでサーバーアリのWebアプリをデプロイしたいという時がある。主に自分たちだけが使うようなツール系のやつ。 その時に今までのようにSPA+APIアーキテクチャではなく、モノリシックなサーバーサイドアーキテクチャにしつつもフロントエンド開発と同じツールチェインを使いたい、と前から思っていた。 これは単にReactメタフレームワークでも一気通貫に時短で作れそうだけど、個人の楽しみのための活動なので、一旦世間のトレンドからは離れて自分が本当に必要だと思った要素技術のみを最小限に使って理解しながら試行錯誤したい。 ※ただ第三者に提供するシステムとかは安全に作られた既存フレームワークに乗るのがいいというのもある しばらく考えてみたところ、私にとっては「TypeScriptでJSXをテンプレートエンジンに使ってHTMLを書けるだけでよい」という所に落ち着
バックエンドエンジニアがフロントエンドの開発をすることになった話 - ドワンゴ教育サービス開発者ブログ
この記事は ドワンゴ Advent Calendar 2023 の 13 日目の記事です。 自己紹介 こんにちは。バックエンドエンジニアのlenです。 現在私は社内で使用する教材入稿ツールを改修するプロジェクトに参画しており、そこではバックエンドの実装に加え、フロントエンドの実装も携わっています。 ここではなぜフロントエンドの実装をすることになったのか、またそこから得られたことなどを紹介していきます。 フロントエンドの開発をすることになったきっかけ 理由は2つあります。 1つはバックエンドセクション内でフルスタックな人材が求められていたことです。 2021年の時はバックエンドセクションとフロントエンドセクションというセクション分割をしており、バックエンドセクション内でサービスごとにグループが分かれているような状態でした。 外部ツールは良いのですが新しい内部ツールや内部サービスについても考え
TypeScriptでどこまで「関数型プログラミング」するか ─ 「手続き Haskell」から考察する - 一休.com Developers Blog
この記事は 一休.comのカレンダー | Advent Calendar 2023 - Qiita 10日目の記事です。 昨今は Web アプリケーション開発の世界でも、関数型プログラミングのエッセンスを取り入れるような機会が増えてきました。 とはいえ、一つのアプリケーションを 1 から 10 までがっちり関数型プログラミングで構成するというわけではなく、そのように書くこともあればそうでない従来からの手続き的スタイルで書くところもあるというのが現状で、どこまで関数型プログラミング的な手法を取り入れるかその塩梅もまちまちだと思います。まだ今はその過渡期という印象も受けます。 本稿ではこの辺りを少々考察してみたいと思います。 先日、Qiita Conference 2023 Autumn で以下のテーマで発表を行いました。 この発表では「関数型プログラミング最強!」という話をしたわけではなく、
React + TypeScript: useMemoフックの使い方と使いどころ - Qiita
import { useMemo } from "react"; export const TodoList: FC<Props> = ({ todos, tab }) => { const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]); }; 引数 calculateValue: キャッシュする値を計算する関数。純粋で、引数は取らず、任意の型の値を返さなければなりません。Reactは、まず最初のレンダー時に関数を呼び出し、値が返されます。次回以降のレンダリングについてはつぎのとおりです。 直前のレンダー時と依存値が変わっていないとき: Reactは前と同じ値を返します。 直前のレンダー時から依存値が変わった場合: calculateValueが呼び出され、返されるのは新たな結果です。値はあとで使える
GASの開発環境をローカルで作成する方法（2023年7月版） | DevelopersIO
Google Apps Scriptの環境構築をVSCode上で行う方法について詳しく解説していきます。clasp,asideを使って構築するので、爆速で構築できます。 ことのはじまり 私は最近Google Apps Script(GAS)の学習を始めました。 GASの学習を始めると、まずはAppsScript公式のIDEでスクリプトを書いていくことになると思います。 しかし、普段VSCodeを使い慣れている身からすると、VSCodeの便利機能が使いたくて仕方なくなります。 それじゃあ、使い慣れたVSCodeを使おうじゃないか！！ AppsScript公式のIDEだとGitに差分を残していくこともできないぞ！！（できます） というわけで、GASをVSCodeを使って開発する為の環境構築の手順を書いていきたいと思います。 前提条件 VSCodeがインストールされている Node.jsがインス
Cloudflare Workers で Slack アプリを動かす方法
最近、週末の趣味プロジェクトとして Cloudflare Workers（と Vercel Edge Functions）向けの Slack アプリ開発フレームワークを作りました。 私は普段 Slack の Developer Relations Engineer として Qiita の Slack チームの公式な記事を書いているのですが、この Cloudflare Workers 向けのものは業務で開発した公式ツールではなく、完全に個人プロジェクトなので、Qiita の Org ではなく Zenn に個人的な記事として書くことにします。 ・・・そして、書き終わってみると、随分と長い記事になってしまいました。興味のあるところだけでもぜひ読んでみてください。 この記事で説明するもの この記事では、Slack アプリ開発の基本と、以下のライブラリの使い方について解説していきます。 「Slack
API仕様書をバリデーターと型と同期させて作る
API Spec を書くとそれ通りのリクエストしか受け付けないようにバリデーションしてくれて、なおかつバリデーションされた値には Spec で期待した通りの型が付いて欲しいですよね。 これを TypeScript で実現しようとすると色々と壁があります。特に API Spec と TypeScript の型を揃えるのが難しいです。 この手の課題は NestJS であればクラスフィールドとデコレータを使って解決できるのですが、制約の強い FW であるため会社の事情で採用が難しかったりもします。そこで fastify を使って同様のことを達成できるか模索してみましょう。 (※ OGP は https://www.pakutaso.com/photo/75600.html です。型、バリデータ、API Spec 三銃士感があって選びました) API 仕様書はどうあるべきか まず、フロントエンドエ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TypeScript 関数型スタイルでバックエンド開発のリアル
Prisma ORMを2年運用して培ったノウハウを共有する
値オブジェクト (Value Object)｜【DDD入門】TypeScript × ドメイン駆動設計ハンズオン