<p>人はあらゆる外部情報の8割を視覚に頼る生き物と言われていますが、その視覚も個人差があります。中には視覚異常と診断される方もいて、見え方が全く異なる人もいます。そんな方々がどのようにランチカートのホームページを見えているのか調べてみました。</p>
<p>&nbsp;</p>
<p><img loading="lazy" class="alignnone size-medium wp-image-11056" src="/uploads-archive/lc/2022/09/0920thubnail.png" alt="" width="640" height="427" srcset="/uploads-archive/lc/2022/09/0920thubnail.png 640w, /uploads-archive/lc/2022/09/0920thubnail-300x200.png 300w, /uploads-archive/lc/2022/09/0920thubnail-600x400.png 600w" sizes="(max-width: 640px) 100vw, 640px" /></p>
<p>&nbsp;</p>
<p>調べる方法として、google chromeの開発者ツールを使いました。</p>
<p>google chrome でホームページを開き右クリックを押し、「検証」を押して開発者ツールが立ち上げます。</p>
<p>開発者ツールの右上の歯車のアイコンの右にある3つの点のアイコンをクリックし「More tools」→「Rendering」とボタンを押します。</p>
<p>すると「Rendering」の機能が立ち上がり様々な画面の見え方を再現できます。その中の機能に「Emulate vision deficiencies」という機能があり、こちらのプルダウンを選ぶことで視覚異常の見え方を再現できます。</p>
<p>こちらを使いランチカートのトップページを実際に見てみました。</p>
<p>(掲載できる画像サイズの都合上、特長的な箇所をトリミングして掲載します。)</p>
<p>&nbsp;</p>
<h2>Blurred vision (かすみ目)</h2>
<p><img class="alignnone size-medium wp-image-11057" src="/uploads-archive/lc/2022/09/kasumi_hikaku-min.png" alt="" /></p>
<p>こちらは「かすみ目」と言われる方の見え方を再現します。画像は「LaunchCart ご導入インタビュー」部分の一部を正常な見え方と比較したものです。（上がかすみ目の見え方、下が正常な見え方）</p>
<p>全体的にぼんやりとした見え方をし細部をはっきり見ることがでできません。眼精疲労の結果ピントが合わなくなり、一時的にこのように見えることもありますが、病気が原因でかすみ目になるケースもあるそうです。もし、異変を感じている方はすぐに病院に行くことをおすすめします。</p>
<p>&nbsp;<br />
Blurred vision より下の項目はいわゆる色覚異常と呼ばれる方の見え方を再現しています。</p>
<h2>Protanopia (1型2色覚)</h2>
<p>人間の目はR(赤)、G(緑)、B(青)の光を感知し、それぞれの光の強弱で様々な色を認識します。しかし、それぞれの光を受け取る感度が正常ではないことで「赤系統の色が分かりずらい」などの個人差が生じます。人によって強弱もあったり、見えづらい色の傾向も変わります。</p>
<p>&nbsp;<br />
<img class="alignnone size-medium wp-image-11057" src="/uploads-archive/lc/2022/09/02-min.png" alt="" /><br />
&nbsp;<br />
こちらの画像は「1型2色覚」という色覚異常のパターンを再現しています。このタイプの方は赤色の光を感知することに難があります。<br />
傾向として、「黄緑とオレンジ色」、「緑色と茶色と濃い灰色」、「青と紫」、「ピンクと水色と薄い灰色」を混同しやすい特徴があります。また、赤色が薄暗い色に見えます。</p>
<h2>Deuteranopia（2型2色覚）</h2>
<p><img class="alignnone size-medium wp-image-11057" src="/uploads-archive/lc/2022/09/03-min.png" alt="" /><br />
&nbsp;<br />
こちらの画像は「2型2色覚」という色覚異常のパターンを再現しています。このタイプの方は緑色の光を感知することに難があります。<br />
傾向として1型と似ており、「黄緑とオレンジ色」、「緑色と茶色と濃い灰色」、「青と紫」、「ピンクと水色と薄い灰色」を混同しやすいです。<br />
1型との違いは、赤色を明るく感じます。</p>
<p>色覚異常を持っている方はこのタイプの方が最も多いそうです。</p>
<h2>Tritanopia（3型2色覚）</h2>
<p><img class="alignnone size-medium wp-image-11057" src="/uploads-archive/lc/2022/09/04-min.png" alt="" /><br />
&nbsp;<br />
こちらの画像は「3型2色覚」という色覚異常のパターンを再現しています。このタイプの方は青色の光を感知することに難があります。<br />
1型、2型と比べると稀なタイプの色覚異常です。青色のを見るのが苦手なため、1型2型では比較的共通してみることができた「Mission」の背景色が随分くすんでしまいます。</p>
<p>&nbsp;</p>
<h2>Achromatopsia（全色盲）</h2>
<p><img class="alignnone size-medium wp-image-11057" src="/uploads-archive/lc/2022/09/05-min.png" alt="" /><br />
&nbsp;<br />
こちらの画像は「全色盲」という色覚異常のパターンを再現しています。このタイプの方は色を感知することができず常にモノクロ写真のように灰色の一色の見え方をしています。非常にまれな色覚異常のパターンで色覚以外の目の不調も抱えていることが多いようです。</p>
<p>&nbsp;</p>
<h2>まとめ</h2>
<p>ランチカートのオレンジ色は鮮やかな色ですが、こうして、確認してみるとオレンジ色は全ての人にとって魅力的に見えるわけではないことがよくわかります。作り手である我々がいかに魅力的に見えるものを作っても人によってはそう見えないどころか、時には識別もできず、正しく情報を受け取ることさえできないことも有り得ます。<br />
この事を年頭に置き、全ての人に使いやすいホームページを作らなくてはいけないと思いました。</p>


視覚の多様性について。ランチカートの画面を確認してみました。

React Testing Library を使ってUIの結合テストをやってみる

