<h2 style="text-align: start" id="h8d027c8ed3"><strong>はじめに</strong></h2><p style="text-align: start">リーダブルコードを読んで、勉強になったこと、感じたことをまとめていきます。</p><h2 style="text-align: start" id="h0669eefa7c"><strong>目次</strong></h2><h4 style="text-align: start" id="hac09261e2b"><strong>理解しやすいコードとは</strong></h4><h4 style="text-align: start" id="h2c26c31eb9"><strong>・表面上の改善</strong></h4><h2 style="text-align: start" id="h84a2391ca1"><strong>コードを書く上での大前提</strong></h2><p style="text-align: start">・コードは理解しなければならない<br>・コードは他の人が、最短時間で理解できるように書かないといけない<br>1つずつ説明していきます。</p><h4 style="text-align: start" id="he34647c97b"><strong>・コードは理解しなければならない</strong></h4><p style="text-align: start">これがコードを書くうえで、一番大事になる原則としている。</p><h4 style="text-align: start" id="h272c3ad922"><strong>・コードは他の人が、最短時間で理解できるように書かないといけない</strong></h4><p style="text-align: start">コードを読む際に、処理内容が分かりにくいコードよりも、わかりやすいこコードの方が良いに決まっています。<br>わかりにくいコードを書いていると、周りの開発者はもちろん、何ヶ月後かに、自分で見返した時にも、コードを読むのに労力を使ってしまいます。</p><h2 style="text-align: start" id="h3b50daee67"><strong>表面上の改善</strong></h2><h5 style="text-align: start" id="h5607da2581"><strong><em>鍵となる考え</em></strong></h5><p style="text-align: start">・明確な単語を選ぶ<br>・汎用的な名前は避ける<br>・抽象的な名前よりも具体的な名前を使う。<br>・接尾辞や接尾頭を使って、情報を追加する<br>・名前の長さを決める</p><h4 style="text-align: start" id="h83a54ea36f"><strong>明確な単語を選ぶ</strong></h4><p style="text-align: start">例えば「getPage」という名前は、ページをどこから取ってくるのかわからない。インターネットから取得するのであれば、「FetchPage」、「DownloadPage」などが良い。</p><h4 style="text-align: start" id="h17c1cbb8b4"><strong>汎用的な名前は避ける</strong></h4><p style="text-align: start">例えば、「tmp」「retval」「foo」のような名前は付けないようにしたほうがいい。<br>単語自体に情報が無いので、使うのであれば、それ相応の理由を用意する。</p><h4 style="text-align: start" id="hf86730a756"><strong>抽象的な名前よりも具体的な名前を使う。</strong></h4><p style="text-align: start">名前は短いコメントのようなものなので、絶対に知らせなきゃいけない情報があれば、適切な単語を選び、変数名に追加する</p><h4 style="text-align: start" id="h32185207c9"><strong>名前の長さを決める</strong></h4><p style="text-align: start">この本では、変数の長さは、長いのが問題ではないが、できるだけ短くすることをおすすめしている。<br>理由としては、長い変数は覚えにくいし、画面を占領してしまうからです。<br>頭文字と省略形はプロジェクト固有の省略は良くない。理由は、新しく入ってきたメンバーはその変数の意味を理解できないからである。<br>不要な単語も投げ捨てた方がいい。例えば、CovertToString()をToString()にしてもあまり変わらない。<br>変数名はシンプルにしよう。</p><h2 style="text-align: start" id="h8c7dc69530"><strong>誤解されない名前</strong></h2><h5 style="text-align: start" id="h5607da2581"><strong><em>鍵となる考え</em></strong></h5><p style="text-align: start">・最善の名前とは、誤解されない名前</p><p style="text-align: start">自分の書いているコードが、自分の意図を正確に伝えるようにする。<br>プログラミングの英単語は、filterやlength、limitなど曖昧な意味の単語が多い。<br>例えば、上下の限界値を決めるときは、maxやminなどを使う。包含的範囲であればfirstやlastなどを使うなど、工夫をしていくことが必要である。</p><h2 style="text-align: start" id="h3a895fd7c7"><strong>美しさ</strong></h2><h4 style="text-align: start" id="hdaae2b7d17"><strong>なぜコードの美しさが必要なのか</strong></h4><p style="text-align: start">プログラミングの時間のほとんどはコードを読む時間です。読みやすいコードは、コーディングのミスを減らし、誰でも使いやすいコードになるのです。</p><h5 style="text-align: start" id="h5607da2581"><strong><em>鍵となる考え</em></strong></h5><p style="text-align: start">・複数のコードブロックで同じようなことをしていたら、シルエットも同じようなものにする。</p><p style="text-align: start">・コードの列を整列すれば、概要が把握しやすくなる<br>・空行を使って大きなブロックを論理的な段落に分ける。</p>

