<p>最近のシステム開発ではGitを使うことが一般的になってきました。<br />
実際、スターフィールドでもほぼすべての案件でGitを活用しています。</p>
<p>しかし、Gitは覚えることが多く仕組みも複雑なため、これからGitを使い始める人にとっては高いハードルになっているでしょう。<br />
私も初めてGitを使った時は何がなんだかさっぱりわかりませんでした。</p>
<p>この記事では</p>
<ul>
<li>これからGitを使い始めるけど、用語とか仕組みが全然わからない！</li>
<li>名前はなんとなく聞いたことあるけど、どんなものなのかわからない！</li>
</ul>
<p>という人向けに、基本的な用語や仕組みを重点的に説明します。</p>
<h2>そもそもGitとはどういうものなのか？</h2>
<p>Gitは、ざっくり言うとファイルを「いつ・誰が・どこを・どのように」編集したかを管理するツールです。</p>
<p>ファイルの変更履歴を管理するツールは昔から多数存在しますが、Gitはそのツールの中でも分散型バージョン管理システムという分類にあたります。<br />
分散型バージョン管理システムの特徴は、各自のPCにファイルを持ち、自分の好きなタイミングで編集内容を同期(プッシュやプル)できることです。<br />
同期さえしなければ、どんなにファイルを編集したり削除しても別の作業者に影響しないというメリットがあります。<br />
そのため、Gitは複数人で開発をする際に多く利用されています。</p>
<p>また、集中型バージョン管理システムというものも存在し、CVS・Subversionなどがこれに該当します。<br />
これらは編集が完了したらすぐに作業者全員に共有されるので、誤った変更内容を登録すると作業者全員に影響を与えてしまいます。</p>
<h2>GitとGitHubの違い</h2>
<p>Gitを使う際に、GitHubもセットで登場してくることが多いので混同する方もいると思いますが、GitとGitHubは同じものではありません！<br />
上記で述べたように、Gitは分散型バージョン管理システムというツールです。<br />
一方でGitHubはGitの仕組みを利用した、開発支援をしてくれるwebサービスです。<br />
Gitは「システム」でGitHubは「サービス」のような関係にあたります。<br />
「メール」というシステムにおける「Gmail」というサービス、「動画」というシステムにおける「YouTube」というサービス、といったような関係と同じものです。</p>
<h2>Gitの仕組み</h2>
<p>Gitは以下のような構造でファイルの変更履歴を管理しています。</p>
<p><img loading="lazy" class="alignnone size-medium wp-image-11600" src="/uploads-archive/lc/2023/03/5135bc1d47ef31711ee94ad1dd2aea87-300x225.png" alt="" width="600" height="450" srcset="/uploads-archive/lc/2023/03/5135bc1d47ef31711ee94ad1dd2aea87-300x225.png 300w, /uploads-archive/lc/2023/03/5135bc1d47ef31711ee94ad1dd2aea87-768x576.png 768w, /uploads-archive/lc/2023/03/5135bc1d47ef31711ee94ad1dd2aea87-600x450.png 600w, /uploads-archive/lc/2023/03/5135bc1d47ef31711ee94ad1dd2aea87.png 960w" sizes="(max-width: 600px) 100vw, 600px" /></p>
<p>用語と仕組みを説明していきます。</p>
<h3>リポジトリ（repository）</h3>
<p>ファイルやディレクトリを保存している場所のことです。<br />
変更履歴もリポジトリに保存しています。<br />
リポジトリには以下の2種類があります。</p>
<h4>リモートリポジトリ（remote repository）</h4>
<p>主にサーバー上にあるリポジトリで、作業者全員の編集内容を共有するためのリポジトリです。<br />
各PCで行った編集内容を取りまとめしているリポジトリです。<br />
GitHubなどのサービスを利用することで、誰でも簡単にリモートリポジトリを作成できます。</p>
<h4>ローカルリポジトリ（local repository）</h4>
<p>自分のPC上にあるリポジトリです。<br />
作業者はこのリポジトリに対して編集します。</p>
<h3>クローン（clone）</h3>
<p>一言で言うと「ダウンロード」に近い機能です。<br />
リモートリポジトリから、自分のPCにローカルリポジトリを作成します。<br />
ほとんどの場合、Gitで最初に行う作業となります。</p>
<h3>プル（pull）</h3>
<p>リモートリポジトリにある最新の変更内容をローカルリポジトリに反映する機能です。<br />
クローンと少し似ている機能ですが、クローンはリモートリポジトリの内容をすべてダウンロードするのに対し、プルはローカルリポジトリに反映されていない最新の変更内容のみをダウンロードします。</p>
<h3>フェッチ（fetch）</h3>
<p>リモートリポジトリにある最新の変更履歴をローカルリポジトリに反映する機能です。<br />
プルと少し似ている機能ですが、プルは変更内容も反映するのに対し、フェッチは変更履歴のみを反映します。</p>
<h3>プッシュ（push）</h3>
<p>一言で言うと「アップロード」に近い機能です。<br />
ローカルリポジトリの変更内容をリモートリポジトリに反映します。<br />
プッシュを行うことで、自分の変更内容をリモートリポジトリに反映し、別の作業者がプルすることで自分の変更を別の作業者に反映できます。</p>
<h2>コミット（commit）</h2>
<p>ゲームで例えると「セーブ」のような機能です。<br />
コミットを実行することで、ファイルの変更履歴をローカルリポジトリに記録できます。<br />
また、コミットメッセージを記入すれば、このコミットでどのような変更をしたかなどを記録できます。</p>
<p><img loading="lazy" class="alignnone size-medium wp-image-11601" src="/uploads-archive/lc/2023/03/8fdcc7d29d3c66ae37c29c8503f30619-300x123.png" alt="" width="600" height="246" srcset="/uploads-archive/lc/2023/03/8fdcc7d29d3c66ae37c29c8503f30619-300x123.png 300w, /uploads-archive/lc/2023/03/8fdcc7d29d3c66ae37c29c8503f30619-768x315.png 768w, /uploads-archive/lc/2023/03/8fdcc7d29d3c66ae37c29c8503f30619-600x246.png 600w, /uploads-archive/lc/2023/03/8fdcc7d29d3c66ae37c29c8503f30619.png 957w" sizes="(max-width: 600px) 100vw, 600px" /></p>
<p>コミットを行わないと編集した内容がローカルリポジトリに適用されず残り続けてしまうので、編集が完了したら忘れずにコミットしましょう！</p>
<p>&nbsp;</p>
<p>さらに、コミットする前段階に「ワークツリー」と「インデックス」というものがあります。<br />
コミットするためには、以下のような段階を踏む必要があります。</p>
<p><img loading="lazy" class="alignnone size-medium wp-image-11602" src="/uploads-archive/lc/2023/03/2e1d56395b7836f2c7e7eefd0a2aadf5-300x111.png" alt="" width="600" height="222" srcset="/uploads-archive/lc/2023/03/2e1d56395b7836f2c7e7eefd0a2aadf5-300x111.png 300w, /uploads-archive/lc/2023/03/2e1d56395b7836f2c7e7eefd0a2aadf5-768x283.png 768w, /uploads-archive/lc/2023/03/2e1d56395b7836f2c7e7eefd0a2aadf5-600x221.png 600w, /uploads-archive/lc/2023/03/2e1d56395b7836f2c7e7eefd0a2aadf5.png 950w" sizes="(max-width: 600px) 100vw, 600px" /></p>
<h3>ワークツリー</h3>
<p>現在編集中の内容を仮置きしている場所です。<br />
ワークツリー内にある変更内容はコミットされないので、コミットしたい変更内容をインデックスに登録(add)する必要があります。</p>
<h3>インデックス</h3>
<p>コミットする変更内容を仮置きしている場所です。</p>
<p>&nbsp;</p>
<p>なぜこのような機能があるかというと</p>
<ul>
<li>この変更、まだ途中だから今はコミットしたくない</li>
<li>この変更は複数のコミットに分けたい</li>
</ul>
<p>という時に、変更した一部分だけコミットできるようにするためです。<br />
使い慣れるととても便利な機能なので、ワークツリーとインデックスを積極的に活用していきましょう！</p>
<h2>ブランチ（branch）</h2>
<p>感覚的な例えになってしまいますが、「パラレルワールド」のようなことを実現できます。<br />
以下のように、ファイルの変更内容を分岐させて記録できます。</p>
<p><img loading="lazy" class="alignnone size-medium wp-image-11603" src="/uploads-archive/lc/2023/03/a7532ee5b4e19612918b9757dcfbf02d-300x120.png" alt="" width="600" height="240" srcset="/uploads-archive/lc/2023/03/a7532ee5b4e19612918b9757dcfbf02d-300x120.png 300w, /uploads-archive/lc/2023/03/a7532ee5b4e19612918b9757dcfbf02d-1024x410.png 1024w, /uploads-archive/lc/2023/03/a7532ee5b4e19612918b9757dcfbf02d-768x308.png 768w, /uploads-archive/lc/2023/03/a7532ee5b4e19612918b9757dcfbf02d-600x240.png 600w, /uploads-archive/lc/2023/03/a7532ee5b4e19612918b9757dcfbf02d.png 1028w" sizes="(max-width: 600px) 100vw, 600px" /></p>
<p>なぜこのような機能があるかというと、複数人で開発する際にありがちな</p>
<ul>
<li>別の人が変更した内容のせいで自分の修正した箇所が動かなくなった・・・</li>
<li>同じファイルを複数人で編集したせいで、変更内容が消えた・・・</li>
</ul>
<p>という問題を防ぐためにあります。</p>
<p>&nbsp;</p>
<p>ブランチを作成することによって、別のブランチでコミットした内容に影響されず開発を進めることができ、作業の効率化を図ることができます。</p>
<p>また、自分のブランチでコミットした内容は別のブランチでは影響がないため、自分のコミットした内容に不具合があっても別の作業者に迷惑をかける心配もありません。</p>
<p>スターフィールドでは、機能の追加や不具合の修正などの作業単位でブランチを分けることが多いです。</p>
<p>複数人で開発する際は積極的にブランチを利用することをお勧めします！</p>
<h3>マージ（merge）</h3>
<p>2つのブランチでコミットした変更内容を統合させる機能です。<br />
以下のように、機能追加のため切り分けたブランチで作業が完了し、メインのブランチに変更内容を適用する際にこの機能を利用します。</p>
<p><img loading="lazy" class="alignnone size-medium wp-image-11604" src="/uploads-archive/lc/2023/03/c0731fa21e459a7fcbc6fb0c07356808-300x85.png" alt="" width="600" height="170" srcset="/uploads-archive/lc/2023/03/c0731fa21e459a7fcbc6fb0c07356808-300x85.png 300w, /uploads-archive/lc/2023/03/c0731fa21e459a7fcbc6fb0c07356808-1024x291.png 1024w, /uploads-archive/lc/2023/03/c0731fa21e459a7fcbc6fb0c07356808-768x218.png 768w, /uploads-archive/lc/2023/03/c0731fa21e459a7fcbc6fb0c07356808-600x171.png 600w, /uploads-archive/lc/2023/03/c0731fa21e459a7fcbc6fb0c07356808.png 1027w" sizes="(max-width: 600px) 100vw, 600px" /></p>
<h3>コンフリクト（conflict）</h3>
<p>同じファイルの同じ箇所を変更したブランチをマージする際に起きる現象です。</p>
<p>コンフリクトを解消しないと、マージできません。</p>
<p>コンフリクトが多発すると作業効率が落ちてしまうので、できるだけコンフリクトを起こさないようにしましょう！</p>
<p>できるだけ他の作業者が変更している、または変更しそうなファイルはいじらないようにすればコンフリクトは抑えられます。</p>
<h2>その他Gitの便利機能</h2>
<p>私がよく使っているGitの機能を紹介します。</p>
<h3>リバート（revert）</h3>
<p>特定のコミットで変更した内容を打ち消すコミットを作成します。</p>
<p>この機能を使うことによって、特定のコミットの変更を無かったことにできます。</p>
<h3>アメンド（amend）</h3>
<p>1つ前のコミット内容とコミットメッセージを修正する機能です。</p>
<p>コミットし忘れたファイルがあったり、コミットメッセージに誤字があった時に修正できます。</p>
<p>プッシュ済みのコミットや2つ以降前のコミットには使えないので注意が必要です。</p>
<h3>スタッシュ（stash）</h3>
<p>コミットしていない変更内容を「一時退避」する機能です。</p>
<p>今の作業を中断して別の作業をする時などに、今の変更内容はとっておきたいけど一旦無かったことにしたい時に便利です。</p>
<h2>まとめ</h2>
<p>この記事では、Gitを活用するために必要な用語と仕組みを紹介しました。</p>
<p>Gitはプログラム開発などを行うエンジニアにとっては必須のスキルになりつつあるので、ぜひ身につけておきましょう！</p>
<h2>参考にさせていただいたサイト</h2>
<p><a href="https://tcd-theme.com/2019/12/what-is-Git.html">https://tcd-theme.com/2019/12/what-is-Git.html</a></p>
<p><a href="https://www.i3design.jp/in-pocket/3111#GitHub%E3%81%A8%E3%81%AF%EF%BC%9F">https://www.i3design.jp/in-pocket/3111#GitHub%E3%81%A8%E3%81%AF%EF%BC%9F</a></p>
<p>&nbsp;</p>


