# はじめに
近年、チームワークや情報共有の重要性が高まる中で、さまざまなツールやサービスが活用されています。その中でも、GoogleスプレッドシートとGoogle Chatは、多くの企業や組織で利用されている定番ツールです。
この記事では、Google Apps Scriptを使用して、Google スプレッドシートで特定の操作が行われた際にGoogle Chatへ自動で通知を送る方法について、その**手順**と**応用例**を紹介します。

### 手順概要
1. Google Chat Webhook URLの取得
2. Google Apps Scriptの作成
3. Google Apps Scriptのトリガー設定
4. Google Chatへの通知送信の確認

#### 1. Google Chat Webhook URLの取得
最初に、Google Chatに通知を送信するためのWebhook URLを取得します。

1. Google Chatを開き、通知を送りたいチャットルームを選択します。
2. チャットルーム名をクリックし、「アプリと統合」を選択します。
3. 「+Webhookを追加」をクリックし、名前を入力して「保存」をクリックします。
4. 表示されたWebhook URLをコピーします。このURLは後でスクリプト(手順2)に使用します。

 ![](https://cont.sterfield.co.jp/uploads/webhook_f7e4ed54ef.png) 

**補足**

・Webhook URLは、Chatルームごとに個別に発行されます。

・複数のWebhook URLを作成し、異なるChatルームへ通知することも可能です。


#### 2. Google Apps Scriptの作成
次に、Google スプレッドシートに関連付けるGoogle Apps Scriptを作成します。

1. 対象のGoogle スプレッドシートを用意して開きます。
2. メニューバーから「拡張機能」をクリックし、「Apps Script」を選択します。
3. スクリプトエディタが開きます。新しいプロジェクトが作成され、デフォルトのコードエディタが表示されます。
4. 以下のコードをエディタに貼り付け、Webhook URLを先ほどコピーしたURLに置き換えます。

 ![](https://cont.sterfield.co.jp/uploads/script_4be5865e34.png) 

```
function sendToGoogleChat(message) {
  var url = "YOUR_WEBHOOK_URL";  // ここをWebhook URLに置き換えます

  var payload = JSON.stringify({ "text": message });
  
  var options = {
    "method": "POST",
    "contentType": "application/json",
    "payload": payload
  };

  UrlFetchApp.fetch(url, options);
}

function notifyOnEdit(e) {
  var sheet = e.source.getActiveSheet();
  var range = e.range;
  var editedValue = range.getValue();
  var message = "Cell " + range.getA1Notation() + " was edited. New value: " + editedValue;
  
  sendToGoogleChat(message);
}
```
このスクリプトは、スプレッドシートのセルが編集された際に、その情報をGoogle Chatに送信します。

**ポイント**

・YOUR_WEBHOOK_URL を、1で取得したWebhook URLに置き換えてください。

・必要に応じて、messageの内容を編集してください。


#### 3. Google Apps Scriptのトリガー設定
1. スクリプトを保存し、トリガーを設定してスクリプトが自動的に実行されるようにします。
2. スクリプトエディタの時計アイコン（「トリガー」）をクリックします。
3. 「トリガーを追加」をクリックし、「notifyOnEdit」を選択します。
4. イベントの種類を「スプレッドシートから」に設定し、「編集時」を選択します。
5. 保存してトリガーを有効にします。(認証ダイアログが出てくる場合は、認証を行います。)

 ![](https://cont.sterfield.co.jp/uploads/trigger_7bf337dbff.png) 

#### 4. Google Chatへの通知送信の確認
設定が完了したら、実際にGoogle スプレッドシートでセルを編集してみてください。編集が行われると、指定したチャットルームに通知が送信されるはずです。

 ![](https://cont.sterfield.co.jp/uploads/spreadsheet_ba705a00a8.png) 

 ![](https://cont.sterfield.co.jp/uploads/chat_05129bfbf6.png) 


### 応用例
#### 応用例1: 特定のシートやセル範囲でのみ通知を送る
特定のシートやセル範囲に変更があった場合のみ通知を送るようにスクリプトをカスタマイズできます。

```
function notifyOnEdit(e) {
  var sheet = e.source.getActiveSheet();
  
  // シート名が「Sheet1」でない場合は通知を送らない
  if (sheet.getName() != "Sheet1") {
    return;
  }

  var range = e.range;
  var editedValue = range.getValue();
  var message = "Cell " + range.getA1Notation() + " was edited. New value: " + editedValue;
  
  sendToGoogleChat(message);
}
```
これにより、「Sheet1」でのみ変更があった場合に通知が送られます。


#### 応用例2: 通知内容の詳細化
通知内容を詳細にカスタマイズすることも可能です。例えば、変更があったセルの前の値と新しい値の両方を通知に含めることができます。

```
function notifyOnEdit(e) {
  var sheet = e.source.getActiveSheet();
  var range = e.range;
  var oldValue = e.oldValue;  // 前の値
  var editedValue = range.getValue();  // 新しい値
  var message = "Cell " + range.getA1Notation() + " was edited. Old value: " + oldValue + ", New value: " + editedValue;
  
  sendToGoogleChat(message);
}
```
これにより、編集前と編集後の値を通知に含めることができます。


# まとめ
Google Apps ScriptとWebhookを使って、スプレッドシートの操作をGoogle Chatへ自動通知する方法をご紹介しました。これにより、チームメンバーは**リアルタイムで情報共有**でき、**タスク管理**や作業のトラッキングが**効率化**されます。ぜひ、活用してチームワークを強化してください。

eyecatch.png

Googleスプレッドシートでの操作をGoogleChatに通知する方法

### 書籍の情報
- 書籍名: TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発
- 著者: 手島拓也、吉田健人、高林佳稀
- 出版社: 技術評論社
- ISBN-13: 978-4297129163
- 発行日: 2022/7/25
- リンク: https://gihyo.jp/book/2022/978-4-297-12916-3

## はじめに
「TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発」は、開発をより快適・堅牢にするTypeScriptを用いて、React/Next.jsの基礎、最新フロントエンドやWebアプリケーションの開発方法が学べる書籍です。

TypeScriptは、JavaScriptのスーパーセットであり、型システムを備えたプログラミング言語です。型による静的チェックにより、プログラムの欠陥をコンパイル時やデバッグ時に検出することができます。これにより、バグの早期発見や、コードの保守性の向上につながります。TypeScriptはWebアプリケーション、Node.jsアプリケーション、モバイルアプリケーションなどのさまざまなプラットフォームで利用されており、特に大規模で複雑なプロジェクトの開発に適しています。開発者が型安全なコードを書くのを支援し、コードの保守性を向上させるために広く採用されています。

Next.jsは、フルスタックのWebアプリケーションを構築するためのReactフレームワークです。設定に時間を費やすことなく、アプリケーションの構築に集中することができるよう設計されています。Next.jsは、Reactアプリケーションを開発するためのツールセットやサーバーサイドレンダリング（SSR）および静的サイト生成（SSG）の機能を提供し、それらの機能により、SEOの向上、パフォーマンスの向上、セキュリティの向上など、多くの利点を提供します。従って、多くのウェブ開発者によって採用され、高品質のウェブアプリケーションの開発に役立っています。

## こんな方におすすめ

- モダンなWebフロントエンドに興味のある方
- React/Next.jsを初めて使う方、本番に導入したい方
- React/Next.jsとTypeScriptを組み合わせた開発スタイルに興味のある方
- TypeScriptを中心に据えたWebフロントエンド開発に興味のある方
- Atomic DesignやStorybookなど、コンポーネント中心の開発に興味のある方

## 目次

1. Next.jsとTypeScriptによるモダン開発
2. TypeScriptの基礎
3. React/Next.jsの基礎
4. コンポーネント開発
5. アプリケーション開発1〜設計・環境設定〜
6. アプリケーション開発2〜実装〜
7. アプリケーション開発3〜リリースと改善〜
- Appendix Next.jsのさらなる活用

## 各章について

### 1~3章

1章では、Next.jsやTypeScriptを使用したモダンなフロントエンド開発の概要と歴史を紹介しています。歴史の説名を踏まえ、Next.jsの機能に絡めてSSRやSSGの紹介やその必要性に関する説明もされています。

2章では、TypeScriptの基本的な使い方や重要な型について説明されています。また、設定やツールのセットアップについても触れられています。

3章では、Reactの基本的なコンポーネントやフックの書き方やNext.jsの機能の使い方が紹介され、再レンダリングの防止など重要なポイントもカバーされています。

### 4章

この章ではデザインシステムの設計方法であるAtomic Designが紹介され、ReactコンポーネントもAtoms, Molecules, Organisms, Templates, Pagesの5レイヤーに分類することが推奨されています。Atomic Designとあわせて、ファイル分割やコンポーネント設計の参考になるPresentational Component（見た目）とContainer Component（振る舞いロジック）についても説明されました。
あと、styled-componentsスタイルライブラリから、Storybookでのコンポーネント管理、React Testing Libraryでのコンポーネントテストまで、コンポーネント開発のために使われる一連のツールの使い方が説明されています。

### 5~7章、付録

後半からはアプリケーション開発の実践になります。

5章では主にアプリケーション開発に向けての環境構築を行います。Next.jsや前の章で説明があったstyled-components、StorybookとESLintのセットアップとReact Hook Formをはじめ、SWRとMaterial Icons、React Content Loaderなどさまざまなライブラリやツールの導入が紹介されます。

6章は、総435ページで150ページほど占めて本のメイン部分ですが、ほぼコードに構成されていて間に簡単な説明が入ります。まずは、Atomic Designに従って各ページをコンポーネントコンポーネントへと分割して、一番小さい部品であるAtomsから実装していきます。次のMolecules実装も特にロジックを持たないようにしています。Organisms, Templates, Pagesについても同様の構成で進みます。Pagesからは4章にあったPresentational ComponentとContainer Componentの見た目とロジックを別ファイルに分ける方法で実装していきます。加えて、React Testing LibraryでAtoms, Molecules, Organismsレイヤーのユニットテストを書きます。

7章では、まず、5章と6章でつくったアプリケーションをVercel, Heroku, Logflareといったサービスにデプロイする方法の説明されており実際にデプロイして見るのができます。また、SEO対策として、構造化データをページに付与する方法やOGP、sitemap.xmlの生成などを取り扱います。さらに、アクセシビリティ、XSSとかCSRFのセキュリティの説明もされています。

付録には外部サービスの連携活用など、さまざまな内容が説明されています。これらの内容は現場にも役立ち、読者にとって嬉しい情報となっています。

## 感想

既に探り探りでTypeScriptとReact/Next.jsで開発していましたが、本書を読んでから、TypeScriptとReact/Next.jsの組み合わせでの開発経験が浅い私にとっては、良い見本になりました。

本書は、全般的にわかりやすく、実践的な内容で、概観を掴めることができて満足しています。
また、さまざまなライブラリを取り入れて使用できてみたのも、良い点でした。例えば、Next.jsと同じチームで作られているデータ取得のためのReact HooksライブラリであるSWRやローディングを表示するライブラリReact Content Loaderは初めて使用してみて今後の開発にも良い選択肢になると思いました。

ただ、もうちょっと具体的な説明や使う理由などがあったらよかったなと思った部分もありました。例えば、ライブラリの使い方の説明では、なぜそのライブラリを使うのか、そのライブラリのメリットやデメリットなどについて、もう少し詳しく説明があると、理解しやすかったでしょう。

とはいえ、本書は、TypeScriptとReact/Next.jsの両方を学びたい人にとって、最適な入門書であることは間違いありません。本書を参考にして、TypeScriptとReact/Next.jsの開発スキルを磨き、実践で役立てていきます。

以上、『TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発』についての紹介でした。もし、TypeScriptとReact/Next.jsの組み合わせで実際動かしてみながら学びたい方には、ぜひおすすめの一冊です！

TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発

book.png

【書籍紹介】TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発

ツイートのいいね数やコメント数、YouTubeの投稿日時、Amazonなどネットショップのレビュー数、通貨ごとの適切な価格表示など、UX（ユーザーエクスペリエンス）の向上やコンテンツや商品の競争力を高めるためには、これらの数字をユーザーが一目で理解できるようにすることが一つのポイントになります。

また、数字が非常に長い場合は、簡潔に表示する方が読みやすいです。さらに、ユーザーの使用言語や文化に合わせて、数字を適切に表示することが良いでしょう。

上のように数字、日付、価格を簡潔に表示するために、外部ライブラリを使用せずに、JavaScript標準仕様にあるIntl APIを使用するとより簡便に実装できます。

### Intl API
**Intl** APIはinternationalization（国際化）APIの略で、下記はMDNからの引用です。

> **`Intl`** オブジェクトは、 ECMAScript の国際化 API の名前空間で、言語に依存した文字列の比較、数値の書式化と、日付の書式化を提供します。 **`Intl`** オブジェクトは、いくつかのコンストラクターに加え、国際化コンストラクターや他の言語に関する関数に共通する機能へのアクセスを提供します。
> 

また、internationalizationは始めのiから終わりのnまでの間に18文字入っていることで**i18n**と呼ばれています。

ほとんどの最新のブラウザでサポートされているため、互換性を心配せずに使用できます。

では、いくつかの使い方を紹介します。

## 数字を簡潔に表示
`Intl.NumberFormat`を使用します。
viewsに閲覧数を表す数字を入れています。このように大きな数字をそのまま表示すると読みにくくなります。
最初の引数には言語を指定するだけで良いので、日本語の場合は`ja-JP`を指定します。
```
const views = 9741275;
const formatter = new Intl.NumberFormat('ja-JP');

console.log(formatter.format(views));  // 9,741,234
```
より簡潔に表示するには、2番目の引数にさまざまなオプションを指定できます。オプションの中で`notation: 'compact'`を指定するとコンパクトになります。
```
const views = 9741275;
const formatter = new Intl.NumberFormat('ja-JP', {
    notation: 'compact'
});

console.log(formatter.format(views));  // 974万
```
さらに、1番目の引数に言語ブラウザのAPIでサポートされている`navigator.language`を指定すると、ユーザーがブラウザで設定した言語を自動的に取得でき、ユーザーが指定した言語に応じて数字を表示できます。
```
const views = 9741234;
const formatter = new Intl.NumberFormat(navigator.language, {
  notation: 'compact'
});

console.log(formatter.format(views));  // 974万
```
## 価格を通貨に合わせて簡潔に表示
同様に`Intl.NumberFormat`を使用します。
1番目の引数には同じく言語を、2番目の引数のオプションで`style: 'currency'`に設定し、currencyオプションで通貨`currency: 'JPY'`を指定します。
```
const price = 1000000;
const formatter = new Intl.NumberFormat('ja-JP', {
  style: 'currency', 
  currency: 'JPY'
});

console.log(formatter.format(price)); // ￥1,000,000
```
ここでも"compact"オプションを使用してコンパクトにすることができます。compactオプションは価格よりはいいねの数など大体の数を表す時にいいかもしれません
```
const price = 1000000;
const formatter = new Intl.NumberFormat('ja-JP', {
  style: 'currency', 
  currency: 'JPY',
  notation: 'compact'
});

console.log(formatter.format(price)); // ￥100万
```
## 相対時間をスマートに表示
商品や記事がいつ公開されたか、何日前、何時間前に投稿されたかを表す必要もあります。相対時間をスマートに表示するためには`Intl.RelativeTimeFormat`を使用します。
`format`の1番目の引数は数字で、2番目には日付か時間か月かなどを指定します。
```
const formatter = new Intl.RelativeTimeFormat('ja-JP');

console.log(formatter.format(1, 'day')); // 1 日後
```
オプションに`numeric: 'auto'`にすると言葉を変えてくれます。
```
const formatter = new Intl.RelativeTimeFormat('ja-JP', {
  numeric: 'auto'
});

console.log(formatter.format(1, 'day')); // 明日
```
入社して何日経ったかを示したい場合、今日を基準にして、入社日の日付を指定し、現在までの日数を計算し、フォーマッタを使用すると、"〜日前”と表示されます。
```
const today = new Date();
const startDate = new Date(2021, 4, 17); // 2021年5月17日　monthは0から始まるため5→4
const daysPassed = Math.ceil((startDate - today) / (1000 * 60 * 60 * 24));
const yearsPassed = Math.ceil((startDate - today) / (1000 * 60 * 60 * 24　* 365));
const formatter = new Intl.RelativeTimeFormat('ja-JP', {
  numeric: 'auto'
});

console.log(formatter.format(daysPassed, 'day')); // 857 日前
console.log(formatter.format(yearsPassed, 'year')); // 2 年前
```
ただし、2番目の引数は日か時間かのどちらか1つだけを指定できます。

この問題を補完できるライブラリ`timeago.js`がありますが、時間がどれだけ経過したかに応じて日か時間かを自動的に表示されるので、相対的な時間のみが必要な場合に便利かと思います。

## 日付と時間を正確に表示
時間を表示するときには、コンパクトにしてより読みやすい場合もありますが、正確な日付を表示する必要があるときもあります。その場合は`Intl.DateTimeFormat`または`toLocalDateString`を使用します。
```
const today = new Date(); // 作成日基準の今日

console.log(today.toString()); // Thu Sep 21 2023 12:05:01 GMT+0900 (日本標準時)
console.log(new Intl.DateTimeFormat('ja-JP').format(today)); // 2023/9/21
```
これをさらに簡略化した方法もあります。
```
const today = new Date();

console.log(
  today.toLocaleDateString('ja-JP', {
    minute: 'numeric',
    hour: 'numeric',
    day: 'numeric',
    month: 'short',
    year: 'numeric',
    weekday: 'short'
  })
); // 2023年9月21日(木) 12:18
```
日付にtoLocaleDateStringを使用するだけで、内部的にはIntl APIを使用するため、より簡単にフォーマットを使用できます。言語を指定するだけでその言語に合わせたフォーマットが表示されます。さらに、さまざまなオプションを指定することもできるので、より簡単にまたはより詳しく表示できます。

### まとめ

IntlはJavaScriptの標準仕様であるので、定期的に更新され常に最新の国際化に向けた実装が可能です。また、外部ライブラリに依存せずに使用できることも良い点です。もちろん一つの言語だけを対応するサイトでも使用でき、その言語に合わせたフォーマットにしてくれるので別途用意しなくて済みます。

日々の開発においても活用していきたいと思います。


#### 参考
- https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Intl
- https://cercopes-z.com/JavaScript/Object-Intl-js.html


【JavaScriptのIntl】数字や日付、価格の表示をスマートに

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

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


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

<div data-pm-slice="1 1 []" data-en-clipboard="true">
<div data-pm-slice="1 1 []" data-en-clipboard="true">Webページやアプリに躍動感を吹き込むWebアニメーション、今回は簡単にアニメーションを作るのに役立つJavaScriptアニメーションライブラリー5つを紹介します。</div>
<h3>TypeIt</h3>
<p>公式：<a href="https://www.typeitjs.com/"　target="_blank">https://www.typeitjs.com/</a></p>
<div>ポイントフレーズを活かせるテキストタイピングアニメーションです。このライブラリーを使用するとタイピング効果を簡単に実現することができます。</div>
<p class="codepen" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-height="300" data-default-tab="html,result" data-slug-hash="dyJgvNx" data-user="ryusinei">See the Pen <a href="https://codepen.io/ryusinei/pen/dyJgvNx"><br />
TypeIt test</a> by ryusinei (<a href="https://codepen.io/ryusinei">@ryusinei</a>)<br />
on <a href="https://codepen.io">CodePen</a>.</p>
<p><script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script></p>
<h3>SrollOut</h3>
<p>公式：<a href="https://scroll-out.github.io/" target="_blank" rel="noopener">https://scroll-out.github.io/</a></p>
<div>CSS属性や変数を使い手軽にアニメーションをつけられます。1kbもいかない非常に軽いライブラリーであるし、どんなフレームワークを使っているとかには関係なく部分的に適用できるため、プロジェクトにも負担がないです。</div>
<p class="codepen" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-height="300" data-default-tab="html,result" data-slug-hash="eYyPvwX" data-user="ryusinei">See the Pen <a href="https://codepen.io/ryusinei/pen/eYyPvwX"><br />
Untitled</a> by ryusinei (<a href="https://codepen.io/ryusinei">@ryusinei</a>)<br />
on <a href="https://codepen.io">CodePen</a>.</p>
<p><script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script></p>
<h3>rellax</h3>
<p>公式：<a href="https://dixonandmoe.com/rellax/" target="_blank" rel="noopener">https://dixonandmoe.com/rellax/</a></p>
<div>ページをスクロールする時、要素毎に異なる速さでスクロールされるように調整することができます。rellaxオプジェットを生成するだけでデフォルトの速さでスクロールされます。</div>
<p class="codepen" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-height="300" data-default-tab="html,result" data-slug-hash="ExodmaY" data-user="ryusinei">See the Pen <a href="https://codepen.io/ryusinei/pen/ExodmaY"><br />
Untitled</a> by ryusinei (<a href="https://codepen.io/ryusinei">@ryusinei</a>)<br />
on <a href="https://codepen.io">CodePen</a>.</p>
<p><script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script></p>
<h3>GSAP-greensock</h3>
<p>公式：<a href="https://greensock.com/" target="_blank" rel="noopener">https://greensock.com/</a></p>
<div>公式サイトを見ると「開発者をアニメーションヒーローにしてくれるライプラリ」と書いていて、それほど強力なライブラリーでできることが多いので、余裕を持って一個づつやってみたら良いかと思います。</div>
<p class="codepen" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-height="300" data-default-tab="html,result" data-slug-hash="NWXOpwv" data-user="ryusinei">See the Pen <a href="https://codepen.io/ryusinei/pen/NWXOpwv"><br />
ScrollOut test</a> by ryusinei (<a href="https://codepen.io/ryusinei">@ryusinei</a>)<br />
on <a href="https://codepen.io">CodePen</a>.</p>
<p><script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script></p>
<h3>animejs</h3>
<p>公式：<a href="https://animejs.com/" target="_blank" rel="noopener">https://animejs.com/</a></p>
<div>シンプルでありながら強力なAPIを備えた軽量のJavaScriptアニメーションライブラリです。 CSSプロパティ、SVG、DOM属性、JavaScriptオブジェクトで動作します。ドキュメントもよくできていますので、どんなアニメーションができて、それを実現するためにはどんなコードを作成すればいいのかもすぐ確認できます。</div>
<p class="codepen" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-height="300" data-default-tab="html,result" data-slug-hash="poERmEM" data-user="codewitharyann">See the Pen <a href="https://codepen.io/codewitharyann/pen/poERmEM"><br />
Porduct delivery status card for website</a> by Aryankapoor (<a href="https://codepen.io/codewitharyann">@codewitharyann</a>)<br />
on <a href="https://codepen.io">CodePen</a>.</p>
<p><script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script></p>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div data-pm-slice="1 1 []" data-en-clipboard="true">
<div>見て楽しい、作って楽しいアニメーションが簡単に作れて、しかも軽いライプラリでした。今後のWebサイト制作でも活用できればと思います！</div>
</div>
<div></div>
<div>
<div data-pm-slice="1 1 []" data-en-clipboard="true"></div>
</div>


JavaScriptアニメーションライブラリー5選

<p>成功した製品/サービスは、たくさんの秘策や成功要因を持っていると思いますが、ユーザー体験もその中の大きな一部分となります。例えば、SEOと広告などで訪問率を上げるのはできますが、サービス自体が優れたユーザー体験を提供してくれないと「訪問者」が「顧客」になるのは限界があると思います。</p>
<h2>UXの復習</h2>
<p>事典的な意味では、”人間は経験という概念を持っている。この経験のうち、製品・サービス・人工物などの独立したシステムを対象として、人間がユーザーとしてそれらに出会い利用した経験をユーザーエクスペリエンスという。”です。<br />
整理すると、</p>
<ul>
<li>あるシステム/製品/サービスを利用して感じて思う総体的な体験</li>
<li>人がコンピューターと相互作用しながら人の中に蓄積されるあらゆる知識や記憶、感情</li>
</ul>
<p>になります。<br />
優れたUXは、製品/サービスの価値を理解し、ユーザーのためのフローを考慮した体験をさせなければなりません。</p>
<h2>なぜ重要なのか</h2>
<ul>
<li>68％のユーザーは、悪いUXのせいでWebサイトを離れます</li>
<li>44％ユーザーは、友人と悪いオンラインショッピング体験を共有しています</li>
<li>62％ユーザーは、過去の経験に基づいて買い物を選択しています</li>
<li>UXの問題の85％は、5人のユーザーがテストすることでわかります</li>
</ul>
<p>少し古い資料から見た情報なので、パーセンテージは変わってきたかもしれませんが、その事実は変わってないと思います。</p>
<h2>UIとの関係</h2>
<p>UIが製品の一部であるのに対して、UXはユーザーの心の中に生じるものです。そのため同じ製品を使っても、ユーザーごとにUXは異なります。こちらの図の方がわかりやすいと思います。「牛乳＆シリアル」という製品があって、ユーザーは「スプーン」という接点を介して、「食べる」体験をします。その体験で、おいしいって言うユーザーもいれば、おいしくないと感じるユーザーもいます。おいしくないと感じるユーザーは「スプーン」を変えても多分同じ感想でしょう。</p>
<p><img loading="lazy" class="alignnone size-large wp-image-9843" src="/uploads-archive/lc/2022/02/cffcbbb30c3ddb41527ae1068dbe41f8-1024x725.png" alt="" width="1024" height="725" srcset="/uploads-archive/lc/2022/02/cffcbbb30c3ddb41527ae1068dbe41f8-1024x725.png 1024w, /uploads-archive/lc/2022/02/cffcbbb30c3ddb41527ae1068dbe41f8-300x212.png 300w, /uploads-archive/lc/2022/02/cffcbbb30c3ddb41527ae1068dbe41f8-768x543.png 768w, /uploads-archive/lc/2022/02/cffcbbb30c3ddb41527ae1068dbe41f8-600x425.png 600w, /uploads-archive/lc/2022/02/cffcbbb30c3ddb41527ae1068dbe41f8-1536x1087.png 1536w, /uploads-archive/lc/2022/02/cffcbbb30c3ddb41527ae1068dbe41f8.png 1778w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p>優れたUIは優れたUXの必要条件ですが、優れたUIがあるから優れたUXになる訳ではなくUIはUXという概念の中に含まれているものなのです。</p>
<h2>流れ</h2>
<p>一般的な流れはやはり存在します。ただ、各会社やプロジェクトには需要、予算などが異なるため、必ずしも守る流れや決まった方法はありません。<br />
<img loading="lazy" class="alignnone size-large wp-image-9842" src="/uploads-archive/lc/2022/02/7d54ad7dc7debc7a17a43e72f27c6ca4-1024x293.png" alt="" width="1024" height="293" srcset="/uploads-archive/lc/2022/02/7d54ad7dc7debc7a17a43e72f27c6ca4-1024x293.png 1024w, /uploads-archive/lc/2022/02/7d54ad7dc7debc7a17a43e72f27c6ca4-300x86.png 300w, /uploads-archive/lc/2022/02/7d54ad7dc7debc7a17a43e72f27c6ca4-768x220.png 768w, /uploads-archive/lc/2022/02/7d54ad7dc7debc7a17a43e72f27c6ca4-600x172.png 600w, /uploads-archive/lc/2022/02/7d54ad7dc7debc7a17a43e72f27c6ca4-1536x440.png 1536w, /uploads-archive/lc/2022/02/7d54ad7dc7debc7a17a43e72f27c6ca4-2048x587.png 2048w" sizes="(max-width: 1024px) 100vw, 1024px" /><br />
大きくは、四つの部分に分けられます。</p>
<ol>
<li>背景→競合他社分析→アンケートでのUXリサーチ</li>
<li>ペルソナ(共感マップ-ペルソナの視点で感情や行動を整理)→カスタマージャーニー(ユーザーが商品・サービスとの関わりの中でたどる一連のプロセスを視覚化したもの-ユーザーフロー)</li>
<li>ワイヤフレーム→ペーパープロトタイプ→1回目の使用テスト</li>
<li>モックアップ(ここてUIデザイン、動きなし)→プロトタイプ(動きあり)→2回目の使用テスト</li>
</ol>
<h2>ポイント</h2>
<h4>目的を明確に</h4>
<p>目的がないと、揺れるしかないと思います。自社の商品やサービスの存在理由にとらわれ、自己満足的なものにならないように、誰に向けて発信するかを明確にする必要があります。</p>
<h4>利用者の使用イメージを検証</h4>
<p>上で目的のユーザーを決定後、ユーザーが使用する場面を徹底的に検証することです。ユーザー目線で、ターゲットとなるユーザーが求めているものは一体何であるのかを明確にすると、どのようなUI/UXデザインで実装していけばいいのかも明確になります。</p>
<h3>終わりに</h3>
<p>UIは「User Interface」の略語、UXは「User experience」の略語で 、言葉通りUserが主役です。「正解」はサービスを利用する側のユーザーが持っています。UXは思った以上に重要な部分かもしれません。サービスの価値を高めるには優れたUXデザインが求められ、UXを高める要素の一つとしてUIがあります。<br />
市場や消費者の動向は時代とともに変化しており、ユーザーが求める体験も常に変化していくので、「一度改善したら終わり」ではなく、ビジネスの目線からでも、こまめな改善をし続けるのと同時に定期的な見直しも行う必要がある思います。</p>


UX改善の重要性、流れ＆ポイント！

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


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

<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

<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でデザインシステムを始めましょう！

<p>今回はCSS Units（単位）について紹介していきたいと思います。</p>
<h2>はじめに</h2>
<p class="md-end-block md-p"><span class="md-plain">はじめる前に、css文法を少し整理するとselector、 property、valuesで構成されています。</span></p>
<p><img loading="lazy" class="alignnone size-full wp-image-8250" src="/uploads-archive/lc/2021/09/css.png" alt="" width="330" height="156" srcset="/uploads-archive/lc/2021/09/css.png 330w, /uploads-archive/lc/2021/09/css-300x142.png 300w" sizes="(max-width: 330px) 100vw, 330px" /></p>
<p class="md-end-block md-p md-focus"><span class="md-plain">そして今日は、valuesの中でも、要素の大きさやサイズの長さなどを決める単位についてまとめてみました。サイズを決める単位は大きく2つのカテゴリーに分けられますが、絶対的な長さの単位absoluteと相対的な長さの単位relativeの2つに分けられます。</span></p>
<h3>まず、絶対的な長さの単位（absolute）</h3>
<p><img loading="lazy" class="alignnone size-full wp-image-8242" src="/uploads-archive/lc/2021/09/absolute.png" alt="" width="1008" height="432" srcset="/uploads-archive/lc/2021/09/absolute.png 1008w, /uploads-archive/lc/2021/09/absolute-300x129.png 300w, /uploads-archive/lc/2021/09/absolute-768x329.png 768w, /uploads-archive/lc/2021/09/absolute-600x257.png 600w" sizes="(max-width: 1008px) 100vw, 1008px" /></p>
<p>数多くの単位がありますが、ピクセル(px)を除いた他の単位は、実は物理的な世界にだけ意味があるので、あまり使われてません。 CSSの主な用途もスクリーンやモニターの上でウェブサイトを装飾することですので、ほとんどピクセルを利用しています。</p>
<p>ここに出ているほとんどの単位は、皆さんがよく知っていたり、一度ぐらいは聞いたことがあると思います。 中でもポイント(pt)はGoogle Docs、テキストエディタやデザインツールで、ユーザーがフォントのサイズを調整する時、ピクセルよりはポイント単位で調整する場合が多いです。だから、おそらく皆さんもポイント単位でフォントサイズを指定するのが慣れていると思います。でも、実はブラウザではピクセルに変換されてスクリーンに表記されます。</p>
<p><img loading="lazy" class="alignnone size-large wp-image-8243" src="/uploads-archive/lc/2021/09/docs-1024x477.png" alt="" width="1024" height="477" srcset="/uploads-archive/lc/2021/09/docs-1024x477.png 1024w, /uploads-archive/lc/2021/09/docs-300x140.png 300w, /uploads-archive/lc/2021/09/docs-768x358.png 768w, /uploads-archive/lc/2021/09/docs-600x279.png 600w, /uploads-archive/lc/2021/09/docs-1536x715.png 1536w, /uploads-archive/lc/2021/09/docs.png 1594w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p class="md-end-block md-p md-focus"><span class="md-plain md-expand"><a href="https://ja.wikipedia.org/wiki/%E3%83%94%E3%82%AF%E3%82%BB%E3%83%AB">ピクセル</a>とは？</span></p>
<p class="md-end-block md-p"><span class="md-plain">すでにご存知だと思いますが、モニターの上で画面に表せる一番小さい単位を指します。</span></p>
<p>&nbsp;</p>
<p class="md-end-block md-p"><span class="md-plain md-expand">ピクセルを使ったら生じる問題点は？</span></p>
<p class="md-end-block md-p"><span class="md-plain">1.コンテナのサイズが変更されてもコンテンツがそのまま固定された値で維持される。</span></p>
<p class="md-end-block md-p md-focus"><span class="md-plain">2.ブラウザでフォントサイズ設定を変えても全然反応しない。</span></p>
<p>&nbsp;</p>
<p>なので、コンテンツを流動的に作るためには相対的な長さの単位（relative）が必要です。</p>
<h3>相対的な長さの単位（relative）</h3>
<p><img loading="lazy" class="alignnone size-full wp-image-8244" src="/uploads-archive/lc/2021/09/relative.png" alt="" width="1006" height="536" srcset="/uploads-archive/lc/2021/09/relative.png 1006w, /uploads-archive/lc/2021/09/relative-300x160.png 300w, /uploads-archive/lc/2021/09/relative-768x409.png 768w, /uploads-archive/lc/2021/09/relative-600x320.png 600w" sizes="(max-width: 1006px) 100vw, 1006px" /></p>
<h4 class="md-end-block md-p md-focus"><span class="md-plain md-expand">em (relative to parent element)</span></h4>
<p class="md-end-block md-p"><span class="md-plain">タイポグラフィで現在指定されたサイズを表す単位です。 今のフォントサイズを表す単位だと理解すると良いと思います。つまり同じフォントサイズ16pxでも、どんなフォントファミリーを使うかによって、ユーザーに表示されるテキストの大きさは変わる可能性があります。指定されたフォントファミリーに関係なく、常に固定されたフォントサイズを持っています。</span></p>
<p>ブラウザでhtmlに割り当てられるフォンドサイズは、特にフォントサイズを指定しない限り16pxとなります。</p>
<p>emは親要素のフォントサイズをかけた値に計算されます。</p>
<p><img loading="lazy" class="alignnone size-full wp-image-8245" src="/uploads-archive/lc/2021/09/em.png" alt="" width="369" height="119" srcset="/uploads-archive/lc/2021/09/em.png 369w, /uploads-archive/lc/2021/09/em-300x97.png 300w" sizes="(max-width: 369px) 100vw, 369px" /></p>
<h4>rem (relative to root element)</h4>
<p>最初文字のrはルートを表すrです。emと似ていますが、親要素によってサイズが計算されるのではなく、ルートに指定されたフォントサイズによってサイズが決まります。</p>
<p><img loading="lazy" class="alignnone size-full wp-image-8246" src="/uploads-archive/lc/2021/09/rem.png" alt="" width="370" height="116" srcset="/uploads-archive/lc/2021/09/rem.png 370w, /uploads-archive/lc/2021/09/rem-300x94.png 300w" sizes="(max-width: 370px) 100vw, 370px" /></p>
<h4>vw (viewport width)</h4>
<p>100vw → ビューポート幅の100％を使用</p>
<h4>vh (viewport height)</h4>
<p>100vh → ビューポートの高さの100％を使用</p>
<h4>%</h4>
<p>親要素の相対的に大きさが計算されます。 emの代わりに%を使うことができます。</p>
<p><img loading="lazy" class="alignnone size-full wp-image-8247" src="/uploads-archive/lc/2021/09/unnamed-file.png" alt="" width="474" height="124" srcset="/uploads-archive/lc/2021/09/unnamed-file.png 474w, /uploads-archive/lc/2021/09/unnamed-file-300x78.png 300w" sizes="(max-width: 474px) 100vw, 474px" /></p>
<p>&nbsp;</p>
<h2>まとめ</h2>
<p class="md-end-block md-p"><span class="md-plain">親要素はpxに、子要素を%にした場合　→　親要素によって相対的に幅が変わります。</span></p>
<p><img loading="lazy" class="alignnone size-full wp-image-8248" src="/uploads-archive/lc/2021/09/unnamed-file.gif" alt="" width="640" height="400" /></p>
<p class="md-end-block md-p md-focus"><span class="md-plain">親要素はpxに、子要素をv*にした場合　→　親要素に関係なく、プラウザービューポートの幅や高さによって変わります。</span></p>
<p><img loading="lazy" class="alignnone size-full wp-image-8249" src="/uploads-archive/lc/2021/09/vw.gif" alt="" width="640" height="400" /></p>
<p>このような違いをしっかり理解して使うことが大切だと思います。</p>
<p>使う時の基準を以下にまとめました。ぜひ参考にしてみてください。</p>
<p class="md-end-block md-p"><span class="md-plain"><strong>〜によって変更されるべき</strong>　　　　<strong>単位</strong></span></p>
<p class="md-end-block md-p"><span class="md-plain md-expand">親の要素サイズ　　　　　　　　　%、em</span></p>
<p class="md-end-block md-p"><span class="md-plain">ブラウザサイズ　　　　　　　　　v*、rem</span></p>
<p class="md-end-block md-p"><span class="md-plain">要素の高さ、幅　　　　　　　　　%、v*</span></p>
<p class="md-end-block md-p md-focus"><span class="md-plain">フォントサイズ　　　　　　　　　em、rem</span></p>
<p>&nbsp;</p>
<h3>参考サイト</h3>
<p>w3schools :</p>
<p><a href="https://www.w3schools.com/css/css_units.asp">https://www.w3schools.com/css/css_units.asp</a></p>
<p>MDN :</p>
<p><a href="https://developer.mozilla.org/ja/docs/Learn/CSS/Building_blocks/Values_and_units">https://developer.mozilla.org/ja/docs/Learn/CSS/Building_blocks/Values_and_units</a></p>


CSSの単位一覧

<p>今回は６つのcss機能を紹介したいと思います。</p>
<p class="md-end-block md-p"><span class="md-plain">該当機能を実現するために以前はjavascriptを使っていましたが、今はcssでできちゃいます。ただ、ブラウザによって、実装されていないのもは使用不可の場合もあります。</span></p>
<p class="md-end-block md-p"><span class="md-plain">各機能の最後にリンクを貼るので、そちらで詳しい仕様や対応ブラウザなどを確認してください。</span></p>
<h2 class="md-end-block md-heading"><span class="md-plain">scroll-snap</span></h2>
<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>
<p class="codepen" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-height="300" data-default-tab="html,result" data-slug-hash="LYygxZJ" data-user="ryusinei">See the Pen <a href="https://codepen.io/ryusinei/pen/LYygxZJ"><br />
</a> by ryusinei (<a href="https://codepen.io/ryusinei">@ryusinei</a>)<br />
on <a href="https://codepen.io">CodePen</a>.</p>
<p class="md-end-block md-p"><span class="md-plain">snapを使用したらスクロールがある要素にくっつくようになります。</span></p>
<p class="codepen" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-height="300" data-default-tab="html,result" data-slug-hash="WNjgaVr" data-user="ryusinei">See the Pen <a href="https://codepen.io/ryusinei/pen/WNjgaVr"><br />
scroll-snap</a> by ryusinei (<a href="https://codepen.io/ryusinei">@ryusinei</a>)<br />
on <a href="https://codepen.io">CodePen</a>.</p>
<p class="md-end-block md-p md-focus"><span class="md-plain">適用方法は、scroll-snap-typeを親要素に、scroll-snap-alignを子要素に指定すればokです。</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-link md-pair-s" spellcheck="false"><a href="https://caniuse.com/?search=scroll-snap">https://caniuse.com/?search=scroll-snap</a></span></p>
<p class="md-end-block md-p"><span class="md-plain">MDN</span></p>
<p class="md-end-block md-p"><span class="md-link md-pair-s" spellcheck="false"><a href="https://developer.mozilla.org/ja/docs/Web/CSS/scroll-snap-type">https://developer.mozilla.org/ja/docs/Web/CSS/scroll-snap-type</a></span></p>
<p class="md-end-block md-p"><span class="md-link md-pair-s" spellcheck="false"><a href="https://developer.mozilla.org/ja/docs/Web/CSS/scroll-snap-align">https://developer.mozilla.org/ja/docs/Web/CSS/scroll-snap-align</a></span></p>
<p>&nbsp;</p>
<h2 class="md-end-block md-heading"><span class="md-plain">gap</span></h2>
<p class="md-end-block md-p"><span class="md-plain">こちらはflexboxで余白を便利に指定できるプロパティです。</span></p>
<p class="md-end-block md-p"><span class="md-plain">コンテナ中のアイテムの間に間隔をあけるために普段marginを使用しますが、代わりにgapを指定することができます。</span></p>
<p class="md-end-block md-p"><span class="md-plain">コンテナにgapを指定すればokです。需要によって「row」と「column」二つの値を指定できます。</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-link md-pair-s" spellcheck="false"><a href="https://caniuse.com/?search=gap">https://caniuse.com/?search=gap</a></span></p>
<p class="md-end-block md-p"><span class="md-plain">MDN</span></p>
<p class="md-end-block md-p"><span class="md-link md-pair-s" spellcheck="false"><a href="https://developer.mozilla.org/ja/docs/Web/CSS/gap">https://developer.mozilla.org/ja/docs/Web/CSS/gap</a></span></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h2 class="md-end-block md-heading"><span class="md-plain">aspect-ratio</span></h2>
<p class="md-end-block md-p"><span class="md-plain">こちらは、要素に対してアスペクト比を簡単に指定して、レスポンシブな状態を簡単に保つプロパティです。</span></p>
<p class="codepen" data-height="200" data-default-tab="css" data-slug-hash="LYygWYw" data-user="ryusinei" style="height: 200px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ryusinei/pen/LYygWYw"><br />
  </a> by ryusinei (<a href="https://codepen.io/ryusinei">@ryusinei</a>)<br />
  on <a href="https://codepen.io">CodePen</a>.</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-link md-pair-s" spellcheck="false"><a href="https://caniuse.com/?search=aspect-ratio">https://caniuse.com/?search=aspect-ratio</a></span></p>
<p class="md-end-block md-p"><span class="md-plain">MDN</span></p>
<p class="md-end-block md-p"><span class="md-link md-pair-s" spellcheck="false"><a href="https://developer.mozilla.org/ja/docs/Web/CSS/@media/aspect-ratio">https://developer.mozilla.org/ja/docs/Web/CSS/@media/aspect-ratio</a></span></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h2 class="md-end-block md-heading"><span class="md-plain">position: sticky</span></h2>
<p class="md-end-block md-p"><span class="md-plain">こちらは、スクロールに応じて要素を固定表示にすることができます。</span></p>
<p class="md-end-block md-p"><span class="md-plain">例えば、スクロールダウンで、ヘッダーを上に固定させたい場合などに、普段fixedとabsoluteやjavascriptで実現いていると思いますが、代わりにstickyを使用できます。</span></p>
<p class="codepen" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-height="300" data-default-tab="html,result" data-slug-hash="xxdaQga" data-user="ryusinei">See the Pen <a href="https://codepen.io/ryusinei/pen/xxdaQga"><br />
sticky</a> by ryusinei (<a href="https://codepen.io/ryusinei">@ryusinei</a>)<br />
on <a href="https://codepen.io">CodePen</a>.</p>
<p class="md-end-block md-p"><span class="md-plain">対応ブラウザ</span></p>
<p class="md-end-block md-p"><span class="md-link md-pair-s" spellcheck="false"><a href="https://caniuse.com/?search=sticky">https://caniuse.com/?search=sticky</a></span></p>
<p class="md-end-block md-p"><span class="md-plain">MDN</span></p>
<p class="md-end-block md-p"><span class="md-link md-pair-s" spellcheck="false"><a href="https://developer.mozilla.org/ja/docs/Web/CSS/position">https://developer.mozilla.org/ja/docs/Web/CSS/position</a></span></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h2 class="md-end-block md-heading"><span class="md-plain">:is()</span></h2>
<p class="md-end-block md-p"><span class="md-plain">こちらは、CSS指定を見やすくまとめる、疑似クラスの一つです。こちらを使用することで、少ないコードで多い要素を指定できます。</span></p>
<p class="md-end-block md-p"><span class="md-plain">例えば、ボタンの色を変えるとしたら</span></p>
<p class="codepen" data-height="200" data-default-tab="css" data-slug-hash="VwbEpwY" data-user="ryusinei" style="height: 200px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ryusinei/pen/VwbEpwY"><br />
  </a> by ryusinei (<a href="https://codepen.io/ryusinei">@ryusinei</a>)<br />
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<p class="md-end-block md-p"><span class="md-plain">見た通り、buttonが重複していますね。</span></p>
<p class="md-end-block md-p"><span class="md-plain">isを使用すると下記のように見やすくなります。</span></p>
<p class="codepen" data-height="200" data-default-tab="css" data-slug-hash="KKmGWKQ" data-user="ryusinei" style="height: 200px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ryusinei/pen/KKmGWKQ"><br />
  </a> by ryusinei (<a href="https://codepen.io/ryusinei">@ryusinei</a>)<br />
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<p class="md-end-block md-p"><span class="md-plain">つまり、要素がheader, nav, formの場合、ボタンの色を指定するように、要素をまとめて指定することができます。</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-link md-pair-s" spellcheck="false"><a href="https://caniuse.com/?search=%3Ais()">https://caniuse.com/?search=%3Ais()</a></span></p>
<p class="md-end-block md-p"><span class="md-plain">MDN</span></p>
<p class="md-end-block md-p"><span class="md-link md-pair-s" spellcheck="false"><a href="https://developer.mozilla.org/ja/docs/Web/CSS/:is">https://developer.mozilla.org/ja/docs/Web/CSS/:is</a></span></p>
<h2 class="md-end-block md-heading"><span class="md-plain">@supports</span></h2>
<p class="md-end-block md-p"><span class="md-plain">これで、ブラウザが該当css機能を対応しているのか否かが判断できます。</span></p>
<p class="md-end-block md-p"><span class="md-plain">例えば、こちらではdisplay:gridを対応しているのかをチェックしています。</span></p>
<p class="codepen" data-height="200" data-default-tab="css" data-slug-hash="oNWaBVr" data-user="ryusinei" style="height: 200px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ryusinei/pen/oNWaBVr"><br />
  </a> by ryusinei (<a href="https://codepen.io/ryusinei">@ryusinei</a>)<br />
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<p class="md-end-block md-p"><span class="md-plain">対応しているのならdivをグリッドコンテナにします。</span></p>
<p class="md-end-block md-p"><span class="md-plain">また、対応していないのかもチェックできます。</span></p>
<p class="codepen" data-height="200" data-default-tab="css" data-slug-hash="abWRpxX" data-user="ryusinei" style="height: 200px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ryusinei/pen/abWRpxX"><br />
  </a> by ryusinei (<a href="https://codepen.io/ryusinei">@ryusinei</a>)<br />
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<p class="md-end-block md-p"><span class="md-plain">対応していなければ、代わりにしたいのを指定すればokです。</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-link md-pair-s" spellcheck="false"><a href="https://caniuse.com/?search=%40supports">https://caniuse.com/?search=%40supports</a></span></p>
<p class="md-end-block md-p"><span class="md-plain">MDN</span></p>
<p class="md-end-block md-p"><span class="md-link md-pair-s" spellcheck="false"><a href="https://developer.mozilla.org/ja/docs/Web/CSS/@supports">https://developer.mozilla.org/ja/docs/Web/CSS/@supports</a></span></p>
<p>&nbsp;</p>
<h2 class="md-end-block md-heading md-focus"><span class="md-plain md-expand">終わりに</span></h2>
<p class="md-end-block md-p"><span class="md-plain">今回紹介した以外にもたくさんのCSSのプロパティがありますので、他に気になる機能や便利な機能を見つけ出したらぜひ共有できればと思います。</span></p>
<p class="md-end-block md-p md-focus"><span class="md-plain">web標準仕様もどんどん進化しているので、それを理解して使いこなすことによって、エンジニアの作業がもっと楽になることを願います。</span></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script></p>


知ってればお得なCSSプロパティ６つ！

<p><span class="md-plain md-expand">今回は、多くのプログラミング言語の中で、学ぶのに10分もかかりませんが、活用できる分野は本当に様々な言語を一つ紹介しようと思います。それは「</span><span class="md-meta-i-c  md-link"><a href="https://ja.wikipedia.org/wiki/Markdown"><span class="md-plain">markdown</span></a><span class="md-plain">」です！</span><span class="md-entity md-expand" data-content="👏">👏</span></span></p>
<p>&nbsp;</p>
<h2 class="md-end-block md-heading md-focus"><span class="md-plain md-expand">markdown とは？</span></h2>
<p class="md-end-block md-p"><span class="md-plain">2004年「ジョン・グルーバー」と「アーロン・スワッツ」により作成されたプレーンテキストフォーマットを基本とした軽量</span><span class="md-meta-i-c  md-link"><a href="https://ja.wikipedia.org/wiki/%E3%83%9E%E3%83%BC%E3%82%AF%E3%82%A2%E3%83%83%E3%83%97%E8%A8%80%E8%AA%9E"><span class="md-plain">マークアップ言語</span></a><span class="md-plain">です（拡張子は「.md」）。最近はgithubのreadme.mdファイルで多く利用されていますが、自分だけの文書や議事録などを管理する人もたくさんいるそうです。</span></span></p>
<p>&nbsp;</p>
<h2 class="md-end-block md-heading"><span class="md-plain md-expand">メリット</span></h2>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">簡単に学べる</span></p>
</li>
<li class="md-list-item md-focus-container">
<p class="md-end-block md-p md-focus"><span class="md-plain">プレインテキストよりかっこよく書ける</span></p>
</li>
</ul>
<p>&nbsp;</p>
<h2 class="md-end-block md-heading"><span class="md-plain">基本文法</span></h2>
<h4 class="md-end-block md-heading"><span class="md-plain">1. 見出し</span></h4>
<p><img loading="lazy" class="alignnone size-full wp-image-7891" src="/uploads-archive/lc/2021/06/1_heading-1.png" alt="" width="631" height="192" srcset="/uploads-archive/lc/2021/06/1_heading-1.png 631w, /uploads-archive/lc/2021/06/1_heading-1-300x91.png 300w, /uploads-archive/lc/2021/06/1_heading-1-600x183.png 600w" sizes="(max-width: 631px) 100vw, 631px" /></p>
<h4>2. <span class="md-plain md-expand">ライン</span></h4>
<p><img loading="lazy" class="alignnone size-full wp-image-7892" src="/uploads-archive/lc/2021/06/2_line.png" alt="" width="633" height="91" srcset="/uploads-archive/lc/2021/06/2_line.png 633w, /uploads-archive/lc/2021/06/2_line-300x43.png 300w, /uploads-archive/lc/2021/06/2_line-600x86.png 600w" sizes="(max-width: 633px) 100vw, 633px" /></p>
<h4>3. <span class="md-plain md-expand">強調</span></h4>
<p><img loading="lazy" class="alignnone size-full wp-image-7893" src="/uploads-archive/lc/2021/06/3_emphasis.png" alt="" width="629" height="78" srcset="/uploads-archive/lc/2021/06/3_emphasis.png 629w, /uploads-archive/lc/2021/06/3_emphasis-300x37.png 300w, /uploads-archive/lc/2021/06/3_emphasis-600x74.png 600w" sizes="(max-width: 629px) 100vw, 629px" /></p>
<h4>4. <span class="md-plain md-expand">リスト</span></h4>
<p><img loading="lazy" class="alignnone size-full wp-image-7894" src="/uploads-archive/lc/2021/06/4_list.png" alt="" width="630" height="491" srcset="/uploads-archive/lc/2021/06/4_list.png 630w, /uploads-archive/lc/2021/06/4_list-300x234.png 300w, /uploads-archive/lc/2021/06/4_list-600x468.png 600w" sizes="(max-width: 630px) 100vw, 630px" /></p>
<h4>5. <span class="md-plain md-expand">引用</span></h4>
<p><img loading="lazy" class="alignnone size-full wp-image-7895" src="/uploads-archive/lc/2021/06/5_quote.png" alt="" width="633" height="66" srcset="/uploads-archive/lc/2021/06/5_quote.png 633w, /uploads-archive/lc/2021/06/5_quote-300x31.png 300w, /uploads-archive/lc/2021/06/5_quote-600x63.png 600w" sizes="(max-width: 633px) 100vw, 633px" /></p>
<h4>6. リンク</h4>
<p><img loading="lazy" class="alignnone size-full wp-image-7896" src="/uploads-archive/lc/2021/06/6_link.png" alt="" width="705" height="77" srcset="/uploads-archive/lc/2021/06/6_link.png 705w, /uploads-archive/lc/2021/06/6_link-300x33.png 300w, /uploads-archive/lc/2021/06/6_link-600x66.png 600w" sizes="(max-width: 705px) 100vw, 705px" /></p>
<h4>7. イメージ</h4>
<p><img loading="lazy" class="alignnone size-full wp-image-7897" src="/uploads-archive/lc/2021/06/7_image.png" alt="" width="753" height="260" srcset="/uploads-archive/lc/2021/06/7_image.png 753w, /uploads-archive/lc/2021/06/7_image-300x104.png 300w, /uploads-archive/lc/2021/06/7_image-600x207.png 600w" sizes="(max-width: 753px) 100vw, 753px" /></p>
<h4>8. テーブル</h4>
<p>Tableのセル項目を中央中央寄せしたい場合は 「&#8211;」の前後に「:」を追加してください。→ | :&#8212;-: | :&#8212;-: |</p>
<p><img loading="lazy" class="alignnone size-full wp-image-7898" src="/uploads-archive/lc/2021/06/8_table.png" alt="" width="749" height="204" srcset="/uploads-archive/lc/2021/06/8_table.png 749w, /uploads-archive/lc/2021/06/8_table-300x82.png 300w, /uploads-archive/lc/2021/06/8_table-600x163.png 600w" sizes="(max-width: 749px) 100vw, 749px" /></p>
<h4>9. <span class="md-plain md-expand">emoji</span></h4>
<p>以下リンクからコードをコピーしてください。</p>
<p><a href="https://www.w3schools.com/charsets/ref_emoji.asp" target="”_blank”" rel="noopener">https://www.w3schools.com/charsets/ref_emoji.asp</a></p>
<p class="md-end-block md-p md-focus"><span class="md-link md-pair-s md-expand" spellcheck="false"><a href="https://www.webfx.com/tools/emoji-cheat-sheet/" target="”_blank”" rel="noopener">https://www.webfx.com/tools/emoji-cheat-sheet/</a></span></p>
<p><img loading="lazy" class="alignnone size-full wp-image-7899" src="/uploads-archive/lc/2021/06/9_emoji.png" alt="" width="755" height="83" srcset="/uploads-archive/lc/2021/06/9_emoji.png 755w, /uploads-archive/lc/2021/06/9_emoji-300x33.png 300w, /uploads-archive/lc/2021/06/9_emoji-600x66.png 600w" sizes="(max-width: 755px) 100vw, 755px" /></p>
<h4 class="md-end-block md-p">10. code</h4>
<p><img loading="lazy" class="alignnone size-full wp-image-7900" src="/uploads-archive/lc/2021/06/10_code.png" alt="" width="751" height="81" srcset="/uploads-archive/lc/2021/06/10_code.png 751w, /uploads-archive/lc/2021/06/10_code-300x32.png 300w, /uploads-archive/lc/2021/06/10_code-600x65.png 600w" sizes="(max-width: 751px) 100vw, 751px" /></p>
<p>&nbsp;</p>
<p>githubではmarkdown標準から少し変形された「github flavored markdown」（オリジナルmarkdown以外の総称）を支援していますので、もっと勉強したい方はこちらのリンクを参照してください。</p>
<p><a href="https://github.github.com/gfm/">https://github.github.com/gfm/</a></p>
<p><a href="https://guides.github.com/features/mastering-markdown/">https://guides.github.com/features/mastering-markdown/</a></p>
<p>&nbsp;</p>
<h2 class="md-end-block md-heading md-focus"><span class="md-plain md-expand">活用編</span></h2>
<h4 class="md-end-block md-heading"><span class="md-plain">github</span></h4>
<p class="md-end-block md-p md-focus"><span class="md-plain">githubでのreadme.mdを作成</span></p>
<p><img loading="lazy" class="alignnone size-full wp-image-7901" src="/uploads-archive/lc/2021/06/01_github.gif" alt="" width="640" height="400" /></p>
<h4 class="md-end-block md-heading"><span class="md-plain md-expand">vscode</span></h4>
<p class="md-end-block md-p"><span class="md-plain">拡張子が「.md」のファイルを作成</span></p>
<p class="md-end-block md-p md-focus"><span class="md-plain">Tip : プリビュー機能を使って書きながら確認できます。(すべてのコマンド「⌘+⇧+P (macOS)」から「markdown」で検索し、「Open Preview」を選択すると新しいタブが表示されます。)</span></p>
<p><img loading="lazy" class="alignnone size-full wp-image-7902" src="/uploads-archive/lc/2021/06/02_vscode.gif" alt="" width="640" height="400" /></p>
<h4 class="md-end-block md-heading"><span class="md-plain md-expand">typora</span></h4>
<p class="md-end-block md-p"><span class="md-plain">markdownエディタで作成</span></p>
<p class="md-end-block md-p"><span class="md-plain">おすすめのmarkdownエディタtyporaです。</span><span class="md-meta-i-c  md-link"><a href="https://typora.io/" target="”_blank”" rel="noopener"><span class="md-plain">こちら</span></a><span class="md-plain">からダウンロードできます。</span></span></p>
<p class="md-end-block md-p md-focus"><span class="md-meta-i-c  md-link"><a href="https://theme.typora.io/" target="”_blank”" rel="noopener"><span class="md-plain">テーマ</span></a><span class="md-plain">をダウンロードして外観を変えられるので、好みで変えて見てください。（ダウンロードしたテーマを自身でカスタマイズすることもできます！）</span></span></p>
<p><img loading="lazy" class="alignnone size-full wp-image-7903" src="/uploads-archive/lc/2021/06/03_typora.gif" alt="" width="640" height="400" /></p>
<p>&nbsp;</p>
<p class="md-end-block md-p md-focus"><span class="md-plain md-expand">以上、markdownのまとめでした。</span></p>
<p class="md-end-block md-p"><span class="md-plain md-expand">ぜひ、皆んなさんも活用して見てください！</span><span class="md-emoji md-expand" data-content="raised_hands">🙌</span>​</p>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - Author: Ryu

2024/06/27

2023/11/10

2023/09/22

2022/09/02

2022/05/20

2022/04/15

2022/02/16

2021/12/11

2021/11/11

2021/10/16

2021/09/03

2021/08/06

2021/06/30