リーダブルコード

<h2 style="text-align: start" id="h8d027c8ed3"><strong>はじめに</strong></h2><p style="text-align: start">React(Next.js)を使って、簡単にスクロールアップを実装しました。<br>以下のように動作します。</p><figure><img src="https://images.microcms-assets.io/assets/9839e4f1a34f45fea5ffa160d87c9f10/d252197480c742009c3c90d26ef865d6/image.png" alt="" width="360" height="240"></figure><p style="text-align: start"><br></p><h2 style="text-align: start" id="ha3f1968a54"><strong>react-scrollをインストール</strong></h2><p style="text-align: start">今回は、「react-scroll」というライブラリを使用していきます。<br>まずは、react-scrollをインストールしていきます。</p><p style="text-align: start">ボタンのアイコンには、FontAwesomeを使用しているので、インストールしていないのであれば、以下の記事を参考にしてみてください。<br><a href="https://qiita.com/hukuryo/items/766d34bb2440e2835a3e">https://qiita.com/hukuryo/items/766d34bb2440e2835a3e</a></p><p style="text-align: start"><strong>インストール</strong></p><pre><code>$ npm install react-scroll

$ npm install
</code></pre><h2 style="text-align: start" id="hc684259255"><strong>サンプルコード</strong></h2><p style="text-align: start">以下がreact-scrollのサンプルコードになります。</p><p>ScrollUp.tsx</p><pre><code>import React from &apos;react&apos;;
import { FontAwesomeIcon } from &quot;@fortawesome/react-fontawesome&quot;;
import { faArrowUp } from &quot;@fortawesome/free-solid-svg-icons&quot;;

import { animateScroll as scroll } from &quot;react-scroll&quot;;

export function ScrollUp() {

    const scrollToTop = () =&gt; {
        scroll.scrollToTop();
    };
    
    return (
        &lt;div className=&quot;fixed bottom-6 right-6 z-50&quot;&gt;
            &lt;button 
                className={`fixed bottom-6 right-6 z-50 bg-gray-500 text-white px-4 py-3 rounded-full cursor-pointer transition-opacity`} 
                onClick={scrollToTop}
            &gt;
                &lt;FontAwesomeIcon icon={faArrowUp} /&gt;
            &lt;/button&gt;
        &lt;/div&gt;
    )
}
</code></pre><p style="text-align: start">このライブラリを使えば、以下のコードがあれば実装できるので、とても簡単ですね。</p><pre><code>// react-scrollを実装しているコード
import { animateScroll as scroll } from &quot;react-scroll&quot;;

const scrollToTop = () =&gt; {
   scroll.scrollToTop();
};
</code></pre><h2 style="text-align: start" id="h8c3f1d54cd"><strong>少しアレンジ</strong></h2><p style="text-align: start">以下のように、スクロールしていったらボタンを表示するように、少しアレンジしました。</p><p>ScrollUp.tsx</p><pre><code>import React, { useState, useEffect } from &apos;react&apos;;
import { FontAwesomeIcon } from &quot;@fortawesome/react-fontawesome&quot;;
import { faArrowUp } from &quot;@fortawesome/free-solid-svg-icons&quot;;

import { animateScroll as scroll } from &quot;react-scroll&quot;;

