<h2 id="h960097c6e4">Genericsの型引数が複数あるパターン</h2><p>以下のようにカンマ区切りで記述する。</p><pre><code>const foo = &lt;T, K, U&gt;( foo: T, bar: K, baz: U) =&gt; {
  return {};
}

</code></pre><p>また、以下のように型引数それぞれに初期値やextendsの制約を付け加えることも出来る。</p><pre><code>const foo = &lt;T extends string, K extends number, U = boolean&gt;( foo: T, bar: K, baz: U) =&gt; {
  return {};
}

</code></pre><p><br></p><h2 id="he82c9231f4">Lookup Types</h2><p>以下のようにT[K]の構文で記述する。</p><pre><code>const foo = &lt;T extends string, K extends number, U = boolean&gt;( foo: T, bar: K, baz: U) =&gt; {
  return {};
}

type Obj = {
  a: number
  b: boolean
}

type Foo = Obj["a"]

</code></pre><p><br></p><h2 id="h3cc4fad3cd">GenericsとLookup Typesが合わさったパターン</h2><p>第一引数のTは第二引数で用いることができる。 extendsとkeyofを用いて、オブジェクトTのkeyをKに制約している。 それにより、Lookup Typesのobj[key]でエラーが出なくなる。</p><pre><code>const getProperty = &lt;T, K extends keyof T&gt;( obj: T, key: K) =&gt; {
  return obj[key];
}

const obj = {
  foo: 1,
  bar: 2,
  baz: 3,
}

const hoge = getProperty(obj, "bar")
// const hoge: number

</code></pre><p>また、setPropertyまた、の例として以下のように記述する。 第三引数にvalue: T[K]とすることで、valueはnumber型となる。</p><pre><code>const getProperty = &lt;T, K extends keyof T&gt;( obj: T, key: K) =&gt; {
  return obj[key];
}

const setProperty = &lt;T, K extends keyof T&gt;( obj: T, key: K, value: T[K]) =&gt; {
  obj[key] = value;
}

const obj = {
  foo: 1,
  bar: 2,
  baz: 3,
}

const hoge = getProperty(obj, "bar")

setProperty(obj, "bar", 100);

</code></pre><p><br></p><h2 id="h3bba5ef41e">JavaScriptで用いられるGenerics</h2><h3 id="h92445e4abd">map関数</h3><p>map関数の場合、以下のように型推論が上手く動いている。 map自体がGenericsになっていて、暗黙的な型解決でうまく推論してくれている。</p>

Genericsの型引数が複数あるパターン

<h2 id="h2561bc8329">関数Genericsの構文</h2><p>以下のように記述する。</p><pre><code>function foo&lt;T&gt;(arg: T) {
  return { value: arg };
}

</code></pre><h3 id="h9dc9a084bb"><br>関数Genericsの使い方</h3><p>以下のように記述する。</p><pre><code>function foo&lt;T&gt;(arg: T) {
  return { value: arg };
}

const foo1 = foo&lt;number[]&gt;([1, 2]);

</code></pre><h3 id="h1ecbfa920b"><br>アロー関数での記述方法</h3><p>以下のように引数の()の前にGenericsを記述する。</p><pre><code>const foo = &lt;T&gt;(arg: T) =&gt; {
  return { value: arg };
}

const foo1 = foo&lt;number[]&gt;([1, 2]);

</code></pre><p><br></p><h2 id="hd30381c18b">暗黙的な型解決について</h2><p>関数のGenericsは暗黙的に型が解決される仕組みがある。 以下のように&lt;string&gt;のようにしなくても引数の型を推論して、暗黙的に型を決定してくれる。</p><pre><code>const foo = &lt;T&gt;(arg: T) =&gt; {
  return { value: arg };
}

const foo1 = foo("");
// value: string;
const foo2 = foo(1);
// value: number;
const foo3 = foo(false);
// value: number;

</code></pre><p>このおかげで関数でGenericsを使用したとしても、使う側が毎回型指定をしなくて良くなるので、 非常に便利な機能。<br></p><h2 id="h6ab4807e50">どういう時に型引数を使うのか</h2><h3 id="h61f97fc967">Nullableかもしれない場合</h3><p>Nullableかもしれない場合に以下のように型引数にnullを入れて対応する。 ※Nullable：Nullになりうる値</p><pre><code>const foo = &lt;T&gt;(arg: T) =&gt; {
  return { value: arg };
}

