<p>皆さんにとってのトレンドカラーなどはありますか？</p>
<p>実は毎年PANTONE社というところが「パントン･カラー･オブ･ザ･イヤー」というものを12月頃発表しており、来年のトレンドカラーが選ばれます。</p>
<p>また、PANTONE社以外でもJAFCAという団体からトレンドカラーを発表していましたので両方とも紹介しようと思います。</p>
<h3>PANTONE社とは</h3>
<p>アメリカに本社がある色見本の企業で、アパレルをはじめ、美容、インテリア、工業デザイン等、あらゆる業界をサポートしており、PANTONEの色見本帳は、製品の色を決定する際のヒントとして、あらゆる業界で使われています。</p>
<h3>JAFCAとは</h3>
<p>カラーデザインの向上と、豊かな色彩生活を目指してアパレルファッション、プロダクツ&amp;インテリア、化粧品、学校等多業種の会員により構成されたカラーデザインに関する様々な活動をしている団体です。</p>
<h2>PANTONE社2022年トレンドカラー</h2>
<p><img loading="lazy" class="aligncenter size-full wp-image-9277" src="/uploads-archive/lc/2022/01/0bfedfd66f2098deae28351c6b303128.png" alt="" width="992" height="495" srcset="/uploads-archive/lc/2022/01/0bfedfd66f2098deae28351c6b303128.png 992w, /uploads-archive/lc/2022/01/0bfedfd66f2098deae28351c6b303128-300x150.png 300w, /uploads-archive/lc/2022/01/0bfedfd66f2098deae28351c6b303128-768x383.png 768w, /uploads-archive/lc/2022/01/0bfedfd66f2098deae28351c6b303128-600x299.png 600w" sizes="(max-width: 992px) 100vw, 992px" /></p>
<p><span style="color: #6667ab; font-weight: bold;">ベリー・ペリ（Very Peri）</span></p>
<p style="padding-left: 40px; font-weight: bold;">カラーコード：#6667AB<br />
RGB値：102,103,171<br />
HSV値：239,40,67<br />
CMYK：40,39,0,32</p>
<p>今回の為に発表された新色であり、「その勇気ある存在は、個人の発明や創造性を促す」という意味を込めた色となっております。<br />
ブルーの持つ誠実さと不変性、レッドの持つエネルギーと興奮を融合させた、この最も幸せで暖かいブルーの色合いは、元気を与える新しさの素を注入します。</p>
<p>ラベンダーのような配色はすぐに目に飛び込んでくる優しい暖かみを醸し出しており、幻想的なデジタルの世界であったり、物理的な素材の中であれ、グラフィックやマルチメディア・デザイン、パッケージングなどの多くの用途に理想的な色合いとなっております。<br />
またこれらの媒体以外にもアパレル・美容・インテリアデザインにも今後多く取り入れられていくかと思われます。</p>
<p><a href="https://www.pantone-store.jp/coy2022/palette.html">公式ホームページ</a>ではベリー・ペリを使ったカラーパレットを紹介しており、デザインをする上で参考になるかと思われます。</p>
<p><img loading="lazy" class="aligncenter size-full wp-image-9280" src="/uploads-archive/lc/2022/01/4464189190254b47a0b17df789878ab1.png" alt="" width="811" height="631" srcset="/uploads-archive/lc/2022/01/4464189190254b47a0b17df789878ab1.png 811w, /uploads-archive/lc/2022/01/4464189190254b47a0b17df789878ab1-300x233.png 300w, /uploads-archive/lc/2022/01/4464189190254b47a0b17df789878ab1-768x598.png 768w, /uploads-archive/lc/2022/01/4464189190254b47a0b17df789878ab1-600x467.png 600w" sizes="(max-width: 811px) 100vw, 811px" /></p>
<p><img loading="lazy" class="aligncenter size-full wp-image-9281" src="/uploads-archive/lc/2022/01/62d0a2934728b0a8dbe823c3ea143396.png" alt="" width="809" height="693" srcset="/uploads-archive/lc/2022/01/62d0a2934728b0a8dbe823c3ea143396.png 809w, /uploads-archive/lc/2022/01/62d0a2934728b0a8dbe823c3ea143396-300x257.png 300w, /uploads-archive/lc/2022/01/62d0a2934728b0a8dbe823c3ea143396-768x658.png 768w, /uploads-archive/lc/2022/01/62d0a2934728b0a8dbe823c3ea143396-600x514.png 600w" sizes="(max-width: 809px) 100vw, 809px" /></p>
<h2>JAFCA2022年トレンドカラー</h2>
<p><img loading="lazy" class="aligncenter size-full wp-image-9278" src="/uploads-archive/lc/2022/01/38026-1-20211209073910_b61b1b29e7e0c4.jpeg" alt="" width="500" height="601" srcset="/uploads-archive/lc/2022/01/38026-1-20211209073910_b61b1b29e7e0c4.jpeg 500w, /uploads-archive/lc/2022/01/38026-1-20211209073910_b61b1b29e7e0c4-250x300.jpeg 250w" sizes="(max-width: 500px) 100vw, 500px" /></p>
<p><span style="color: #f18d5f; font-weight: bold;">ジョリー・コーラル（Jolly Coral）</span></p>
<p style="padding-left: 40px; font-weight: bold;">カラーコード：#F18D5F<br />
RGB値：241,141,95<br />
HSV値：19,61,95<br />
CMYK：0,41,60,5</p>
<p>公式サイトによると、ジョリー・コーラルを 「2020年、2021年と暗く長いトンネルを歩いてきた私たちを導き、心身をいたわってくれるかのよう」と表現しています。<br />
見た通り、オレンジをベースとした明るく優しめなカラーとなっております。<br />
2020,2021年で暗い気持ちだったのを2022年では晴れやかに、そして前を向いていく表現が込められており今まで以上に未来へ期待というものがこもった鮮やかな色が選ばれました。</p>
<p>以上、2022年のトレンドカラーの発表でした。<br />
２社とも赤色の要素が入っており、やはり今年のイメージは前向きな気持ちやエネルギーを感じる年ということがわかりました。</p>
<p>今年は目にする機会も増えるかもしれませんね。</p>
<p>&nbsp;</p>
<h4>参考サイト</h4>
<p><a href="https://goworkship.com/magazine/2022-trendcolor/">https://goworkship.com/magazine/2022-trendcolor/</a></p>
<p><a href="https://coliss.com/articles/build-websites/operation/design/color-of-the-year-2022-lavender-very-peri.html">https://coliss.com/articles/build-websites/operation/design/color-of-the-year-2022-lavender-very-peri.html</a></p>
<h4>公式サイト</h4>
<p>Pantone：<a href="https://www.pantone.com/uk/en/color-of-the-year-2022">https://www.pantone.com/uk/en/color-of-the-year-2022</a></p>
<p>JAFCA：<a href="https://www.jafca.org/colorcolumn/20211210.html">https://www.jafca.org/colorcolumn/20211210.html</a></p>


2022年のトレンドカラーはこれだ！！

<h1>クラウドとは</h1>
<p>クラウドコンピューティングとは一般的にインターネット経由で提供されるコンピュータ資源を利用することと定義されていて、要するにユーザーがインフラやソフトウェアを持っていなくても、インターネットを通じて、サービスを必要な時に必要な分だけ利用できる概念です。</p>
<p>クラウドは<strong>SaaS</strong> 、<strong>PaaS</strong>、<strong>IaaS</strong>の3種類に分類されます。</p>
<p><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-17416" src="/uploads-archive/2021/12/cloud-300x300.png" alt="" width="300" height="300" srcset="/uploads-archive/2021/12/cloud-300x300.png 300w, /uploads-archive/2021/12/cloud-150x150.png 150w, /uploads-archive/2021/12/cloud-768x765.png 768w, /uploads-archive/2021/12/cloud-228x227.png 228w, /uploads-archive/2021/12/cloud-120x120.png 120w, /uploads-archive/2021/12/cloud.png 812w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<h2>SaaS[サース]（Software as a Service）</h2>
<p>SaaSとはSoftware as a Serviceの略で、日本語では「<strong>サービスとしてのソフトウェア</strong>」と訳されます。ソフトウェアをユーザーがインターネット経由で使えるサービスのことです。</p>
<p>主な例ではGoogleのGmailなどです。</p>
<p>パソコンにソフトウェアをインストールしていなくても、クラウドサービスのアカウントさえ持っていれば、Google Chromeなどのブラウザを通してメールを利用することができます。</p>
<h2>PaaS[パース]（Platform as a Service）</h2>
<p>PaaSは<strong>アプリケーション開発実行環境</strong>を提供するクラウドサービスのことです。</p>
<p>例としてはMicrosoft Azureなどがあげられます。</p>
<p>PaaSがクラウドを通じて提供するのはサーバーやOSなど、システムを構築するためのプラットフォームです。</p>
<p>そのプラットフォームを使って、利用者は自分たちが必要なソフトウェアの開発などを行います。</p>
<p>開発するための場所（プラットフォーム）だけ借りて、後の開発はユーザー自身が行うため、SaaSよりも自由度の高いシステムを構築することが可能です。</p>
<h2>IaaS[イアース]（Infrastructure as a Service）</h2>
<p><strong>サーバ（インフラ）</strong>を提供するクラウドサービスのことです。</p>
<p>物理的なハードウェアを持っていなくてもインターネット上でインフラとなる仮想のネットワーク機器やサーバを提供してくれるサービスです。</p>
<p>例としてはAWSなどがあげられます。</p>
<h3>書籍　インフラエンジニアの教科書</h3>
<p><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-17417" src="/uploads-archive/2021/12/infra-231x300.png" alt="" width="231" height="300" srcset="/uploads-archive/2021/12/infra-231x300.png 231w, /uploads-archive/2021/12/infra-228x296.png 228w, /uploads-archive/2021/12/infra.png 500w" sizes="(max-width: 231px) 100vw, 231px" /></p>
<p><a href="https://www.amazon.co.jp/%E3%82%A4%E3%83%B3%E3%83%95%E3%83%A9%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%AE%E6%95%99%E7%A7%91%E6%9B%B8-%E4%BD%90%E9%87%8E-%E8%A3%95/dp/4863541333/ref=sr_1_1?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&amp;crid=3KX833QMJU9HO&amp;keywords=%E3%82%A4%E3%83%B3%E3%83%95%E3%83%A9%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%AE%E6%95%99%E7%A7%91%E6%9B%B8&amp;qid=1639460735&amp;sprefix=%E3%81%84%E3%82%93%E3%81%B5%E3%82%89%2Caps%2C295&amp;sr=8-1">インフラエンジニアの教科書</a></p>
<p>インフラに関する知識について幅広く網羅されて紹介されていて、今回はその中のクラウドについてピックアップしました。</p>
<p>こちらの書籍ではクラウドの3つの中のIaaSについて紹介されています。</p>
<h2>IaaS[イアース]について</h2>
<h3>IaaSの特徴</h3>
<p>・自社で物理サーバを持たずに使えるため物理サーバーを管理するエンジニアが不要</p>
<p>・利用申請後、短期間でOSがインストールされた状態ですぐ使える</p>
<p>・自社で物理サーバを持たないため、物理制約を意識せず利用したい分だけサーバ増強が可能</p>
<p>・安価、かつ使った分だけ費用が発生する従量課金に対応している</p>
<p>・インフラの運用はクラウド事業者に任せられる</p>
<h4>IaaSのデメリット</h4>
<p>・開発自由度の高さを活かせるだけの専門知識が必要になる</p>
<p>・他社のサーバに機密情報を置かれることやデータの送受信の際にインターネット経由でデータが流れることから情報流出のリスクがあり、またセキュリティ面の責任範囲に注意が必要</p>
<h2><span id="IaaSVPS">IaaS（クラウド）とVPS（仮想サーバ）の違い</span></h2>
<h4>VPSとは</h4>
<p>VPSとは、「Virtual Private Server」の略で、物理的に存在するサーバーにインストールされているホストOSの上に、ユーザーそれぞれに仮想サーバーが割り当てられていて、ユーザーはその仮想サーバーを自分だけのサーバーとして使用できます。<br />
ユーザーは仮想サーバーのオーナーなので、管理者権限を持つことができ、自分好みのアプリケーションをインストールできるのはもちろんのこと、インストールするOSも選ぶことができます。</p>
<h4><span id="IaaS-5">IaaSのほうが柔軟性がある</span></h4>
<p>IaaSは従量課金制であり、使用するリソースによって利用料金が変更される仕組みとなっており、リソースの変更が容易です。<br />
一方で、<strong class="red">VPSは月極制となっているため、契約内の範囲でリソースをいくら使おうが料金は変わりませんが、リソースの変更の際には契約自体を変更しなければならないため、IaaSより柔軟性は低いと言えます。</strong></p>
<h3>本を読んで</h3>
<p>クラウドシステムにはSaaS、PaaS 、IaaSがあり、それぞれにメリット、デメリットや特徴があるように、インフラの知識は本当に幅広く、しっかり技術として身につけば、状況によってサーバやクラウドなどのどの技術を使うのが一番最適なのかの選定が可能になるんだなと思いました。</p>
<p>かなり奥が深いので業務にいかせるまでにはまだまだ勉強が必要ですが、しっかりと状況を見極めて、最適な技術選定ができるようにしたいです。</p>
<h3></h3>
<p>&nbsp;</p>


