タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
vivit株式会社でフロントエンドエンジニアをしている関です。 新型コロナウイルス感染症(COVID-19)への対策として発出された緊急事態宣言の影響で、弊社も2ヶ月ほどリモートワークとなり、私も駆け足で自宅に作業環境を構築しました。買っちゃいましたL字デスク。 さて、弊社ではいくつかのプロダクトのフロントエンドに React(Next.js) + TypeScript を採用しており、バックエンドとの通信には GraphQL(Apollo) を採用しています。 今回はその中で、コンポーネント分割をする際の GraphQL Query の定義と取得したデータの受け渡しについて話をします。 ここからは GitHub GraphQL API v4 を使って説明していきます。 developer.github.com アジェンダ pages から components へのデータの受け渡し方法に
Fragment をコンポーネントのトップに置くな「Fragment をコンポーネントにトップに置く」というのは下のようなコンポーネントを作成することを指します。 export const MyComponent = () => { return ( <> <h1>This is a sample code.</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Dui
GraphQLのFragment活用テクニック: colocationとmasking こんにちは。N 予備校 Webフロントエンド開発チームの中村です。 現在開発中のZEN CompassではGraphQLを採用しました。我々のチームでは（そして私個人としても）GraphQLを採用したのは初めてだったのですが、実際に設計を進めていくうちに色々と知見を得ることができました。今回はその中でも特に重要だと思った、GraphQLのFragmentという仕様を活用したコンポーネント設計のテクニックについてお話ししようと思います。GraphQLを使用したWebアプリケーションに興味がある方にとって何か参考になりましたら幸いです。 【ZEN Compass】 学習者を導く先生方などが利用するコーチング支援Webサービスです。 LMS(Learning Management System)として学習状況
Practical Tips and Tricks to Improve Your Compose Previews (Android Worldwide July 2024)
この記事は Money Forward Engineering 1 Advent Calendar 2022 11 日目の投稿です 🎄 昨日 10 日目は cabossoldir さんによる 『コードレビューのとき、私は何をレビューしているのか？』 でした。 🙈 TL;DR Fragment Colocation とは、コンポーネントが必要とするデータを Fragment にまとめてコンポーネントと同じ場所に配置 (co-locate) すること Fragment Colocation を導入することで、「Query や Mutation を実行するコンポーネント」と、「それらの結果を必要とするコンポーネント」との関心の分離ができる Query, Mutation, Fragment はそれを実行するあるいは必要とするコンポーネントと同じファイル内に宣言すると依存関係が見やすく、変更が
FragmentでViewの参照を持つとメモリリークする話と実装 Updated at Sat, Jan 18, 2020 View Bindingのドキュメントが更新され、onDestroyViewのタイミングで保持しているBindingの参照を解放する節が追記されました。 Use view binding in fragments Fragment自体のライフサイクルのほうが、FragmentのViewのライフサイクルより長いので、FragmentでBindingの参照を保持するとリークしてしまうためです。 この記事では、メモリリークをしないために、どのような実装が考えられるかを紹介していきます。 1. onDestoryViewで解放する 公式ドキュメントに載っている方法です。 // onCreatedViewで初期化 private var _binding: ResultProf
Intro Scroll to Text Fragment のユースケースとして、本サイトにサイト内検索を実装した。 Scroll to Text Fragment Scroll to Text Fragment(以下 S2TF) は Chrome 80 で Ship され、 Finch で展開されている。 まだ降りてきてない場合は、 Flag による有効化が必要だ。 詳細は以前このブログでも書いている。 Scroll To Text Fragment と :~:text | blog.jxck.io この機能の使い道の一つとして、検索結果の Deep Link への適用があると考え、 PoC として実装した。 検索結果への適用 このサイトを CSP というキーワードで検索した場合を考える。 検索対象は、記事の本文とすると、例えば以下の一文がヒットする。 Feature Policy のモ
デベロッパーのNIHIL INANE STUDIOは8月30日、『LOST FRAGMENT – 失われた欠片』を発表した。開発にはUnreal Engine 5が採用されており、公開された動画を見たX（旧Twitter）ユーザーを中心に注目を集めているようだ。 『LOST FRAGMENT – 失われた欠片』は、サバイバルホラーゲームだ。公開された動画は荒廃した病院が舞台となっており、「ナースステーション」といった表記から日本の病院と見られる。動画は拳銃を片手に病院の内部を散策する主人公の視点で描かれている。動画の前半では日が差し込んでいた風景も、後半では一変。突如として闇が包み込み、不穏な物音が周囲から聞こえるようになる。動揺する主人公が音を発していた物体の正体を突き止めようとするところで、動画は終わっている。 本動画は、公開後すぐさまXユーザーからの注目を集めているようだ。ユーザーの
Browser extension that allows for linking to arbitrary text on a page. Update: Chrome now has a built-in feature ("Copy Link to Highlight" in the context menu) to copy text fragment links. The extension has an additional feature that allows you to also copy rich links. You can activate this feature in the options. This extension allows for easily creating a special link to the currently selected t
最近用語集のようなページを作る機会があった。それぞれの用語の名前と説明がバーっと並んでて、説明部分は <details> 要素で隠されている。用語の名前をクリックすると <details> が展開されて、説明部分が読める、といった感じ。 用語集ページの例 他のページから特定の用語の説明に飛べるように、用語を表す要素それぞれに id 属性が振ってある。例えば https://glossary.example.com/#javascript という URL でアクセスすると、「JavaScript」の用語がある位置にスクロールした状態で、用語集ページを開ける。 ただ (一部ブラウザで) https://glossary.example.com/#javascript でアクセスしても、JavaScript の説明の欄が閉じたままで困っていた。その用語の説明が見たいがためにしてきているので、最初
@spring_raining が @potato4d に、 Vue 3 の Fragment について聞いてみました。 ゲスト @potato4d フロントエンド開発センター フロントエンドエンジニア UIT で行っている Vue 3 についての勉強会 Vue 3 の RFC を読みながら新しい機能を紹介 Vue 3 Fragment Vue 3 で導入される、実際には描画されない DOM 要素のようなもの Web 標準に DocumentFragment があり、それを Vue で表現している https://developer.mozilla.org/ja/docs/Web/API/DocumentFragment React には React.Fragment あるいは <></> として既に導入されている https://ja.reactjs.org/docs/fragments
TL;DR 考え方 コンポーネントとセットで、そのコンポーネントが必要なデータを Fragment で宣言する、React の宣言的 UI に合わせた宣言的データ取得（declarative data-fetching）という考え方 Component Scopedに取得データを宣言することで「そのコンポーネントで必要なデータはなにか」を管理しやすくなることで、under-fetching / over-fetching が抑制でき、変更にも強くなる お悩みポイント Fragment-scoped な変数を定義するための標準機構がない Relay は directive を利用した独自の機構を持つ 便利そうなライブラリ graphql-anywhere クエリ結果を Fragment の形に整形する not actively support apollo-link-fragment-arg
新薬探索を試したい方必読！ ITエンジニアである著者の視点から、wetな研究者からもdryの創薬研究をわかりやすく身近に感じられるように解説しています Fragment-based in silico創薬とは？ Fragment-based 創薬（フラグメントベースの薬剤開発（FBDD）)とは、コンピュータを使って新しい薬剤を設計・開発する手法の一つです。この手法では、小さな分子の断片（フラグメント）もしくは既存のリガンドの断片を使用して、断片を伸ばしたりして、薬剤の設計や最適化を行います。このようなフラグメントベースのアプローチは、複雑な分子間相互作用を解析し、既知の薬剤からさらに活性のある新しい薬剤の設計を効率的かつ費用対効果の高い方法で行うことができます。また、実験的なスクリーニングや化学合成の手間や費用を削減することができるため、創薬のスピードや効率を向上させるのに役立ちます。 A
Navigation 2.3.0-alpha02 からNavControllerに currentBackStackEntry と previousBackStackEntry が追加され、これらを使ってFragmentの戻り値を処理することが可能になりました。 内部的には各BackStackで SavedStateHandle と ViewModel を使ってるようです。 呼び出し元Fragment 呼び出し元のFragmentでは、 currentBackStackEntry の SavedStateHandle からLiveDataを取得して、それをobserveしておきます。 遷移後のFragmentで値が設定された場合にこの画面が再び表示されると、ここに通知されます。 値を返すFragment 値を返すには previousBackStackEntry の SavedStateH
こんにちは。@KeithYokoma です。今回はこれまでの投稿からは少し話題を変え、AndroidX Fragment ライブラリに関する問題の発見と解決にまつわることを解説しようと思います。 画面の状態を保存する時に TransactionTooLargeException が多発し始める 以前の記事でも紹介しましたが、ギフトモールアプリでは次のような構成で画面を実装しています。この構成で Unidirectional なデータフローを作ることが第一の目的ですが、SavedStateHandle を組み合わせることによって ViewModel の状態の保存と復帰も実現しています。ギフトモールアプリでは ViewState で ViewModel の状態を表現しているため、ViewState の保存と復帰を共通化しています。 // 共通のベースとなるインタフェースと ViewModel
Apollo ClientのキャッシュでInterfaceやUnionを利用する (WARNING: heuristic fragment matching going on!)JavaScriptGraphQLapollo Apollo Clientのキャッシュ機能は便利で特に設定をせずにそのまま使えてたのですが、UnionやInterfaceを利用する際に工夫が必要だったのでご紹介します。 問題 Apollo ClientでUnionやInterfaceを含んだクエリを扱うと以下のようなWarningが出ました。 これはFragment MatcherというApollo Clientのキャッシュ機構に使われているもので、デフォルトのものだとInterfaceやUnionには対応できないため警告がでています。 これを解決するためにはサーバーで定義されたスキーマに対応したFragment
This article introduces the in silico drug discovery technique called Fragment-based Drug Design (FBDD). It explains how to use the FBDD software ACFIS 2.0 to discover drugs for Parkinson’s disease on your own computer and also provides specific compounds as examples. By learning about it, you can understand the latest drug discovery technology, ACFIS 2.0, and experience drug discovery on your own
FragmentManager.popBackStack()で、ひとつ前の画面へ戻すことができますが、いくつか飛ばして、最初の画面に戻したいことがあります。 結論から言うと以下の対応で可能です。 //ルート画面に戻る val rootEntry = parentFragmentManager.getBackStackEntryAt(0) parentFragmentManager.popBackStack( rootEntry.id, FragmentManager.POP_BACK_STACK_INCLUSIVE ) なお、それまでの画面遷移の際には、以下のようにBackStackに追加している前提です。 parentFragmentManager.commit { addToBackStack(null) replace(R.id.container, nextFragment) }
大規模UIKitベースアプリへのTCAの段階的導入/gradual-adoption-of-tca-in-a-large-scale-uikit-based-app
日本のストリートカルチャー黎明期から、 現代のラグジュアリーブランドとの協業に至るまで。 様々なブームやヒットプロダクトを生み出し続けてきた。 その背景にあったのは、 本人も「まったく意識していなかった」と語る嗅覚とセンス。 いわゆるマーケティング論とは無縁。 むしろ、それらに逆行して生きてきた。 独自のインプット術、発想術、コラボ術、 それらを「非言語マーケティング」と題し体系化。 自ら教壇に立ち、半年間かけて伝えていく。 2023年秋。前例のない講義がはじまる。 FRAGMENT UNIVERSITY 事務局 受講者へのメッセージ僕が「教えること」は何もないと思うんですが、 皆さんが「学べること」はあるのかもしれません。 見てきた景色、経験したこと、ざっくばらんにお話しします。 過去から今へと繋がる様々な出来事を、 フラグメント大学のスタッフと共に解き明かしていきたいと考えています。
「Link to Text Fragment」は、ウェブページ内の特定箇所へリンクを張れるようにするブラウザ拡張機能です。 “ ウェブページ内の特定テキスト ” をリンク先とした URL を一発生成できるようにし、選択したテキストのある場所へとすぐにジャンプできるようにしてくれます。 （また、生成された URL を開くと、リンク先として指定されているテキストが強調して表示される） 操作は、テキスト選択時の右クリックメニュー、あるいはホットキーから実行することができ、生成された URL に関しては、「Link to Text Fragment」をインストールしていないブラウザ上でも有効に使えるようになっています※1。 （私の環境では、ホットキーが正常に動作しませんでした） ※1 ただし、旧 Microsoft Edge、Internet Explorer、Waterfox Classic な
フェンダーより、ファッションならびに音楽プロデューサーの藤原ヒロシが率いる「fragment design」とのコラボレーション・ギター“fragment Telecaster”が発売される。 発売日は2024年12月6日（金）で、Fender Flagship Tokyoでは先行して11月6日（水）より予約販売が開始されている。価格は385,000円（税込）。 特別なローズウッドがあしらわれたテレキャスター 60年代のテレキャスターをベースに、藤原ヒロシのこだわりを随所に反映した“fragment Telecaster®”。 ヘッドとボディトップにはローズウッドがあしらわれ、指板もドットポジションのないローズウッド指板だ。ボディはこのモデルのために特別に用意された6mm厚のローズウッドとアルダーの組み合わせにより、低音域から高音域までバランスの良いサウンドを生み出す。 こだわりの木材の音
はじめまして、NewsPicks Web Product Unitのじゆんきち(@junkisai)です。 弊チームでは、ここ1年間くらいWeb 版のNewsPicksを新しい基盤に置き換えるプロジェクト（以降、リアーキプロジェクト）を進めています。 新 Web 基盤のフロントエンドはReact (Next.js)+TypeScriptを採用しており、バックエンドとの通信にはGraphQL(Apollo) を採用しています。 今回はFragment Colocationという考え方を導入したら、これまで抱えていた技術的な課題が解消され、開発スピードが向上したお話をしようと思います。 導入前の課題 課題1. BFFとの通信回数が多い 課題2. クエリを書く際に必要な項目が漏れていたり、不要な項目が残ったままになる 課題3. ドメイン知識をもったコンポーネントの振り分けルールが曖昧 そこでFr
Photo by krakenimages on UnsplashA solid understanding of how Fragment works is essential when one working with Android Development. However, Fragment is still a complicated subject, and one can commonly miss out on something.
はじめに この記事では GraphQL の Fragment Colocation という考え方を紹介します。 REST を使用していた頃から不満に感じていたものの、解決が難しいと感じていた課題が Fragment Colocation で見事に解決されたため GraphQL を使用している場合必ず知っておいた方が良い概念だなと思います。 また、前提としてこの記事では Apollo（もしくは Urql 等のデータフェッチライブラリ）を使用していることを想定しており、サンプルコードはReactで記述しています。 Relay を使用している場合フェッチデータの宣言をデータを使用するコンポーネントで記述することが強制されるため、自然と Fragment Colocation を使用した実装になります。 この記事で書くこと Fragment Colocationの紹介・基本概念の説明 この記事で書
Fragment filmu wrzuconego przez ruskich. Czy tylko mi się wydaje, że ten operator kamery jest wyjątkowo odważny i i… https://t.co/Bw9hSfbYFB
viewLifecycleOwnerLiveData を使って Fragment の onDestroyView() で自動で null がセットされる ViewBinding 用の property delegates を作る
viewLifecycleOwnerLiveData を使って Fragment の onDestroyView() で自動で null がセットされる ViewBinding 用の property delegates を作る ViewBinding のドキュメントでは Fragment で使う時の実装はこのようになっています。 class LoginFragment : Fragment() { private var _binding: FragmentLoginBinding? = null private val binding: FragmentLoginBinding get() = _binding!! override fun onCreateView( inflater: LayoutInflater, container: ViewGroup?, savedInsta
[ViewLifecycleProperty] Fragment でプロパティを Not Null で省メモリで onDestroyView でアクセスしても安全な AutoClearedValue にする方法 Fragment でプロパティの生存期間を View の生存期間と一致させる方法はいくつかあります。しかし、満たしたい要件に応じて適切な方法を選択するためには Fragment のことを良く知っている必要があります。 ここでは、そのようなプロパティが満たしたい要件と定義する方法を整理し、すべての要件を満たす ViewLifecycleProperty を紹介します。 TL;DRそれぞれの方法の比較表は以下の通りです。 ViewLifecycleProperty がすべての要件を満たしていてオススメです。 # プロパティが満たしたい要件 ## 再初期化: View のライフサイクル
![[ViewLifecycleProperty] Fragment でプロパティを Not Null で省メモリで onDestroyView でアクセスしても安全な AutoClearedValue に｜wada811](https://cdn-ak-scissors.b.st-hatena.com/image/square/6a30f1fabc90383f17230fc4916ccddc7e5970f1/height=288;version=1;width=512/https%3A%2F%2Ffanyv88.com%3A443%2Fhttps%2Fassets.st-note.com%2Fproduction%2Fuploads%2Fimages%2F29718862%2Frectangle_large_type_2_1eb1e9b55e5edd22dbd078ab26b4a187.png%3Ffit%3Dbounds%26quality%3D85%26width%3D1280)
Anker Prime Wall Charger (100W, 3 ports, GaN) FRAGMENT Edition プロが選ぶ、充電器。 藤原ヒロシ氏が率いる「fragment design」と Ankerが初のコラボレーション。 fragmentとの特別なコラボモデルとして、 外出先でノートPCを使用するクリエイターや、 洗練されたビジネスマンに最適なセレクト。 ブラックを基調としたカラーリングに、 fragmentとのコラボロゴと、 稲妻デザインを施した数量限定モデルです。 藤原ヒロシ氏コメント 僕はどこにでもMacBookを持ち運んで 好きな時に仕事をしたいタイプなので、充電が減ると心配になる。 Anker製品は以前から使っていて、 初めて使った時はその充電の速さに驚きました。 コンパクトだし今はどこにでも持ち運んでいます。 でも、急速充電の良さってあまり知られていないよう
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
Activityも含めて、ここ最近は画面間でのデータのやりとりに大きめの変更が入ってきてます。 Fragmentの 1.3.0-alph04 から新しく setFragmentResult / setFragmentResultListener が追加されました。これを使うことで簡単にFragment間でのデータの受け渡しを実装できます。 https://developer.android.com/training/basics/fragments/pass-data-between 使い方は非常に簡単です。（fragment-ktx使っています） 結果を返す側返したい値を setFragmentResult にkeyと一緒に渡すだけです。 補足１setFragmentResultListener の処理は最初に STARTED の状態になったときに呼び出されます。また、呼び出し後には結果
Jetpack時代のFragment再入門
GraphQL における Fragment とは GraphQL におけるFragmentとは、複数のqueryやmutationの間で共有することができるロジックのことです。 Fragmentを単体で定義すると下記のように書けます。 Fragmentには関連付けされたタイプに属するフィールドが含まれます。 上記の例だと Person 型は NameParts フラグメントが有効であるため、 firstName フィールドと lastName フィールドを宣言する必要があります。 そして、Person型のオブジェクトを取得するqueryを定義するときは下記のように書くことができます。Fragmentはスプレッド構文で記載できます。 実際にはfirstName,lastNameが展開されてフィールドにアクセス可能になっています。
Good components are reusable. And reusable components don't make assumptions about where they will be used. This means a few things: 1. Components should not have an effect outside of their boundaries. This is well explained in “Margins and Composability in CSS” by @giuseppegurgone and “Margins considered harmful” by @mxstbr. 2. Components should not implicitly rely on their context. Recently, dur
はじめに この記事では GraphQL の Fragment Colocation という考え方を紹介します。 REST を使用していた頃から不満に感じていたものの、解決が難しいと感じていた課題が Fragment Colocation で見事に解決されたため GraphQL を使用している場合必ず知っておいた方が良い概念だなと思います。 また、前提としてこの記事では Apollo（もしくは Urql 等のデータフェッチライブラリ）を使用していることを想定しており、サンプルコードは React で記述しています。 Relay を使用している場合フェッチデータの宣言をデータを使用するコンポーネントで記述することが強制されるため、自然と Fragment Colocation を使用した実装になります。 この記事で書くこと Fragment Colocation の紹介・基本概念の説明 この記
普段 GraphQL を使ったフロントエンド開発をしています。最近 GraphQL Code Generator の設定を見直しており、いくつかの plugin や preset を採用したり削除したのですが、その中でも gql-tag-operations-preset がとても良かったので、もともとの構成と gql-tag-operations-preset を導入した後の構成を比較して記事に残しておきます。 また、 gql-tag-operations-preset を導入することで、 Relay 以外の GraphQL Client でも Fragment Colocation が扱いやすくなります。 私は Apollo ユーザーなので Relay の Fragment Colocation を原則とした開発体験を羨ましく思っていたのですが、 Apollo でも少し近づいた開発体験
<fragment> と FragmentContainerView では Fragment のライフサイクルメソッドの呼ばれるタイミングが違う
<fragment> と FragmentContainerView では Fragment のライフサイクルメソッドの呼ばれるタイミングが違う 動作確認は androidx.fragment:fragment-ktx:1.2.5 でしています。今後のバージョンで動作が変わる可能性があります。 fragment-ktx:1.2.5 で <fragment> を使うと FragmentContainerView を使うようにメッセージがでます。 このメッセージに従って FragmentContainerView に変えたとして、大体は問題ないと思いますが、問題が起こる場合もあります。 <fragment> と FragmentContainerView で Fragment のライフサイクルメソッドの呼ばれる順番を確認してみます。 class MainActivity : AppCompat
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