const foo1 = foo&lt;string | null&gt;("");
// value: string | null;

</code></pre><p>Nullableに限らずUnion Types等で後から引数に何が入ってくるかわからない場合に、 型引数を使用することが多い。<br></p><h2 id="h2af70d7f4b">関数Genericsのextendsによる型制約</h2><p>関数Genericsの型引数に制約を加えたい時にextendsによる型制約を用いる。</p><pre><code>const foo = &lt;T extends string&gt;(arg: T) =&gt; {
  return { value: arg };
}

const foo1 = foo&lt;string&gt;("");
const foo2 = foo(1); // 型 'number' の引数を型 'string' のパラメーターに割り当てることはできません。

</code></pre><p>関数Genericsのextendsによる型制約は重要なもので、しっかりと理解しておく。<br></p><h2 id="h0cf9139d7d">なぜ関数Genericsのextendsによる型制約は重要なのか</h2><p>argはある程度型を特定させるために必要で、もしextendsによる型制約が無かったら、 argが中でどのような型になっているかが分からなくなってしまう。</p><pre><code>const foo = &lt;T&gt;(arg: T) =&gt; {

  // argが中でどのような型になっているかが分からない

  return { value: arg };
}

</code></pre><p>そのため、型制約がないとunknownとして扱われてしまい、メソッド等を呼び出せなくなってしまう。</p><pre><code>const foo = &lt;T&gt;(arg: T) =&gt; {

  arg.
  // メソッドにアクセス出来ない

  return { value: arg };
}

</code></pre><p>型制約があると</p><pre><code>const foo = &lt;T extends string&gt;(arg: T) =&gt; {

  arg.toUpperCase()
  // メソッドにアクセス出来る

  return { value: arg };
}

</code></pre><p><br></p><h2 id="hf33b8535b8">関数Genericsのextendsによる型の絞り込み</h2><p>Union Typesでstringまたはnumber等の場合、以下のように上手く扱えなくなるケースが出てくる。</p><pre><code>const foo = &lt;T extends string | number&gt;(arg: T) =&gt; {

  arg.toUpperCase
  // プロパティ 'toUpperCase' は型 'string | number' に存在しません。
  // プロパティ 'toUpperCase' は型 'number' に存在しません。

  return { value: arg };
}

</code></pre><p>そういった時に型の絞り込みを行い対応する。</p><pre><code>const foo = &lt;T extends string | number&gt;(arg: T) =&gt; {
if(typeof arg === "string") {
  return { value: arg.toUpperCase() };
}

  return { value: arg.toFixed() };
}

</code></pre><p>型引数がUnion Typesの場合でも型の絞り込みを使うことによって、 関数内でうまく扱える。<br>ネストされたオブジェクトになっているなど、複雑なUnion Typesの場合でも ユーザー定義のType Guardを使うことによって型解決できる。</p>

関数のGenerics

<h2 id="h27ec96f9e3">Genericsとは？</h2><p>型の決定を遅延できるもの。<br>基本的には以下のように記述する。</p><pre><code>type Foo&lt;T&gt; = {
&nbsp;value: T;
};

const foo: Foo&lt;number&gt; = {
&nbsp;value: 0,
};</code></pre><p><br></p><h3 id="h6c27291808">Genericsで使用されるTやKなどの由来</h3><p>Genericsで使用されるTやKなどの由来は以下の通り。</p><ul><li>T：Type</li><li>K：Key</li><li>U：Unknown</li><li>E：Element</li></ul><p>以上の4つが慣例的によく使われるので覚えておくと良い。<br></p><h2 id="h17840b730e">Genericsの良さ</h2><p>後から使いまわしたりする際に、型を自由に定義することができる。</p><pre><code>type Foo&lt;T&gt; = {
&nbsp;value: T;
};

const foo1: Foo&lt;number&gt; = {
&nbsp;value: 0,
};
const foo2: Foo&lt;string&gt; = {
&nbsp;value: "",
};
const foo3: Foo&lt;number[]&gt; = {
&nbsp;value: [1, 2, 3],
};</code></pre><p>Genericsじゃなかったらvalueを定義し直さなければならなくなる。<br></p><h2 id="h4f4123221b">Genericsのユースケース</h2><p>以下の例のように後からJapaneseやAmericanの型が決定させたい場合に使われる。</p><pre><code>type User&lt;T&gt; = {
&nbsp;name: string;
&nbsp;state: T;
};