export function ScrollUp() {
    // スクロールアップボタンを表示、非表示させるためのState
    const [isVisible, setIsVisible] = useState(false);

    // スクロールしている高さを取得して、stateの値を更新する処理
    useEffect(() =&gt; {
        const toggleVisibility = () =&gt; {
            if (window.scrollY &gt; 300) { // ここで表示するスクロール位置を調整
                setIsVisible(true);
            } else {
                setIsVisible(false);
            }
        };
        
        window.addEventListener(&apos;scroll&apos;, toggleVisibility);

        return () =&gt; {
            window.removeEventListener(&apos;scroll&apos;, toggleVisibility);
        };
    }, []);

    const scrollToTop = () =&gt; {
        scroll.scrollToTop();
    };
    
    return (
        &lt;div className=&quot;fixed bottom-6 right-6 z-50&quot;&gt;
            &lt;button 
                className={`fixed bottom-6 right-6 z-50 bg-gray-500 text-white px-4 py-3 rounded-full cursor-pointer transition-opacity ${isVisible ? &apos;opacity-100&apos; : &apos;opacity-0&apos;}`} 
                onClick={scrollToTop}
                &gt;
                &lt;FontAwesomeIcon icon={faArrowUp} /&gt;
            &lt;/button&gt;
        &lt;/div&gt;
    )
}
</code></pre><p style="text-align: start">以上で実装は完了になります！</p><p style="text-align: start"></p>

[React]react-scrollでスクロールアップ機能を簡単に実装する。

