Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
ソウゾウの Software Engineer をやっています、@mookjp です。 8/10 の記事「メルカリShopsの技術スタックと、その選定理由」では、メルカリ Shops のアーキテクチャについて、その全体像を紹介しました。 この記事では、そのうちの BFF(Backend for Frontend) レイヤとして用意した GraphQL サーバについて、NestJS を使った実装例を交えて紹介します。 GraphQL とは GraphQL サーバ周辺の構成 NestJS とは GraphQL Module NestJS で Code First なスキーマ定義をする Object types の定義 Query と Mutation の定義 GraphQL スキーマの生成 スキーマの Breaking Change (破壊的変更)を防ぐ DataLoader を使って Bat
こんにちは、Barry(ばりゅー)と申します。 いきなりですが言わせてください。 このサービスは今読んでいるあなたのために作ったサービスです! はじめに リモートワークが当たり前になった今、みなさんはどんなデスクで作業してますか? 「もっと快適にしたい。」「もっとオシャレにしたい。」 デスクワーカーなら一度、いや、二度三度思ったことがあると思います。 そんなとき、他人のデスクが参考になったりしますよね。 そこでこんなサービスを開発しました。 どんなサービス? **デスク周りに特化した写真投稿サービス「Buildesk(ビルデスク)」**です。 【サービスURL】https://buildesk.app 【GitHub】https://github.com/en-Barry/buildesk Buildeskの一番の特徴は、使ってるアイテムも登録できること。投稿者がどんなアイテムを使っている
皆さんこんにちは、暑い中ですがお元気ですか?おっくんです。 去る 2021 年 7 月 13 日に Deno 1.12 がリリースされました。 今回も、リリースノートを参考に 変更事項の気になるところを紹介したいと思います。 実行環境 macOS Catalina 10.15.7 Docker イメージ denoland/deno:centos(確認時点では Deno 1.12.0 でした) Deno 1.12 Deno 1.12 での変更事項をDeno 1.12 リリースノートを元に確認します。 deno.com Web Crypto API の対応メソッドが増えました Deno 1.12 では、 以下のWeb Crypto APIの 3 つの実装が追加されました。 crypto.subtle.generateKey キー生成 crypto.subtle.sign 署名 crypto.s
Sponsored by: Honeycomb — AI agents behave unpredictably. Get the context you need to debug what actually happened. Read the blog 1st July 2021 Luke Page has a great post up with his list of YAGNI exceptions. YAGNI—You Ain’t Gonna Need It—is a rule that says you shouldn’t add a feature just because it might be useful in the future—only write code when it solves a direct problem. When should you ov
LINEが定期的に開催する技術者向けミートアップ「LINE Developer Meetup」の72回目は、Vue.js Communityと共同で開催。ここではLINEの花谷拓磨氏が「How to development library to Vue 3」というテーマで、Vue 3でパッケージを開発する上でのノウハウを共有しました。 LINEとしてVue.jsのスポンサリングを開始花谷拓磨氏(以下、花谷):「How to development library to Vue 3」という内容で登壇いたします。よろしくお願いいたします。私はLINE株式会社のFront-end Dev9 Teamに所属している、フロントエンドエンジニアの花谷と申します。Vue.jsのコミュニティとは3年ほど前からつながりがありまして、詳しくはスライドを参照してほしいのですが、それに付随してOSS開発なども行っ
フロントエンドの開発時に仮の API を使いたいってシチュエーションはわりとあると思います。 そんな時に、Mock Service Worker を使うと便利だったのでまとめます。 Mock Service Worker とは? Mock Service Worker は、ネットワークレベルで API リクエストをインターセプトして mock のデータを返すためのライブラリです。API リクエストを含む処理のテストや、開発時の mock サーバーの代替として利用出来ます。 テストでの利用については以前こちらの記事でまとめました。 今回は開発時のモック API としての利用について書きます。 開発用の API というと、JSON Serverが有名ですが、Mock Service Worker では Service Worker を使ってリクエストを返すため、別プロセスでローカルサーバーを立
JavaScriptからTypeScriptへの移行プロジェクトが始動東川翔氏(以下、東川):「JavaScriptからTypeScriptの移行のプロジェクトに関して気を付けた点」について話していきます。 まず自己紹介です。東川と申します。新卒の2年目で新規旅行アプリの開発をしています。興味のある言語はTypeScriptやPostgreSQLです。最近はクライアントアプリケーションの構築にも興味があって、Next.jsに関してアドベントカレンダーを書いています。 今日お話しする概要ですが、マイクロサービスの1つをJavaScriptからTypeScriptに移行した内容をお話しします。状況ですが、新規の旅行アプリの開発が走っていて、マイクロサービス化された1つを除いて、画面やフロントサーバーのアプリケーションなどはTypeScriptで開発されていたんですが、一番大きなサービスがJav
DesignOpsとは DesignOpsとは質の高いデザインのアウトプットの維持を支えるための仕組みづくりのことです。 この仕組みを整えることでデザイナーもエンジニアもお互いストレスなくそれぞれの仕事に専念できます。 今回は、デザイナーがデザインツールのFigma上で作成したアイコンをReactコンポーネントに変換してnpmに定期的にpublishするところまでを自動化しました。この自動化により、わざわざFigmaにみに行って、デザインされたsvgを切り出しReactコンポーネントに変換して利用するという作業が不要になりました。Figama上でアイコンが更新されたら、新たにnpm installするだけでアイコンを取り込んで使うことができるようになります。 js側では、以下のような雰囲気でnpmからアイコンコンポーネントを利用可能です。 import { MenuClose } from
iOS15のアプリ内ツールと新たなAPIを使って、返金のプロセスが管理しやすくなることがわかりました。Appleの開発者会議「WWDC21」で詳しく説明される見通しです。 開発者側からの返金プロセスを説明 iOS14以前の環境では、アプリ取引について、Appleがすべての返金プロセスを一手に担ってきましたが、今年の秋正式にリリースされるiOS15では、アプリ開発者が返金プロセスを自ら管理できるようになる見通しです。 これには、ユーザーがアプリ内で直接、自動更新されるサブスクリプションの管理やキャンセル、返金の要求を簡単に行えるAPIが含まれ、返金処理のベストプラクティスや、ユーザーサポートを向上させるための追加のAPIについても説明される見込みです。 Source:Apple via AppleInsider (lexi)
こんにちはhiro08です。 現在フロントエンドエンジニアとしてmicroCMS本体の開発に携わっていて、日々サービスの新機能開発や改善を行っています。 そして、先日リリースされたmicroCMSのJavaScript、iOS、Android SDKの3つのうち、JavaScript SDKの開発を担当させて頂きました。リリース時のブログはこちらです。 microcms-js-sdkはnpmで配布されていて、GitHubにオープンソースとして公開されています。 ※現在はGetリクエストのみに対応しています。今後、機能追加や改善していく予定です。 SDKを用いて開発するメリットとしては、Fetch APIやXMLHttpRequest等のネットワーク通信に関する処理を隠蔽できることにあります。冗長的になりがちなリクエスト処理を、メソッド化することによって一貫性があり、クリーンなコードを書くこ
TIGの伊藤真彦です。 渋川さんが投稿された Go 1.16のembedとchiとSingle Page Application Go 1.16のgo:embedとNext.jsの相性が悪い問題と戦う に近い研究記事です。 やりたいこと 私の最近の仕事はgo-swaggerによるバックエンドAPI開発です。本流はバックエンドですが、必要に応じてクラウドインフラを弄ったり、ちょっとしたフロントエンドアプリケーションを作ったりといった動き方で働いています。 ある時、go-swaggerで作ったバックエンドAPIの資産を使って、ちょっとした開発者向けアプリケーションを作りたくなりました。 ローカル環境でサーバーとフロントエンドアプリケーションを両方起動すると、サーバーがlocalhost:3000 フロントエンドがlocalhost:8080を占拠してしまいます。また、フロントエンドとバックエン
「実践!フロントエンド分離戦略」はREADYFOR 株式会社主催のエンジニア向けLT勉強会です。ここで、菅原氏が「OpenAPI GeneratorとTypeScriptによる型安全なスキーマ駆動開発」のタイトルで登壇。スキーマ駆動開発とそのメリット、活用しているツールについて話します。 READYFORのフロントエンジニア菅原弘太郎氏(以下、菅原):それでは「OpenAPI GeneratorとTypeScriptによる型安全なスキーマ駆動開発」と題して、発表します。自己紹介します。2020年11月に、フロントエンドエンジニアとしてREADYFORに入社しました。岩手県在住で、フルリモートで勤務しています。ReactとTypeScriptが好きで、React Hook Formのメンバーなので、もしフォローしてくれる方がいれば、フォローしてください。 フロントエンドとバックエンドの分離ま
Microsoftは2021年3月29日(米国時間)、「Project Reunion 0.5」を公開したと発表した。Project Reunionは、Windowsアプリケーション開発プラットフォームとして機能する次世代の新しい開発者向けコンポーネントとツールのセット。 Win32とUWP(Universal Windows Platform)の垣根をなくし、Windows開発プラットフォームをよりアジャイルでモダン、オープン、互換性の高いものにすることを主な目的としている。 MicrosoftはProject Reunionと、既存のプラットフォームやフレームワークの役割を次のように説明している。 「Project Reunionは、既存のデスクトップWindowsアプリプラットフォームや、.NET(Windows FormsとWindows Presentation Foundati
GraphQLのAPIをNode.jsで開発する時に、スキーマ駆動開発をやってみたものの、途中でしんどくなってやめて最終的にはGraphQL Nexusに乗り換えた。 スキーマ駆動開発とは ここでいうGraphQLのスキーマ駆動開発というのは大まかに言うと、次のようなワークフローを指す。 GraphQLのスキーマを記述する GraphQLスキーマを元に、サーバ側の実装とクライアント側を実装する 実際に自分がGraphQLのAPIをNode.js+TypeScript+Apollo Serverで構築したときには、GraphQLのAPIを追加する際の具体的なワークフローとしては次のようになった。 GraphQLのスキーマを記述する graphql-code-generatorを使ってスキーマからリゾルバのTypeScript型定義を自動生成する リゾルバの型定義にしたがって、サーバ側のAPI
Storybook first な開発とは Storybook での呼び出され方を意識しながらアプリケーションコードを書くことをそのように呼んでいます。 道具に設計がひきづられるのはアンチパターンと言われそうな気もするのですが、コンポーネントのカタログを整備していくことは、コンポーネントが良い感じに再利用可能な形で分離できるということでもあり、やっていくとむしろ正道に近づいていくと思います。 Storybook First のコンポーネント設計や型定義をすると、パーツに限らず Storybook でカバーできる範囲が広がり、ページそのもののサンドボックスを作れます。 そして API がない状態でもデータを使って開発ができたり、特定のスナップショットの再現やタイムトラベルに近いことも可能になるというメリットがあります。 つまり、ただのコンポーネントカタログとしてではなく、開発のためのサンドボ
ここのところ雑にWebサービスをリリースする機会が減って最近はFlutterでネイティブアプリばかり書いてるのでWebの最新に追いつけてない。 最近の流行りのWebサービス開発について自分の必要そうな範囲でちょっと調べてみる。 自分の場合、フロントエンドはTypeScript+(Vue or Nuxt)でやって、サーバーサイドはRailsで書いちゃうことがまだ多い。 これでもなんとかなるけど、もうどうせならJSで一気通貫でフロントエンドとサーバーサイドを書ければ楽なのにと思いつつある。 パッと思いつくのはTypeScriptでフロントエンドをNext,Nuxtあたりでやって、バックエンドAPIをexpressとかサーバーレスAPIを適当に書くとかだけど、今だともっと良い方法ありそう。 本当はDartでサーバーサイド、FlutterでwebまでいければDart統一時代になって願ったり叶ったり
プレゼンテーションレイヤ、いわゆるフロントエンドがクライアントサイドで実装・実行されるアーキテクチャ (注 1) において、管理画面/管理機能をあとから追加する際にどのような実装パターンがあるのかを整理してみます。 注 1: Presentation Domain Separation の実践の中でも、物理的にプレゼンテーションロジックとドメインロジックを分離しているアーキテクチャです。 用語の整理 プレゼンテーションレイヤ 三層アーキテクチャにおける、システムの利用者へユーザインターフェイスを提供する層です。本記事では"フロントエンド"とほぼ同義で使います。 OSI 参照モデルの第六層ではないです。 バックエンド Web API とは プレゼンテーションを持たない Web API (HTTP プロトコルを用いてネットワーク越しに呼び出すアプリケーション) とします。 プレゼンテーションレ
Copyright (c) 2018-2021 the Deno authors. MIT License. 日本時間の今日(2021年1月20日)に Deno の v1.7.0 がリリースされました。 詳細なリリース内容は上記のリリースノートにまとまっていますが、いくつか日本語でご紹介したいと思います。 なお、v1.6.0 (2020年12月9日リリース)の紹介記事は以下になります。よろしければこちらもご覧ください。 今回は以下の点を紹介します。 deno compile コマンドの改善 Data URL 形式の import に対応 DNS 解決を行う Deno.resolveDns API の追加 Deno 内部の TypeScript コンパイラを使うための API を Deno.emit に統合 deno fmt コマンドが Markdown のフォーマットに対応 Web Str
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く