type Japanese = User&lt;"東京都" | "大阪府"&gt;
type American = User&lt;"CA" | "NY"&gt;

const user1: Japanese = {
&nbsp;name: "田中",
&nbsp;state: "東京都",
};

const user2: American = {
&nbsp;name: "taylor",
&nbsp;state:"CA",
};</code></pre><p><br></p><h2 id="h0c099aa8ff">Genericsの初期値</h2><p>&lt;T = string&gt;とすることで、初期値がstringとなる。<br>そのため、foo1でFoo&lt;string&gt;としなくても、初期値はstringだと暗黙的に分かっているので問題ない。</p><pre><code>type Foo&lt;T = string&gt; = {
&nbsp;value: T;
};

const foo1: Foo = {
&nbsp;value: "",
};
const foo2: Foo&lt;number&gt; = {
&nbsp;value: 111,
}</code></pre><p><br></p><h2 id="h70f6b5f46f">Genericsのextendsによる型制約</h2><p>Genericsの型引数に制約を加えたい時にextendsによる型制約を用いる。<br>以下のコードだと、extendsでstringを指定しているので、stringに互換性がないnumberはエラーとなる。</p><pre><code>type Foo&lt;T extends string&gt; = {
&nbsp;value: T;
};

const foo1: Foo&lt;string&gt; = {
&nbsp;value: "",
};
const foo2: Foo&lt;"abc"&gt; = {
&nbsp;value: "abc",
};
const foo3: Foo&lt;number&gt; = { // 型 'number' は制約 'string' を満たしていません。
&nbsp;value: 123,
};</code></pre><p><br></p><h2 id="h51cf99d43e">Genericsの初期値とextendsによる型制約の組み合わせ</h2><p>シンプルに = string と繋げて記述すればOK。</p><pre><code>type Foo&lt;T extends string = string&gt; = {
&nbsp;value: T;
};

const foo1: Foo = {
&nbsp;value: "",
};
const foo2: Foo&lt;"abc"&gt; = {
&nbsp;value: "abc",
};</code></pre>

Genericsの基礎

<h2 id="h064ebc1ee6">ユーザー定義のType Guardがなぜ必要か？</h2><p>以下のように、valueがanyだった場合、if文で絞り込んでもanyとなってしまい、<br>Type Guardが機能しなくなってしまう。</p><pre><code>type UserA = { name: string; lang: "ja" };
type UserB = { name: string; lang: "en" };

const foo = (value: any) =&gt; {
&nbsp;if(value.lang === "ja") {
&nbsp;&nbsp;return value;
&nbsp;&nbsp;// value: any
&nbsp;}
&nbsp;return value;
&nbsp;// value: any
};</code></pre><p>この時に生きてくるのがユーザー定義のType Guard。<br></p><h2 id="h1b859035b2">ユーザー定義のType Guardの構文</h2><p>関数の返り値がtrueの場合、is〇〇で指定した型が適用される。</p><pre><code>type UserA = { name: string; lang: "ja" };
type UserB = { name: string; lang: "en" };

const isUserA = (user: UserA | UserB): user is UserA =&gt; {
&nbsp;return user.lang == "ja"
}

const foo = (value: any) =&gt; {
&nbsp;if(isUserA(value)) {
&nbsp;&nbsp;return value;
&nbsp;&nbsp;// value: UserA
&nbsp;}
&nbsp;return value;
&nbsp;// value: any
};</code></pre><p>注意点として最後にreturnで返しているvalueの型がanyとなっている。<br>そもそもvalueはanyとしているので、事前にisUserAで絞り込んでも最終的にanyの可能性が消える訳ではないため、UserBではなくanyとなる。<br>もし、UserBも絞り込む場合は以下のようにUserBも追加する。</p><pre><code>type UserA = { name: string; lang: "ja" };
type UserB = { name: string; lang: "en" };

const isUserA = (user: UserA | UserB): user is UserA =&gt; {
&nbsp;return user.lang == "ja"
}

const isUserB = (user: UserA | UserB): user is UserB =&gt; {
&nbsp;return user.lang == "en"
}