Gitとは何か？

CSS Selectors Level 4 は2023.01月時点でどこまで利用できるのか？

【JavaScript】配列・オブジェクトの参照渡し&amp;コピーをクイズで理解する【React】

<p>Webサイトのレイアウト方法にグリッドレイアウト（display:grid）という方法があります。以前この方法について記事を書きました。</p>
<p>簡単に言うと、画面上に透明のマス目を作り、各コンテンツに座標を指定して配置するという方法です。<br />
グリッドレイアウトより以前に普及していたフレックスボックス（display:flex）と比べると、複雑なレイアウトを作ることができるという利点があります。</p>
<p>以前このやり方を調べて記事にしましたが、その後、この方法が有効に機能する案件がありました。</p>
<h2>この記事で伝えたいこと</h2>
<p>グリッドレイアウトは複雑なレイアウトを作れるというメリットがありますが、実は使う機会は少ないです。何故なら、近年はスマホでホームページを見る人が殆どです。</p>
<p>スマホの画面で見やすいホームページを意識すると、コンテンツはスマホの画面いっぱいに広がり、縦一列に並ぶ物が多くなります。</p>
<p>そのため、大半の制作案件は</p>
<p><strong>・パソコン版ではイメージ画像とテキストを横に並べる。<br />
・スマホ版は縦に一列に変更する。</strong></p>
<p>という単調な物が多く、わざわざグリッドレイアウトを使う必要がないケースが多いです。</p>
<p>しかし、その中でグリッドレイアウトを使用することでレスポンシブWEBデザインで作成するのに最適な機会がありましたので記事にしました。</p>
<h2>実際に担当した案件</h2>
<p>私が担当した案件でホームページのリニューアルするプロジェクトがあり、そのWebサイトのコーディングを担当しました。その際、デザイナーさんよりいただいたデザインは、ヘッダー部分は図1のようにコンテンツが配置されていました。</p>
<p>図1<br />
<img loading="lazy" class="alignnone size-medium wp-image-11056" src="/uploads-archive/lc/2023/01/230120_1.png" alt="" width="640" height="" /></p>
<p>ヘッダーのコンテンツがかなりあり、スペースが狭いデザインです。そこで、作成方法として図2のように</p>
<p>図2<br />
<img loading="lazy" class="alignnone size-medium wp-image-11056" src="/uploads-archive/lc/2023/01/230120_2.png" alt="" width="640" height="" /></p>
<p><strong>・AとBという枠を作って、ロゴとコンテンツを左右に分ける。<br />
・次にB枠の中でB-a、B-bという上下の枠に分ける。<br />
・上段のB-aの中で更に、No1、No2、No3のコンテンツに分けて配置する。</strong></p>
<p>という予定を立てました。</p>
<p>しかし、スマホ版のデザインを見て、この予定は崩れてしまいました。</p>
<p>スマホ版のデザインはヘッダーの左側にロゴ、右側にはよくある３本線のメニューアイコンが配置され、メニューアイコンを押すと、Bの部分が画面いっぱいに広がり、図3のようにレイアウトする指示がありました。</p>
<p>図3<br />
<img loading="lazy" class="alignnone size-medium wp-image-11056" src="/uploads-archive/lc/2023/01/230120_3.png" alt="" width="640" height="" /></p>
<p>コンテンツの並び順はNo1、B-b、No2、No3の並びになります。</p>
<p>WEBページは原則として、HTMLを記述した順番通りに表示されます。フレックスボックスでその順番の制御ができますが、並び替えできるのは各々の枠の中の並び順だけです。<br />
つまり、<br />
<strong><br />
・B-aとB-bの順番を逆にする。<br />
・B-a内でNo1～No3の順番を変える。<br />
・B-b内でメニューの順番を変える。</strong></p>
<p>などの変化しかできません。</p>
<p>もし、フレックスボックスでこのデザインを作成するには、パソコン版とスマホ版のそれぞれのヘッダーコンテンツを作り、パソコンではスマホのコンテンツを、スマホではパソコンのコンテンツを非表示にする。</p>
<p>という方法で作成します。</p>
<p>しかし、後の更新など運用の手間を考えるとパソコンとスマホで共通のコンテンツを使った方がいいです。この解決策としてグリッドレイアウトが役立ちました。</p>
<h2>具体的な方法</h2>
<p>先ず図4のように</p>
<p>図4<br />
<img loading="lazy" class="alignnone size-medium wp-image-11056" src="/uploads-archive/lc/2023/01/230120_4.png" alt="" width="640" height="" /></p>
<p><strong><br />
・B枠を4列2行のグリッドレイアウトの枠にする<br />
・B-a、B-bという区切りを辞めて、B-bもB枠直下のコンテンツ変更する。<br />
・1行目は、「空白のマス、No1、No2、No3」の順番にして配置<br />
・2行目は横4マスを連結した大きいマスにして、ここにB-bを配置します。</strong></p>
<p>これでパソコン版のレイアウトが完成しました。</p>
<p>空白のマスを設けたのは、スペースの余裕が無く、画面幅が縮みノートパソコンサイズの画面でメニューとロゴがぶつかってしまうので、図5のようにロゴを配置するためです。</p>
<p>図5<br />
<img loading="lazy" class="alignnone size-medium wp-image-11056" src="/uploads-archive/lc/2023/01/230120_ex.png" alt="" width="640" height="" /></p>
<p>スマホ用の切り替え点の他にノートパソコン用の切り替え点を作り、AとBが重なる設定にしました。</p>
<p>そして、更に画面幅を縮めてスマホ画面になった際、Bのグリッドレイアウトを1列4行のグリッドレイアウトに変更し、各コンテンツを再配置することで図3のような形にすることができます。</p>
<p>しかし、B-bのメニューはカーソルを乗せたり、タップすると更にサブメニューが表示される仕組みになっています。つまり、コンテンツの縦幅はユーザーの行動によって変わる構造をしています。</p>
<p>グリッドレイアウトのマスの幅は、中のコンテンツの幅を自動で計算して、全マスに均等で余白を割り当てたり、コンテンツを中央配置させたりします。そのため幅が変わると全体のデザインが崩れてしまいます。</p>
<p>パソコン版は横並びのため、サブメニューが表示された場合、下のコンテンツと重ね高さが変わらない設定にしても問題ありませんが、スマホ版ではこのようなことはできません。</p>
<p>そこで、図6のようにフレックスボックスでレイアウトしました。</p>
<p>図6<br />
<img loading="lazy" class="alignnone size-medium wp-image-11056" src="/uploads-archive/lc/2023/01/230120_5.png" alt="" width="640" height="" /></p>
<p>当初の予定と違い、全てのコンテンツがBの直下の枠内にあり、その中での順番を並び替えは自在にできます。また、フレックスボックスの場合、サブメニューが表示されても該当の箇所より下のコンテンツが押し出されるだけで関係ない箇所の幅に影響がありません。</p>
<p>この両方の手法を使うことで、共通のヘッダーコンテンツを使いそしてデザイン通りのヘッダーが作れました。</p>
<h2>まとめ</h2>
<p>グリッドレイアウトとフレックスボックスを併用することで、表現できるレイアウトの幅が広がりました。<br />
グリッドレイアウトは使う機会が少ないかもしれませんが、それぞれ違う性質があり開発者としては両方知っておく必要があると強く感じました。</p>


グリッドレイアウトとフレックスボックス

Terraform 入門

使ったことありますか？display: grid; 画面レイアウトに使われるテクニックの比較

非同期システムでESLint の for..of 警告に従いたくなかった話

<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>


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>


81ZkGOHcf6L-768x972.jpg

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

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>


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>

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>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

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

2023/03/03

2023/02/17

2023/02/03

2023/01/20

2022/12/10

2022/11/11

2022/11/11

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