<p>先日改訂版が発売された</p>
<p><a href="https://www.lambdanote.com/collections/frontpage/products/carta">事業をエンジニアリングする技術者たち ― フルサイクル開発者がつくるCARTAの現場</a></p>
<p><a href="/uploads-archive/2022/09/cover0_b10c9f28-8745-4514-90e0-cedec07e8aa7_530x.webp"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-17940" src="/uploads-archive/2022/09/cover0_b10c9f28-8745-4514-90e0-cedec07e8aa7_530x-211x300.webp" alt="" width="211" height="300" srcset="/uploads-archive/2022/09/cover0_b10c9f28-8745-4514-90e0-cedec07e8aa7_530x-211x300.webp 211w, /uploads-archive/2022/09/cover0_b10c9f28-8745-4514-90e0-cedec07e8aa7_530x-228x324.webp 228w, /uploads-archive/2022/09/cover0_b10c9f28-8745-4514-90e0-cedec07e8aa7_530x.webp 530w" sizes="(max-width: 211px) 100vw, 211px" /></a></p>
<p>という書籍がTL上で話題になっていました。副題にある「フルサイクル開発者」という聞き慣れない用語が個人的に気になったので、今回はそちらについて調べてみました。</p>
<h2>フルサイクル開発者とは</h2>
<p>設計、実装、テストといういわゆる開発作業だけでなく、デプロイ、運用やサポートまで含めた一連のすべてを担う開発者（チーム）のことで、もともとはサブスクリプション制の動画ストリーミングサービスの最大手であるNetflix社のブログで提唱された概念です。</p>
<p><img decoding="async" loading="lazy" class="wp-image-17932 size-medium" src="/uploads-archive/2022/09/1__nN4aj7uohV4v8bnqJCw3g-300x262.png" alt="" width="300" height="262" srcset="/uploads-archive/2022/09/1__nN4aj7uohV4v8bnqJCw3g-300x262.png 300w, /uploads-archive/2022/09/1__nN4aj7uohV4v8bnqJCw3g-228x199.png 228w, /uploads-archive/2022/09/1__nN4aj7uohV4v8bnqJCw3g.png 559w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<p>https://netflixtechblog.com/full-cycle-developers-at-netflix-a08c31f83249 から引用</p>
<p>特定の作業だけを専門とする複数部門をまたがずに完了するので、より早くプロダクトや機能をリリースできるようになります。DevOpsの原則をもっとつきつめたものというイメージでしょうか。</p>
<p>よいことばかりではなく、責任範囲が増えることにより業務量が増えがちなことや、特定分野を極めたい人にとって興味外のことまでやらないといけなくなることが課題となりそうです。</p>
<p>そういった課題の解消のため、一つのチームが見るべき責任範囲を狭められるようマイクロサービス化を進めるなどを行っている企業もあるようです。既存の組織に適用する場合はこういったこと含め、いろいろ考えるべきことがありそうです。</p>
<h2>まとめ</h2>
<p>数人で始めたときは（自然とフルサイクル開発になっていて）すごいスピードで成長していたのに、その後、人が増えてチームわけをしていくと、どんどんスピード感がなくなっていき、「昔はよかった・・」って言ってるようなケースを過去にいろんな組織で見てるのですが、それに対する一つの解決方法になるんじゃないかと感じました。</p>
<p>個人的にも自分の目指す方向性とマッチしているように思えたので、もし、「今後どういうエンジニアになりたい？」って質問されたら「フルサイクルエンジニア」※と言おうと思います。そんな機会あるかわからないですが・・</p>
<p>※原文はFull Cycle Developerなのでカタカナだとフルサイクルデベロッパーが適当だと思いますが、日本語訳としてはフルサイクルエンジニアとするのが多数派のようです。</p>
<h3>参考リンク</h3>
<p><a href="https://www.lambdanote.com/collections/carta/products/carta">https://www.lambdanote.com/collections/carta/products/carta</a><br />
<a href="https://netflixtechblog.com/full-cycle-developers-at-netflix-a08c31f83249">https://netflixtechblog.com/full-cycle-developers-at-netflix-a08c31f83249</a><br />
<a href="https://techblog.cartaholdings.co.jp/entry/2019/02/04/171325">https://techblog.cartaholdings.co.jp/entry/2019/02/04/171325</a></p>


small_1__nN4aj7uohV4v8bnqJCw3g.png

thumbnail_1__nN4aj7uohV4v8bnqJCw3g.png

1__nN4aj7uohV4v8bnqJCw3g.png

フルサイクル開発者とは

[Next.js]SSG/CSR/SSR/ISRの違いとそれぞれ実際動かしてみた

【JavaScript】ブラウザのストレージCache APIを試してみる