const foo = (value: any) =&gt; {
&nbsp;if(isUserA(value)) {
&nbsp;&nbsp;return value;
&nbsp;&nbsp;// value: UserA
&nbsp;}
&nbsp;if(isUserB(value)) {
&nbsp;&nbsp;return value;
&nbsp;&nbsp;// value: UserB
&nbsp;}
&nbsp;return value;
&nbsp;// value: any
};</code></pre><p><br></p><h2 id="h936a7e2242">ユーザー定義のType Guardがよく使われる事例</h2><h3 id="hf50506bb3d">非同期処理</h3><p>自分の監視の範囲外からデータを取得する場合にレスポンスに型を付与することが難しい。<br>今は色々と技術はあるが、非同期処理で得たデータは型が付いていないことが多い。<br>そのため、ユーザー定義のType Guardを使うことによって解決していく。</p><pre><code>type UserA = { name: string; lang: "ja" };
type UserB = { name: string; lang: "en" };

const isUserA = (user: UserA | UserB): user is UserA =&gt; {
&nbsp;return user.lang == "ja"
}

const isUserB = (user: UserA | UserB): user is UserB =&gt; {
&nbsp;return user.lang == "en"
}

const foo = async () =&gt; {
&nbsp;const res = await fetch("");
&nbsp;const json = await res.json();
&nbsp;if(isUserA(json)) {
&nbsp;&nbsp;return json.lang
&nbsp;&nbsp;// lang: "ja"
&nbsp;}
};</code></pre><p>外部のAPIを叩いた時のレスポンスに型をつけたい場合は上記のように使用する。<br></p><h3 id="h2981cb15be">filter関数</h3><p>現状、JavaScriptのfilter関数を使っても型まで絞り込むことが出来ない。<br>それを型付きで絞り込むためにユーザー定義のType Guardを用いる。<br><br>通常、以下のようにfilter関数で"ja"のユーザーを絞り込めるが、ここでは型まで絞り込めない。</p><pre><code>type UserA = { name: string; lang: "ja" };
type UserB = { name: string; lang: "en" };

const isUserA = (user: UserA | UserB): user is UserA =&gt; {
&nbsp;return user.lang == "ja"
}

const isUserB = (user: UserA | UserB): user is UserB =&gt; {
&nbsp;return user.lang == "en"
}

const users: (UserA | UserB)[] = [
&nbsp;{ name: "たなか", lang: "ja" },
&nbsp;{ name: "やまだ", lang: "ja" },
&nbsp;{ name: "ジョニー", lang: "en" },
];

const japanese = users.filter((user) =&gt; user.lang === "ja");
// japanese: (UserA | UserB)[]</code></pre><p>そこで、isUserAの(user.....)の箇所と、filter()内が同様の構文になっていることに着目し、<br>以下のように記述することで、型を絞り込むことができる。</p><pre><code>type UserA = { name: string; lang: "ja" };
type UserB = { name: string; lang: "en" };

const isUserA = (user: UserA | UserB): user is UserA =&gt; {
&nbsp;return user.lang == "ja"
}

const isUserB = (user: UserA | UserB): user is UserB =&gt; {
&nbsp;return user.lang == "en"
}

const users: (UserA | UserB)[] = [
&nbsp;{ name: "たなか", lang: "ja" },
&nbsp;{ name: "やまだ", lang: "ja" },
&nbsp;{ name: "ジョニー", lang: "en" },
];

const japanese = users.filter(isUserA);
// japanese: UserA[]

const notJapanese = users.filter(isUserB);
// notJapanese: UserB[]</code></pre>

ユーザー定義のType Guard

<h1 id="h0a1de854d8">Atomic Design</h1><p>Atomic Design はデザインシステムを作るための１つの手段。&nbsp;&nbsp;<br>UIコンポーネントの粒度をカテゴリーに明確に分ける手法。<br><br>コンポーネント分割で必要になってくるのが、このコンポーネントの役割は何なのかを意識しながら記述していくこと。<br></p><h2 id="h6fafe4d55e">Atomの作成</h2><p>Atomsには基本的なスタイルだけを指定し、色やpadding、widthなどは変更できるように作成する。&nbsp;&nbsp;<br>atomフォルダの中で、もしボタンを作成するなら更にbuttonフォルダを作成して、その中にPrimaryButton.jsxとSecondaryButton.jsx、そして、それらの大本、枠組みとなるBaseButton.jsxを作成する。</p><pre><code>import styled from "styled-components";
import { BaseButton } from "./BaseButton";