<h2 style="text-align: start" id="h8d027c8ed3"><strong>はじめに</strong></h2><p style="text-align: start">派遣先での実務研修で学んだことを書いていきます。今回は基本設計についてです。<br>少し見えにくい画像もあるかと思いますがお許しください...</p><h2 style="text-align: start" id="h24d64cc747"><strong>基本設計書とは</strong></h2><p style="text-align: start">設計をする上で、ある程度の大枠の機能や、仕様について書いていくものです。<br>要件定義をした後に行います。<br></p><figure><img src="https://images.microcms-assets.io/assets/9839e4f1a34f45fea5ffa160d87c9f10/0e703a1e0a9346baa337efdfd0266566/image.png" alt="" width="259" height="194"></figure><h2 style="text-align: start" id="hb4684b2340"><strong>表紙</strong></h2><p style="text-align: start">表紙はこんな感じで作るのが一般的です。<br></p><figure><img src="https://images.microcms-assets.io/assets/9839e4f1a34f45fea5ffa160d87c9f10/f4b5e8e603f048ed9c7dbe28d78604c8/image.png" alt="" width="189" height="267"></figure><h2 style="text-align: start" id="h7c6805648e"><strong>機能一覧</strong></h2><p style="text-align: start">画像のように、実装する機能の一覧をまとめていくものです。<br>一般的には、機能名とその機能の説明を記述することが多いです。<br></p><figure><img src="https://images.microcms-assets.io/assets/9839e4f1a34f45fea5ffa160d87c9f10/87d853f89a2a42158cfce8ac50b84561/image.png" alt="" width="826" height="384"></figure><h2 style="text-align: start" id="hbfdd612c20"><strong>画面一覧</strong></h2><p style="text-align: start">こちらは、作成する画面の一覧をまとめたものになります。<br>画像のように、「この画面はこんな機能を持っていて、こういう意図で作成するものです」という内容を書いていきます。<br>※画面IDと機能IDは、画面や機能に番号を振って、他の資料で画面名や機能名をちゃんと分類できるようにするために使用するものなので、特に決まりはありませんが、よく使うのは画像のような書き方です。<br></p><figure><img src="https://images.microcms-assets.io/assets/9839e4f1a34f45fea5ffa160d87c9f10/1fbacd0e333d4d01b840e956a69249f0/image.png" alt="" width="1108" height="520"></figure><h2 style="text-align: start" id="hec9ef804c4"><strong>画面遷移図</strong></h2><p style="text-align: start">こちらは、この画面でこの操作をするとこの画面にいくという図を書いて、イメージをしやすくする図になります。<br></p><figure><img src="https://images.microcms-assets.io/assets/9839e4f1a34f45fea5ffa160d87c9f10/25a355b976234bb2b098d079d571f2b3/image.png" alt="" width="1182" height="658"></figure><h2 style="text-align: start" id="h7714e1a4f0"><strong>テーブル一覧</strong></h2><p style="text-align: start">アプリケーションを作成していく上で、データベースに作成する予定のテーブルの一覧をまとめたものになります。物理名はコード上のテーブルの名前で、論理名は物理名を日本語にしてわかりやすく書いたものです。<br></p><figure><img src="https://images.microcms-assets.io/assets/9839e4f1a34f45fea5ffa160d87c9f10/47445c0483a440298b03a7ca52ab8bf0/image.png" alt="" width="867" height="460"></figure><h2 style="text-align: start" id="h780449a043"><strong>ファイル一覧</strong></h2><p style="text-align: start">こちらは画像が無くて申し訳ないのですが、コードを書いていく上で作成するHTMLファイルなどを一覧にまとめて、どのファイルにどんな機能を実装する記述が記載されているかを一目でわかるようにするためのものです。<br><strong>例：index.html、style.css、</strong><a href="http://UserController.java"><strong>UserController.java</strong></a><strong>などのファイル</strong></p><h2 style="text-align: start" id="h137fd27247"><strong>メッセージ一覧</strong></h2><p style="text-align: start">バリデーションなどで画面上で表示させる予定にあるメッセージの一覧をまとめたものです。<br>例えば、ログイン画面のフォームで、ユーザーがフォームに何も入力をしないで、ログインボタンを押した場合に表示させる「ログインできません」というメッセージなど</p><h2 style="text-align: start" id="h2c9802a223"><strong>テーブル関連図</strong></h2><p style="text-align: start">ER図と呼ばれるもので、エンティティ同士の関係性を表している図です。<br></p><figure><img src="https://images.microcms-assets.io/assets/9839e4f1a34f45fea5ffa160d87c9f10/42cad12f53f045df91c6ff7daac4de7a/image.png" alt="" width="1400" height="788"></figure><h2 style="text-align: start" id="hd43977d1d2"><strong>外部IF一覧</strong></h2><p style="text-align: start">ユーザーが直接触る画面で、どのようにデータがやりとりされるかをまとめたものです。<br></p><figure><img src="https://images.microcms-assets.io/assets/9839e4f1a34f45fea5ffa160d87c9f10/45d262caa5674bd0a6e843b10ef8c957/image.png" alt="" width="1400" height="857"></figure><h2 style="text-align: start" id="h3ebab0e8e9"><strong>改版履歴</strong></h2><p style="text-align: start">顧客に見せた後、内容の修正があった場合に誰が、何の書類を変更したかをわかるように記録するために用意するものです。<br></p><figure><img src="https://images.microcms-assets.io/assets/9839e4f1a34f45fea5ffa160d87c9f10/8c5fb4a79fc644d2b16f1279b433f122/image.png" alt="" width="269" height="187"></figure><h2 style="text-align: start" id="hd932be0950"><strong>QA票</strong></h2><p style="text-align: start">・QA票は、エンジニアと顧客の間で作りたいものに対して認識違いがないように、エンジニアからの質問事項とその回答をまとめたものになります。エンジニアから顧客に出すものなので、主語と述語を意識して書いたり、エンジニア特有の略語なども相手によっては使用しないようにする。<br>また、顧客が技術や知識を持っていなかったり、サービスに対して大雑把に説明されていたりなど、様々な状況があるので、サービスを作り終えた後に、「こんなはずじゃなかった」と言われないようにするためのものでもある。</p><p style="text-align: start">・QAで質問をする際は、期限と質問の優先度を顧客先に伝えると良い。<br>期限⇨期限を設定しないと、なかなか回答がもらえないことがあるため。<br>優先度⇨QAをまとめて回答してもらう時に、一気に回答してもらうのは大変なので、質問の中でもすぐ回答が欲しいものには優先度をつけて、相手に伝えると先に回答してもらえることが多い。<br>少し画像が見にくいですが、参考にサンプルを貼っておきます。</p><figure><img src="https://images.microcms-assets.io/assets/9839e4f1a34f45fea5ffa160d87c9f10/a06da70d2d2843eaa266ee3682130588/image.png" alt="" width="267" height="189"></figure><h2 style="text-align: start" id="ha214098e44"><strong>まとめ</strong></h2><p style="text-align: start">設計では書くものが多いですが、しっかりやればその分ミスを減らし、コーティングも楽に進められることができます。なので、大変ではありますが細かいところまで漏れがないように作成することを意識していきたいです</p>

基本設計の書き方を学ぶ

