はてなブックマーク

Relayを触り始めた当初、useQueryとuseFragmentって何してるの？何が違うの?ってレベルでよくわからなかったので、 初めてRelayを触る人のために詳しく図解してみました。 そもそもRelayとは Relayは、facebook社(今はMetaか...)が開発しているReactのためのGraphQLクライアントです。 Relayには下記のようなメリットがあります。 取得したいデータの構造をコンポーネントに閉じ込めることができる つまり、コンポーネント内で取得するデータが変更されても他のコンポーネントに影響がでないため、依存関係を気にしなくて良い。 useQueryとuseFragmentの仕組みによるもの → のちほど詳しく解説！ フェッチ・レンダリングの自動的に最適化される クエリの重複フィールドの除去 データに変更があった時に、必要なコンポーネントのみ更新する ▼ 公

※ あくまで自称です。笑 ※ 今後もどんどん拡張していく予定です。 ※ emotion/styled に関しては割愛する予定です。 Emotionとは？ フレームワークにとらわれず使うことができるCSS in JSのフレームワーク。 (styled-componentsと比較されがちだが、emotionの方が後発であるためstyled-componentsができることは基本できます。) 初期設定 利用したいEmotionのパッケージをインストールする Emotion関連のパッケージ @emotion/css フレームワークにとらわれず、Emotionを使用するためのパッケージ。 @emotion/react React用のEmotionパッケージ。 @emotion/styled styled-component っぽい記法で書くことができるEmotionパッケージ。(筆者はstyled-

モダンフロント技術におけるGTMの問題 ここでいうモダンフロント技術は、VueやReactなど仮想DOMを用いられた技術を指します。 仮想DOMなので「DOMが存在しているとは限らない」 要素の表示や要素のクリックなどのトリガーに関して、class名やらid名などDOMの情報に対して条件を絞りイベントを制御すると思いますが、必ずしもGTMがその仮想DOMが正しく検知できるとは限らないです。 仮想は消失したり入れ替わったりするものなので。 そのため、GTMの既存の要素の表示や要素のクリックに依存しない設計を理想とします。 GTMのページビュートリガーが使えない モダンフロント系の技術では、React Routerやらvue-routerなどの仕組みによって、 サーバーサイドを介さずにクライアントサイドのみでページの変更を行なっているケースが多いです。 つまり、History APIで更新して

Help us understand the problem. What are the problem?

ReactのState管理を比較してみた (useState / useReducer / React Context API / Redux / Recoil)React おはこんばんちは、@ちーずです。 アドベントカレンダー2日目はReactのステート管理についてです。 Reactでは、いろんな方法でステート管理できますね。 React hooksでは、useStateやuseReducer、useContextなど... さらにstate管理のライブラリも、ReduxやMobX、recoilなど色々あって何がなんだかわからない... そう感じている人もいると思います。(※ 自分です) それらをどのように使うことができるか、どんな時に使うと良いかなどをまとめてみました！！ React hooksでのステート管理 1. useState 一番基本的なState管理ができるhooksです。

世はまさに、React hooks時代。 React hooks無しにして、Reactは書けない！！という人も多いのではないでしょうか。 その中でも特に「カスタムフック」は、React hooksの便利さをの根幹とも言える、最も重要な機能です。 カスタムフックは自由にカスタマイズできる一方で、設計や実装に悩むことが多くあります。 そんなカスタムフックに、本気で向き合ってみようと思います。 1章 - そもそもカスタムフックとは 自分独自のフックを作成することで、コンポーネントからロジックを抽出して再利用可能な関数を作ることが可能です。 公式ドキュメント: 独自フックの作成 簡単に言うと、React hooksの処理をコンポーネントに直接書くのではなく、 別ファイルに切り出して新しいhooksとして定義した関数のことをカスタムフックと言います。 2章 - カスタムフックを利用するメリット カス

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

再宣言 一度宣言した変数を、同じ変数名で宣言し直すことを再宣言といいます。 再宣言可能なvarで再宣言した場合、後に宣言した変数が適用され、 再宣言不可能なlet/constで再宣言した場合、エラーになります。 varでは、予期しない再宣言が起こりうるため危険です。 // var var a = 0; var a = 1; console.log(a) // `1`と出力される // let let b = 0; let b = 1; // SyntaxError: Identifier 'b' has already been declared // const const c = 0; const c = 1; // SyntaxError: Identifier 'c' has already been declared

QiitaのOGPが可愛すぎて、自分のブログにも導入したい！と思い、 Cloudinaryを使って記事タイトル入りOGPを作成しました。 ▼ twitterに記事を投稿すると、こんな感じ。 Cloudinaryとは？ 画像の加工が得意なクラウドサービス。 APIを使用して、画像の変形・配信などができます。 料金プラン 基本的には無料で使えますが、上限があります。 料金プランに関しては、下記の記事がわかりやすかったです。 参考記事: Cloudinaryの新しいプランを調べてみた SDKが提供されている言語・プラットフォーム サービス開発における言語はほぼ網羅しています。 対応していない言語で使いたい場合も、URLにパラメータを渡して画像を変形することもできます。 参考： https://cloudinary.com/documentation どんなことができるか 下記の記事がわかりやすか

この記事はエイチーム引越し侍 / エイチームコネクト Advent Calendar 2019の10日目の記事です。 前日は、こぼさん(@anneau)の『Vueを使ってサイトを1ヶ月で作った話。そして、それを、1ヶ月使ってリプレイスした話。』でした！ 私も身近で引越し侍　まるごとスイッチを開発している姿を見ていたのですが、膨大な仕様のサービスを、2ヶ月という限られた期間で、スピード感もって開発していることがひしひしと伝わりました。 尊敬する大先輩の記事です。ぜひ読んでみてください！ 本日はぴかぴかの新卒1年生のちーずが担当いたします！ QiitaがPWAに対応していることに最近気づき、以前より記事を読むようになりましたが、投稿は久しぶりになってしまいました アイコンのQiitanのシルエットがかわいいので、スマホのホーム画面にQiitaを追加することをおすすめします はじめに Nuxt.

Blogを作ろう！ってなったものの、どのHeadless CMSを使えばいいか、全くわからなかったので、とりあえず調査しました。 はじめに この記事はあくまで自分がどのHeadless CMSを使ってblogを作るかを検討するための比較記事です。 欠けている機能説明等も多いと思いますが、ご了承ください。 HeadlessCMS比較記事は圧倒的に下記記事がわかりやすかったです。 4種類のHeadlessCMSを試してみた感想（wordpress/strapi/contentful/microCMS） Contentful 特徴 とにかく高機能、細かく設定できる、かゆいところに手が届く 無料枠 2つのプロジェクト 無料枠 メンバー数 10人 無料枠 レコード数上限 5000個 管理画面のUI データ構造作成 データの形式選択 コンテンツ編集画面 API ちょっとミスったこと markdownは

おはこんばんちは、ゆるすぎて投稿を忘れていたちーずです。(反省) 本日は、IEと戦うためのTipsを、IE滅びろという気持ちを抑えて書きます。 なぜこの記事を書く？ 新卒として働き初めてから、新規立ち上げサイトのCSS設計を担当させていただいた経験がありましたが、 その中で一番失敗したこと、反省したことがIE対応だったからです。 自戒の念を込めて、この記事を書こうと思いました。 基本的なIE対応 まずはじめに、基本的なIE対応をする際に考えるべきことをざっくりと説明します。 1. Can I use でプロパティがIEに対応しているかを調べる Can I useとは、HTMLやCSSなどのブラウザ対応状況が調べられるサービスです。 自分が使用したいプロパティがIEに対応しているかを簡単に調べることができるため、ブラウザ対応しているか不安なプロパティを使う際は必ず調べましょう。 緑　 : 対

@shwldさんのスタイルガイドジェネレータを比べてみた という記事を読んで非常に良い！わかりやすい！とおもったのですが、古くなってしまっていたため、自分でまとめ直しました。 スタイルガイドジェネレータとは？ スタイルガイドとは、デザインする前の要素やグラフィック、デザイナーやエンジニアが従うべきルールなどを集めたものです。スタイルガイドがあれば、バラバラのWebサイトの部品に一貫性を持たせて、最終的に一体感のある体験を作り出すことができます。 引用元 : Webデザインのスタイルガイドの作り方 今回でいうスタイルガイドは、HTML / CSSのルール・規約を集めたものを指します。 スタイルガイドジェネレータはそのスタイルガイドを生成するツールのことを指します。 bootstrapやbulma.ioのドキュメントのようなものを、自分の書いたHTML / CSSで作ることができます。 以下は

はじめに この記事は初心者でもwebpackを用いて簡単な環境を構築できるように書いた記事です。 中級者以上でしたらおそらく物足りない記事になるかもしれませんが、初心者には十分な環境を整えることができると思います。 今回用いた環境 macOS Sierra 10.12.2 Node.js v6.9.1 入ってるかわからない人は $ node -vと打ってみてください。 v6.9.1などバージョンが表示されたらおっけーです。 node.jsをまだインストールしていない人は下記のリンク等などを見てインストールしてみてください。 5分で終了。node.jsの環境構築が拍子抜けするほど簡単だったのでサンプルプログラム付きでまとめてみました【Mac編】 準備 それでは、環境を作っていく流れをまずはざっくりと説明していきます。 ターミナルを開いて準備しましょう。 1. まずはディレクトリ作成。 普通に