export const PrimaryButton = (props) =&gt; {
&nbsp;const { children } = props;
&nbsp;return &lt;SButton&gt;{children}&lt;/SButton&gt;;
};

const SButton = styled(BaseButton)`
&nbsp;background-color: #40514e;
`;</code></pre><p>BaseButtonを読み込む際には、今まで「styled.button」のように記述していた箇所を「styled(継承したいコンポーネント)」のように記述する。<br></p><h2 id="h6c99e295f5">Moleculesの作成</h2><p>moleculesフォルダの中で、ファイルを作成し、その中でatomで作成したパーツを組み合わせてmoleculesを作成する。&nbsp;&nbsp;<br>使っているAtomsの色やpadding、width、marginを指定する。&nbsp;&nbsp;<br><br>ただ、Moleculesは汎用的に使うことができるよう、Molecules自体のwidthやmarginなどは（基本的には）ここでは指定しないようにする。<br></p><h2 id="h721879544a">Organismの作成</h2><p>organismフォルダの中で、ファイルを作成し、その中でatomとmoleculesで作成したパーツを組み合わせてorganismを作成する。&nbsp;&nbsp;<br>使っているMoleculesのmarginやwidthはここで指定する。&nbsp;&nbsp;<br>また、Atomsを直接使う場合には色やpadding、width、marginを指定する。&nbsp;&nbsp;<br><br>ただ、Organismsは汎用的に使うことができるよう、Organisms自体のwidthやmarginなどは（基本的には）ここでは指定しない。<br></p><h2 id="h3c9925b841">Templateの作成</h2><p>Templateは、中身のないレイアウトのテンプレート。&nbsp;&nbsp;<br>コンテンツの横幅（width）や、サイドバーがあった場合のコンテンツの横幅などが含まれる。<br></p><h2 id="hd77b7d2006">Pageの作成</h2><p>これまでのコンポーネントに実際のテキストや画像を流しこみ用のもの。&nbsp;&nbsp;<br>このページ特有のOrganismsのmarginなどはここで指定する。&nbsp;&nbsp;<br>今までのような汎用的につくることは意識しない。<br></p><h1 id="h0cf17501c1">Atomic Designに取り組む時のポイント</h1><p><br></p><h2 id="h5ae2ef9ec6">あくまでベース</h2><p>Atomic Designはあくまで概念だと認識し、プロジェクトやチームに合わせてカスタマイズしていく。<br></p><h2 id="h82f7a3acab">初めから分けない</h2><p>慣れないうちにコンポーネントを分けようとすると難しい。まずは書いて定期的にリファクタリングする。<br></p><h2 id="hc7c4c9815d">要素の関心を意識する</h2><p>「何に関心があるコンポーネントなのか」を意識しながら分割したりpropsを定義したりする。<br></p>

Atomic Designとは