<h2 id="h8d027c8ed3">はじめに</h2><p>フロントエンドで理解が必須の、非同期処理と同期処理について書いていきます。</p><h1 id="h9cc14d7dee">非同期処理と同期処理の関係</h1><h2 id="h0a80f0e3f5">・同期処理</h2><p>ある処理の完了を待たずに、別の処理から実行していく通信方法になります。
サンプルコードで解説します。</p><div data-filename="test.tsx"><pre><code>const testMethod = () =&gt; {
    console.log(&apos;1&apos;);
    setTimeout(() =&gt; {
        console.log(&apos;2&apos;)
    }, 1000);
    console.log(&quot;3&quot;);
}
testMethod();</code></pre></div><p>出力結果は以下のようになります。</p><pre><code>1
3
2</code></pre><p>このように、時間のかかる処理を待たずに、別の処理を実行していくのが非同期処理となります。</p><h2 id="h0a80f0e3f5">・同期処理</h2><p>同期処理は、非同期処理の逆で、順番に処理を実行していく通信方法になります。
サンプルコードは以下です。
今回は、asyncとawaitを使って、同期処理を実現しています。</p><div data-filename="test.tsx"><pre><code>const testMethod = async () =&gt; {
    console.log(&quot;1&quot;);
    console.log(&quot;2&quot;);
    console.log(&quot;3&quot;);
}
testMethod();</code></pre></div><p>実行結果は以下のようになります。</p><pre><code>1
2
3</code></pre><p>このように、同期処理は、上から順番に処理を行なっていきます。</p><h2 id="h5e10b4bab7">○使いこなすためのベストプラクティス</h2><p><strong>非同期関数:</strong></p><p>  非同期処理を行う関数は、必ず async キーワードを付けて定義し、await を使用して非同期操作の完了を待つようにします。これにより、コードの意図が明確になり、エラーハンドリングも容易になります。 </p><p><strong> Promiseとコールバック:</strong></p><p>　コールバックベースの非同期処理は、コードのネストが深くなる可能性があるため、可能な限り Promise を使用して処理をチェーンすることを推奨します。  </p><p><strong>非同期のネストを避ける:</strong></p><p>非同期処理のネストを深くしないように注意し、必要に応じて Promise.all や async/await を使用して複数の非同期操作を同時に待機することで、コードの複雑さを抑えることができます。  </p><p><strong>エラーハンドリング:</strong></p><p>非同期処理ではエラーハンドリングが重要です。try/catch ブロックを使用して非同期操作の中で発生するエラーを適切にキャッチし、処理するようにします。 </p><p><strong> パフォーマンスの最適化:</strong></p><p>非同期処理の適切な活用により、アプリケーションのパフォーマンスを向上させることができます。ただし、過剰な非同期処理は逆にオーバーヘッドを引き起こす可能性があるため、バランスを保つことが重要です。  非同期処理と同期処理の組み合わせにより、アプリケーションの効率性とユーザーエクスペリエンスを向上させることができます。適切な場面で使い分けることで、柔軟で高性能なコードを実現できます。</p>

非同期処理と同期処理について

