【Git初心者向け】ソースツリーを利用したGit操作について

Terraform の適切なディレクトリ構造について考える

Webデザイナーでも最低限覚えるべきJavaScpitと学習してみて思ったこと

画像生成AIについて、実際に使ってみてどんな事ができるか試してみました。

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


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>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

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

2023/06/09

2023/05/27

2023/05/12

2023/03/16

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