<p>	<img src="https://images.microcms-assets.io/assets/3f968ea90c0b4ef7a5e3053f7319914b/82ba8da275ef46c4bbf774f6361b6864/ticktickthumb.png" alt=""><br></p><h2 id="h871206e640">タスク管理の決定版！TickTickとは？</h2><p><a style="color:inherit" href="https://ticktick.com/" target="_blank" rel="noopener noreferrer">TickTick</a><br><br>TickTickとは、「ToDoアプリ」「カレンダーアプリ」「タイマーアプリ」「習慣化アプリ」等が1つに集約されている、タスク管理に必要な全ての機能を兼ね備えたオールインワンアプリです！<br><br>タスク管理と一言で言っても、タスク完了までは以下の3つのステップに分かれます。<br><br><strong>1.タスク登録</strong><br>自身の持っているタスクをアプリに登録する作業<br><br><strong>2.登録タスクのスケジューリング</strong><br>登録したタスクをいつ実行するかをカレンダーに組み込んだり、タスクに設定する作業<br><br><strong>3.タスクの実行</strong><br>タスクを期限までに終わらせられるよう実行する作業<br><br>今までのアプリはこの3ステップのどれかに特化しているものが多く、いつももう少し使い勝手が良くならないかなぁ…と思っていました。<br><br>そして、そんなモヤモヤを払拭してくれるアプリが今回紹介する「TickTick」でした！<br>Mizも2年以上愛用しているアプリで、本当に使いやすく日々の生産性に多大な貢献をしています！<br>そんなアプリをこれから紹介していきます！<br></p><h2 id="hbf044d6eb7">TickTickの使い方</h2><p>TickTickは主に、以下の4つも機能が使えます。</p><ul><li>ToDo管理</li><li>カレンダー表示</li><li>ポモドーロタイマー</li><li>習慣化管理</li></ul><p><br>それぞれ説明していきます。<br></p><h3 id="h6caa2fb590">ToDo管理</h3><p>タスク管理の最も基本的な機能です。<br><img src="https://images.microcms-assets.io/assets/3f968ea90c0b4ef7a5e3053f7319914b/afda9f8481b8453288432061c0610a54/ticktick01.png" alt=""><br><br>作成手順は以下の通りです。<br>STEP1<br><strong>右下の「+」ボタンをクリックする</strong><br><br>STEP2<br><strong>タスク内容を入力し、登録ボタンをクリックする</strong><br><br>STEP3<br><strong>タスクが登録されます</strong><br><br>以下の画像のようにタスク登録ではリマインダーも設定することも出来ます。<br><br><img src="https://images.microcms-assets.io/assets/3f968ea90c0b4ef7a5e3053f7319914b/082e4e2521e448a1b4c086e384d54597/ticktick02.png" alt=""><br>リマインダーの通知も好きな設定に変更出来るので、こちらも嬉しいポイントです。<br><br>また、毎週ある予定等はリピート設定も自由に設定出来るので、タスクの登録忘れ防止にもなります。<br><img src="https://images.microcms-assets.io/assets/3f968ea90c0b4ef7a5e3053f7319914b/df1a3dd9f95a4951843e3fca3bf7cde0/ticktick03.png" alt=""><br></p><h3 id="hcd3352c678">カレンダー表示</h3><p>カレンダー表示では、タスクの登録期限通りにカレンダー表示してくれます。<br><img src="https://images.microcms-assets.io/assets/3f968ea90c0b4ef7a5e3053f7319914b/b0a74883afcd44d797a9231ebde9066f/ticktick04.png" alt=""><br>右上の「…」から「カレンダーを購読」をするとGoogleカレンダー等と連携も出来るため、<br>カレンダーを見つつ、ToDo管理も一緒に出来て非常に便利です。<br></p><h3 id="h9904a23315">ポモドーロタイマー</h3><p>TickTickではポモドーロタイマーも使用することが出来ます。<br><br>そもそもポモドーロタイマーとは「25分作業」＋「5分休憩」をセットで繰り返す「ポモドーロ・テクニック」という時間管理術を実現する用のタイマーです。<br><br>タスクに紐付けて、ポモドーロタイマーを設定することも出来るので、タスクが何ポモドーロで完了したかも確認でき、時間配分に対しても効果を発揮出来ます。<br><img src="https://images.microcms-assets.io/assets/3f968ea90c0b4ef7a5e3053f7319914b/293e7d75270c464daaf3f1f05b36df48/ticktick05.png" alt=""><br>カウントダウン中に画面をタップすると上の画像右のように、時間だけの表示に出来ます。<br><br><img src="https://images.microcms-assets.io/assets/3f968ea90c0b4ef7a5e3053f7319914b/6451b980d7ab43ce857ef26ea2e91c8c/ticktick06.png" alt=""><br><br>カウントダウンが終わったら「リラックス」をタップして、5分の休憩に入りましょう。<br>休憩が終わったら再び開始をタップして作業に入ります。<br><br>このように「25分作業」＋「5分休憩」をセットで繰り返し集中して作業に取り組むことが出来ます。<br><br>ポモドーロ・テクニックに関しては以下の記事で詳しく解説しています。<br><br><a style="color:inherit" href="https://zenn.dev/miz_dev/articles/f0b926126c138f" target="_blank" rel="noopener noreferrer">ポモドーロ・テクニックとは？【集中して作業したい方必見！】</a><br></p><h3 id="haf9e8f5719">習慣化管理</h3><p>習慣化管理では、習慣化をしているものや習慣化させたいものを設定して、日々の習慣ログを取ることが出来ます。<br><img src="https://images.microcms-assets.io/assets/3f968ea90c0b4ef7a5e3053f7319914b/769ad573be2246e1b091db0475f6f85f/ticktick07.png" alt=""><br><img src="https://images.microcms-assets.io/assets/3f968ea90c0b4ef7a5e3053f7319914b/b09a9c1a605e4f61bc8341f4e674e582/ticktick08.png" alt=""><br><br>また、日々達成したかしてないかのアクティビティも確認出来るので、習慣化の進捗管理にピッタリです。<br>こういった習慣のログを見れるのは嬉しい機能です。<br><br><img src="https://images.microcms-assets.io/assets/3f968ea90c0b4ef7a5e3053f7319914b/486f343ca364481d819183558d288d5c/ticktick09.png" alt=""></p><h2 id="ha214098e44">まとめ</h2><p>「ToDoアプリ」「カレンダーアプリ」「タイマーアプリ」「習慣化アプリ」等が1つに集約されている、タスク管理に必要な全ての機能を兼ね備えたオールインワンアプリについて紹介しました！<br><br>機能の制限はありますが、無料版で一度TickTickを試すことも出来るので、是非試してみてください！</p>