<h2 style="text-align: start" id="h8d027c8ed3"><strong>はじめに</strong></h2><p style="text-align: start">以下の書籍で、オブジェクト指向をベースとしたUI設計の方法を学んだので、まとめていこうと思います。<br><a href="https://www.amazon.co.jp/%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E6%8C%87%E5%90%91UI%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E2%94%80%E2%94%80%E4%BD%BF%E3%81%84%E3%82%84%E3%81%99%E3%81%84%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A7%E3%82%A2%E3%81%AE%E5%8E%9F%E7%90%86-WEB-DB-PRESS-plus%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA/dp/4297113511" target="_blank" rel="noopener noreferrer nofollow">オブジェクト指向UIデザイン 使いやすいソフトウェアの原理</a></p><h2 style="text-align: start" id="h9707d3a59a"><strong>概要</strong></h2><p style="text-align: start">この書籍では、どのようにUI設計をすればユーザーが使いやすいアプリケーションや、システムになるかが書いてあります。様々な実例などを交えながら書かれている書籍だったので、とても勉強になりました。</p><h2 style="text-align: start" id="h2fabb42ad8"><strong>オブジェクト指向の設計とタスク指向の設計の違い</strong></h2><h3 style="text-align: start" id="hbf63ba239a"><strong>〇タスク指向の設計</strong></h3><p style="text-align: start">タスク指向のUI設計とは、簡単に言うと、動詞⇒名詞の順番にUI設計がされているシステムになります。<br>例えば、よく使うドリンクの自動販売機などはまさにそうです。お金を入れる(動詞)⇒ドリンクを選ぶ(選択)という順番で設計されています。</p><figure><img src="https://images.microcms-assets.io/assets/9839e4f1a34f45fea5ffa160d87c9f10/1b6caf386a534891be9334019fa31106/image.png" alt="" width="182" height="277"></figure><p style="text-align: start"><br><br>システムでいえば、以下のような銀行のATMなどは、「振込」「入金」などの操作の選択を先に行うタスク指向のUI設計になっていることが多いです。</p><figure><img src="https://images.microcms-assets.io/assets/9839e4f1a34f45fea5ffa160d87c9f10/13cf9856698d4b5bae18256b1207512b/image.png" alt="" width="259" height="194"></figure><h3 style="text-align: start" id="he07d77ab57"><strong>〇オブジェクト指向の設計</strong></h3><p style="text-align: start">これは先ほどの逆で、名詞⇨動詞の順番にUI設計がされているシステムになります。<br>例えば、以下の画像のような生徒の管理をするアプリケーションがあるとします。<br>オブジェクト指向のUI設計に基づいて設計をされています。</p><figure><img src="https://images.microcms-assets.io/assets/9839e4f1a34f45fea5ffa160d87c9f10/4963edc05b0d482ead696e4933841015/image.png" alt="" width="1400" height="927"></figure><p style="text-align: start">まず、オブジェクト(ここでは生徒がオブジェクト)を一覧で表示します。そのオブジェクトに関するボタン(ここでは編集ボタン)を押すとそのオブジェクトに関する操作ができるような設計になります。つまり、名詞⇨動詞の順番でUI設計がされているというわけです。<br>これがオブジェクト指向のUI設計になります。今回で言うと、一覧からオブジェクトを選択して、それに対する操作をすると言う流れです。<br>タスク指向のUI設計では、操作を選んでからオブジェクトを選択するという流れなので、全く逆なのです。</p><h2 style="text-align: start" id="h2877bbb4db"><strong>オブジェクト指向UIの原則</strong></h2><p style="text-align: start">この書籍では、オブジェクト指向UIの原則として以下が挙げられています。</p><p style="text-align: start"><strong>・オブジェクトを知覚でき直接的に働きかけられる</strong><br><strong>・オブジェクトは自身の性質と状態を体現する</strong><br><strong>・オブジェクト選択⇨アクション選択の操作順序</strong><br><strong>・全てのオブジェクトが互いに協調しながらUIを構築する</strong></p><h2 style="text-align: start" id="h8a85a72c92"><strong>宅配ピザサービスの例</strong></h2><p style="text-align: start">最後に特殊なUI設計をしているサービスの解説をしてきます。<br>このUI設計のおかしな点を以下に箇条書きにしていきます。</p><p style="text-align: start"><strong>・商品を選ぶ前に、なぜかログインや会員登録しなければならない。</strong><br>⇨買いたい商品を選んでからログインなどの操作を行うUI設計の方が、ユーザーからしてもわかりやすい。<br><strong>・商品を選ぶ前に、商品を選ぶのではなく、なぜか「今すぐ配達」ボタンを押さないと注文画面にいけない。</strong><br>⇨ユーザーからすると、どこのボタンを押せば商品を押すと注文をすることができるのかわかりにくい。</p><figure><img src="https://images.microcms-assets.io/assets/9839e4f1a34f45fea5ffa160d87c9f10/0ecea3f608f946a1b546ba3daec0dc53/image.png" alt="" width="1400" height="288"></figure><p>以上になります。</p>

オブジェクト指向UIデザイン

