ブラウザで動くサービスを作るときの技術選定
はじめに 私の仕事は、新規サービスをまるっといい感じに開発するのを委託されることがほとんどです。最近はネイティブアプリを作ることよりもブラウザで動くWebサービスを開発することが多いのですが、案件の規模感や要求によって技術選定を少し変えるようにしています。「こういうときはこう」みたいに一概には言えないのですが、普段使う構成を紹介します。誰かの参考になれば幸いです。 2022/02/10 現在での内容です。 前提 開発を委託される場合の運用費をどうするの問題があります。クライアントにクレカ登録をしてもらうか、こちらで支払って毎月請求するかになります。僕は毎月やるのがめんどくさいのでできるだけ前者に倒している関係上、あまりいろいろなSaaSを組み合わせて作ることをなるべく避けています。 規模感によらず使っているもの 私の場合、以下が使えるとめちゃくちゃ効率よく開発できます。 GCP 好きだから
Googleの「ChromeOS Flex」は、古いPCや「Mac」にインストールすることで、それらを実質的に「Chromebook」に変換するOSだ。同社は2月に早期バージョンをテスト向けに公開しており、このほど安定版を提供開始した。ChromeOS Flexのページから無料でダウンロードできる。 Googleは、アーリーアクセスプログラムの素晴らしい成果の一部を公式ブログで明らかにした。まず295機種のデバイスをChromeOS Flex対応として認定したという。引き続きさまざまなデバイスをテストし、認定機種のリストを更新していくとしている。ただし、認定機種でなくても、ChromeOS Flexは動作する可能性が高そうだ。 Googleは、アーリーアクセスプログラムによって600以上のバグを修正できたとも報告した。 ChromeOS FlexはUSBドライブから直接実行することもできる
はじめに こんにちは、ソウゾウSoftware Engineerの@sue71です。連載：メルカリShops 開発の裏側 Vol.2の13日目を担当させていただきます。 以前メルカリメルカリShopsの技術スタックと、その選定理由でBFFの実装にGraphQLを採用していることをお伝えしました。メルカリShopsをリリースしてから約半年たった今、これまでを振り返ってGraphQLサーバーを実装する上での課題やあらかじめ考えておくと良い項目をまとめてみました。また、本記事ではメルカリShopsでGraphQLの実装としてApolloを採用しているため、Apolloの利用が前提の話もいくつか混在しています。予めご容赦ください。 GraphQLの説明や、メルカリShopsの実装方法に関しては以前こちらの記事で紹介しています。こちらも是非ご覧ください。 パフォーマンス課題 GraphQLは、アプリ
こんにちは。ソウゾウの Software Engineer の hiroppy です。「連載：「メルカリ Shops」プレオープンまでの開発の裏側」 の最後は、Web フロントエンドの紹介をしたいと思います。メルカリ Shops は既存のメルカリアプリの中に独立した Web アプリケーションとして動いています。本記事では、どのようなライブラリを選定し、どのようにアーキテクチャを設計してきたかを解説します。 なぜ Web なのか？ アプリの上で動いているのであれば、WebView ではなくても良いと感じる人はいると思います。今回採用した 1 つの理由としては、リリースが柔軟な点が挙げられます。iOS/Android の両方に対して開発サイクルを早めることが可能であり、また機能追加やバグ修正が容易です。どのように WebView で動いているかについては、6 日目のメルカリ Shops のため
図で理解する Flexbox
Flexboxはレイアウト組む上でとても便利だが、justifyだとかalignだとか名前と意味の対応が曖昧で毎回調べていた。 仕組み・使い方を理解しようと思い、図を使って整理してみた。 ※ CSS Grid についても整理してみました Flexbox Flexboxは縦・横に要素を並べられるレイアウト方法です。 Flexboxを使うことにより、縦・横に並べるだけでなく、並べた要素の中央寄せ・上寄せなど細かな位置も調整できます。 コンテナ・アイテム Flexboxを使う上で必要となる要素が「Flexコンテナ」と「Flexアイテム」です。 Flexコンテナの中にFlexアイテムを複数並べてレイアウトします。 <div class="container"> <div class="item">１</div> <div class="item">２</div> <div class="item"
あっ、そうだ！モダンCSSをまとめておこう
2023年もCSSの進化がすごかったですね！ その進化を2024年でも生かしていけるように、今回まとめておいていつでも参照できるように記事を書こうと思いました。 お読みいただけると幸いです。 一緒に2024年もスタートダッシュで走り抜けましょう。 まず、はじめに この記事では、最近登場した、エキサイティングで、アクロバティックでファンタジックなインパクトのある機能をピックアップして紹介したいと思います。 CSSの多彩な新機能を広く紹介することで、読者がこれらに触れる機会を持てるように努めています。 特に興味を引く機能があれば、他の媒体を通じて更に詳しく掘り下げることをお勧めします。 コンテナクエリ スタイルクエリ :has()セレクタ :nth-child()の「of S」構文 text-wrap: balance initial-letter ダイナミックビューポート単位 広色域のカラー
GraphQL Client Architecture Recommendation 社外版 | メルカリエンジニアリング
この記事は、Merpay Advent Calendar 2022 の15日目の記事です。 こんにちは。メルペイのvvakameです。 最近、社内向けにGraphQL Client Architecture Recommendationというドキュメントを書きました。社内のiOS/Android、そしてバックエンドのエンジニア向けにGraphQLをやるならこの辺りの条件を満たしておかないと恩恵を感じられなくなっちゃうかもよ、と伝えるためのものです。嬉しいことに、今までに100名弱の人たちがこのドキュメントを閲覧してくれたようです。 これをAdvent Calendarで公開するために、ちょっと調整したものがこの社外版です。 すでにGraphQLをやっているけどあまり便利じゃないな…なんでだろ？とか、これから導入したいんだけど何を気をつけるべきかな…と考える時の材料にしてください。 併せて、
自分が開発しているLaunchableのWebアプリがローンチされて1年半ほどになる。このWebアプリにはReduxのような状態管理ライブラリを入れないまま開発してきたのだが、今のところ困らずに開発できている。そういえば昔自分は状態管理について何か考えていたような…とブログを掘り起こしてみた。 ninjinkun.hatenablog.com このエントリは2016年にネイティブアプリを対象にして書かれているが、この後自分は2018年ごろにWebフロントエンドに軸足を移し、ネイティブアプリ開発から離れた。なのでこのエントリはWebフロントエンドエンジニアが2022年に再考した話になる。 結論としては、当時自分が管理したかった状態のほとんどは現在ApolloClientのキャッシュによって解決されている。 繰り返しになるが、自分が開発しているLaunchableのWebフロントエンドには状態
あなたのプロダクトに Apollo Client は必要ないかもしれない - 一休.com Developers Blog
Apollo Client は複雑 Apollo Client が向いているケース 一休.com に Apollo Client は必要ないかもしれない では何を使えばいいの？ 複雑なアプリケーションには Apollo を使えばいい？ もう一つのリッチなクライアント、Relay の話 結局、何を使えばいいのか この記事は一休 × 出前館 Frontend Meetup でお話した内容をブログにまとめたものです。 user-first.ikyu.co.jp speakerdeck.com GraphQL クライアントと聞いて一番に思い浮かぶライブラリは何でしょうか？ 多くの方にとっては Apollo Client ではないかと思います。npm trends を見ても Apollo Client のダウンロード数は urql や relay などほかのクライアントと比べ圧倒的です。 実際、一休
TypeScriptでWebサービス開発（Apollo Server/Prisma/Next.js etc...)
最近開発しているBtoB SaaSサービスの技術スタックを、RailsからNode.jsに移行した。 これにより、フロントエンドもバックエンドも全てをTypeScriptで統一することができた。 特にNode.jsのWebバックエンドの構成について、まだまだ世の中に知見が少ない気がしているので記事にしておく。 Webバックエンド - Node.js(TypeScript) Nexus/Apollo Server (Webサーバー) GraphQLサーバーとして、Apollo ServerのコードファーストなアプローチでのラッパーであるNexusを使っている。 Railsからの移行を決断できたのも、Apollo ServerとPrismaにより、外部との通信が型付きで、かつ開発体験よく書けるようになたから、というのが大きくある。 数年前の段階だと、素のexpressを使ってWebサーバーを立
GraphQL実践ノウハウ https://speakerdeck.com/sonatard/graphql-knowhow GraphQL実践ノウハウv2 https://speakerdeck.com/sonatard/graphql-knowhow-v2 宣言的UIの状態管理とアー…
現在のレスポンシブデザインは、ビューポートにもとづいてレイアウトを最適化します。そして、コンテナクエリは親要素のコンテナにもとづいてレイアウトを最適化します。コンテナクエリとは何か、デザイナーのワークフローにどのような変化をもたらすかを紹介します。 今まではビューポート（メディアクエリ）で変化するコンポーネントと影響を受けないコンポーネントの2種類でしたが、これからは親コンテナ（コンテナクエリ）で変化するコンポーネントも必要になります。 CSS Container Queries For Designers by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに レスポンシブデザインの現状 コンテナクエリとは コンテナクエリを念頭に置いたデザイン デベロッパーとのコミュニケーション方法 レスポ
現場で使えるFlexboxレイアウト12選 Update2025.03.24 Publication2021.06.24 コーディング 現場で使えるFlexboxレイアウトを12パターン紹介します。flexboxを紹介する記事はたくさんありますが、知識のみで実例付きで紹介されているページはあまり見かけなかったので、本記事にて詳しく紹介していきます。 flexboxに慣れていない方だけではなくコードを短縮化させたい方も対象の内容となっております。ぜひご一読ください。 flexboxを使った横並び1行レイアウト flexboxを使った横並び1行レイアウト カードUIでよくある横並び1行レイアウトのFlexbox実装。同じ横幅のカードを等間隔で配置するもので、間の余白ももちろん等間隔。これを使う機会は多いので確実に身につけておきたいTipsです。 HTML <div class="wrap">
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? こんにちは。フロントエンド開発で一番好きなのはCSS、Mhousetreeです。 普段はCSSアニメーションで遊んだりしています。 （頑張って作ったのでよかったら見てね！！！！！） 何かと使う中央揃え。なんとなく覚えているものを順番に試して中央に来たらOK！と思っていませんか？ 現在ではかなりいろんな種類の方法があり、それぞれ異なる特徴を持っています。 この記事ではCSSでよく使う（気がする）レイアウトパターンの中で、センタリングに関するものをまとめました！ まえがき この記事では各実例を独自の指標で評価して示しています。 長い記事にな
コピペ一発！便利なCSSレイアウト生成ツールおすすめ12選（Grid ＆ Flexbox編） | PhotoshopVIP
あなたが、いま実装しようとしているレイアウトは、おそらくCSSで実現できるでしょう。 ただし日常の業務をこなしながら、日々進化するCSSの最新テクニックを習得するとなれば、話はまったく別です。 仕事で使えるCSSの技術を、時間をかけて学ぶよりも、ボタンやドラッグ＆ドロップ操作で、思い通りのレイアウトを自動で生成できる「ジェネレーター（英: Generator）」を活用してみましょう。 新しいプロジェクトにコピー＆ペーストで利用でき、瞬時に思い通りのレイアウトを作成、はじめてのひとにもオススメの時短ツールを厳選しています。 コピペ一発！便利なCSSレイアウトジェネレーターおすすめ12選（Grid ＆ Flexbox編） ここでは、CSS Grid と Flexbox で表現できるレイアウト用ジェネレーターと便利なリソースを一緒にまとめてご紹介します。 Layoutit! grid-templ
React 18とSuspenseの基本 ─ フレームワークの選択やReact Server Componentsなど新しいベストプラクティスを学ぶ｜ハイクラス転職・求人情報サイト アンビ（AMBI）
ハイクラス求人TOPIT記事一覧React 18とSuspenseの基本 ─ フレームワークの選択やReact Server Componentsなど新しいベストプラクティスを学ぶ React 18とSuspenseの基本 ─ フレームワークの選択やReact Server Componentsなど新しいベストプラクティスを学ぶ 群雄割拠のフロントエンドフレームワーク界でも、一歩抜きん出た存在として常に注目を集めてきたReact。2022年3月にリリースされたバージョン18では、Suspenseの安定化やStreaming SSRのサポートなど数々の新機能を取り入れて話題になりました。本記事では、React／TypeScriptのスペシャリストとして幅広く活躍されているuhyoさんが、現時点におけるReactのベストプラクティスについて解説します。 Reactは、Meta社により開発・公開
この本では、TypeScriptで型安全にGraphQLサーバーを構築する方法をハンズオン形式で学習することができます。 Todoアプリの開発を通して、GraphQLスキーマの扱いやCLIツールの設定方法、TypeScriptのORMであるPrismaの基本的な使用方法、CI/CDパイプラインの構築によるマイグレーションの自動化などを体験します。 GraphQLサーバー実装の素振りをしておきたい方や、フロントエンドからGraphQL APIを使用したことはあるけど自分でAPIを実装したことはないようなバックエンドの開発初心者の方に向けた内容となっております。
余白といえば、marginプロパティーやpaddingプロパティーを思い浮かべる方が多いと思いますが、CSSのgapプロパティーでも余白を指定できます。CSS GridやFlexboxでgapプロパティーを使うと柔軟にレイアウトを組めます。 この記事ではFlexbox、CSS Gridで利用できるgapプロパティーを活用したレイアウト手法とそのメリットを紹介します。今までmarginプロパティーで要素間の余白を調整していたものもgapプロパティーで柔軟に対応できる場面もあります。なお、下記サンプルでmarginプロパティーは一切使っていません。 サンプルを別ウインドウで再生する なお、この記事では要素間の空白部分のことをmarginの訳語としての「余白」との混乱を避けるため、「アキ」と呼ぶことにします。この記事内だけの用法です。 gapプロパティーの使い方 gapプロパティーはFlexbo
DIST.38 「CSSな夜」で発表した内容です。 https://dist.connpass.com/event/266728/ Twitter https://twitter.com/tonkotsuboy_com
IE終了後にWeb制作の現場で使えるHTML&CSSコード14選！おさえておきたいコードを集めてみた | Pulp Note
マイクロソフトから正式にInternet Explorer 11 デスクトップアプリケーションのサポートを終了する発表がありました。期限は2022年6月15日です。Webサイト制作者としては歓喜の出来事ですね。 ただ、IEを気にしなくてもいいという事は、IE対応をしてきたコードの見直しも必要となります。そこで今回は、IE未対応で泣く泣くスルーしてきた即戦力なHTMLやCSSコードを14個紹介します。2022年6月以降のために今から知識を蓄えておいてはいかがでしょうか。 ちなみに、『Windows10 LTSC』や『Windows Server上のInternet Explorer11 デスクトップアプリケーション』といった一部のIE11には影響はないとの事ですが、一般ユーザーが利用する『Windows10のInternet Explorer』はサポート対象外となりますので、これはIE終了と
タイムラインを見ていると「flexとgridの使い分けがよく分からないよ」という人が多く散見されるので、今回は僕が普段意識していることを皆さんに紹介します。 これから紹介することはあくまで僕のやり方で、絶対的な正解とかではないので参考程度に留めておいてください。実装において頻出するレイアウトをサンプルに、どのように考えてレイアウトを組んでいけばよいかを自分なりに説明できたらなと思います。 はじめに僕がレイアウトを組む上で大事にしていること、および意識していること。それは、レイアウトに変化が起こった際に崩れが生じないことはもちろん、将来的な変更に対して柔軟に対応できることです。 極論を言ってしまえばgridは使わなくても大抵のレイアウトは組めてしまいます。Internet Explorerに苦しめられていたあの頃を思い出してみてください。現在でもgridは難解だからflexだけ使用するって方
Web Platform Dive into the web platform, at your pace.
GraphQL Code Generator v3 Roadmapで推されているclient-presetを紹介する
こんにちは。皆さんはGraphQL Code Generatorを利用していますか？ 筆者は普段React/TypeScript/Apollo Client(またはurql)といったスタックでWebフロントエンドを書いており、その際にはGraphQL Code Generatorをほぼ必需品と言えるほど愛用しています。 サーバー側から提供されたスキーマやクライアント側が必要なデータを宣言したオペレーションから型やコードを生成し利用することで、ロジックに関する実装量が大きく削減でき、ミスを減らすことにもつながります。GraphQLを使う理由の1つと言っても過言ではないでしょう。 そのGraphQL Code Generatorではv3 Roadmapとして今後の方針が公開されており、client-presetという新しいプリセットが紹介されています。そこでは「GraphQL Code Gen
This article is the first part of a course where we build a fullstack app with Next.js, GraphQL, TypeScript,Prisma and PostgreSQL. In this article, we'll create the data model and explore the different components of Prisma.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
こんにちは。Turingの機械学習チームでエンジニアをしている塩塚です。 Turingは「We Overtake Tesla」を合言葉に、完全自動運転EVの開発・販売を目指しているスタートアップです。TuringではAIの強力さとそのさらなる成長を信じ、AIベースの自動運転システムを開発しています。 AIベースで自動運転を開発している会社はいくつかありますが、例えば米国の電気自動車メーカーTeslaはその代表的な会社の一つです。Teslaはカメラを主たるセンサーとして採用し、AIによって走行経路などを決定しています。詳しい内容は、Tesla AI Day 2021というイベントの内容を弊社のエンジニアがまとめているのでぜひ見てみてください。 一方、私たちはTeslaだけでなく、Apolloという中国企業にも大きく注目しています。 Apolloは、中国の巨大IT企業Baidu傘下の会社で、自
分析者や予算承認者の視点に立ちつつ、BigQuery Flex Slotsの適切なスロット数を定量的に決定する方法を紹介します - MonotaRO Tech Blog
こんにちは、データ基盤グループの吉本と吉田(id:syou6162)です。モノタロウでは基本的にはBigQueryを定額料金で利用していますが、利用者の多い時間帯はFlex Slotsも併用しています。本エントリでは、Flex Slotsの適切なスロット数を定量的に決めるために行なった試行錯誤について紹介します。 モノタロウでのBigQueryの利用状況 課題感 課題感1: 適切なFlex Slotsのスロット数をどう決めるか 課題感2: 過去の期間との実行時間は単純には比較できない 解決策 解決策1: 同一のクエリを定期的に動かし、実行時間をCloud Monitoringで計測 解決策2: 計測用オンデマンドのGCPプロジェクトでもクエリを実行し、理想状態との相対実行時間を知る まとめ モノタロウでのBigQueryの利用状況 モノタロウでは様々な意思決定の場面でデータ活用が行なわれて
GraphQL Federation - API Gatewayの進化 - Money Forward Developers Blog
こんにちは、マネーフォワード 福岡開発拠点のStart up Studio部で新規プロダクトを開発しているバックエンドエンジニアのダンと申します。 今回の記事は私たちのチームでマイクロサービスアーキテクチャにあるAPI Gatewayの課題を解決できるソリューションを検討の経緯、そして辿り着けた優れたGraphQL Federationについて紹介させていただきます。 課題 GraphQL Federationの前の世界 GraphQLの誕生 GraphQL Federation登場 - "One endpoint to rule them all" 1. 課題 まずは、マイクロサービスアーキテクチャによく出会うパターンの例を説明します。 製品をレビューするシステムを構築するプロジェクトで、フロントエンドとバックエンド二つのコンポーネントがある。 バックエンド側はドメインによる三つのサービ
Apollo Router: our GraphQL Federation runtime in Rust - Apollo GraphQL Blog
November 10, 2021Apollo Router: our GraphQL Federation runtime in Rust At Apollo, we help developers power the world’s most important applications with a graph. Whether you’re shopping online, booking travel, or binge-watching your favorite movies, you’re using the graph every day. These experiences are all built on Apollo Federation, an architecture for declaratively composing GraphQL APIs into a
GitHub - amirgamil/apollo: A Unix-style personal search engine and web crawler for your digital footprint.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
サーバサイドの進捗に依存しないための Next.js x GraphQL のフロントエンド開発の工夫 - Money Forward Developers Blog
こんにちは！ マネーフォワード クラウド横断本部のWebエンジニアの はるやま (@linnefromice) です。 現在クラウド横断本部では BtoB 向けサービスのリプレイスプロジェクトの開発を行っており、今回は とフロントエンド開発においてそのプロジェクトで悩んだ点とそれに対する工夫の紹介をさせていただきたいと思います！(Special Thanks かわかみさん(@thinceller)、一緒にアーキテクチャの実現とこのフローを考えてもらいました) プロジェクトの特徴 今回のプロジェクトはリプレイスのため、既存のサービスで実現している機能の再現/改善または新規機能の開発を行うのですが、 現行サービスのコアモデル/データをベースに扱う必要がある サービスの特徴として、他のクラウドサービスとの連携により実現したい機能が多い のような特徴があります。 これらの特徴により、 サーバサイド
@graphql-codegen/typescript-react-apolloとの思い出 - スタディサプリ Product Team Blog
こんにちは、 Web フロントエンドエンジニアの @progfay です。 この記事は Recruit Engineers Advent Calendar 2022 の 12 日目の記事です。 今回はプロジェクト内で使っている @graphql-codegen/typescript-react-apollo package との思い出を書き綴っていきます。 出会い 私の所属するスタディサプリ中学講座の開発プロジェクト (通称: tara) では通信に GraphQL を採用しています。 また、 GraphQL Code Generator を使って GraphQL にまつわる型や関数の生成を行なっています。 Web Frontend では API Client として Apollo Client を使用しており、 TypeScript と React と Apollo Client を合わ
1次元の場合でも flex-shrink, flex-grow が必要なら CSS Grid でもいいんじゃない？ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
Safari 14.1 未満のバージョンに Flexbox の gap プロパティのフォールバックスタイルを追加するための CSS ハック
Safari 14.1 で Flexbox の gap プロパティが Safari でも使えるようになりました。 Safari 14.1 Adds Support for Flexbox Gaps ただ、Safari のバージョンアップは OS のアップデートが絡むので、他のブラウザに比べてすぐにサポートを切りにくいです。Flexbox gap はとても便利で Safari 以外の 主要なブラウザでは対応されている ので使いたいけど Safari のせいでまだ使えないと嘆いている方も多いのではないでしょうか？僕も同じくでした。 自分を含めそんな方々を救うために、それを解決する CSS ハックを作ってみましたので紹介します。（この CSS ハックにどれくらいのニーズがあるかわかりませんが 😅） 問題点 この問題の一番ややこしいところは CSS Grid 用の gap プロパティは Safa
はじめに 現在携わっているプロジェクトの技術選定で GraphQL を使うことになり、 GraphQL クライアントとして Apollo Client を採用することになりました。 最初は GraphQL をクライアントサイドで便利に使えるようにしてくれるものくらいの認識で、クライアント側の状態管理には別途 Redux とか入れるのかなと思っていたのですが、調査の過程でたまたま Apollo Client は Redux を置き換えるとの記事を見かけたので Apollo Client のキャッシュの仕組みと状態管理について少し調べてみました。 この記事では下記のことについて解説します。 Apollo Client とは Apollo Client のキャッシュの仕組み Reactive variables を利用したローカルの状態管理について かなり内容がもりもりになってしまったのですが、
アポロ11号月面着陸オルドリン氏の船内服、3億7000万円で落札
270万ドル（約3億7000万円）で落札されたアポロ11号のバズ・オルドリン飛行士が着用した船内服。米ニューヨークのサザビーズで（2022年7月21日撮影）。(c)TIMOTHY A. CLARY / AFP 【7月27日 AFP】1969年に人類初の月面着陸を果たしたアポロ11号（Apollo 11）の乗組員、バズ・オルドリン（Buzz Aldrin）飛行士が着用した船内服が26日、270万ドル（約3億7000万円）で落札された。競売大手サザビーズ（Sotheby’s）が明らかにした。 落札された白い船内服には、米国旗と米航空宇宙局（NASA）のロゴとアポロ11号ミッションのワッペン、「E. ALDRIN」の名札が付いている。 サザビーズは「この極めて希少な服には複数の入札があった。10分ほど競り合った後、電話で参加の入札者が落札した」と発表した。 オークション前にオルドリン氏は、「多く
【保存版】コピペでOK！Flexboxで作る頻出レイアウトの構造解説（サンプル付き） 更新日：2021/01/21 要素を横並びにするとき、Flexboxってとっても便利ですよね！ Floatを使用して実装するよりも少ないコードで、よりシンプルに実装することができるので皆様もお世話になっているのではないでしょうか？ 以前まではブラウザによって挙動が違ったりサポートしていなかったりといった問題がありましたが、最近ではほとんどのブラウザで安定して使用できるようになったのも嬉しい点です。 この記事では、そんなFlexboxを使った頻出レイアウトのご紹介と仕組みの解説をしていきたいと思います。 「子要素のテキストを上下中央揃えにしたい」「ボタンだけは下寄せにしたい」といった、よく見るデザインながら初心者さんが困りがちなレイアウトをまとめてみました。 これが分かれば、組み合わせてもっと多くのレイアウ
Using Apollo Client with Next.js 13: releasing an official library to support the App Router - Apollo GraphQL Blog
Blog /announcement /Frontend /Using Apollo Client with Next.js 13: releasing an official library to support the App Router Back to Blog May 10, 2023Using Apollo Client with Next.js 13: releasing an official library to support the App Router The latest release of Next.js 13 (13.4) declared the new app directory as stable and it will now be the default for new projects. The app directory is a major
Moving Apollo Federation 2 to the Elastic License v2 | Apollo GraphQL Blog
November 3, 2021Moving Apollo Federation 2 to the Elastic License v2 Today, we are introducing Apollo Federation 2, a major update to our graph composition technology that lets developers build and evolve a unified graph in a modular, principled way. Federation 2 is a new implementation of our query planner and execution gateway that introduces a more flexible model for how types and fields compos
Next.js に Apollo Server を立てるまでの備忘録です。 npx create-next-appで Next.js を作成して TypeScript の設定まで完了している前提で書きます。 依存モジュールの追加 Apollo Server の micro（Vercel が開発している非同期 HTTP サーバー）インテグレーションであるapollo-server-microを依存に追加します。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
グーグル、古いPCを無料でよみがえらせる「ChromeOS Flex」を一般提供
GraphQLを導入する時に考えておいたほうが良いこと | メルカリエンジニアリング
メルカリShops のフロントエンド | メルカリエンジニアリング
再考: アプリ開発と状態遷移の管理 - ninjinkun's diary
GraphQLの誤解/rethinking-graphql
CSSコンテナクエリの登場で、デザインのやり方も考え方も大きく変わる
現場で使えるFlexboxレイアウト12選 | corto - デザイン制作
【中央揃え編】CSS限界オタクと学ぶレイアウトCSSサンプル集 - Qiita
Apollo ServerとPrismaではじめるGraphQL API開発入門
gapの余白指定が便利！ gridとflexでできる新しいCSSレイアウト手法 - ICS MEDIA
CSS Grid・Flexboxの 最近の進化とミライ
実例で学ぶFlexboxとCSS Gridの使い分け – TAKLOG
Layout patterns | Patterns | web.dev
Fullstack app with TypeScript, Next.js, Prisma & GraphQL
GitHub - Quramy/gql-study-workshop
テスラに迫る!? 中国の自動運転をリードするBaidu/ApolloのAI戦略
Apollo Clientのキャッシュの仕組みとローカルの状態管理について
【保存版】コピペでOK！Flexboxで作る頻出レイアウトの構造解説（サンプル付き） | 東京のホームページ制作 / WEB制作会社 BRISK
Next.js の API Routes に Apollo Server を立てる
www.nikkei.com
moe3.ht.gob.jp
www.meg-snow.com
www.hotel-bed.net
serina1.ht.gob.jp
www.seiken-forum.jp