<p><img decoding="async" loading="lazy" class="alignnone size-large wp-image-17883" src="/uploads-archive/2022/08/81ZkGOHcf6L-809x1024.jpg" alt="プロを目指す人のためのTypeScript入門表紙" width="809" height="1024" srcset="/uploads-archive/2022/08/81ZkGOHcf6L-809x1024.jpg 809w, /uploads-archive/2022/08/81ZkGOHcf6L-237x300.jpg 237w, /uploads-archive/2022/08/81ZkGOHcf6L-768x972.jpg 768w, /uploads-archive/2022/08/81ZkGOHcf6L-1213x1536.jpg 1213w, /uploads-archive/2022/08/81ZkGOHcf6L-1618x2048.jpg 1618w, /uploads-archive/2022/08/81ZkGOHcf6L-228x289.jpg 228w, /uploads-archive/2022/08/81ZkGOHcf6L.jpg 1975w" sizes="(max-width: 809px) 100vw, 809px" /></p>
<p>&nbsp;</p>
<h1>著者</h1>
<p>鈴木 僚太(すずき りょうた) (  <a href="https://twitter.com/uhyo_">https://twitter.com/uhyo_</a> )<br />
2013年からTypeScriptを使用中。LINE株式会社でフロントエンドエンジニアとして自社開発に従事しながら、技術顧問なども行っている(本書発行当時)。専門はTypeScriptとReactで、講演やインターネット上での記事公開を通じて初心者向けから上級者向けまでさまざまな情報を発信している。OSS活動にも積極的だが自作のライブラリはあまり流行っていない。</p>
<p>&nbsp;</p>
<h1>目次</h1>
<ul>
<li>第1章 イントロダクション</li>
<li>第2章 基本的な文法・基本的な型</li>
<li>第3章 オブジェクトの基本とオブジェクトの型</li>
<li>第4章 TypeScriptの関数</li>
<li>第5章 TypeScriptのクラス</li>
<li>第6章 高度な型</li>
<li>第7章 TypeScriptのモジュールシステム</li>
<li>第8章 非同期処理</li>
<li>第9章 TypeScriptのコンパイラオプション</li>
</ul>
<h1>ここがすごい</h1>
<h2>TypeScript の復習と深い理解が得られる</h2>
<p>後述しますが、「入門」とは言い難い分、TypeScript でプロダクトを作ったことのある方におすすめしやすい本でした。サンプルコードも充実しているし、7,8章当たりになると、「TypeScriptらしさ」の内容に深入りしてきますので、まさにプロのTypeScripterを目指すための本です。</p>
<h2>コラムが面白い</h2>
<p>「比較演算とNaN」「letを避けるてプログラムを読む人の負担を減らそう」など、わざわざ検索エンジンにかけて探すような話題をコラムという形で提供してくれます。しかも、いいタイミングで！ コラムは、全部で38ありますが、コミケの評論島で頒布されているような内容なので、これだけでも1000円くらいは出したくなりました。</p>
<p>&nbsp;</p>
<h1>ここはもうちょっと</h1>
<h2>「プログラム入門書」ではないので、タイトルは誤解ないように</h2>
<p>確かに、TypeScript の入門書ではあるんですが、プログラムの入門書ではありません。</p>
<p>また、あくまでも「プロを目指す人のため」です。プロを目指しているなら、型の概念も知っているし、TypeScriptに興味があるということは、JavaScript の概要を知っていて当然ということだと受けました。</p>
<p>TypeScript の理解には、TypeScript ネイティブのシステムが少ない現状、JavaScript との関係性の理解は不回避ですが、本書のJavaScript に関する記載は、5ページのみです。</p>
<p>型については「プリミティブ型」の解説から始まるような構成です。プログラム初心者は、他のJavaScript入門書などを併せて用意した方が良いでしょう。</p>


medium_81ZkGOHcf6L-768x972.jpg

small_81ZkGOHcf6L-768x972.jpg

thumbnail_81ZkGOHcf6L-768x972.jpg

81ZkGOHcf6L-768x972.jpg

書評: プロを目指す人のためのTypeScript入門 技術評論社

small_ES6-01.png

thumbnail_ES6-01.png

ES6-01.png

JavaScriptの分割代入構文を使いこなそう

<h2>Firebase Authenticationとは</h2>
<p>「Firebase Authentication」はユーザー認証機能を提供し、ユーザ情報をクラウドで保存してくれる、Google運営のサービスです。</p>
<p>&nbsp;</p>
<h2>できること</h2>
<p>Firebase Authenticationを利用することで、アプリケーションにユーザー認証機能を独自で実装することなく、ユーザー認証機能を提供できるようになります。</p>
<p>認証方法には、主に以下が用意されています。</p>
<ul>
<li>メールアドレスとパスワードによる認証</li>
<li>主要なプロバイダーアカウントによる認証<br />
（Google / Twitter / Facebook / Github / Apple / Yahoo! / Microsoft 等）</li>
<li>匿名認証</li>
<li>カスタム認証</li>
<li>電話番号認証</li>
</ul>
<h2>認証の仕組み</h2>
<p>アプリへのユーザーのログインを行うには、まずユーザーから認証情報を取得します。認証情報には、ユーザーのメールアドレスとパスワードや、フェデレーション ID プロバイダの OAuth トークンなどがあります。次に、取得した認証情報を Firebase Authentication SDK に渡します。Google のバックエンド サービスによって認証情報が検証され、クライアントにレスポンスが返されます。</p>
<p>ログインが成功すると、ユーザーの基本的なプロフィール情報にアクセスしたり、他の Firebase サービスに保存されているデータへのユーザーのアクセスを制御したりできます。提供された認証トークンを使用して、独自のバックエンド サービスでユーザーの ID を検証することもできます。</p>
<p>&nbsp;</p>
<h2>メリット1.</h2>
<h3>ユーザー認証システムを独自で実装しないこと</h3>
<p>ユーザー認証システムを独自で実装する場合、気をつけなければならないことはいくつもあります。</p>
<ul>
<li>パスワードのハッシュ化</li>
<li>ユーザ情報が登録されたDBとのやりとり</li>
<li>レスポンス内容</li>
</ul>
<p>などなど。</p>
<p>やることは沢山あります。実装をする際に思わぬバグを埋め込んでしまうリスクもあります。</p>
<p>これらの処理をFirebase Authenticationにまかせることで多くのメリットが生まれます。</p>
<p>&nbsp;</p>
<h2>メリット2.</h2>
<h3>今後増え続けるログイン方法やデバイスに対応するための工数削減</h3>
<p dir="ltr">ユーザー認証システムを独自で実装する場合、今後新しいサービスやデバイスが生まれてきた時に、その際に手間をかけてシステム対応を行う必要があります。</p>
<p dir="ltr">Firebase Authenticationを利用することで、そういった面倒な処理を肩代わりしてくれるため、工数の削減にも繋がります。</p>
<h2>メリット3.</h2>
<h3>重要情報をクラウドに預けることによる安全性の向上</h3>
<p dir="ltr">ユーザー認証システムを独自で実装する場合、メールアドレスやパスワードなどの個人情報を保管する必要があり、漏洩させないための対策など大きな責任を負う必要があります。</p>
<p dir="ltr">Googleなど信頼のおける事業者に管理を委ねることで、独自で管理するよりもセキュアな環境を構築することができます。</p>
<h2><span id="i-6">まとめ</span></h2>
<p>今回はFirebase Authenticationの概要とその仕組みについて解説しました。Firebase Authenticationの便利さについて少しでも実感いただけたら幸いです。認証機能を一から実装するのは非常に工数がかかり、さらにセキュリティレベルの担保なども難しいと言えます。そのため、オールインワンで対応が可能なFirebase Authenticationを使いましょう。</p>


medium_qt24WLh5lVE6rJBGCXcHp0WyAl4011Xmo9I3g1wb-768x577.png

small_qt24WLh5lVE6rJBGCXcHp0WyAl4011Xmo9I3g1wb-768x577.png

thumbnail_qt24WLh5lVE6rJBGCXcHp0WyAl4011Xmo9I3g1wb-768x577.png

qt24WLh5lVE6rJBGCXcHp0WyAl4011Xmo9I3g1wb-768x577.png

Firebase Authenticationって何？

<h2>待望の越境EC関連書籍！</h2>
<p>越境EC支援をしている世界へボカン株式会社の徳田さんが出版した『はじめての越境EC・海外WEBマーケティング』を読みました。</p>
<p>越境ECを網羅的に記した書籍は、これまでほとんどありませんでした。<br />アメリカAmazon出品や、中国モールからの輸入、海外SEOなど、限定した分野の書籍はいくつかあります。ですが、日本の商品を海外ユーザーに売っていこうとする、狭い意味での越境ECを扱った本は、2017年に出版された佐藤亘さんによる『越境EC＆海外販売攻略ガイドブック』くらいだと思います。</p>
<p>その理由として考えられるのは、①このノウハウこそが支援業者の生命線なので教えたくない ②そもそも越境ECビジネスを網羅的に語れる会社は少ない だと思います。<br />①についてはそのままの意味ですが、②について少し述べますと、越境ECでは市場調査、サイト構築、物流、広告、CS、法令などカバーしなければいけない分野が広く、支援業者1社で全てに精通しているケースは少ないです。実際に弊社もサイト構築に特化した会社でして、それ以外の部分は知識として知っていても実務的な支援をすることはできません。</p>
<p>その意味で、①②をクリアして出版したセカボカさんには敬意を払うべきでしょう。<br />日本の越境EC市場全体を盛り上げたいという想いを感じました。</p>
<p>なお、若干”ヨイショ”し過ぎました記事になってしまいましたが、アフィリエイトではありません笑。<br />越境ECを検討される方は、支援事業者と商談をする前に、この本を手にとって概要を把握しておくのが良いと、純粋に思います。</p>
<h2>自分の業務にも取り入れたいと思った点</h2>
<p>ここからは個人的に参考になった部分です。<br />弊社は越境ECのカートシステム開発をしている会社でして、「アジア向け自社越境ECサイト構築」に支援を特化した会社です。<br />ですが、越境EC事業を検討している方とお話する中で、「システムの機能的なことを説明されても仕方ない」と言われることも多々あります。もっと踏み込むと、そのような方が聞きたいのは、要約すると「うちの商品はどこの国に売れそうか」「どうやったら売れるのか」ということになります。</p>
<p>もっともな意見だと思います。</p>
<p>この本を読みながら感じたのは、システム開発会社だとしても、越境ECをやろうとしている方と同じ目線に立ち「どのように越境EC事業を立ち上げるのがベストか」と考え、ノウハウを示すことだと感じました。具体的な広告や物流の支援は、世界へボカンさんのような広告専門の会社や、ECMS，DHLのような物流専門の会社とタッグを組んで一緒に取り組む必要があります。ですが、初回の商談で、弊社がもっとクライアントの課題や情報を整理して、成功の道筋を示していく必要はあるでしょう。<br />もちろんある程度は今でも行っていますが、もっと強化する必要があると感じました。</p>
<p>特に、この本の第一章の市場調査や現状分析は、具体的に海外のモールを調査して類似商品/競合商品の販売数を調べる方法や、検索ワードのボリュームなどを調べる方法が書かれています。<br />どれも簡単かつ、無料で行える施策ばかりです。<br />ですが、このような内容を事前に調査しているクライアントは皆無に近いです。<br />弊社が初回商談前にこの程度は調べるべきだなと思いました。</p>
<p>また、本の中程で紹介されている、「取り組みパターン」というのも参考になりました。</p>
<ol>
<li>自社サイトでコツコツ信頼を積み重ねるパターン</li>
<li>海外モールのみで売上を最大化するパターン</li>
<li>海外モールと自社ECサイトで売上を最大化するパターン</li>
<li>日本観光時に接点を持ち、帰国後に越境ECサイトを利用してもらうパターン</li>
<li>海外の実店舗からECサイトへ引き上げるパターン</li>
</ol>
<p>上記のようなパターンを提示して、それぞれのメリット・デメリットを記していました。</p>
<p>自社ECサイト構築サービスを提供している弊社の立場だと、どうしても「1.自社サイトでコツコツ信頼を積み重ねるパターン」や「3.海外モールと自社ECサイトで売上を最大化するパターン」をオススメしてしまいがちでしたが、顧客の立場だと、「2.海外モールのみで売上を最大化するパターン」も同じく検討したいはずです。</p>
<p>多少綺麗事になっていしまいますが、弊社もより幅広い提案をしていかなければならないと感じました。</p>
<p>個人的にも色々と気付きがある本でした。</p>
<p><iframe loading="lazy" title="はじめての越境EC・海外Webマーケティング" type="text/html" width="500" height="550" frameborder="0" allowfullscreen style="max-width:100%" src="https://read.amazon.com.au/kp/card?preview=inline&#038;linkCode=kpd&#038;ref_=k4w_oembed_hS8599icyFgQc9&#038;asin=4866214058&#038;tag=kpembed-20"></iframe></p>


『はじめての越境EC・海外Webマーケティング』を読みました

<h2>先にまとめ</h2>
<ul>
<li>画像でネタバレしてますが、SQLでもJSON扱えます。</li>
<li>数十年使われて技術的に枯れてると思われてるSQLでもいろいろと進化してるので、普段使ってるものも改めて見直してみるといろいろ発見があるかも？</li>
</ul>
<h2>本題</h2>
<p>Webエンジニア歴〇〇年のあなたはある日上司から、APIから取得したユーザー情報を保存できるDBの設計を依頼されました。<br />
ユーザーには連番のID、名前、そしていろいろな情報が入ったJSONの3つの要素があるそうです。ということで、さっそく次のようなテーブルを作成して、テストデータを登録しました。</p>

		<div id="crayon-64954036ef46d382337068" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
sqlite&gt; CREATE TABLE user(
...&gt; id INT NOT NULL PRIMARY KEY,
...&gt; name TEXT,
...&gt; details JSON
...&gt; );
sqlite&gt; INSERT INTO user VALUES(1, 'Alice', '{ "age": 20, "tel": "0120-xxxxx-yyyy" }');
sqlite&gt; INSERT INTO user VALUES(2, 'Bob', '{ "age": 30, "tel": "0120-xxxxx-zzzzz" }');
sqlite&gt; SELECT * FROM user;
1|Alice|{ "age": 20, "tel": "0120-xxxxx-yyyy" }
2|Bob|{ "age": 30, "tel": "0120-xxxxx-zzzzz" }</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64954036ef46d382337068-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954036ef46d382337068-2">2</div><div class="crayon-num" data-line="crayon-64954036ef46d382337068-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954036ef46d382337068-4">4</div><div class="crayon-num" data-line="crayon-64954036ef46d382337068-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954036ef46d382337068-6">6</div><div class="crayon-num" data-line="crayon-64954036ef46d382337068-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954036ef46d382337068-8">8</div><div class="crayon-num" data-line="crayon-64954036ef46d382337068-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954036ef46d382337068-10">10</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64954036ef46d382337068-1"><span class="crayon-i">sqlite</span><span class="crayon-h">&gt;</span><span class="crayon-h"> </span><span class="crayon-e">CREATE </span><span class="crayon-e">TABLE </span><span class="crayon-e">user</span><span class="crayon-sy">(</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954036ef46d382337068-2"><span class="crayon-sy">.</span><span class="crayon-sy">.</span><span class="crayon-sy">.</span><span class="crayon-h">&gt;</span><span class="crayon-h"> </span><span class="crayon-e">id </span><span class="crayon-t">INT</span><span class="crayon-h"> </span><span class="crayon-st">NOT</span><span class="crayon-h"> </span><span class="crayon-t">NULL</span><span class="crayon-h"> </span><span class="crayon-e">PRIMARY </span><span class="crayon-i">KEY</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-64954036ef46d382337068-3"><span class="crayon-sy">.</span><span class="crayon-sy">.</span><span class="crayon-sy">.</span><span class="crayon-h">&gt;</span><span class="crayon-h"> </span><span class="crayon-e">name </span><span class="crayon-i">TEXT</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954036ef46d382337068-4"><span class="crayon-sy">.</span><span class="crayon-sy">.</span><span class="crayon-sy">.</span><span class="crayon-h">&gt;</span><span class="crayon-h"> </span><span class="crayon-e">details </span><span class="crayon-i">JSON</span></div><div class="crayon-line" id="crayon-64954036ef46d382337068-5"><span class="crayon-sy">.</span><span class="crayon-sy">.</span><span class="crayon-sy">.</span><span class="crayon-h">&gt;</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954036ef46d382337068-6"><span class="crayon-i">sqlite</span><span class="crayon-h">&gt;</span><span class="crayon-h"> </span><span class="crayon-e">INSERT </span><span class="crayon-e">INTO </span><span class="crayon-e">user </span><span class="crayon-e">VALUES</span><span class="crayon-sy">(</span><span class="crayon-cn">1</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">'Alice'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">'{ "age": 20, "tel": "0120-xxxxx-yyyy" }'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64954036ef46d382337068-7"><span class="crayon-i">sqlite</span><span class="crayon-h">&gt;</span><span class="crayon-h"> </span><span class="crayon-e">INSERT </span><span class="crayon-e">INTO </span><span class="crayon-e">user </span><span class="crayon-e">VALUES</span><span class="crayon-sy">(</span><span class="crayon-cn">2</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">'Bob'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">'{ "age": 30, "tel": "0120-xxxxx-zzzzz" }'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954036ef46d382337068-8"><span class="crayon-i">sqlite</span><span class="crayon-h">&gt;</span><span class="crayon-h"> </span><span class="crayon-e ">SELECT *</span><span class="crayon-h"> </span><span class="crayon-e">FROM </span><span class="crayon-i">user</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64954036ef46d382337068-9"><span class="crayon-cn">1</span><span class="crayon-sy">|</span><span class="crayon-i">Alice</span><span class="crayon-sy">|</span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-s">"age"</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">20</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">"tel"</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"0120-xxxxx-yyyy"</span><span class="crayon-h"> </span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954036ef46d382337068-10"><span class="crayon-cn">2</span><span class="crayon-sy">|</span><span class="crayon-i">Bob</span><span class="crayon-sy">|</span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-s">"age"</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">30</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">"tel"</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"0120-xxxxx-zzzzz"</span><span class="crayon-h"> </span><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>テストデータを上司に見せたところ、ユーザーの中で20歳の人だけを抽出したいと言われました。早速LIKE文を使ったSQLを書いてみますが、20歳ではないBobのデータの電話番号にも20が含まれているため、うまく絞り込めません。さて困ったぞ・・</p>

		<div id="crayon-64954036ef472812425792" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
sqlite&gt; SELECT * FROM user WHERE details LIKE '%20%';
1|Alice|{ "age": 20, "tel": "0120-xxxxx-yyyy" }
2|Bob|{ "age": 30, "tel": "0120-xxxxx-zzzzz" }</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64954036ef472812425792-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954036ef472812425792-2">2</div><div class="crayon-num" data-line="crayon-64954036ef472812425792-3">3</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64954036ef472812425792-1"><span class="crayon-i">sqlite</span><span class="crayon-h">&gt;</span><span class="crayon-h"> </span><span class="crayon-e ">SELECT *</span><span class="crayon-h"> </span><span class="crayon-e">FROM </span><span class="crayon-e">user </span><span class="crayon-e">WHERE </span><span class="crayon-e">details </span><span class="crayon-i">LIKE</span><span class="crayon-h"> </span><span class="crayon-s">'%20%'</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954036ef472812425792-2"><span class="crayon-cn">1</span><span class="crayon-sy">|</span><span class="crayon-i">Alice</span><span class="crayon-sy">|</span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-s">"age"</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">20</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">"tel"</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"0120-xxxxx-yyyy"</span><span class="crayon-h"> </span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-64954036ef472812425792-3"><span class="crayon-cn">2</span><span class="crayon-sy">|</span><span class="crayon-i">Bob</span><span class="crayon-sy">|</span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-s">"age"</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">30</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">"tel"</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"0120-xxxxx-zzzzz"</span><span class="crayon-h"> </span><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>こんなときはJSON関数を使いましょう。今回のケースだとJSON_EXTRACT関数が使えます。この関数はJSONから必要なフィールドだけを取り出せます。これを使って年齢のフィールドの値だけを取り出せば後は簡単です。</p>

		<div id="crayon-64954036ef474790071815" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
sqlite&gt; SELECT * FROM user WHERE JSON_EXTRACT(details, '$.age') = 20;
1|Alice|{ "age": 20, "tel": "0120-xxxxx-yyyy" }</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64954036ef474790071815-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954036ef474790071815-2">2</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64954036ef474790071815-1"><span class="crayon-i">sqlite</span><span class="crayon-h">&gt;</span><span class="crayon-h"> </span><span class="crayon-e ">SELECT *</span><span class="crayon-h"> </span><span class="crayon-e">FROM </span><span class="crayon-e">user </span><span class="crayon-e">WHERE </span><span class="crayon-e">JSON_EXTRACT</span><span class="crayon-sy">(</span><span class="crayon-i">details</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">'$.age'</span><span class="crayon-sy">)</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-cn">20</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954036ef474790071815-2"><span class="crayon-cn">1</span><span class="crayon-sy">|</span><span class="crayon-i">Alice</span><span class="crayon-sy">|</span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-s">"age"</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">20</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">"tel"</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"0120-xxxxx-yyyy"</span><span class="crayon-h"> </span><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>うまくいきました！めでたしめでたし。</p>
<h2>あとがき</h2>
<p>今回の例はSQLiteを使って作成しました。MySQL(5.7以降)でも同じ関数が使えるようです。その他のDBでは別の関数名で同等の機能が提供されていたりするため、各自でマニュアル等を確認いただければと思います。</p>
<p>参考情報：</p>
<p><a href="https://www.json.org/json-en.html">https://www.json.org/json-en.html</a><br />
<a href="https://www.sqlite.org/json1.html#jex">https://www.sqlite.org/json1.html#jex</a><br />
<a href="https://dev.mysql.com/doc/refman/8.0/ja/json-search-functions.html">https://dev.mysql.com/doc/refman/8.0/ja/json-search-functions.html</a></p>

large_sql-1024x352.jpeg

medium_sql-1024x352.jpeg

small_sql-1024x352.jpeg

thumbnail_sql-1024x352.jpeg

sql-1024x352.jpeg

JSONを取り扱うならNoSQL使うかしかないのか

<h3>はじめに</h3>
<p>別記事にてありましたがpugやsassが時代遅れとなってきた今、これから伸びて行くライブラリである「React」を実践に取り込んでいくために学ばないといけないと感じ、いくつかある書籍の中でこちらを選びました。</p>
<h3>「React」の習得に苦戦する理由は「JavaScript」への理解不足</h3>
<p>これは著者の方が前書きにて述べているのですがReactを学ぶ上でまずはJavascriptへの理解、学習順序を知っていないと挫折しやすいということでした。<br />
私もJavascriptがとても苦手で果たして挫折せず続けて学んでいけるのか最初は不安でした。<br />
結論、挫折せず続けていられています。</p>
<p>Reactの本ということですが、1章〜３章まではモダンJavascriptの歴史や記述方法などの基本的なことを段階的に知ることによってそれぞれがどのような働きをもっているのかということを理解しながら進めていくことが出来ます。<br />
この時点でwebサイトや他の本とは違い、ゴールに至るまでの過程を１つずつ手を動かしながら頭で理解しやすいと感じました。</p>
<h3>Reactの基礎を学ぶ</h3>
<p>ここまできてようやく４章からReactに入り始めます。<br />
Reactの基本であるJSX記述のルールから入り、コンポーネント、スタイルの扱い方、props、stateを順序立てて進めていけるように工程まで細かく記述されています。<br />
その為、全く触ったことがなかったにも関わらず実際に本の順序通り進めていくことで苦手意識もなく内容を学ぶことが出来ます。</p>
<p><img loading="lazy" class="aligncenter size-large wp-image-10748" src="/uploads-archive/lc/2022/06/7aa953cccf157c7557493a6e6fff0636-1024x414.png" alt="" width="1024" height="414" srcset="/uploads-archive/lc/2022/06/7aa953cccf157c7557493a6e6fff0636-1024x414.png 1024w, /uploads-archive/lc/2022/06/7aa953cccf157c7557493a6e6fff0636-300x121.png 300w, /uploads-archive/lc/2022/06/7aa953cccf157c7557493a6e6fff0636-768x311.png 768w, /uploads-archive/lc/2022/06/7aa953cccf157c7557493a6e6fff0636-600x243.png 600w, /uploads-archive/lc/2022/06/7aa953cccf157c7557493a6e6fff0636.png 1490w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<h3>CSSを絡めたReact</h3>
<p>CSSの適用方法はたくさんあり、一般的な「Inline Styles」から「CSS Modules」「Styled JSX」「styled components」「Emotion」最近よく他の方の記事でもみる「Tailwind CSS」等の各記述方法が詳しく記述されていました。</p>
<p><img loading="lazy" class="aligncenter size-large wp-image-10749" src="/uploads-archive/lc/2022/06/687c33dc62271d706a7df951e49b44ed-1024x392.png" alt="" width="1024" height="392" srcset="/uploads-archive/lc/2022/06/687c33dc62271d706a7df951e49b44ed-1024x392.png 1024w, /uploads-archive/lc/2022/06/687c33dc62271d706a7df951e49b44ed-300x115.png 300w, /uploads-archive/lc/2022/06/687c33dc62271d706a7df951e49b44ed-768x294.png 768w, /uploads-archive/lc/2022/06/687c33dc62271d706a7df951e49b44ed-600x230.png 600w, /uploads-archive/lc/2022/06/687c33dc62271d706a7df951e49b44ed-1536x588.png 1536w, /uploads-archive/lc/2022/06/687c33dc62271d706a7df951e49b44ed.png 1692w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p><img loading="lazy" class="aligncenter size-large wp-image-10750" src="/uploads-archive/lc/2022/06/eb476f4fb849998f1945f74eb41e91b3-1024x115.png" alt="" width="1024" height="115" srcset="/uploads-archive/lc/2022/06/eb476f4fb849998f1945f74eb41e91b3-1024x115.png 1024w, /uploads-archive/lc/2022/06/eb476f4fb849998f1945f74eb41e91b3-300x34.png 300w, /uploads-archive/lc/2022/06/eb476f4fb849998f1945f74eb41e91b3-768x86.png 768w, /uploads-archive/lc/2022/06/eb476f4fb849998f1945f74eb41e91b3-600x67.png 600w, /uploads-archive/lc/2022/06/eb476f4fb849998f1945f74eb41e91b3.png 1055w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<h3>再レンダリングの仕組みと最適化</h3>
<p>再レンダリングが起きる条件<br />
・Stateが更新されたコンポーネント<br />
・Propsが更新されたコンポーネント<br />
・再レンダリングされたコンポーネント配下のコンポーネント<br />
階層としてイメージすると上の階層にあるコンポーネントが再レンダリングされた時はそれ以下のコンポーネントも同じように際レンダリングされます。<br />
しかし、これらが大きいものになると毎回無駄な際レンダリングによってパフォーマンスの低下に繋がってしまいます。</p>
<p>そこでコンポーネントのメモ化（カッコで囲む）をすることで親のコンポーネントが再レンダリングしても子のコンポーネントの再レンダリングを防ぐことが可能です。</p>
<p><img loading="lazy" class="aligncenter size-large wp-image-10751" src="/uploads-archive/lc/2022/06/30336e0a445cdcc4023bf454f3afdd61-1024x459.png" alt="" width="1024" height="459" srcset="/uploads-archive/lc/2022/06/30336e0a445cdcc4023bf454f3afdd61-1024x459.png 1024w, /uploads-archive/lc/2022/06/30336e0a445cdcc4023bf454f3afdd61-300x134.png 300w, /uploads-archive/lc/2022/06/30336e0a445cdcc4023bf454f3afdd61-768x344.png 768w, /uploads-archive/lc/2022/06/30336e0a445cdcc4023bf454f3afdd61-600x269.png 600w, /uploads-archive/lc/2022/06/30336e0a445cdcc4023bf454f3afdd61.png 1402w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p><img loading="lazy" class="aligncenter size-large wp-image-10752" src="/uploads-archive/lc/2022/06/8fa19cb3650708f4d12c64c0ca311e46-1024x460.png" alt="" width="1024" height="460" srcset="/uploads-archive/lc/2022/06/8fa19cb3650708f4d12c64c0ca311e46-1024x460.png 1024w, /uploads-archive/lc/2022/06/8fa19cb3650708f4d12c64c0ca311e46-300x135.png 300w, /uploads-archive/lc/2022/06/8fa19cb3650708f4d12c64c0ca311e46-768x345.png 768w, /uploads-archive/lc/2022/06/8fa19cb3650708f4d12c64c0ca311e46-600x270.png 600w, /uploads-archive/lc/2022/06/8fa19cb3650708f4d12c64c0ca311e46.png 1233w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<h3>まとめ</h3>
<p>まだもう少し本の内容的には続きがありますがここまでこの本を使ってきて、１つ１つの工程やそれらの意味をしっかりと理解することで苦手と感じていたものもそうではなく感じるようになってくることから、何事も基礎の部分を丁寧に理解していくことの重要性を感じました。JavascriptやReactに限らず、苦手と思っていた分野に向き合うためには初心に戻ってみるということも必要だと思いました。</p>
<p>&nbsp;</p>
<h4>【書籍紹介】</h4>
<p>モダンJavaScriptの基本から始める React実践の教科書 (最新ReactHooks対応) (Informatics&amp;IDEA)</p>
<p><iframe loading="lazy" title="モダンJavaScriptの基本から始める React実践の教科書 (最新ReactHooks対応) (Informatics&amp;IDEA)" type="text/html" width="500" height="550" frameborder="0" allowfullscreen style="max-width:100%" src="https://read.amazon.com.au/kp/card?preview=inline&#038;linkCode=kpd&#038;ref_=k4w_oembed_TWIT67ppMweYc5&#038;asin=481561072X&#038;tag=kpembed-20"></iframe></p>


【書籍紹介】挫折しない！？基本から学べるReact実践の教科書とは

【React】Dexie.jsでIndexedDBを使ってみました

<p>多くのカートでは休日を設定できます。</p>
<p>カレンダーを表示して問い合わせなどの対応可能日時を伝えるというような内容に加え、バックエンドでは休日には発送処理ができないので、お届け日や発送日といったシステムで使用する日付の調整に使っています。</p>
<p>日本国内だけの運用であれば簡単なのですが、越境ECや海外でのECの場合、更にはその組み合わせや複数国にまたがって在庫を置いている場合などは各国ごとの休日を管理する必要があります。</p>
<p>日本にいるとあまり感じることはありませんが、国によっては休日は複雑で、例えば州によって異なったり、年によって祝日の日程が変化したりなどの事情があります。</p>
<p>カートとしてはそれらを自動登録できるとユーザーにとって使いやすいですが、それらの情報をリアルタイムで正しく知る必要があります。今回はそれを解決できるサービスを検証し5つ選定しました。</p>
<p>&nbsp;</p>
<table>
<tbody>
<tr>
<th>サービス名</th>
<th>年額</th>
<th>リクエスト数</th>
<th>対応国数</th>
<th>対応地域数</th>
</tr>
<tr>
<td><a href="https://holidayapi.com/" target="_blank" rel="noopener">Holiday API</a></td>
<td>349USD</td>
<td>無制限</td>
<td>250</td>
<td>3680</td>
</tr>
<tr>
<td><a href="https://calendarific.com/" target="_blank" rel="noopener">CALENDARIFIC</a></td>
<td>300USD</td>
<td>無制限</td>
<td>230</td>
<td>3300</td>
</tr>
<tr>
<td><a href="https://getfestivo.com/" target="_blank" rel="noopener">festivo</a></td>
<td>599USD</td>
<td>100万</td>
<td>231</td>
<td>1737</td>
</tr>
<tr>
<td><a href="https://dev.timeanddate.com/holidays/" target="_blank" rel="noopener">dev.timeanddate.com</a></td>
<td>999USD</td>
<td>50万</td>
<td>230</td>
<td>?</td>
</tr>
<tr>
<td><a href="https://developers.google.com/calendar/api" target="_blank" rel="noopener">Google Calendar API</a></td>
<td>無料</td>
<td>100万</td>
<td>79</td>
<td>?</td>
</tr>
</tbody>
</table>
<p>&nbsp;</p>
<p>多数の国、地域に対応する場合はHoliday APIが最もコスパが良さそうです。</p>
<p>Google Calendar APIは無料ですがGoogle Calenderがサービス展開している79カ国でしか使用できないのと、地域での区分がありませんでした。簡易的に使用するのでGoogle Calendar APIが最も良さそうです。</p>
<p>&nbsp;</p>


世界の休日を取得できるAPI5選

覚えておいて損はない？モダンcssを使用した要素の中央揃え

<p>最近GitHubを触る機会が多くなって、日々利用しているので、今日はGitHubのショットカットキーを紹介したいと思います。</p>
<h2>s または /</h2>
<p>左上にある検索バーでリポジトリの検索ができますが、キーボードから「s」または「/」を押すと検索バーが活性化されます。訪問したリポジトリがプルダウンに出てくるので方向キーでナビゲーションすることもできますし、キーワードを入れて検索することもできます。</p>
<p><img loading="lazy" class="alignnone wp-image-10620 size-medium" src="/uploads-archive/lc/2022/05/808e2fbc7f1dd11cbf791f155145c637-300x35.png" alt="" width="300" height="35" srcset="/uploads-archive/lc/2022/05/808e2fbc7f1dd11cbf791f155145c637-300x35.png 300w, /uploads-archive/lc/2022/05/808e2fbc7f1dd11cbf791f155145c637-1024x121.png 1024w, /uploads-archive/lc/2022/05/808e2fbc7f1dd11cbf791f155145c637-768x90.png 768w, /uploads-archive/lc/2022/05/808e2fbc7f1dd11cbf791f155145c637-600x71.png 600w, /uploads-archive/lc/2022/05/808e2fbc7f1dd11cbf791f155145c637.png 1070w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<h2>w</h2>
<p>リポジトリで、「w」を押すとブランチ/タグ切り替えにフォーカスします。</p>
<p><img loading="lazy" class="alignnone size-medium wp-image-10621" src="/uploads-archive/lc/2022/05/3dff6abff98e14c238cfeff51a2227f0-300x204.png" alt="" width="300" height="204" srcset="/uploads-archive/lc/2022/05/3dff6abff98e14c238cfeff51a2227f0-300x204.png 300w, /uploads-archive/lc/2022/05/3dff6abff98e14c238cfeff51a2227f0-600x409.png 600w, /uploads-archive/lc/2022/05/3dff6abff98e14c238cfeff51a2227f0.png 716w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<h2>t</h2>
<p>リポジトリで、色々ファイルを確認できますが、一つずつクリックして確認するよりは、キーボードから「t」を押すとファイルファインダーが開きます。Tipにも出た通り方向キーやEnterキー、キーワード検索を利用して、キーボードのみで便利に使えます。</p>
<p><img loading="lazy" class="alignnone wp-image-10622 size-medium" src="/uploads-archive/lc/2022/05/222694e95e13c5432a95585c04319c28-300x139.png" alt="" width="300" height="139" srcset="/uploads-archive/lc/2022/05/222694e95e13c5432a95585c04319c28-300x139.png 300w, /uploads-archive/lc/2022/05/222694e95e13c5432a95585c04319c28-1024x476.png 1024w, /uploads-archive/lc/2022/05/222694e95e13c5432a95585c04319c28-768x357.png 768w, /uploads-archive/lc/2022/05/222694e95e13c5432a95585c04319c28-600x279.png 600w, /uploads-archive/lc/2022/05/222694e95e13c5432a95585c04319c28-1536x714.png 1536w, /uploads-archive/lc/2022/05/222694e95e13c5432a95585c04319c28-2048x952.png 2048w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<h2>.(dot)</h2>
<p>リポジトリで(ブランチを選択し)、「.」を押すと、Codespaces(コードスペース)が開きます。</p>
<p><img loading="lazy" class="alignnone size-medium wp-image-10623" src="/uploads-archive/lc/2022/05/290c0e556a96b384997b69d39dfc6e75-300x42.png" alt="" width="300" height="42" srcset="/uploads-archive/lc/2022/05/290c0e556a96b384997b69d39dfc6e75-300x42.png 300w, /uploads-archive/lc/2022/05/290c0e556a96b384997b69d39dfc6e75-600x84.png 600w, /uploads-archive/lc/2022/05/290c0e556a96b384997b69d39dfc6e75.png 718w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<h2><span class="notion-enable-hover" data-token-index="1" data-reactroot="">⌘</span> + k (Mac) / Ctrl + k (Windows)</h2>
<p>こちらでcommand palette（コマンドパレット）が出てきます。</p>
<p>コマンドパレットを使用することにより、リポジトリや組織、プルリクエスト、issue、プロジェクト、ファイルなどを検索して素早く移動できます。検索する時は必要に応じて以下+キーワードを入れてください。</p>
<ul>
<li><code>「#」</code>   issue、プルリクエスト、ディスカッション、プロジェクトを検索する</li>
<li><code>「!」</code>   プロジェクトを検索する</li>
<li><code>「/」</code>  リポジトリスコープ内のファイルを検索する</li>
<li><code>「&gt;」</code>   コマンドモードに入る</li>
<li><code>「@」</code>   ユーザー、組織、およびリポジトリを検索する</li>
</ul>
<p>コマンドパレットはまだベータ版なので今後変更事項はありそうです。</p>
<p><img loading="lazy" class="alignnone size-medium wp-image-10624" src="/uploads-archive/lc/2022/05/04adeea8c72fbf371d165fd81841f632-300x161.png" alt="" width="300" height="161" srcset="/uploads-archive/lc/2022/05/04adeea8c72fbf371d165fd81841f632-300x161.png 300w, /uploads-archive/lc/2022/05/04adeea8c72fbf371d165fd81841f632-1024x551.png 1024w, /uploads-archive/lc/2022/05/04adeea8c72fbf371d165fd81841f632-768x413.png 768w, /uploads-archive/lc/2022/05/04adeea8c72fbf371d165fd81841f632-600x323.png 600w, /uploads-archive/lc/2022/05/04adeea8c72fbf371d165fd81841f632-1536x826.png 1536w, /uploads-archive/lc/2022/05/04adeea8c72fbf371d165fd81841f632-2048x1102.png 2048w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<h3>まとめ</h3>
<p>以上GitHubのショットカットキー５選でした。</p>
<p>他に、キーボードで「?」を押すと、そのページで使えるショットカットキー一覧が出てくるので、色々確認できます。</p>
<p>クリックして探すよりは地味に効率上がりますので、使ってない方は使ってみてください〜</p>


すぐ使えるGitHubのショットカットキー５選

medium_スクリーンショット-2022-05-13-10.33.24-768x321.png

small_スクリーンショット-2022-05-13-10.33.24-768x321.png

thumbnail_スクリーンショット-2022-05-13-10.33.24-768x321.png

スクリーンショット-2022-05-13-10.33.24-768x321.png

GraphQL Code GeneratorでGraphQlのschemaからTypescriptの型定義を生成する方法

small_unnamed.png

thumbnail_unnamed.png

unnamed.png

Firebase CLIなしでFirestoreをローカル環境のテストで利用する

<h2>まず:has()とは</h2>
<p>CSS4で新たに定義される擬似クラスの１つで、引数として渡されるセレクタに一致する要素が1つ以上ある要素を表します。<br />
これは指定した要素を含む要素を選択するセレクタで、つまり要素の関連によって要素を選択できます。<br />
今まではJavaScriptsのみでしかできませんでしたが:has()を使う事で引数の要素を含んでいるかをCSSで判別できるようになります。</p>
<p>2022年4月段階ではまだ開発段階で殆どのwebブラウザには対応していませんがSafariではバージョン Safari15.4からmaxOSとiOSでサポートされています。</p>
<p><img loading="lazy" class="aligncenter size-large wp-image-10281" src="/uploads-archive/lc/2022/04/dc50524f627d848d38a200719e685fec-1024x587.png" alt="" width="1024" height="587" srcset="/uploads-archive/lc/2022/04/dc50524f627d848d38a200719e685fec-1024x587.png 1024w, /uploads-archive/lc/2022/04/dc50524f627d848d38a200719e685fec-300x172.png 300w, /uploads-archive/lc/2022/04/dc50524f627d848d38a200719e685fec-768x441.png 768w, /uploads-archive/lc/2022/04/dc50524f627d848d38a200719e685fec-600x344.png 600w, /uploads-archive/lc/2022/04/dc50524f627d848d38a200719e685fec.png 1400w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<h2>:has()の使用例</h2>
<p>&lt;a&gt; 要素のうち直接 &lt;img&gt; を含んでいるものを選択<br />
次のセレクターは、 &lt;img&gt; を直接子に持つ &lt;a&gt; 要素のみを選択します。</p>

		<div id="crayon-64d1a7a2c7765083410771" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 18px !important; line-height: 18px !important;"></div>
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
a:has(&gt; img)</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-64d1a7a2c7765083410771-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64d1a7a2c7765083410771-1"><span class="crayon-i">a</span><span class="crayon-sy">:</span><span class="crayon-e">has</span><span class="crayon-sy">(</span><span class="crayon-h">&gt;</span><span class="crayon-h"> </span><span class="crayon-i">img</span><span class="crayon-sy">)</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&lt;h1&gt; 要素のうち直後に &lt;p&gt; があるものを選択</p>
<p>次のセレクターは、直後に &lt;p&gt; 要素を持つ &lt;h2&gt; 要素のみfont-size:30pxにします。</p>

		<div id="crayon-64d1a7a2c776b441646392" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 18px !important; line-height: 18px !important;"></div>
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
h2:has(+p){
font-size:30px;
}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-64d1a7a2c776b441646392-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64d1a7a2c776b441646392-2">2</div><div class="crayon-num" data-line="crayon-64d1a7a2c776b441646392-3">3</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64d1a7a2c776b441646392-1"><span class="crayon-i">h2</span><span class="crayon-sy">:</span><span class="crayon-e">has</span><span class="crayon-sy">(</span>+<span class="crayon-i">p</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64d1a7a2c776b441646392-2"><span class="crayon-i">font</span>-<span class="crayon-i">size</span><span class="crayon-sy">:</span><span class="crayon-cn">30px</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64d1a7a2c776b441646392-3"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>.contentsBoxの中に.itemが含まれている場合</p>

		<div id="crayon-64d1a7a2c776e856889063" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 18px !important; line-height: 18px !important;"></div>
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
.contentsBox:has(.item){
}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-64d1a7a2c776e856889063-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64d1a7a2c776e856889063-2">2</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64d1a7a2c776e856889063-1"><span class="crayon-sy">.</span><span class="crayon-i">contentsBox</span><span class="crayon-sy">:</span><span class="crayon-e">has</span><span class="crayon-sy">(</span><span class="crayon-sy">.</span><span class="crayon-i">item</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64d1a7a2c776e856889063-2"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>逆に</p>

		<div id="crayon-64d1a7a2c7771662105320" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 18px !important; line-height: 18px !important;"></div>
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
.contentsBox:not(:has(.item))</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-64d1a7a2c7771662105320-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64d1a7a2c7771662105320-1"><span class="crayon-sy">.</span><span class="crayon-i">contentsBox</span><span class="crayon-sy">:</span><span class="crayon-st">not</span><span class="crayon-sy">(</span><span class="crayon-sy">:</span><span class="crayon-e">has</span><span class="crayon-sy">(</span><span class="crayon-sy">.</span><span class="crayon-i">item</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>とすると.contentsBoxの中に.itemが含まれていない場合となる。</p>
<p>&nbsp;</p>
<p>Googleデベロッパーによるデモのツイート↓</p>
<blockquote class="twitter-tweet">
<p dir="ltr" lang="en">:has() + container queries = the component-based logical styling we&#8217;ve always dreamed of 😍</p>
<p>In this demo:<br />
🖼 If the card has an image: make the font smaller &amp; at &lt; 400px wide, stack it<br />
✨ If no image: bigger font, no stacking<a href="https://t.co/UJuXCXUrvV">https://t.co/UJuXCXUrvV</a></p>
<p>⚠️ Need flags on in Canary <a href="https://t.co/ThhPLHDWak">pic.twitter.com/ThhPLHDWak</a></p>
<p>— una.css 👩🏻‍💻🇺🇦 (@Una) <a href="https://twitter.com/Una/status/1510357767453818881?ref_src=twsrc%5Etfw">April 2, 2022</a></p></blockquote>
<p><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script></p>
<p>CSS4で追加予定とのことでまだまだ実用段階ではありませんが親要素に対して指定したりできるようになる事でこれが実装された際にはだいぶ効率化できそうだなと感じました。</p>

これから実装？新しい擬似クラス「:has()」とは？

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - カテゴリー: 開発ナレッジ

2022/09/21

2022/09/21

2022/09/09

2022/09/02

2022/08/26

2022/08/06

2022/08/06

2022/07/29

2022/07/09

2022/06/25

2022/06/17

2022/06/02

2022/05/20

2022/05/20

2022/05/20

2022/05/13

2022/04/23

2022/04/16