<h1 id="h55a31958d7">サンドランドの感想</h1><hr><p>この映画は、ドラゴンボールの作者の鳥山明さん原作の漫画「サンドランド」を映画化したものです。</p><figure><img src="https://images.microcms-assets.io/assets/9839e4f1a34f45fea5ffa160d87c9f10/43f951fb45124867b3a9f08806a0e167/image.png" alt="" width="180" height="280"></figure><p>自分は漫画を読むことが好きで、ワンピースやキングダムなどの漫画もずっと読んでいます。</p><p>ですが、この漫画は読んだことがなくて、どんな物語なのか全く知りませんでした。</p><p>始まってみると、鳥山明ワールド全開で、絵のタッチや人間の特徴や悪魔のキャラクター性などが鳥山明っぽいなーと感じました。</p><p>やはりこの人の作る作品は、出てくるキャラクター1人1人に魅力があって、見ていて楽しいです。</p><p>物語の内容もすごく面白くて、大人から子供まで絶対に楽しめる作品になっていると思います！</p>

映画「サンドランド」を観てきました！

<h2 id="h8d027c8ed3"><strong>はじめに</strong></h2><p>個人開発でTailwind CSSを使っているので、特徴と使用感を書いていきたいと思います。</p><h2 id="h5bea8a7f58"><strong>Tailwind CSSとは</strong></h2><p>ChatGPTに解説してもらいました。</p><blockquote><p>Tailwind CSSは、プロのウェブ開発者向けに設計された高度なCSSフレームワークです。従来のCSSフレームワークとは異なり、予め定義されたスタイルやコンポーネントが用意されているのではなく、必要なスタイルをクラスベースで直接HTML要素に適用することで、柔軟なデザインを実現します。</p></blockquote><blockquote><p>Tailwind CSSの特徴は以下の通りです</p><p><br><strong>・ユーティリティファースト:</strong><br>Tailwind CSSは、個々のスタイルをクラスとして提供します。これにより、デザイナーと開発者が必要なスタイルを直接指定し、再利用可能なカスタムスタイルを作成できます。</p><p><br><strong>・カスタマイズ可能: </strong>Tailwind CSSは、デフォルトのスタイルセットを提供しますが、プロジェクトに合わせてカスタマイズすることができます。色、フォント、スペーシングなど、さまざまなスタイル要素を調整できます。</p><p><br><strong>・Responsiveness:</strong><br>Tailwind CSSは、レスポンシブデザインをサポートしており、異なる画面サイズに対応するためのクラスを提供します。</p><p><br><strong>・コンポーネント指向:</strong><br>Tailwind CSSは、シンプルなビルディングブロックを組み合わせてコンポーネントを構築することに焦点を当てています。これにより、再利用可能なコンポーネントを効果的に作成できます。</p><p><br><strong>・パフォーマンス:</strong><br>Tailwind CSSは、ビルドプロセス中に未使用のスタイルを自動的に削除することで、最適なパフォーマンスを提供します。この機能により、必要なスタイルのみが最終的なスタイルシートに含まれるため、ページの読み込み時間が短縮されます。<br>・Tailwind CSSは、デザインから開発までのワークフローを効率的にするためのツールとして、多くの開発者に支持されています。ただし、独自のクラスベースのアプローチと概念に慣れるまでには少し学習のカーブがあるかもしれません。</p></blockquote><p>ということです。</p><h2 id="h82e4f806e9"><strong>メリットとデメリット</strong></h2><h3 id="h914f9d708b"><strong>○メリット</strong></h3><p><strong>・クラス名を考える必要がない</strong><br>　これがかなりでかいです。<br>　画面を作っている中で、CSSを当てるためだけにクラス名を考える要素が出てきますが、Tailwind CSSではクラス名を当てていくので、その必要がなくなります。</p><p><strong>・柔軟性を持たせることができる</strong><br>　特にReactやNext.jsにはchakraUIなどのUIコンポーネントもあり、それを使えばかなり楽にUIを構築していくことができますが、要件に従って開発をしていく中で、柔軟的に仕様を決めていくことが困難な場合もあります。<br>　しかし、Tailwind CSSを使えば、柔軟性を持たせてUIを構築していくことができます。</p><p><strong>・ビルド時のサイズを小さくできる</strong><br>公式では以下のような説明がされています。</p><blockquote><p>大きなプロジェクトでも 10kB 以下の CSS ファイルにできる。 さらにファイルサイズを小さくするには cssnano などのツールで CSS を最小化し、Brotli で CSS を圧縮する。</p></blockquote><p>大規模開発では、ファイルサイズを小さくするのは手間なので、それの心配が少なくなるのはとても良いです。</p><h3 id="h0665528bfc"><strong>○デメリット</strong></h3><p><strong>・クラス名が長くなる</strong><br>　1つの要素にたくさんのクラス名をつけると、かなりクラス名が長くなってしまい、コードの可読性が悪くなってしまうことがあります。</p><h2 id="h73762acf48"><strong>Tailwind CSSを使用する手順</strong></h2><p>以下がインストールするコマンドになります。</p><pre><code>npm install -D tailwindcss
npx tailwindcss init
</code></pre><p>Next.jsでは、プロジェクト作成時に、Tailwind CSSを組み込むと、globals.cssファイルに以下ようなコードがあります。</p><pre><code>@tailwind base;
@tailwind components;
@tailwind utilities;
</code></pre><p>これは、Tailwind CSSがカスタムスタイルを当てているコードです。<br>例えば、Tailwind CSSが使われていると、h1〜h6タグのスタイルが当たっていません。<br>以下が、その一部になります。</p><pre><code>blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}
</code></pre><p>これを見ると、この要素にはmarginが取り除かれていることがわかります。<br>以下に他のデフォルトスタイルも記載されています。</p><p></p><p>もしも、デフォルトのスタイルを指定したい場合には、以下のようにコードを書けば設定することができます。</p><p>global.css</p><pre><code>@layer base {
  h1 {
    font-size: 2em;
    font-weight: bold;
    margin: 10px 0;
  }
  h2 {
    font-size: 1.5em;
    font-weight: bold;
    margin: 12px 0;
  }
  h3 {
    font-size: 1.17em;
    font-weight: bold;
    margin: 12px 0;
  }
  h4 {
    font-size: 1em;
    font-weight: bold;
    margin: 12px 0;
  }
  h5 {
    font-size: 0.83em;
    font-weight: bold;
    margin: 12px 0;
  }
  h6 {
    font-size: 0.67em;
    font-weight: bold;
    margin: 12px 0;
  }
}
</code></pre><p>こうすることで、全ての要素にスタイルが適用させることができます。</p><h2 id="he45a6cdd89"><strong>参考、チートシート等</strong></h2><p>以下に参考サイトと、チートシートサイトを載せておきます。</p><p><a href="https://tailwindcss.com/docs/installation">https://tailwindcss.com/docs/installation</a></p><p>チートシート2つ↓</p><p><a href="https://segakuin.com/css/tailwind/">https://segakuin.com/css/tailwind/</a></p><p><a href="https://nerdcave.com/tailwind-cheat-sheet">https://nerdcave.com/tailwind-cheat-sheet</a></p><p></p><h2 id="hcf83e1357e"><a href="https://qiita.com/hukuryo/items/da135e7de3e496d94803#%E6%9C%80%E5%BE%8C%E3%81%AB"><strong><br></strong></a></h2>