cloud-768x765.png

クラウドについて

<p>最近よく利用したサイトやブックマークしていたサイトをまとめてみました。</p>
<h2>カラー＆アイコン関連</h2>
<h3>Random Material Palette Generator &#8211; THREEBÙ</h3>
<p>クリックするたびにランダムで色の組み合わせを提案してくれるサイトです。</p>
<p><img loading="lazy" class="alignnone size-large wp-image-9072" src="/uploads-archive/lc/2021/12/ee209a8c1a21e7525182b733339d8e94-1024x544.png" alt="" width="1024" height="544" srcset="/uploads-archive/lc/2021/12/ee209a8c1a21e7525182b733339d8e94-1024x544.png 1024w, /uploads-archive/lc/2021/12/ee209a8c1a21e7525182b733339d8e94-300x159.png 300w, /uploads-archive/lc/2021/12/ee209a8c1a21e7525182b733339d8e94-768x408.png 768w, /uploads-archive/lc/2021/12/ee209a8c1a21e7525182b733339d8e94-600x319.png 600w, /uploads-archive/lc/2021/12/ee209a8c1a21e7525182b733339d8e94.png 1356w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p><a href="https://www.threebu.it/random-material-palette/" target="_blank" rel="noopener">https://www.threebu.it/random-material-palette/</a></p>
<h3>Adobe カラー</h3>
<p>メインカラーを真ん中に入れると、色の理論をもとにカラーを提案してくれます。</p>
<p><img loading="lazy" class="alignnone size-large wp-image-9083" src="/uploads-archive/lc/2021/12/2d5fd863c62d745af3264ae71e45b0f6-1024x462.png" alt="" width="1024" height="462" srcset="/uploads-archive/lc/2021/12/2d5fd863c62d745af3264ae71e45b0f6-1024x462.png 1024w, /uploads-archive/lc/2021/12/2d5fd863c62d745af3264ae71e45b0f6-300x135.png 300w, /uploads-archive/lc/2021/12/2d5fd863c62d745af3264ae71e45b0f6-768x346.png 768w, /uploads-archive/lc/2021/12/2d5fd863c62d745af3264ae71e45b0f6-600x271.png 600w, /uploads-archive/lc/2021/12/2d5fd863c62d745af3264ae71e45b0f6-1536x693.png 1536w, /uploads-archive/lc/2021/12/2d5fd863c62d745af3264ae71e45b0f6.png 1539w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p><a href="https://color.adobe.com/ja/create/color-wheel" target="_blank" rel="noopener">https://color.adobe.com/ja/create/color-wheel</a></p>
<h3>icons8</h3>
<p>無料のアイコンが充実しています。</p>
<p><img loading="lazy" class="alignnone size-large wp-image-9073" src="/uploads-archive/lc/2021/12/78a8d7d511ba59f741927a3848034022-1024x542.png" alt="" width="1024" height="542" srcset="/uploads-archive/lc/2021/12/78a8d7d511ba59f741927a3848034022-1024x542.png 1024w, /uploads-archive/lc/2021/12/78a8d7d511ba59f741927a3848034022-300x159.png 300w, /uploads-archive/lc/2021/12/78a8d7d511ba59f741927a3848034022-768x406.png 768w, /uploads-archive/lc/2021/12/78a8d7d511ba59f741927a3848034022-600x317.png 600w, /uploads-archive/lc/2021/12/78a8d7d511ba59f741927a3848034022.png 1357w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p><a href="https://icons8.jp/" target="_blank" rel="noopener">https://icons8.jp/</a></p>
<p>&nbsp;</p>
<h2>デザインギャラリーサイト</h2>
<p>日本</p>
<h3>SANKOU!</h3>
<p><img loading="lazy" class="alignnone size-large wp-image-9077" src="/uploads-archive/lc/2021/12/36c0eb8d6eeb63bf6e94528e81dbdbd1-1024x538.png" alt="" width="1024" height="538" srcset="/uploads-archive/lc/2021/12/36c0eb8d6eeb63bf6e94528e81dbdbd1-1024x538.png 1024w, /uploads-archive/lc/2021/12/36c0eb8d6eeb63bf6e94528e81dbdbd1-300x158.png 300w, /uploads-archive/lc/2021/12/36c0eb8d6eeb63bf6e94528e81dbdbd1-768x403.png 768w, /uploads-archive/lc/2021/12/36c0eb8d6eeb63bf6e94528e81dbdbd1-600x315.png 600w, /uploads-archive/lc/2021/12/36c0eb8d6eeb63bf6e94528e81dbdbd1-1200x630.png 1200w, /uploads-archive/lc/2021/12/36c0eb8d6eeb63bf6e94528e81dbdbd1.png 1358w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p><a href="https://sankoudesign.com/" target="_blank" rel="noopener">https://sankoudesign.com/</a></p>
<h3>MUUUUU.ORG</h3>
<p><img loading="lazy" class="alignnone size-large wp-image-9076" src="/uploads-archive/lc/2021/12/4ea4956f1659c708c304156726f611ad-1024x544.png" alt="" width="1024" height="544" srcset="/uploads-archive/lc/2021/12/4ea4956f1659c708c304156726f611ad-1024x544.png 1024w, /uploads-archive/lc/2021/12/4ea4956f1659c708c304156726f611ad-300x159.png 300w, /uploads-archive/lc/2021/12/4ea4956f1659c708c304156726f611ad-768x408.png 768w, /uploads-archive/lc/2021/12/4ea4956f1659c708c304156726f611ad-600x319.png 600w, /uploads-archive/lc/2021/12/4ea4956f1659c708c304156726f611ad.png 1361w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p><a href="https://muuuuu.org/" target="_blank" rel="noopener">https://muuuuu.org/</a></p>
<h3>I/O 3000</h3>
<p><img loading="lazy" class="alignnone size-large wp-image-9085" src="/uploads-archive/lc/2021/12/1dd7379dee60acc7ca84f804f99318c9-1024x477.png" alt="" width="1024" height="477" srcset="/uploads-archive/lc/2021/12/1dd7379dee60acc7ca84f804f99318c9-1024x477.png 1024w, /uploads-archive/lc/2021/12/1dd7379dee60acc7ca84f804f99318c9-300x140.png 300w, /uploads-archive/lc/2021/12/1dd7379dee60acc7ca84f804f99318c9-768x357.png 768w, /uploads-archive/lc/2021/12/1dd7379dee60acc7ca84f804f99318c9-600x279.png 600w, /uploads-archive/lc/2021/12/1dd7379dee60acc7ca84f804f99318c9.png 1530w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p><a href="https://io3000.com/" target="_blank" rel="noopener">https://io3000.com/</a></p>
<h3>81-web.com</h3>
<p><img loading="lazy" class="alignnone size-large wp-image-9080" src="/uploads-archive/lc/2021/12/c8b96339f88af0f6619a2815e7e7adf2-1024x546.png" alt="" width="1024" height="546" srcset="/uploads-archive/lc/2021/12/c8b96339f88af0f6619a2815e7e7adf2-1024x546.png 1024w, /uploads-archive/lc/2021/12/c8b96339f88af0f6619a2815e7e7adf2-300x160.png 300w, /uploads-archive/lc/2021/12/c8b96339f88af0f6619a2815e7e7adf2-768x409.png 768w, /uploads-archive/lc/2021/12/c8b96339f88af0f6619a2815e7e7adf2-600x320.png 600w, /uploads-archive/lc/2021/12/c8b96339f88af0f6619a2815e7e7adf2.png 1356w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p><a href="https://81-web.com/" target="_blank" rel="noopener">https://81-web.com/</a></p>
<p>&nbsp;</p>
<p>海外</p>
<h3>dribbble</h3>
<p><img loading="lazy" class="alignnone size-large wp-image-9078" src="/uploads-archive/lc/2021/12/205dcbb8374500ef21dc06ce7e2669a2-1024x542.png" alt="" width="1024" height="542" srcset="/uploads-archive/lc/2021/12/205dcbb8374500ef21dc06ce7e2669a2-1024x542.png 1024w, /uploads-archive/lc/2021/12/205dcbb8374500ef21dc06ce7e2669a2-300x159.png 300w, /uploads-archive/lc/2021/12/205dcbb8374500ef21dc06ce7e2669a2-768x407.png 768w, /uploads-archive/lc/2021/12/205dcbb8374500ef21dc06ce7e2669a2-600x318.png 600w, /uploads-archive/lc/2021/12/205dcbb8374500ef21dc06ce7e2669a2.png 1358w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p><a href="https://dribbble.com/shots/popular/web-design" target="_blank" rel="noopener">https://dribbble.com/shots/popular/web-design</a></p>
<h3>css design awards</h3>
<p><img loading="lazy" class="alignnone size-large wp-image-9079" src="/uploads-archive/lc/2021/12/6b4460e8e2877255e852820721cb3a2c-1024x543.png" alt="" width="1024" height="543" srcset="/uploads-archive/lc/2021/12/6b4460e8e2877255e852820721cb3a2c-1024x543.png 1024w, /uploads-archive/lc/2021/12/6b4460e8e2877255e852820721cb3a2c-300x159.png 300w, /uploads-archive/lc/2021/12/6b4460e8e2877255e852820721cb3a2c-768x408.png 768w, /uploads-archive/lc/2021/12/6b4460e8e2877255e852820721cb3a2c-600x318.png 600w, /uploads-archive/lc/2021/12/6b4460e8e2877255e852820721cb3a2c.png 1355w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p><a href="https://www.cssdesignawards.com/" target="_blank" rel="noopener">https://www.cssdesignawards.com/</a></p>
<h3>awwwards</h3>
<p><img loading="lazy" class="alignnone size-large wp-image-9081" src="/uploads-archive/lc/2021/12/3822b1f8a4423070800cd508e002de8d-1024x511.png" alt="" width="1024" height="511" srcset="/uploads-archive/lc/2021/12/3822b1f8a4423070800cd508e002de8d-1024x511.png 1024w, /uploads-archive/lc/2021/12/3822b1f8a4423070800cd508e002de8d-300x150.png 300w, /uploads-archive/lc/2021/12/3822b1f8a4423070800cd508e002de8d-768x383.png 768w, /uploads-archive/lc/2021/12/3822b1f8a4423070800cd508e002de8d-600x300.png 600w, /uploads-archive/lc/2021/12/3822b1f8a4423070800cd508e002de8d.png 1358w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p><a href="https://www.awwwards.com/" target="_blank" rel="noopener">https://www.awwwards.com/</a></p>
<h3>siimple</h3>
<p><img loading="lazy" class="alignnone size-large wp-image-9084" src="/uploads-archive/lc/2021/12/62d7c1223eb7b308a472552a1199df8b-1024x479.png" alt="" width="1024" height="479" srcset="/uploads-archive/lc/2021/12/62d7c1223eb7b308a472552a1199df8b-1024x479.png 1024w, /uploads-archive/lc/2021/12/62d7c1223eb7b308a472552a1199df8b-300x140.png 300w, /uploads-archive/lc/2021/12/62d7c1223eb7b308a472552a1199df8b-768x359.png 768w, /uploads-archive/lc/2021/12/62d7c1223eb7b308a472552a1199df8b-600x281.png 600w, /uploads-archive/lc/2021/12/62d7c1223eb7b308a472552a1199df8b.png 1533w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p><a href="https://siiimple.com/" target="_blank" rel="noopener">https://siiimple.com/</a></p>
<h2>コーディング＆プログラミング学習サイト</h2>
<h3><span class="md-plain md-expand">Flexbox Froggy</span></h3>
<p><span class="md-plain md-expand">ゲーム感覚でflexboxについて学べるサイトです。codepip ( </span><span class="md-link md-pair-s" spellcheck="false"><a href="https://codepip.com/" target="_blank" rel="noopener">https://codepip.com/</a></span><span class="md-plain md-expand"> ) 社製で他にもgridとか色々あります。</span></p>
<p><img loading="lazy" class="alignnone size-large wp-image-9075" src="/uploads-archive/lc/2021/12/f181879ba3faffaf622b26f1692a8f06-1024x537.png" alt="" width="1024" height="537" srcset="/uploads-archive/lc/2021/12/f181879ba3faffaf622b26f1692a8f06-1024x537.png 1024w, /uploads-archive/lc/2021/12/f181879ba3faffaf622b26f1692a8f06-300x157.png 300w, /uploads-archive/lc/2021/12/f181879ba3faffaf622b26f1692a8f06-768x403.png 768w, /uploads-archive/lc/2021/12/f181879ba3faffaf622b26f1692a8f06-600x315.png 600w, /uploads-archive/lc/2021/12/f181879ba3faffaf622b26f1692a8f06-1200x630.png 1200w, /uploads-archive/lc/2021/12/f181879ba3faffaf622b26f1692a8f06.png 1356w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p><span class="md-link md-pair-s md-expand" spellcheck="false"><a href="https://flexboxfroggy.com/" target="_blank" rel="noopener">https://flexboxfroggy.com/</a></span></p>
<h3><span class="md-plain md-expand">LeetCode</span></h3>
<p>色んなプログラミング言語で問題を解くことができるサイトです。プレーンのjsとts、アルゴリズムなどの理解を深めるには良いかと思います。</p>
<p><img loading="lazy" class="alignnone size-large wp-image-9074" src="/uploads-archive/lc/2021/12/6b711aa7fe90fb7444201487871cecd7-1024x544.png" alt="" width="1024" height="544" srcset="/uploads-archive/lc/2021/12/6b711aa7fe90fb7444201487871cecd7-1024x544.png 1024w, /uploads-archive/lc/2021/12/6b711aa7fe90fb7444201487871cecd7-300x159.png 300w, /uploads-archive/lc/2021/12/6b711aa7fe90fb7444201487871cecd7-768x408.png 768w, /uploads-archive/lc/2021/12/6b711aa7fe90fb7444201487871cecd7-600x319.png 600w, /uploads-archive/lc/2021/12/6b711aa7fe90fb7444201487871cecd7.png 1360w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p><span class="md-link md-pair-s md-expand" spellcheck="false"><a href="https://leetcode.com/problemset/all/" target="_blank" rel="noopener">https://leetcode.com/problemset/all/</a></span></p>
<h3><span class="md-plain md-expand">Progate</span></h3>
<p>分かりやすく楽しく学べる感じがあって、かつ内容も充実しているのでおすすめです。</p>
<p><img loading="lazy" class="alignnone size-large wp-image-9082" src="/uploads-archive/lc/2021/12/0a4bbf9ffa054fb687bc32cdebb655fb-1024x477.png" alt="" width="1024" height="477" srcset="/uploads-archive/lc/2021/12/0a4bbf9ffa054fb687bc32cdebb655fb-1024x477.png 1024w, /uploads-archive/lc/2021/12/0a4bbf9ffa054fb687bc32cdebb655fb-300x140.png 300w, /uploads-archive/lc/2021/12/0a4bbf9ffa054fb687bc32cdebb655fb-768x358.png 768w, /uploads-archive/lc/2021/12/0a4bbf9ffa054fb687bc32cdebb655fb-600x279.png 600w, /uploads-archive/lc/2021/12/0a4bbf9ffa054fb687bc32cdebb655fb.png 1536w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p><span class="md-link md-pair-s" spellcheck="false"><a href="https://prog-8.com/" target="_blank" rel="noopener">https://prog-8.com/</a></span></p>
<p>&nbsp;</p>
<p>今後もいいなと思うのを見つけたらまた更新したいと思います。</p>


フロントエンド必見サイトリンク集

BEM×SASSってもう古いの？？モダンCSSを試してみる(CSS Modules編)

<h2>Alibaba cloudとは</h2>
<p>アリババクラウド（Alibaba Cloud）は中国最大なECサイト「淘宝（Taobao）」や電子決済ツール「Alipay」など、日本でも知られるサービスをサポートしている、アリババグループが提供するパブリッククラウドサービスです。毎年の11月11日（独身の日）に行われる中国最大のネットセール祭り（2019年は4兆円も突破）でも、その膨大なアクセスを制御し、サービスの根幹を朝得るアリババクラウド。中国国内シェアは第１位、世界でもAWSとAzureの次に第３位となるクラウドプロバイダーです。</p>
<p>世界21ヵ国、63ヶ所のアベイラビリティゾーンを運営し、大企業、中小企業、個人のディベロッパー、200 以上の国や地域の公共部門にクラウドコンピューティングサービスを提供しています。特に、アジアリージョンにおいては、世界中の他のクラウドプロバイダーに引けを取らないほど、数多くの国で拠点を設置しています。</p>
<h2>今回紹介する本は『AlibabaCloud構築・運用完全マニュアル 』</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-17376" src="/uploads-archive/2021/12/41F3M3hosRL._SX260_-2-232x300.jpg" alt="" width="232" height="300" srcset="/uploads-archive/2021/12/41F3M3hosRL._SX260_-2-232x300.jpg 232w, /uploads-archive/2021/12/41F3M3hosRL._SX260_-2-228x295.jpg 228w, /uploads-archive/2021/12/41F3M3hosRL._SX260_-2.jpg 260w" sizes="(max-width: 232px) 100vw, 232px" /></p>
<p>目次<br />
Chapter 1 Alibaba Cloud 入門<br />
Chapter 2 Alibaba Cloud を始めよう<br />
Chapter 3 仮想サーバサービス<br />
Chapter 4 ネットワークサービス<br />
Chapter 5 データベース<br />
Chapter 6 ストレージとCDN<br />
Chapter 7 ビッグデータ分析<br />
Chapter 8 アプリケーションサービス<br />
Chapter 9 メディアサービス<br />
Chapter 10 セキュリティ<br />
Chapter 11 IoT</p>
<p>アリババクラウドの、初めての日本語解説書。世界最大・最速規模のクラウドを支える技術・豊富なサービスをわかりやすく解説する本であります。</p>
<h2>なぜこの本に興味を持ったか？</h2>
<p>来年のから新しいサービスの開発が始まります。今までは仮想環境で開発してきましたが、今回新しいサービスの開発環境はアリババクラウドに決まりました。自分はクラウド環境での開発の経験や知識がないので、新しいサービスの開発に向けて、この本を購入しました。</p>
<h2>Elastic Compute Service (ECS)</h2>
<p>Elastic Compute Cloudはアリババクラウドで利用できるシステムのひとつです。<br />
アリババクラウド上に仮想サーバーを構築して自由に利用できるのが特徴で、クラウド環境において大きな役割を果たしてます。</p>
<p>Web上からマウスでクリックするだけでで仮想サーバーを構築することができます。</p>
<p>伸縮性や弾力性を意味するElasticという言葉通り、ユーザーの必要に応じてスペックや標準的なOSを変更できるのがECSの魅力です。<br />
継続利用時に起こりがちなスペック不足やディスク容量問題への解決が簡単です。</p>
<p>ECSでは仮想サーバの事を「インスタンス」という単位で扱います。<br />
インスタンスには様々な種類や性能のものがあるため、ユーザーの求める形で利用が可能です。<br />
インスタンスによって柔軟にWeb上のインフラ環境を構築することができるため、サーバーの増強が必要になった場合や、さらなる効率化を求めて改善が行われる際にも、対応がしやすくなります。<br />
さらにインスタンスはコピーも削除も簡単に行えるので、スピーディな業務レベルを維持可能です。<br />
新規でサービスを開発する場合などは、このインスタンスの特性を利用することで開発から公開までをスムーズに進めることができます。</p>
<h2>アリババクラウド上に仮想サーバーを構築する手順</h2>
<h3>仮想環境のスペックを選ぶ</h3>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-17380 size-full" src="/uploads-archive/2021/12/スクリーンショット-2021-12-03-13.00.16-2.png" alt="" width="1918" height="773" srcset="/uploads-archive/2021/12/スクリーンショット-2021-12-03-13.00.16-2.png 1918w, /uploads-archive/2021/12/スクリーンショット-2021-12-03-13.00.16-2-300x121.png 300w, /uploads-archive/2021/12/スクリーンショット-2021-12-03-13.00.16-2-1024x413.png 1024w, /uploads-archive/2021/12/スクリーンショット-2021-12-03-13.00.16-2-768x310.png 768w, /uploads-archive/2021/12/スクリーンショット-2021-12-03-13.00.16-2-1536x619.png 1536w, /uploads-archive/2021/12/スクリーンショット-2021-12-03-13.00.16-2-228x92.png 228w" sizes="(max-width: 1918px) 100vw, 1918px" /></p>
<h3>OSやストレージ</h3>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-17381 size-full" src="/uploads-archive/2021/12/スクリーンショット-2021-12-03-13.00.32.png" alt="" width="1914" height="728" srcset="/uploads-archive/2021/12/スクリーンショット-2021-12-03-13.00.32.png 1914w, /uploads-archive/2021/12/スクリーンショット-2021-12-03-13.00.32-300x114.png 300w, /uploads-archive/2021/12/スクリーンショット-2021-12-03-13.00.32-1024x389.png 1024w, /uploads-archive/2021/12/スクリーンショット-2021-12-03-13.00.32-768x292.png 768w, /uploads-archive/2021/12/スクリーンショット-2021-12-03-13.00.32-1536x584.png 1536w, /uploads-archive/2021/12/スクリーンショット-2021-12-03-13.00.32-228x87.png 228w" sizes="(max-width: 1914px) 100vw, 1914px" /></p>
<h3>作られたインスタンスの一覧</h3>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-17382 size-full" src="/uploads-archive/2021/12/スクリーンショット-2021-12-03-13.00.49.png" alt="" width="1917" height="584" srcset="/uploads-archive/2021/12/スクリーンショット-2021-12-03-13.00.49.png 1917w, /uploads-archive/2021/12/スクリーンショット-2021-12-03-13.00.49-300x91.png 300w, /uploads-archive/2021/12/スクリーンショット-2021-12-03-13.00.49-1024x312.png 1024w, /uploads-archive/2021/12/スクリーンショット-2021-12-03-13.00.49-768x234.png 768w, /uploads-archive/2021/12/スクリーンショット-2021-12-03-13.00.49-1536x468.png 1536w, /uploads-archive/2021/12/スクリーンショット-2021-12-03-13.00.49-228x69.png 228w" sizes="(max-width: 1917px) 100vw, 1917px" /></p>
<p>VNC（Virtual Network Computing）機能もあって、ブラウザから直接仮想環境への操作</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-17383 size-full" src="/uploads-archive/2021/12/スクリーンショット-2021-12-03-13.05.08.png" alt="" width="1915" height="970" srcset="/uploads-archive/2021/12/スクリーンショット-2021-12-03-13.05.08.png 1915w, /uploads-archive/2021/12/スクリーンショット-2021-12-03-13.05.08-300x152.png 300w, /uploads-archive/2021/12/スクリーンショット-2021-12-03-13.05.08-1024x519.png 1024w, /uploads-archive/2021/12/スクリーンショット-2021-12-03-13.05.08-768x389.png 768w, /uploads-archive/2021/12/スクリーンショット-2021-12-03-13.05.08-1536x778.png 1536w, /uploads-archive/2021/12/スクリーンショット-2021-12-03-13.05.08-228x115.png 228w" sizes="(max-width: 1915px) 100vw, 1915px" /></p>
<p>&nbsp;</p>
<h2>業務で活かせることができる点</h2>
<p>Launch Cartの今の開発環境からクラウド環境へ移行する作業は私が担当を任せられたので、この本も読んでクラウドやインフラの知識を身に付けたいと思います。</p>


41F3M3hosRL._SX260_-2.jpg

AWS/Azureに迫るAlibaba cloud　ーElastic Compute Service (ECS)

<p><img decoding="async" loading="lazy" class="aligncenter" src="https://images-na.ssl-images-amazon.com/images/I/61KPtQRcdKL.jpg" alt="セキュア・バイ・デザイン" width="1000" height="1286" /></p>
<p>&nbsp;</p>
<p><span class="author notFaded" data-width="181">Dan Bergh Johnsson ,<span class="contribution"><span class="a-color-secondary"> </span></span></span><span class="author notFaded" data-width="154"><span class="a-declarative" data-action="a-popover" data-a-popover="{&quot;closeButtonLabel&quot;:&quot;著者ダイアログポップオーバーを閉じる&quot;,&quot;name&quot;:&quot;contributor-info-B09FQ8X6L1&quot;,&quot;position&quot;:&quot;triggerBottom&quot;,&quot;popoverLabel&quot;:&quot;著者ダイアログポップオーバー&quot;,&quot;allowLinkDefault&quot;:&quot;true&quot;}">Daniel Deogun</span><span class="contribution"><span class="a-color-secondary">, </span></span></span><span class="author notFaded" data-width="133">Daniel Sawano<span class="contribution"><span class="a-color-secondary">, </span></span></span><span class="author notFaded" data-width="99">須田智之 <span class="contribution"><span class="a-color-secondary">(翻訳)</span></span></span></p>
<h1>どんな本なのか</h1>
<p>ソフトウェア、特にインターネット上で展開されるサービスは常に危険に晒されている状態。これを如何にセキュアに出来るかは常時付き纏う課題と言えます。</p>
<p>この本には、Eric Evans のドメイン駆動設計(DDD)に基づいて確立する、セキュアなソフトウェア設計を指針や実例が記載されています。</p>
<p>「セキュリティ対策本」というよりは、「ソフトウェア設計を良くすることによって、自然とセキュアになっていること」を目指しているようです。</p>
<p>&nbsp;</p>
<h1>なぜこの本を読もうと思ったのか</h1>
<p>サービスのセキュリティを確保する際、旧来セキュリティアプライアンスに頼ることが主ですが、サービスを継続する上で、適用し辛い場面も往々にしてあります。</p>
<p>そもそもなぜセキュリティアプライアンスに頼らなければならないのかを考えた時に、セキュアなシステム企画や要件定義・設計に行き着くためです。</p>
<p>&nbsp;</p>
<h1>注目した点</h1>
<p>本書は、ほぼDDDが絡む内容となっており、DDDはソフトウェアの価値を高めるために考案されたと言えるでしょう。</p>
<p><img decoding="async" loading="lazy" class="alignnone size-medium" src="https://upload.wikimedia.org/wikipedia/commons/2/2c/Clean_Architecture_%2B_DDD%2C_full_application.svg" width="834" height="621" /></p>
<p>DDD を適用することは、旧来のように開発自体をコストとすることから、事業投資としての意識になること、また、ドメインごとの知識をエンジニアと非エンジニアで共有できることの他に、ソフトウェアの複雑さを抑えることができます。</p>
<p>特に 本書の「<strong>第7章 状態の複雑さの軽減」</strong>においては、この複雑さの軽減によりセキュアなコードやアーキテクトが出来上がることのメリットについて言及されており、「部分的普遍エンティティ」や「状態オブジェクトの導入」などのテクニックが紹介されています。</p>
<h1>まとめ</h1>
<p>セキュア・バイ・デザインを適用することで、ソフトウェアがセキュアになるだけでなく、IPA公開している <a href="https://www.ipa.go.jp/files/000055823.pdf">セキュア・バイ・デザイン入門 </a> によれば開発・運用工数の削減に言及されています。</p>
<p>スターフィールドのプロダクトにおいても、よりセキュアなシステム企画・設計をし、より価値のあるサービスを提供していきたいと思います。</p>


61KPtQRcdKL.jpg

書籍レビュー: セキュア・バイ・デザイン &#8211; 安全なソフトウェア設計 &#8211;

コードを綺麗にするために気をつけること

<h1>要件定義とは</h1>
<p>作って欲しい人と作る人の間で「これを実現しましょう」という合意を定めることです。</p>
<p>要件を日常的な単語に置き換えると「注文（オーダー）」が妥当なものになり、</p>
<p><strong>作ってほしい人が　作る人に出す　依頼事項（リクエスト）</strong></p>
<p>ということになります。</p>
<h2>書籍　はじめよう！要件定義　〜ビギナーからベテランまで〜</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-17310" src="/uploads-archive/2021/11/youken-207x300.jpg" alt="はじめよう！要件定義" width="207" height="300" srcset="/uploads-archive/2021/11/youken-207x300.jpg 207w, /uploads-archive/2021/11/youken-708x1024.jpg 708w, /uploads-archive/2021/11/youken-768x1111.jpg 768w, /uploads-archive/2021/11/youken-1062x1536.jpg 1062w, /uploads-archive/2021/11/youken-228x330.jpg 228w, /uploads-archive/2021/11/youken.jpg 1092w" sizes="(max-width: 207px) 100vw, 207px" /><br />
<a href="https://www.amazon.co.jp/%E3%81%AF%E3%81%98%E3%82%81%E3%82%88%E3%81%86-%E8%A6%81%E4%BB%B6%E5%AE%9A%E7%BE%A9-%E3%83%93%E3%82%AE%E3%83%8A%E3%83%BC%E3%81%8B%E3%82%89%E3%83%99%E3%83%86%E3%83%A9%E3%83%B3%E3%81%BE%E3%81%A7-%E7%BE%BD%E7%94%9F-%E7%AB%A0%E6%B4%8B/dp/4774172286/ref=sr_1_1?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&amp;crid=2LBORBVITPUQU&amp;keywords=%E3%81%AF%E3%81%98%E3%82%81%E3%82%88%E3%81%86%E8%A6%81%E4%BB%B6%E5%AE%9A%E7%BE%A9&amp;qid=1636621831&amp;s=books&amp;sprefix=%E3%81%AF%E3%81%98%E3%82%81%E3%82%88%E3%81%86%2Cstripbooks%2C291&amp;sr=1-1" target="_blank" rel="noopener">はじめよう！要件定義</a></p>
<h2>この本を読もうと思ったのか</h2>
<p>エンジニアとしてコードをかいたり、技術的なところを磨くことは大事だが、お客様が満足できるサービスを提供するいい仕事や効率のよい仕事をしようと思ったときに、最初の要件定義のところをおざなりにするとお客様にも喜んでいただく仕事ができない、最初の要件があいまいだったばっかりにせっかくつくった機能をもう一度やり直し、自分に時間的な負担もかかり、お客様に迷惑がかかるなど誰にとってもいいことがない状況になり得るので、お互いのためにいい仕事ができるようにしっかりと要件定義をできるようにしたいと思ったので読みました。</p>
<h2>なぜ要件定義をするのか？</h2>
<p>世の中には「お任せ」というオーダーやリクエストもよく見かけます。ではなぜ要件が必要なのか。</p>
<p>たとえば「美味しいものを作って」と依頼したとします。その依頼に基づいてコックさんがコックさんなりに考えた結果、ニンジングラッセを作ったとします。でもリクエストした人がニンジンが苦手だった場合、そのニンジングラッセが本当においしかったとしても決して受け入れることができないでしょう。</p>
<p>もしあなたがコックさん側だとしたら「だったら先にニンジンはNGって言っといてよ」という気持ちになると思います。そうならないように、納めるために必要な条件を後出しにするのではなく、先に提示して合意した上でその仕事を行うことが大切で</p>
<p>言わなくても伝わる「はず」という仮説のもとにお互いに仕事を依頼したりされたりし、その結果生じる困り事を事前に回避するための知恵それが要件定義です。</p>
<h3>定義すべき要件の内訳</h3>
<p><strong>・UI</strong></p>
<p><strong>・機能</strong></p>
<p><strong>・データ</strong></p>
<h4>UI</h4>
<p>UIとはUser Interface(ユーザーインターフェイス)の略です。「ユーザーに接するもの」</p>
<p>代表例は画面（スクリーン）です。PCのみならずスマートデバイスの急速な普及によってUIといえば画面の話になることが大半です。UIとは基本的に画面系である前提に話を進めます。</p>
<h4>機能</h4>
<p>機能とは「ソフトウェアにやらせる仕事」の総称です。</p>
<p>たとえば、「消費税を計算する」などが機能になります。</p>
<h4>データ</h4>
<p>3つ目がデータです。先程の「消費税を計算する」という機能の場合計算結果の消費税はデータです。また計算の基となる「売上金額」もデータです。</p>
<p>&nbsp;</p>
<p>この3つの要素「UI」「機能」「データ」が明確に定まってそこで初めてプログラマーはソフトウェアを作ることができます。つまりこの3つの要素がソフトウェア開発における要件として必要な情報になります。</p>
<h3>ゴール＝完成したソフトウェアの状態とは</h3>
<p>「完成したソフトウェア」というゴールを達成するには</p>
<p><strong>そもそも何をもって完成したと納得できるのか</strong></p>
<p>ということを考える必要があります。作り手が側がいくら「ちゃんとできました」と言っても依頼主が</p>
<p>納得しない限りは完成したとは言えません。</p>
<p>依頼主はいったい何をどうすることで完成しているかどうかを確認することができるのか、それは、</p>
<p><strong>UIを通じてソフトウェアを操作すること</strong>によってです。</p>
<p>その上で<strong>操作に対してきちんと機能が動作すること</strong></p>
<p>さらに必要なデータが保持されていることつまり、<strong>機能が必要とするデータがきちんと揃っていること</strong></p>
<p>が大事になります。</p>
<h3>この本の内容をまとめると</h3>
<p>画面遷移図を描こうになります。それ以外は要件定義そのものではなくその前後の工程で行うべき作業だということです。つまり、要件定義は上流工程ではなく中流工程であると言えます。企画と実装の間のブリッジそれが要件定義です。他の工程と混ざっているところを丁寧に削ぎ取った結果、</p>
<p>（UI、機能、データ）になり、それらを図示化したものが画面遷移図になります。</p>
<p>(例）</p>
<p><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-17332" src="/uploads-archive/2021/11/スクリーンショット-2021-11-13-21.46.55-300x144.png" alt="" width="300" height="144" srcset="/uploads-archive/2021/11/スクリーンショット-2021-11-13-21.46.55-300x144.png 300w, /uploads-archive/2021/11/スクリーンショット-2021-11-13-21.46.55-1024x493.png 1024w, /uploads-archive/2021/11/スクリーンショット-2021-11-13-21.46.55-768x370.png 768w, /uploads-archive/2021/11/スクリーンショット-2021-11-13-21.46.55-228x110.png 228w, /uploads-archive/2021/11/スクリーンショット-2021-11-13-21.46.55.png 1520w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<h3>業務で活かせることができる点</h3>
<p>自分自身も入社前に自らのポートフォリオ作成を設計から経験し、アプリケーション詳細設計書、画面遷移図、テーブル定義書、ER図、ワイヤーフレームなど制作しましたが、</p>
<p>画面遷移図に関してはこのページにこのボタンがあって、押すとデータが作成され、別の画面に遷移する。作成が失敗すると元の画面でバリデーションメッセージを表示させるなど、遷移図を描こうとしたら一つ一つの機能をしっかりイメージでき、把握していないとできないと思いました。</p>
<p>画面遷移図はアプリケーション開発の実装中に、ここはどうだったかな？どれくらいの機能をつくる必要があるのか、期間はこれくらいかかるかななど、その都度自分が迷わないための道標的な役割を果たし、依頼者にご満足いただけるものを提供することにもつながるのかなと思いましたので、業務でも実践していきたいです。</p>


youken-768x1111.jpg

要件定義とは？を解決する。

BEM×SASSってもう古いの？？モダンCSSを試してみる(styled-components編)

<p>前期個人OKRで本「Atomic Design ～堅牢で使いやすいUIを効率良く設計する」を読みました。</p>
<p><div id="attachment_8841" style="width: 224px" class="wp-caption alignnone"><a href="https://www.amazon.co.jp/Atomic-Design-%EF%BD%9E%E5%A0%85%E7%89%A2%E3%81%A7%E4%BD%BF%E3%81%84%E3%82%84%E3%81%99%E3%81%84UI%E3%82%92%E5%8A%B9%E7%8E%87%E8%89%AF%E3%81%8F%E8%A8%AD%E8%A8%88%E3%81%99%E3%82%8B-%E4%BA%94%E8%97%A4-%E4%BD%91%E5%85%B8-ebook/dp/B07CJ5TLK2"><img aria-describedby="caption-attachment-8841" loading="lazy" class="wp-image-8841 size-medium" src="/uploads-archive/lc/2021/11/AtomicDesign01-214x300.png" alt="AtomicDesign01" width="214" height="300" srcset="/uploads-archive/lc/2021/11/AtomicDesign01-214x300.png 214w, /uploads-archive/lc/2021/11/AtomicDesign01.png 568w" sizes="(max-width: 214px) 100vw, 214px" /></a><p id="caption-attachment-8841" class="wp-caption-text">出典：Amazon</p></div></p>
<p><span style="font-size: 16px;">本の内容を要約すると</span><span class="md-plain md-expand" style="font-size: 16px;">全部６章で、</span></p>
<p class="md-end-block md-p"><span class="md-plain">第１、２章はUI設計における現状の問題とコンポーネントベースUI開発が必要な理由など、</span></p>
<p class="md-end-block md-p"><span class="md-plain">第３章では、Atomic DesignによるUIコンポーネント設計についての具体的な内容が、</span></p>
<p class="md-end-block md-p"><span class="md-plain">第４、５、６章は前回のブログで紹介した「storybook」と言うUI管理ツールを用いた実践・テスト及び現場における開発ポイントなどで構成されています。</span></p>
<p>今回は、第２、３章元にコンポーネントとAtomic Designの話を少ししたいと思います。</p>
<h2>コンポーネント単位で開発する理由・メリットは？</h2>
<p>コンポーネント化したUIを組み立ていく開発は建築や自動車などにも似ています。大規模であるにもかかわらず、利用者が触れる部分（UI）は、部品単位で組み立てているので、ほとんど不具合はありません。</p>
<ul>
<li class="md-end-block md-p md-focus"><span class="md-plain">コンポーネント単位でテストできる</span></li>
<li class="md-end-block md-p"><span class="md-plain">不具合のリスクを減らせる</span></li>
<li class="md-end-block md-p"><span class="md-plain">メンテナンスがしやすくなる</span></li>
<li class="md-end-block md-p"><span class="md-plain">解決する問題が小さくなる</span></li>
</ul>
<h2>Atomic Designとは？</h2>
<p><a href="https://bradfrost.com/"><span class="md-plain md-expand">アメリカのWebデザイナーBrad Frost氏</span></a><span class="md-plain md-expand">が提唱した、小さいUIコンポーネントを組み合わせて、より大きなコンポーネントを作っていくための<strong>UIデザイン手法(方法論)</strong>です。Atomic Designの「Atomic」は「原子の〜」の意味で、化学からヒントと得たそうで、「Design」は見た目のデザインよりは「設計」の意味が強いです。</span></p>
<p><div id="attachment_8842" style="width: 610px" class="wp-caption alignnone"><img aria-describedby="caption-attachment-8842" loading="lazy" class="wp-image-8842" src="/uploads-archive/lc/2021/11/AtomicDesign02.png" alt="AtomicDesign02" width="600" height="300" srcset="/uploads-archive/lc/2021/11/AtomicDesign02.png 1015w, /uploads-archive/lc/2021/11/AtomicDesign02-300x150.png 300w, /uploads-archive/lc/2021/11/AtomicDesign02-768x384.png 768w, /uploads-archive/lc/2021/11/AtomicDesign02-600x300.png 600w" sizes="(max-width: 600px) 100vw, 600px" /><p id="caption-attachment-8842" class="wp-caption-text">出典：<a href="https://atomicdesign.bradfrost.com/chapter-2/">https://atomicdesign.bradfrost.com/chapter-2/</a></p></div></p>
<p class="md-end-block md-p"><a href="https://atomicdesign.bradfrost.com/table-of-contents/">Atomic Design</a>においては、「Atoms（原子）」「Molecules（分子）」「Organisms（有機体）」「Templates（テンプレート）」「Pages（ページ）」の5つのコンポーネントを作り上げることでWebサイトを完成させます。それぞれのコンポーネントについて<span class="md-plain md-expand">各層の役割分担を説明します</span>。</p>
<h3 class="md-end-block md-p"><span class="md-plain">Atoms(原子)</span></h3>
<p class="md-end-block md-p"><span class="md-plain">デフォルトUI、スタンダードなUI、レイアウトパタン、セマンティックなデザイン要素（見出し、アイコンなど同じ意味を持つコンテンツに常に同じ見た目を）などはこの層で管理します。デザインの統一性を支える部分となります。</span></p>
<h3 class="md-end-block md-p"><span class="md-plain">Molecules(分子)</span></h3>
<p class="md-end-block md-p"><span class="md-plain">ユーザーの動機に対する機能（検索、メッセージフォームなど）を提供します。</span></p>
<h3 class="md-end-block md-p"><span class="md-plain">Organisms(有機体)</span></h3>
<p class="md-end-block md-p"><span class="md-plain">独立して成立するコンテンツを提供します。</span><span class="md-plain">分子との分界が少し曖昧ですが、</span></p>
<p class="md-end-block md-p"><span class="md-plain">分子は、 独立して存在できるコンポーネントではなく、他のコンポーネントの機能を助けるヘルパーとしての存在意義が強いコンポーネント</span></p>
<p class="md-end-block md-p"><span class="md-plain">有機体は、独立して存在できるスタンダードアローンなコンポーネントです。</span></p>
<h3 class="md-end-block md-p"><span class="md-plain">Templates(テンプレート)</span></h3>
<p class="md-end-block md-p"><span class="md-plain">その名の通りページの雛形です。雛形なので具体的なコンテンツは持ちませんが、原子〜有機体層のコンポーネントを実際サービスのページと同様に配置して、レイアウト構造を集中して確認できます。ワイヤの役割だと思います。</span></p>
<h3 class="md-end-block md-p"><span class="md-plain">Pages(ページ)</span></h3>
<p class="md-end-block md-p md-focus"><span class="md-plain">テンプレート層のコンポーネントに実際のコンテンツを流し込んだ物がページです。つまり、ユーザーが実際に触るプロダクトになります。</span></p>
<p>&nbsp;</p>
<p><div id="attachment_8843" style="width: 610px" class="wp-caption alignnone"><img aria-describedby="caption-attachment-8843" loading="lazy" class="wp-image-8843" src="/uploads-archive/lc/2021/11/AtomicDesign03-1024x681.png" alt="AtomicDesign03" width="600" height="399" srcset="/uploads-archive/lc/2021/11/AtomicDesign03-1024x681.png 1024w, /uploads-archive/lc/2021/11/AtomicDesign03-300x200.png 300w, /uploads-archive/lc/2021/11/AtomicDesign03-768x511.png 768w, /uploads-archive/lc/2021/11/AtomicDesign03-600x399.png 600w, /uploads-archive/lc/2021/11/AtomicDesign03.png 1133w" sizes="(max-width: 600px) 100vw, 600px" /><p id="caption-attachment-8843" class="wp-caption-text">出典：<a href="https://atomicdesign.bradfrost.com/chapter-2/">https://atomicdesign.bradfrost.com/chapter-2/</a></p></div></p>
<h2 class="md-end-block md-p"><span class="md-plain">終わりに</span></h2>
<p class="md-end-block md-p md-focus"><span class="md-plain">Atomic Designって絶対的な正解ではなく、場合によって従来の画面ごとにUIデザインをした方がいい時もあると思うので、現状に合わせて合うものを取り入れたり、柔軟性を持つのが大事だと思います。究極的な目標は同じく堅牢で使いやすいかつ効率よく作ることなので。</span></p>


コンポーネントとAtomic Design

51MgH8Jmr3L-3.jpg

わかりやすいコードを書くシンプルなテクニック

<div>
<div>スターフィールドでは、ソースコードの開発管理に <a href="https://github.com/">GitHub</a> を使っています。</div>
<div>GitHubでは、ソースコードを管理するだけではなく、開発物の承認ですとかサーバーへのデプロイも実行できるのですが、その一連の流れを実施してくれる、<a href="https://github.co.jp/features/actions">GitHub Actions</a>  があります。</div>
</div>
<div></div>
<div>
<div>GitHub Actions については、公式ドキュメント以外にも、ClassmethodさんのDevelopers.IOにて、<a href="https://dev.classmethod.jp/tags/github-actions/">詳しく解説</a>をされているので、 そちらをご覧いただくとして、</div>
<div>この記事では、「GitHub Actions 初心者」としての感想などを書いてみたいと思います。</div>
<div></div>
<h2>どういうことをしたいのか</h2>
<div>PHP のソースコードを書いて、静的コード解析ツールを通して評価する Workflow を作成します。</div>
<div>静的コード解析ツールには、 <a href="https://phpstan.org/">PHPStan </a> を用います。</div>
<h2>実験</h2>
</div>
<div></div>
<h3>Workflowの作成</h3>
<div>
<div>PHPStanは、GitHub Packagesにコンテナが公開されているので、それを利用します。</div>
<div>


		<div id="crayon-64954036ed79d922599881" 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;">
ghcr.io/phpstan/phpstan</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-64954036ed79d922599881-1">1</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-64954036ed79d922599881-1"><span class="crayon-i">ghcr</span><span class="crayon-sy">.</span><span class="crayon-i">io</span>/<span class="crayon-i">phpstan</span>/<span class="crayon-i">phpstan</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>


</div>
<div>また、作成するWorkflow の一部には、 Greg Bowler氏による PHP Actionsを利用させていただきました。</div>
<div>https://github.com/php-actions/phpstan</div>
</div>
<div></div>
<div></div>
<div>Workflowは、 .github/workflow/phpstan.yaml として保存しました。</div>
<div>


		<div id="crayon-64954036ed7a1591821963" 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><span class="crayon-language">YAML</span></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;">
name: phpstan

on: [push, pull_request]

jobs:
  php-stan-test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - run: pwd; find  ./
      - run: docker run --rm -v `pwd`:/app -w /app ghcr.io/phpstan/phpstan analyse -c ./conf/phpstan.neon</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-64954036ed7a1591821963-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954036ed7a1591821963-2">2</div><div class="crayon-num" data-line="crayon-64954036ed7a1591821963-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954036ed7a1591821963-4">4</div><div class="crayon-num" data-line="crayon-64954036ed7a1591821963-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954036ed7a1591821963-6">6</div><div class="crayon-num" data-line="crayon-64954036ed7a1591821963-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954036ed7a1591821963-8">8</div><div class="crayon-num" data-line="crayon-64954036ed7a1591821963-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954036ed7a1591821963-10">10</div><div class="crayon-num" data-line="crayon-64954036ed7a1591821963-11">11</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-64954036ed7a1591821963-1">name<span class="">: phpstan</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954036ed7a1591821963-2">&nbsp;</div><div class="crayon-line" id="crayon-64954036ed7a1591821963-3">on<span class="">: [push</span><span class="crayon-o">,</span><span class="crayon-h"> </span>pull<span class="crayon-sy">_</span>request<span class="crayon-o">]</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954036ed7a1591821963-4">&nbsp;</div><div class="crayon-line" id="crayon-64954036ed7a1591821963-5">jobs<span class="">:</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954036ed7a1591821963-6"><span class="crayon-h">&nbsp;&nbsp;</span>php-stan-test<span class="">:</span></div><div class="crayon-line" id="crayon-64954036ed7a1591821963-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span>runs-on<span class="">: ubuntu-latest</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954036ed7a1591821963-8"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span>steps<span class="">:</span></div><div class="crayon-line" id="crayon-64954036ed7a1591821963-9"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>-<span class="crayon-h"> </span>uses<span class="">: actions/checkout@v2</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954036ed7a1591821963-10"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>-<span class="crayon-h"> </span>run<span class="">: pwd; find&nbsp;&nbsp;./</span></div><div class="crayon-line" id="crayon-64954036ed7a1591821963-11"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>-<span class="crayon-h"> </span>run<span class="">: docker run --rm -v `pwd`</span><span class="">:/app -w /app ghcr.io/phpstan/phpstan analyse -c ./conf/phpstan.neon</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>


</div>
<div></div>
<div>対象とするPHPのコードは、<a href="https://phpstan.org/">PHPStanのトップページ</a>にあるコードです…。</div>
<h3></h3>
<h3>PHPStan Config(neon)の作成</h3>
<div></div>
<div>


		<div id="crayon-64954036ed7a3942773136" 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><span class="crayon-language">YAML</span></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;">
parameters:
    paths:
        - ../src/php_src/
    level: 8</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-64954036ed7a3942773136-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954036ed7a3942773136-2">2</div><div class="crayon-num" data-line="crayon-64954036ed7a3942773136-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954036ed7a3942773136-4">4</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-64954036ed7a3942773136-1">parameters<span class="">:</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954036ed7a3942773136-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span>paths<span class="">:</span></div><div class="crayon-line" id="crayon-64954036ed7a3942773136-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>-<span class="crayon-h"> </span><span class="crayon-o">.</span><span class="crayon-o">.</span>/src/php<span class="crayon-sy">_</span>src/</div><div class="crayon-line crayon-striped-line" id="crayon-64954036ed7a3942773136-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span>level<span class="">: 8</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>


</div>
<div></div>
<div>とても短いneonですが、これで十分な動作をします。</div>
<div></div>
<div>
<div>PHPStan には、0〜9までの <a href="https://phpstan.org/user-guide/rule-levels">Rule Level</a>  がありますが、</div>
<div>最高レベルの level: 9を指定すると、</div>
<div></div>
<div>


		<div id="crayon-64954036ed7a4530306882" 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;">
Level config file phar:///composer/vendor/phpstan/phpstan/phpstan.phar/conf/config.level9.neon was not found.</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-64954036ed7a4530306882-1">1</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-64954036ed7a4530306882-1"><span class="crayon-e">Level </span><span class="crayon-e">config </span><span class="crayon-e">file </span><span class="crayon-i">phar</span><span class="crayon-sy">:</span><span class="crayon-c">///composer/vendor/phpstan/phpstan/phpstan.phar/conf/config.level9.neon was not found.</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>


</div>
<div>とのエラーが発生しました。Dockerイメージの中には、level:9 の neon ファイル用意されていないようです。</div>
<div></div>
<div>そのため、level: 8 を指定しました。</div>
</div>
<div></div>
<h3>Workflowの実行</h3>
<div>GitHub Actions の Workflow を通して、PHPStanを実行した結果です。</div>
<div></div>
<div>level:8 だと、</div>
<div><img decoding="async" loading="lazy" class="alignnone wp-image-17230 size-medium" src="/uploads-archive/2021/10/-2021-10-29-16.10.24-e1635492897628-300x146.png" alt="" width="300" height="146" srcset="/uploads-archive/2021/10/-2021-10-29-16.10.24-e1635492897628-300x146.png 300w, /uploads-archive/2021/10/-2021-10-29-16.10.24-e1635492897628-228x111.png 228w, /uploads-archive/2021/10/-2021-10-29-16.10.24-e1635492897628.png 651w" sizes="(max-width: 300px) 100vw, 300px" /></div>
<div></div>
<div>
<div>最低レベルの level: 0 だと、</div>
</div>
<div></div>
<div><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-17231" src="/uploads-archive/2021/10/スクリーンショット-2021-10-29-16.18.08-300x127.png" alt="" width="300" height="127" srcset="/uploads-archive/2021/10/スクリーンショット-2021-10-29-16.18.08-300x127.png 300w, /uploads-archive/2021/10/スクリーンショット-2021-10-29-16.18.08-228x96.png 228w, /uploads-archive/2021/10/スクリーンショット-2021-10-29-16.18.08.png 642w" sizes="(max-width: 300px) 100vw, 300px" /></div>
<div></div>
<div>
<div>level:8 の方が手厳しく指導されてますね！</div>
</div>
<div>そもそも、level:8 で、まともなコードと言えるでしょう。</div>
<div>静的コード解析は、最高レベルで実施するに限ります。</div>
<div></div>
<div>
<h2>まとめ</h2>
<div>コードの品質を保つには、静的コード解析ツールを実行する他にも、コードレビューを確保する必要がありますが、GitHub Actionsを使って、コードが更新されるたびに静的コード解析ツールが実行されると、品質の悪いコードが入り込む余地がありません。</div>
<div>お客さまが触れる製品サービスの品質をあげていく上でも、また、エンジニアの負担軽減のためにも、このようなGitHub Actionsを活用していきたいです。</div>
</div>

Octocat-768x638.png

GitHub Actions を使って静的コード解析を行うのがとても便利

cssのみで実装できる！モーフィングアニメーション

<h1>TCP/IPとは</h1>
<p>TCP／IPとは通信プロトコルの総称です。インターネットは別々に発達してきた様々な通信技術を組み合わせたものです。そのような組み合わせを実現するための応用力を持つ技術がTCP／IPです。</p>
<h3>プロトコルって何？なぜ必要？</h3>
<p>プロトコルとはコンピューターとコンピューターがネットワークを利用して通信するために決められた<strong>「約束ごと」</strong>になります。</p>
<p>メーカーやCPUやOSが違うコンピューター同士でも同じプロトコルを使えば互いに通信することができます。逆にいうとプロトコルを使用しなければ通信することはできません。</p>
<p>プロトコルにはいくつもの種類があり、それぞれ仕様が明確に決められていて、コンピューター同士が互いに通信するためには、両者が同じプロトコルを理解し、処理できなければなりません。</p>
<p>人間なら知能、応用力、理解力を持っているので、ある程度ルールから外れても意思疎通を図ることができますが、</p>
<p>コンピューターによる通信の場合は、コネクタの形状のような物理的なレベルからアプリケーションの種類のようなソフトウェアのレベルまで、様々な部分で明確な「<strong>約束ごと」</strong>を決めてそれを守るようにしなければ正しく通信することができません。</p>
<h2>マスタリングTCP/IP入門編</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-17193" src="/uploads-archive/2021/10/スクリーンショット-2021-10-12-10.08.38-1-1-209x300.png" alt="" width="209" height="300" srcset="/uploads-archive/2021/10/スクリーンショット-2021-10-12-10.08.38-1-1-209x300.png 209w, /uploads-archive/2021/10/スクリーンショット-2021-10-12-10.08.38-1-1-228x328.png 228w, /uploads-archive/2021/10/スクリーンショット-2021-10-12-10.08.38-1-1.png 445w" sizes="(max-width: 209px) 100vw, 209px" /></p>
<p><a title="amazonマスタリングTCP/IP入門編" href="https://www.amazon.co.jp/%E3%83%9E%E3%82%B9%E3%82%BF%E3%83%AA%E3%83%B3%E3%82%B0TCP-IP%E2%80%95%E5%85%A5%E9%96%80%E7%B7%A8%E2%80%95-%E7%AC%AC6%E7%89%88-%E4%BA%95%E4%B8%8A-%E7%9B%B4%E4%B9%9F/dp/4274224473/ref=asc_df_4274224473/?tag=jpgo-22&amp;linkCode=df0&amp;hvadid=342397001181&amp;hvpos=&amp;hvnetw=g&amp;hvrand=18027228824331662531&amp;hvpone=&amp;hvptwo=&amp;hvqmt=&amp;hvdev=c&amp;hvdvcmdl=&amp;hvlocint=&amp;hvlocphy=1009255&amp;hvtargid=pla-847853186623&amp;psc=1&amp;th=1&amp;psc=1&amp;tag=&amp;ref=&amp;adgrpid=72867581430&amp;hvpone=&amp;hvptwo=&amp;hvadid=342397001181&amp;hvpos=&amp;hvnetw=g&amp;hvrand=18027228824331662531&amp;hvqmt=&amp;hvdev=c&amp;hvdvcmdl=&amp;hvlocint=&amp;hvlocphy=1009255&amp;hvtargid=pla-847853186623" target="_blank" rel="noopener">マスタリングTCP/IP入門編(書籍)</a></p>
<p>TCP/IPについてコンピューターとネットワーク登場の背景から、コンピューターとネットワークの発展の歴史とそれにまつわるTCP／IPについてOSI参照モデルの機能分類にTCP／IPの機能を当てはめる形で一つ一つ詳しく解説されています。</p>
<p>通信に必要な機能について多くの通信のプロトコルはOSI参照モデルの7層のどれかに当てはめて考えることができます。</p>
<p>詳細を知るには、個々のプロトコルの仕様書をその都度読む必要がありますが、おおよその役割はこの階層モデルのどの層に当たるかで見当をつけることができます。</p>
<h3>なぜこの本に興味をもったのか</h3>
<p>業務での通信エラーなどでプロトコルについて幅広く知識をつけておくことで原因を特定しやすくなるのではないかと思ったことと、ネットワークについて歴史的な発展とともに発達してきた技術について背景を知った方が今後の技術習得がスムーズになると思ったので読みました。</p>
<h2>OSI参照モデル7層の各層の役割</h2>
<h6>7.アプリケーション層</h6>
<p>アプリケーションの中で通信に関係する部分を定めていて、ファイル転送や電子メール、遠隔ログイン(仮想端末)などを実現するためのプロトコルがある。</p>
<h6>6.プレゼンテーション層</h6>
<p>機器固有のデータ表現形式（データーフォーマット）などをネットワーク共通のデータ形式に変換する役割がある。</p>
<h6>5.セッション層</h6>
<p>コネクション（データの流れる論理的な通信路）の確立や切断、転送するデータの切れ目の設定などデータ転送に関する管理を行います。</p>
<h6>4.トランスポート層</h6>
<p>宛先のアプリケーションにデータを確実に届ける役目がある。通信を行う両端のノードだけで処理され途中のルーターでは処理されません。</p>
<h6>3.ネットワーク層</h6>
<p>宛先までデータを届ける役割を持ちます。宛先は複数のネットワークがルーターにつながった先にある場合もあり、そのためのアドレス体系決めやどの経路を使うかなどの経路選択の役割を持ちます。</p>
<h6>2.データリンク層</h6>
<p>直接接続された機器間でのデータフレームの識別と転送。0と1の数字の列を意味のあるかたまり（フレーム）に分けて相手に伝えます。（フレームの生成と受信）</p>
<h6>1.物理層</h6>
<p>ビットの列（0と1の数字の列）を電圧の高低や光の点滅に変換したり、逆に電圧の高低や光の点滅をビットの列に変換したりします。</p>
<h3>TCP/IPのアプリケーション層</h3>
<p>TCP／IPのプロトコルは4層に分けて説明されますが、その中のアプリケーション層をOSI参照モデルに当てはめると、第5層、第6層、第7層のすべての機能が埋め込まれます。<br />
通信コネクションの管理などのセッション層の機能や、データフォーマットの変換というプレゼンテーション層の機能、相手ホストのとのやり取りというアプリケーション層の機能はすべてアプリケーションプログラムが担っています。</p>
<h3>学んだこと</h3>
<p>OSI参照モデルでの一つ一つの紹介はここでは長くなるので割愛しますが、業務でSSLの更新などに携わることがあり、工程としてアプリケーション層での遠隔ログインと呼ばれるSSH接続をします。</p>
<p>以前には遠隔ログインシステムにはTELNETというものもあり、TELNETではログイン時でのパスワードが暗号化されずに送信されるので、通信を盗聴されると不正侵入される危険性があり、SSHという通信内容が暗号化される遠隔ログインシステムが登場し普及したなど、当時はTELNETというシステムが一般的だったのが、システムの脆弱性から新しい技術が発展し、今SSHが普及しているなど、今の技術に至るまでの歴史的な背景や仕組みなどが図になって説明されていたのですごく理解が深まりました。</p>
<h4>業務で活かせることができる点</h4>
<p>今、安心安全とされている技術であっても数年後には脆弱性が見つかり使われなくなったりするので、（SSHにはバージョン1とバージョン2が存在しバージョン1には脆弱性があり、バージョン2の利用が推奨されているなど）エンジニアとして常に新しい技術に対してキャッチアップしていきながら、今使用している技術に対して満足することなく問題がないかを確認し、問題がある場合は日々更新、改善していく意識を忘れずにもつことが大事だなと改めて感じました。</p>


スクリーンショット-2021-10-12-10.08.38-1-1.png

よく聞くけど知らない？TCP/IPについて

<h3><span class="md-plain md-expand">前書き</span></h3>
<p>全Qの個人OKRで、UIUX関連の本「Atomic Design」を読みました。本ではコンポーネントベースでのUI開発を提唱していて、実践の際にツールとしてstorybookを使います。そこでstorybookを知り、使ってみたり、調べてみたりして、すごい良いツールだと感じました。調べてみたらデザインシステムのこともたくさん出てましたので、一緒にブログにまとめました。コンポーネントベースでのUI開発のメリットなど、本の詳しい内容は次回に共有したいと思います〜</p>
<h2 class="md-end-block md-heading md-focus"><span class="md-plain md-expand">デザインシステムとは？</span></h2>
<p>デザインシステムとは、デザインの概念、原則などをまとめたドキュメント、それらを具体的なデザインに落とし込むためのスタイルガイド、UIコンポーネントライブラリ、そしてそれらの管理・運用ルールや、<strong>コード化されたUIコンポーネントの管理ツール</strong>など、さまざまな構成要素で成り立つ「仕組み」です。</p>
<p class="md-end-block md-p md-focus"><span class="md-plain md-expand">※参考になるブログ記事</span></p>
<p class="md-end-block md-p md-focus"><a href="https://www.uxpin.com/studio/jp/blog-jp/%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E4%BE%8B%E3%83%88%E3%83%83%E3%83%97%EF%BC%98/"><span class="md-plain md-expand">デザインシステム例トップ８</span></a></p>
<h4 class="md-end-block md-heading md-focus"><span class="md-plain md-expand">なぜ管理ツールが必要なのか？</span></h4>
<p class="md-end-block md-p"><span class="md-plain">もちろん、適しているものに対しての話ですが、システム開発に置いて必須要素ではないですがものすごい生産性を高めることができると思います。</span></p>
<p class="md-end-block md-p md-focus"><span class="md-plain">まず、コンポーネントベースのUI開発の最大目的は複雑なUIを確実に組み上げることです。でも、いくら再利用可能なコンポーネントが作成しても文書化管理されていないと意味がないと思います。なので、デザインと開発の生産性をアップするための文書化管理ができるツールが必要になってきます。メリットとしては、UIコンポーネントのカタログとして視覚的に確認できることで、認識の齟齬を無くしたり、再利用可能になるなどがあります。</span></p>
<h2 class="md-end-block md-heading md-focus"><span class="md-plain md-expand">Storybook とは？</span></h2>
<p>UIコンポーネントの管理・テストをすることが出来るオープンソースツールです。React、Vue、Angular、などのJavaScriptフレームワークをサポートしています。</p>
<p>※<a href="https://storybook.js.org/">Storybook公式サイト</a></p>
<h4 class="md-end-block md-heading md-focus"><span class="md-plain md-expand">適しているもの</span></h4>
<ul>
<li>継続的にリリースしていくアプリ</li>
<li>同じプランドの複数のwebサイト</li>
</ul>
<h4 class="md-end-block md-heading md-focus"><span class="md-plain md-expand">適していないもの</span></h4>
<ul>
<li>デザインの統一性が重要ではないもの</li>
<li>一度作れば終わりで継続的にUIを管理する必要がないもの</li>
</ul>
<h3 class="md-end-block md-heading md-focus"><span class="md-plain md-expand">環境インストール</span></h3>
<p>※<a href="https://storybook.js.org/tutorials/intro-to-storybook/react/ja/get-started/">公式サイトのチュートリアル</a></p>
<h4 class="md-end-block md-p"><span class="md-plain">大きな流れ</span></h4>
<ol class="ol-list" start="">
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">Create React App プロジェクトを生成する</span></p>
<p class="md-end-block md-p"><span class="md-plain">フレームワークに既にセットされているプロジェクトで、インストールする必要があるため、先にReactプロジェクトを生成します。</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">Storybookを導入</span></p>
<p class="md-end-block md-p"><span class="md-plain">二つの方法があるらしいです。基本機能が揃っているのをインストールするか、必要な機能を一個ずつインストールする方法です。</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">コンポーネントを作る</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">実行</span></p>
</li>
</ol>
<p class="md-end-block md-p md-focus"><span class="md-plain">興味がある方は試してみてください〜</span></p>


Storybookでデザインシステムを始めましょう！

JavaScriptのモダンなオブジェクトの構文・演算子

<p>皆さんは普段、webサイトを見る時や商品をネット上で買うときは何で見ますか？<br />
つい最近もiPhone13が出てきたりと何事にもiPhoneをはじめとしたスマートフォンが主流となってきています。<br />
実際webデザインにおいてもスマートフォン表記をメインに置くことも珍しく無くなってきました。</p>
<p>少し話がずれてきてしまったのですが、<br />
スマホ主流となってきた今、SNSというものがプロモーションに使用されており気軽に色んな人の目に触れる機会が多くなってきました。<br />
しかし、色んな情報が多く見られる現代では、より今まで以上に情報の選択をしており、自分の目的に合った物以外をスルーするもしくはシャットダウン（ブロック）することも多くなりました。</p>
<p>今回「Twitter」に限定してしまうのですが、<br />
フォローしてくれている人達が普段どの様なことに興味を持ち、どの様なコミュニティーに参加しているか、そしてそのコミュニティーは一般的なのか？を把握する事ができ、自身のアカウントの調査→ニーズの特定ができる様なサービスがありましたので紹介しようと思います。</p>
<h3>「エコーチェンバー可視化システム」</h3>
<p>まずエコーチェンバーとは何かと言いますと、<br />
閉鎖的空間内でのコミュニケーションが繰り返されることにより、特定の信念が増幅または強化されてしまう状況の比喩である。<br />
世の中には様々な人がおり、様々な意見を持った人と触れ合うことが出来る。世界に開かれたグローバルでオープンな場で、「公開討論」のような形で意見を交換し合うことができるコミュニティがある。一方で、同じ意見を持った人達だけがそこに居ることを許される閉鎖的なコミュニティもあり、そのような場所で彼らと違う声を発すると、その声はかき消され、彼らと同じ声を発すると、増幅・強化されて返ってきて、「自分の声」がどこまでも響き続ける。それが「エコーチェンバー」である。(wikipwdiaより)</p>
<p>つまり、同意見だったりした場合は多くの反応を貰えるが一方、方向性が違ったりした場合は注目はあまりされないということになります。</p>
<p>例えば役に立つ豆知識等や可愛い動物の動画などがバズったりするのはこのエコーチェンバー現象の様に同じ考えを持つ人が多く存在しているからと考えられます。</p>
<h3>実際に使用してみました</h3>
<p>今回は弊社で運営している「コンペナビ」の公式Twitterを例に挙げて検証してみます。</p>
<p><a href="https://torilab.sakura.ne.jp/twitter/echamber/index.html">https://torilab.sakura.ne.jp/twitter/echamber/index.html</a></p>
<p><img loading="lazy" class="alignnone size-large wp-image-8432" src="/uploads-archive/lc/2021/10/56b3836f4d63b9681391397b2a05822f-1-1024x363.png" alt="" width="1024" height="363" srcset="/uploads-archive/lc/2021/10/56b3836f4d63b9681391397b2a05822f-1-1024x363.png 1024w, /uploads-archive/lc/2021/10/56b3836f4d63b9681391397b2a05822f-1-300x106.png 300w, /uploads-archive/lc/2021/10/56b3836f4d63b9681391397b2a05822f-1-768x272.png 768w, /uploads-archive/lc/2021/10/56b3836f4d63b9681391397b2a05822f-1-600x213.png 600w, /uploads-archive/lc/2021/10/56b3836f4d63b9681391397b2a05822f-1.png 1196w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p>Twitterのアカウントでログインした後はその下の「エコーチャンバー可視化」を選択。</p>
<p>そうしますとこのアカウントでの情報が表示されます。</p>
<p><img loading="lazy" class="alignnone size-large wp-image-8433" src="/uploads-archive/lc/2021/10/e67404fa42bd9b9725a21a593aaeae51-1024x769.png" alt="" width="1024" height="769" srcset="/uploads-archive/lc/2021/10/e67404fa42bd9b9725a21a593aaeae51-1024x769.png 1024w, /uploads-archive/lc/2021/10/e67404fa42bd9b9725a21a593aaeae51-300x225.png 300w, /uploads-archive/lc/2021/10/e67404fa42bd9b9725a21a593aaeae51-768x577.png 768w, /uploads-archive/lc/2021/10/e67404fa42bd9b9725a21a593aaeae51-600x451.png 600w, /uploads-archive/lc/2021/10/e67404fa42bd9b9725a21a593aaeae51.png 1189w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p><img loading="lazy" class="alignnone size-large wp-image-8434" src="/uploads-archive/lc/2021/10/3a3138c63b9ff449adaebaec06a77208-1024x558.png" alt="" width="1024" height="558" srcset="/uploads-archive/lc/2021/10/3a3138c63b9ff449adaebaec06a77208-1024x558.png 1024w, /uploads-archive/lc/2021/10/3a3138c63b9ff449adaebaec06a77208-300x163.png 300w, /uploads-archive/lc/2021/10/3a3138c63b9ff449adaebaec06a77208-768x418.png 768w, /uploads-archive/lc/2021/10/3a3138c63b9ff449adaebaec06a77208-600x327.png 600w, /uploads-archive/lc/2021/10/3a3138c63b9ff449adaebaec06a77208.png 1181w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p><img loading="lazy" class="alignnone size-large wp-image-8435" src="/uploads-archive/lc/2021/10/2a8a3aa8fe3dfc2b306deecb267fda37-1024x325.png" alt="" width="1024" height="325" srcset="/uploads-archive/lc/2021/10/2a8a3aa8fe3dfc2b306deecb267fda37-1024x325.png 1024w, /uploads-archive/lc/2021/10/2a8a3aa8fe3dfc2b306deecb267fda37-300x95.png 300w, /uploads-archive/lc/2021/10/2a8a3aa8fe3dfc2b306deecb267fda37-768x244.png 768w, /uploads-archive/lc/2021/10/2a8a3aa8fe3dfc2b306deecb267fda37-600x191.png 600w, /uploads-archive/lc/2021/10/2a8a3aa8fe3dfc2b306deecb267fda37.png 1187w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p><img loading="lazy" class="alignnone size-large wp-image-8436" src="/uploads-archive/lc/2021/10/1dda94d7e740bfb48cd1f1282c1487b8-1024x563.png" alt="" width="1024" height="563" srcset="/uploads-archive/lc/2021/10/1dda94d7e740bfb48cd1f1282c1487b8-1024x563.png 1024w, /uploads-archive/lc/2021/10/1dda94d7e740bfb48cd1f1282c1487b8-300x165.png 300w, /uploads-archive/lc/2021/10/1dda94d7e740bfb48cd1f1282c1487b8-768x422.png 768w, /uploads-archive/lc/2021/10/1dda94d7e740bfb48cd1f1282c1487b8-600x330.png 600w, /uploads-archive/lc/2021/10/1dda94d7e740bfb48cd1f1282c1487b8.png 1180w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p><img loading="lazy" class="alignnone size-large wp-image-8437" src="/uploads-archive/lc/2021/10/b8469d2e25d03d09373f04c4938a714b-1024x782.jpg" alt="" width="1024" height="782" srcset="/uploads-archive/lc/2021/10/b8469d2e25d03d09373f04c4938a714b-1024x782.jpg 1024w, /uploads-archive/lc/2021/10/b8469d2e25d03d09373f04c4938a714b-300x229.jpg 300w, /uploads-archive/lc/2021/10/b8469d2e25d03d09373f04c4938a714b-768x586.jpg 768w, /uploads-archive/lc/2021/10/b8469d2e25d03d09373f04c4938a714b-600x458.jpg 600w, /uploads-archive/lc/2021/10/b8469d2e25d03d09373f04c4938a714b.jpg 1200w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p>この様に自身がいるコミュニティーは一般的なのか、または偏りがあるのか、それによってツイートやリツイートの方向性を考えてみるのが良いと感じました。</p>
<p>元々は自分がどのくらいエコーチェンバーの中に入ってしまっているのかを客観的に評価するためのシステムで、自分のタイムラインに表示される意見がどの程度一般から乖離しているのかを可視化できるものですが、この様な使い方も出来そうだと思い今回は紹介させていただきました。</p>


Twitterでの拡散率が高まる！？フォロワーの傾向を知ろう


<p>WEBデザインの問題で改善が必要になったとき、いろいろな意見をどう整理して形にしていったらよいかで悩んでいたときに、以下の本に出逢いました。</p>



<figure class="wp-block-embed is-type-rich is-provider-amazon wp-block-embed-amazon"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" title="デザインリサーチの教科書" 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_E0y9HMFHnIjaQJ&#038;asin=4802511779&#038;tag=kpembed-20"></iframe>
</div><figcaption>デザインリサーチの教科書</figcaption></figure>



<p>この本を探した目的は、デザインする際、どのように情報を収集・整理したらよいかを改めて勉強するためだったのですが、<br>この本に書かれていた内容は、デザイナーの職種を超えて、問題解決のアイディアを形にするものでした。</p>



<p>自分なりにこちらの内容をごく一部ですが整理してみました。</p>



<h2>デザインが対象とするプロダクトと範囲の広がり</h2>



<p>19世紀に生まれた最初のデザインの対象はグラフィックのみでした（第一次デザイン）。デザインの手法はこの第一次デザインがベースとなっています。そこから20世紀にモノのデザイン、つまりインダストリアルデザインに広がります（第二次デザイン）。1980年代からは行動や体験をデザインするインタラクションデザイン（第三次デザイン）、2000年代には更にそこに持続可能性を考慮したデザインであるサービスデザイン（第三次デザイン）、そして2010年代にはビジネス・組織・教育・政府を対象としたシステムデザイン（第四次デザイン）にまで広がっています。この広がりの背景には、プロダクトの意味がモノからサービスへと移行してきたことがあり、それに伴い、デザインが必要とされる範囲もいろがってきたと考えられます。</p>



<p>この変化の中で、デザインの視野も同時に変化してきました。作り手の都合からユーザーの都合へ、ユーザーの都合から社会の都合へ、社会の都合から環境の都合へ。デザインの視野が広がるにつれ、そこに必要とされる要素も増えてきますので、綿密なリサーチが必要となってきます。</p>



<p>デザインの範囲がこれだけ広がってくると、必要な専門知識も広くなってくるため、デザイナーだけでデザインすることにも限界があり、職種をまたいでデザインしていく必要性も出てきます。</p>



<h2>マーケティングリサーチの限界とデザインリサーチの可能性</h2>



<p>未来の不確実性により、「十分に明確な未来」「選択的な未来」「ある範囲内の未来」「予測できない未来」に分けられます。</p>



<p>プロダクトの黎明期においては、十分に明確な未来となり、何を開発すれば売れるかという競争原理が明確です（CPUのクロック数を上げる、デジカメの画素数を上げる）。</p>



<p>プロダクトが成熟してくると、競合が増え「選択的な未来」となります（ブルーレイとHD DVD）。</p>



<p>更に先の未来を予測する場合には、「ある範囲内の未来」となり、ある程度の範囲に落ち着くことはわかっているが、いつになるかはわからないケースが出てきます（AIの浸透）。</p>



<p>更に会社の将来など、「予測できない未来」があります。</p>



<p>マーケティングリサーチで用いられるロジカルシンキングは確実性の高いリサーチに強く、不確実性が高いリサーチに弱いという問題があり、現在の変化が多く不確実性の高い時代においては不利となります。現代においては情報の入手が容易で競合との差がつけられない反面、情報が非常に膨大でロジカルな手法では把握しきれないという問題があるためです。</p>



<p>一方のインスピレーションを主軸とするデザインリサーチは不確実性が高いほど威力を発揮するため、今の時代において必要性が高まっています。競合がいない状況では一人ひとりにフォーカスするよりも、人々を大きく括ってプロダクトを作るほうが理にかなっていますが、競合が登場すると、一人ひとりがどのように生活しているかを知り、ニーズや要望を深く理解する必要があります。デザインリサーチではプロダクトに関わる一人ひとりにフォーカスし、そこからインスピレーションを得てアイディアにつなげていく手法を取ります。また、類推というデザインでよく行われる手法により、直接関係のないユーザーから新たなニーズを引き出すことも可能です。</p>



<p>同じく不確実性に対応するための開発手法であるアジャイルに自然に組み込むことができるのも、デザインリサーチ導入のメリットです。</p>



<h2>デザインリサーチの軸となるデザインプロセス</h2>



<figure class="wp-block-image size-full"><img loading="lazy" width="960" height="647" src="/uploads-archive/lc/2021/09/design-process-1.jpg" alt="" class="wp-image-8272" srcset="/uploads-archive/lc/2021/09/design-process-1.jpg 960w, /uploads-archive/lc/2021/09/design-process-1-300x202.jpg 300w, /uploads-archive/lc/2021/09/design-process-1-768x518.jpg 768w, /uploads-archive/lc/2021/09/design-process-1-600x404.jpg 600w" sizes="(max-width: 960px) 100vw, 960px" /><figcaption>「デザインリサーチの教科書」内のBritish Design Council「<a rel="noreferrer noopener" href="https://www.designcouncil.org.uk/resources/report/11-lessons-managing-design-global-brands" target="_blank">Eleven lessons: managing design in eleven global grands | The design process</a>」の改定をさらに改定</figcaption></figure>



<p>デザインリサーチの軸となるデザインプロセスでは、Descover（課題を洗い出す）→ Define（課題を絞り込む）→ Develop（課題を洗い出す）→ Deliver（解決策を絞り込む）という発散・収束を繰り返す4段階を通過します。</p>



<p>実際にはDevelopからDiscoverに戻る、解決から新たな課題を見出し課題に戻るというループを経ます。</p>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

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

2022/01/08

2021/12/17

2021/12/11

2021/12/10

2021/12/03

2021/11/27

2021/11/26

2021/11/18

2021/11/12

2021/11/11

2021/11/05

2021/10/30

2021/10/30

2021/10/21

2021/10/16

2021/10/12

2021/10/01

2021/09/04