タスク管理の決定版！「TickTick」の使い方を徹底解説【タスク管理はこれ1つでOK！】

<p><img src="https://images.microcms-assets.io/assets/3f968ea90c0b4ef7a5e3053f7319914b/52d727b00bf64222b1acf1e0d524c24c/about01.png" alt=""><br>「Web制作始めてみたいけどHTMLとCSSってそもそも何？」、「どうやって学んだら良いか分からない」という初心者の方に、HTMLとCSSの基礎とオススメ学習サイト3選についてわかりやすく解説します！<br></p><h2 id="hbf6305a849">本記事のテーマ</h2><p style="text-align:center"><strong>【完全初心者向け】HTMLとCSSの基礎知識とオススメ学習サイト3選</strong></p><p style="text-align:center"><br></p><h2 id="h0ea94d9793">HTML&amp;CSS</h2><h3 id="h36c1dc7783">HTMLとは</h3><p>HTML(エイチティーエムエル)とはHyper Text Markup Language(ハイパーテキストマークアップランゲージ)の頭文字をとったもので、「Webページを表示するときの土台となるコンピューター言語」です。<br>Webページに表示したい文章や画像を「&lt;」と「&gt;」で挟んだ「タグ」と呼ばれる文字列で囲み、目印を付けて書いていきます。<br>タグで文章を囲むことで、「ここは見出しですよ」、「ここは画像ですよ」というようにどういう意味があるのか、コンピュータに伝えることが出来ます。<br>このタグで囲んで目印をつけることをマークアップと呼ぶことから、HTMLはマークアップ言語と呼ばれます。<br></p><p style="text-align:center">HTMLとは<strong>「Webページを表示するときの土台となるコンピューター言語」</strong></p><h3 id="he304014047"><br>CSSとは</h3><p>CSSとはCascading Style Sheets(カスケーディングスタイルシート)の頭文字をとったもので、「Webページにデザインを施し、どのようにブラウザに表示するか指定する言語」です。<br>先程のHTMLが文章の構造を担当するのに対して、CSSは「Webページにデザインを施し、どのようにブラウザに表示するか指定する言語」のため、HTMLとセットで使われます。<br>CSSがあることにより、「見出しは青色にしよう」、「この画像同士を横に3つ並べて表示しよう」というように、Webサイトを自分の思うようなデザインにすることが出来ます。<br>このWebサイトを自分の思うようなデザインにすることが、CSSの面白いところであり、また、CSSの難しいところでもあります。<br></p><p style="text-align:center">CSSとは<strong>「Webページにデザインを施し、どのようにブラウザに表示するか指定する言語」</strong></p><h3 id="h0d0514322a"><br>HTML&amp;CSSまとめ</h3><ul><li>HTML：文章や構造を作る</li><li>CSS　：HTMLで作成したものをデザインする</li></ul><p><br>HTML&amp;CSSはそれぞれ、文章や構造を作るHTML、それをデザインするCSSと覚えましょう。<br></p><h2 id="h9f24409a06">オススメ学習サイト3選</h2><h3 id="h310d037b4e">progate</h3><p>まずは初心者学習サイトの王道、progate。<br>ここから入っていった人も多いのでは無いでしょうか。<br>自分も多分に漏れず、このprogateからスタートしました。<br>図解スライドが非常に分かりやすく、そのあと実際にブラウザ上でコードを書いて試せるところがGood！<br>環境構築も要らないので、その点も初心者の方にはオススメです！<br>スマートフォン用のアプリもあるので、どこでも学習が出来るのは嬉しいですね。<br><br><a style="color:inherit" href="https://prog-8.com/" target="_blank" rel="noopener noreferrer">Progate(プロゲート) | Learn to code, learn to be creative.</a><br></p><h3 id="h1179ac4505">ドットインストール</h3><p>動画での初心者学習サイトの王道、ドットインストール。<br>こちらは主に動画で観ながら学べるサイトです。<br>1回の動画が3分程で観終わるので、隙間時間の学習にももってこい！<br>progateのように、ブラウザ上での環境でコードを書ける訳では無いのですが、自分のPCで環境構築をするところから始められるので、その練習にもピッタリですね。<br>あわせて読みたい<br><br><a style="color:inherit" href="https://dotinstall.com/" target="_blank" rel="noopener noreferrer">ドットインストール</a><br></p><h3 id="h3749b5415d">paizaラーニング</h3><p>最後はpaizaラーニング。<br>こちらは動画で学べつつ、実際にコードもブラウザ上で書けるサービスです。<br>HTMLとCSSでは無いですが、ゲームをしながらプログラミングを学べるコンテンツがあったりと、楽しくプログラミングを学べるサービスだと思います！<br><br><a style="color:inherit" href="https://paiza.jp/works" target="_blank" rel="noopener noreferrer">環境構築不要！初心者でも楽しく学習できるプログラミング入門サービス【paizaラーニング】</a><br></p><h2 id="h3bcda3e6b0">最後に</h2><p>ここまで、HTMLとCSSの基礎についてとオススメ学習サイトを説明してきました。<br>HTMLとCSSは書いているものが画面上に反映されるので、自分がコードを書いたことへの実感が得やすいと思います。<br>ここの書いてすぐに反映されることが結構モチベーションにも繋がり、楽しい部分でもあるので、これを機に実際にコードを書いてWeb制作の1歩目を踏み出しましょう！</p>