Tailwind CSSの特徴について

<h1 id="h8d027c8ed3">はじめに</h1><p>Next.jsのプロジェクトの作成方法を書いていきます。</p><p>以下がドキュメントになります。</p><p><a href="https://nextjs.org/docs/getting-started/installation">https://nextjs.org/docs/getting-started/installation</a></p><h3 id="hd8d793506b">インストール</h3><p>プロジェクトを作成するディレクトリに移動して、</p><p>以下のコマンドでプロジェクトを作成します。</p><p></p><pre><code>npx create-next-app@latest</code></pre><p></p><p>次にプロジェクトの詳細設定をしていきます。</p><p>これは、個人の自由で設定をすることができます。</p><p></p><pre><code>What is your project named? my-app 
Would you like to use TypeScript? No / Yes　　
Would you like to use ESLint? No / Yes 
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes // srcディレクトリを使うかどうかを選択する。(個人的には使わなくても大丈夫かなと思う)
Would you like to use App Router? (recommended) No / Yes 
Would you like to customize the default import alias? No / Yes 
What import alias would you like configured? @/*</code></pre><p></p><p>そうすると、移動したディレクトにNext.jsのプロジェクトが作成されます。</p><p>以上になります。</p>

Hukuryo-no-Blog

Hukuryo-no-Blog

読んだ本

リーダブルコード

オブジェクト指向UIデザイン

記事を検索

Hukuryo