HTML/CSSとは？基礎知識とオススメ学習サイト3選【完全初心者向け】

<p><img src="https://images.microcms-assets.io/assets/3f968ea90c0b4ef7a5e3053f7319914b/0e73e7d814fe44cda46843cc2b3a984f/about01.png" alt=""><br>はじめまして！<br>本日から当ブログ「MizLog(ミズログ)」をはじめるMIz(ミズ)です！<br>普段は都内のWeb制作会社でフロントエンジニアとして働いています。<br>何故、ブログを始めたのか、当ブログのコンセプトを伝えたいと思います。<br></p><h2 id="hc921ce511d">ブログを始めた理由</h2><p>自分のように未経験からWeb制作を始めたい方に、自分の経験を踏まえて発信し、1人でも多く未経験からWeb制作に進める人を増やしたいと思い、当ブログを始めることにしました。<br><br>また、以前WordPressでブログを開設していましたが、TypeScript/React/Next.js学習の一環としてNext.jsでブログを作成してみたいと思い、このブログを作成しました。<br><br></p><h2 id="h24e66c5cc9">当サイト（MizLog）のコンセプト</h2><p style="text-align:center"><span style="color:#1e3a8a">「</span><strong style="color:#1e3a8a">未経験からの成長の歩みをアウトプット</strong><span style="color:#1e3a8a">」</span></p><p><br>当サイトでは、未経験からWeb制作の過程でぶつかった壁や、それを乗り越えるための行動をアウトプットしていけたらと思っています。<br>Web制作会社に入社してから、Web制作を学んでいく中で、インプットした知識や実務でよく使う技術を日々の備忘録としてこちらに書き留めていこうと思います。<br>その他にも、Web制作関連の役立つツールやビジネスで使えるTips、そして、自分の趣味の分野も自由に更新していきます。<br></p><h2 id="h3bcda3e6b0">最後に</h2><p>最初なので、短めとなりますが今後ともよろしくお願いします！</p>