<h1 id="h8d027c8ed3">はじめに</h1><p>以下のYoutubeで解説されていた内容が勉強になったのでまとめた。</p><p><a href="https://www.youtube.com/watch?v=LolugLiLhHs">https://www.youtube.com/watch?v=LolugLiLhHs</a></p><h1 id="h598587f39e">ポイント</h1><p>・Propsで渡す情報に気を付ける</p><p>・SeverActionsに注意する</p><p>・認証チェックをする場所について</p><p></p><h2 id="h704df3326d">Propsで渡す情報に気を付ける</h2><p>Next.jsでは、サーバーコンポーネントと、クライアントコンポーネントがある。</p><p>例として、サーバーコンポーネント内で、ユーザー情報を取得して、クライアントコンポーネントにその値を渡してしまった場合、本来見られてはいけないユーザー情報がブラウザで見ることが可能になるので、とても危険な状態となる。</p><p>対策としては、「クライアントコンポーネントに余計な情報は渡さない。」ということ。</p><p>具体的な対策としては、以下の2点が挙げられる。</p><p>・SQLのSELECTのフィールドを必要最低限にする。</p><p>・DTOを使う。DTOについては以下のサイトに詳細が記載されている。</p><p>　<a href="https://qiita.com/RINYU_DRVO/items/112957b84ec8c2a4711a">https://qiita.com/RINYU_DRVO/items/112957b84ec8c2a4711a</a></p><h2 id="h3bad1c6228">SeverActionsに注意する</h2><p>具体的には、ServerActionsに渡す引数に注意する。ServerActionsは、ブラウザからAPIをfetchしているに過ぎないので、引数にユーザー情報(ユーザーID)などを渡して、それを元に処理を行う関数を実装してしまうと、クライアントからそのAPIに対して、自分以外のユーザーIDを渡して、ServerActions内の関数を呼べることができてしまうため、とても危険な実装といえます。</p><p>なので、ServerActionsを利用する場合は、権限やセッションのチェックなどは外部で行わず、関数内でチェックをするようにするのが良い。</p><h2 id="h9999f310eb">認証チェックをする場所について</h2><p>ログインなどの機能があった場合に、認証、認可のチェックをどこで行うべきか？</p><p>Middleware、layout component、page componentなどの選択肢があるが、基本的には、各page componentで行うのが、一番確実な方法となる。</p><p>理由としては、以下が挙げられる。</p><ol><li>Middlewareファイルでは、Edge Runtimeという、Web標準の機能でしか動かないようになっているため、Node.jsの全ての機能が使えず、SQLを実行することができない。</li><li>layout componentは、page componentの後にレンダリングされるため、layout componentで認証や認可のチェックをしていない場合、画面上は動くかもしれないが、一時的にでもチェックを通過しないと見られないデータが、クライアントで取得されてしまうので、とても危険である。<p>また、layout componentは、ページ遷移しても再レンダリングされないため、画面遷移した時に、チェックがされないため、それも危険な要因の一つとなる。</p></li></ol><p>以上の理由から、認証や認可のチェックは、各page componentで行うことが確実となる。</p><p>また、「updateUser」のような関数があった場合は、その情報操作をする関数内でチェックを行うのが良い。</p><p></p><h1 id="ha214098e44">まとめ</h1><p>Next.jsは、とても便利なフレームワークだが、使い方や機能をしっかり理解していないと、とても危険なアプリケーションを作成することができてしまうため、改めてしっかりキャッチアップする必要があるなと思った。</p>

Next.jsで実装する場合に、セキュリティ面で気を付けること

<h1 id="hdd94c2eb35"><strong>Viteとは</strong></h1><p>Vite (フランス語で&quot;速い&quot;という意味) は、新しいフロントエンドビルドツールです。<br>主な目的は、開発サーバーの高速な起動とモジュールのホットリロードを実現することです。</p><h1 id="heae916c37d"><strong>Viteを使うメリット</strong></h1><ul><li>開発サーバーの起動が非常に高速</li><li>モジュールのホットリロードが即時に行われる</li><li>本番ビルドも高速</li><li>Webpackに比べて設定が簡単</li><li>プリバンドルされたデータを利用し、高速なHMRを実現</li><li>ロールアップをベースとしているため、最新のブラウザとNode.jsの機能を利用可能</li></ul><h1 id="h5a11b3ac24"><strong>Webpackとの比較</strong></h1><p>Webpackは長年にわたり主流のビルドツールでしたが、大規模なプロジェクトでは起動が遅く、ホットリロードの応答が遅くなる傾向がありました。また、設定が複雑になりがちでした。</p><p>一方、Viteは開発サーバーの起動が非常に高速で、モジュールのホットリロードもスムーズに行われます。設定も比較的シンプルです。本番ビルドの速度も高速化されています。</p><h1 id="h15eb2b3cc7"><strong>インストールして実行してみよう</strong></h1><p>まずはインストール</p><p>npm</p><pre><code>npm create vite@latest
</code></pre><p>yarn</p><pre><code>yarn create vite
</code></pre><p>インストーラーの質問に答えると、新しいViteプロジェクトが作成されます。</p><h1 id="h69c0447bf3"><strong>開発サーバーを起動</strong></h1><p>プロジェクトディレクトリに移動し、次のコマンドを実行します:</p><p>npm</p><pre><code>npm run dev
</code></pre><p>yarn</p><pre><code>yarn dev
</code></pre><p>ローカルサーバーが起動し、アプリケーションが自動的にブラウザで開きます。</p><h1 id="h3de35099b3"><strong>参考</strong></h1><p></p><h1 id="hcf83e1357e"><a href="https://qiita.com/hukuryo/items/3e4cc8b3588d39df84ea#%E6%9C%80%E5%BE%8C%E3%81%AB"><strong><br></strong></a></h1>

Viteについて

<h1 style="text-align: start" id="h8d027c8ed3"><strong>はじめに</strong></h1><p style="text-align: start">副業でAWS Glueについて触れる機会があったので、Glueとはどんなものかまとめていきます。</p><p style="text-align: start"></p><h1 style="text-align: start" id="h4116a5394d"><strong>Glueとは</strong></h1><p style="text-align: start">AWS Glue（Amazon Web Services Glue）は、<strong>Amazonが提供するフルマネージドのETL（Extract, Transform, Load）サービス</strong>です。ETLプロセスを簡単に自動化するために設計されており、データの抽出、変換、ロードを効率的に行うことができます。<br>Glueを日本語にすると、「のり」(食べる海苔じゃないよ)という意味になり、<strong>データのさまざまなソースをつなぎ合わせる役割を果たすサービスの特性を表しています。</strong></p><h2 style="text-align: start" id="hdadc0eaacf"><strong>特徴</strong></h2><h3 style="text-align: start" id="h8916a1e4ee"><strong>フルマネージド:</strong></h3><p style="text-align: start">インフラストラクチャの管理が不要で、セットアップやメンテナンスの手間が省けます。</p><h3 style="text-align: start" id="h97baca6eda"><strong>サーバーレス:</strong></h3><p style="text-align: start">インフラストラクチャをプロビジョニングすることなく、ETLジョブを実行できます。これにより、スケーラビリティとコスト効率が向上します。</p><h3 style="text-align: start" id="hd142b4a04c"><strong>自動スキーマ検出:</strong></h3><p style="text-align: start">AWS Glueはデータソースのスキーマを自動的に検出し、データカタログを生成します。このカタログを使用して、データのクエリや変換が容易になります。</p><h3 style="text-align: start" id="h1eec4d6df8"><strong>多様なデータソースとの統合:</strong></h3><p style="text-align: start">S3、RDS、Redshift、JDBC接続など、さまざまなデータソースからデータを取得・変換・ロードすることができます。</p><h3 style="text-align: start" id="he3a5d543c3"><strong>開発者フレンドリー:</strong></h3><p style="text-align: start">Apache Sparkを基盤としたETLエンジンを使用しており、PythonやScalaでジョブを記述できます。これにより、柔軟かつ強力なデータ処理が可能です。</p><h2 style="text-align: start" id="h745edbd989"><strong>主なコンポーネント</strong></h2><h3 style="text-align: start" id="h03929133b1"><strong>AWS Glue Data Catalog:</strong></h3><p style="text-align: start">データのメタデータを管理する中央リポジトリ。データの検索、クエリ、およびアクセス管理に使用されます。</p><h3 style="text-align: start" id="h69e373259c"><strong>Crawler:</strong></h3><p style="text-align: start">データソースをスキャンし、自動的にスキーマを検出してData Catalogに登録します。</p><h3 style="text-align: start" id="ha2734abcdc"><strong>ETLジョブ:</strong></h3><p style="text-align: start">データの抽出、変換、ロードを行うプロセス。PythonまたはScalaで記述され、AWS Glue上で実行されます。</p><h3 style="text-align: start" id="h0c3710f8ba"><strong>トリガー:</strong></h3><p style="text-align: start">スケジュールやイベントに基づいてETLジョブを自動実行するための仕組み。<br>使い方</p><h3 style="text-align: start" id="h7890c3a755"><strong>データソースの登録:</strong></h3><p style="text-align: start">最初に、データソースをAWS Glueに登録します。これには、データが格納されているS3バケットやデータベースが含まれます。</p><h3 style="text-align: start" id="hebbbd0b1a0"><strong>Crawlerの実行:</strong></h3><p style="text-align: start">Crawlerを設定して実行し、データソースのスキーマを自動的に検出してData Catalogに登録します。</p><h3 style="text-align: start" id="he3ebe3e769"><strong>ETLジョブの作成:</strong></h3><p style="text-align: start">AWS Glue Studioを使用して、GUIベースでETLジョブを作成するか、PythonまたはScalaのコードを記述してETLジョブを定義します。</p><h3 style="text-align: start" id="heaf3b98993"><strong>ジョブの実行:</strong></h3><p style="text-align: start">ジョブを実行し、データの抽出、変換、ロードを行います。ジョブのステータスやログはAWS Glueコンソールで確認できます。</p><h1 style="text-align: start" id="ha214098e44"><strong>まとめ</strong></h1><p style="text-align: start">AWS Glueは、データの統合と変換を簡単かつ効率的に行うためのツールです。フルマネージドでサーバーレスな特性を持ち、自動スキーマ検出や多様なデータソースとの統合など、多くの機能が備わっています。<br>これにより、インフラストラクチャの管理に煩わされることなく、データの処理と分析に集中することができます。</p>

AWS Glueとは

<p><a href="https://www.amazon.co.jp/%E4%B8%96%E7%95%8C%E4%B8%80%E6%B5%81%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%AE%E6%80%9D%E8%80%83%E6%B3%95-%E7%89%9B%E5%B0%BE-%E5%89%9B/dp/4163917683/ref=sr_1_1?adgrpid=158312900361&amp;dib=eyJ2IjoiMSJ9.MuW5S2jPs5Wy4_u5AL5wZnndTW6w7KRzo8mvgiA6mGJ2tGjHi-bRZFY-IOqLC1F-FEodBBGfpB9rB8xmAE3KvxSyjDGxig05ZJpGqrOhtMY3TZLm6yKwumqeCydR-Cm4gNkMSnZiZkoZoWzI8ZMPVg5YucQe9NnnyPl3WEluwRSGM_1vAw79XRPGS_A3OCveUWEs8hwXnC7yEwgIujMsYq2rfx7Z7Yh6HyrM1rxd8EGLP2rIWlre4o3C7HPvTBbDnQUnAPYkHW_U650cDnTgJExpSRPe-UnkT8on-TZWXDY.VeZTHFGRpruM8XecqMQ3QjOR9kAgO9rvkbPvbA0nFQU&amp;dib_tag=se&amp;gad_source=1&amp;hvadid=678960091422&amp;hvdev=c&amp;hvlocphy=1009255&amp;hvnetw=g&amp;hvqmt=e&amp;hvrand=2727638392506175022&amp;hvtargid=kwd-2260433045664&amp;hydadcr=1797_13657020&amp;jp-ad-ap=0&amp;keywords=%E4%B8%96%E7%95%8C%E4%B8%80%E6%B5%81%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2+%E3%81%AE+%E6%80%9D%E8%80%83%E6%B3%95&amp;qid=1724466564&amp;sr=8-1">世界一流エンジニアの思考法</a>という書籍でエンジニアのコミュニケーションの極意というセクションがあり、勉強になったので、重要だと感じた箇所を、メモ程度に書いていきます。</p><figure><img src="https://images.microcms-assets.io/assets/9839e4f1a34f45fea5ffa160d87c9f10/97b38ddf069540e986734c4a65667e56/image.png" alt="" width="221" height="320"></figure><p></p><ul><li><strong>情報量を減らす大切さ</strong><p>今まで、相手にわからないことなどを質問する際は、全ての情報を相手に伝えてしまっていた。</p><p>しかし、この本では、情報量を多くしてしまうと、それでは相手の脳に負担をかけてしまい、かえってうまく伝わらないことがあるので、大まかに今の状況を伝えて(このエラーが起きているけど、何か知ってる？くらいの感じ)、細かいことは聞かれたらでいい。ということでした。確かにこれなら、相手に負担をかけない形の質問になるので参考にしていこうと思いました。</p></li><li><strong>相手が求めている情報への感度を研ぎ澄ます</strong><p>自分が実装した内容も、しばらく経つと、どんな実装したかなどは、忘れがちになってしまう。</p><p>現場でも実装した内容などをドキュメントに整理したりすることなどがあるが、この時も、ソースを読み直したり、Issueなどを確認し直したりすることなどがある。</p><p>そんな時のために、実装したことはもちろんのこと、試したこと、学んだことを、他のメンバーからも共有できる箇所にまとめておくことで、日頃から相手に伝えることを前提としたメモを取る癖がつくので、工数削減に繋がるということを学びました。</p><p>実際に相手に伝わるようにメモを書くことは、アウトプットすることで、頭への定着度合いも全然違うと思ったので、実践していこうと思います。</p></li><li><strong>コードを読み物として扱う</strong><p>「私は、普段プログラムを書くとき、コードを書く意識でいた」と筆者は語っているが、私も同様の感覚でした。</p><p>しかし、その意識では、他の人がどうしてそのようなコードにしたかであったりなどの情報が伝わりづらくなるということでした。そこで、普段から「自分が書いたコードを読んだ人がどう感じるか」ということを最優先にしてコードを書くことが大切だとあった。私もこちらの意識は普段から足りていない部分なので、意識していこうと思いました。</p></li><li><strong>クイックコールのすすめ</strong><p>日本では、わからないことがあれば、まず自分で考えてから、人に聞けという風潮が強いが、マイクロソフトはそんなことはなく、むしろわからないことがあれば、すぐに聞くような環境であるらしい。</p><p>私は、普段の業務では、15分考えてわからなければ、質問するようにしていたが、そうではなく、自分が担当している業務に対してのメンタルモデルや、コンテキストがなければ、それがある人にすぐ聞いたほうが、仕事の効率も上がるし、ストレスもなくなるという内容でした。</p><p>その時に、クイックコールを使用すれば、テキストよりも細かく内容を伝えられるし、その場で質問が浮かんでも、すぐに聞くことができるので、とても良いとあったので、自分も参考にして、クイックコールを上手く使えるように意識していこうと思います。</p></li></ul><p>このセクションについては、以上になります。</p><p>他のセクションで学んだことも別の記事で書いていこうと思います。</p>

エンジニアのコミュニケーションの極意

<h1 style="text-align: start" id="h8d027c8ed3"><strong>はじめに</strong></h1><p style="text-align: start">Next.js(App Router)でメタデータを生成する方法について書いていきます。</p><p style="text-align: start"></p><h1 style="text-align: start" id="h3de35099b3"><strong>参考</strong></h1><p style="text-align: start"></p><h1 style="text-align: start" id="ha525aca34b"><strong>静的メタデータの設定方法</strong></h1><p style="text-align: start"></p><p style="text-align: start">静的メタデータを設定するには、以下のように書きます。<br>「metadata」関数をエクスポートする形で定義し、その中で、静的なメタデータを定義できます。</p><pre><code>import { Metadata } from &quot;next&quot;;

export const metadata: Metadata = {
  title: &quot;タイトル&quot;,
  description: &quot;説明&quot;,
};
</code></pre><h1 style="text-align: start" id="h2224ce8b0f"><strong>動的メタデータの設定方法</strong></h1><p style="text-align: start"></p><p style="text-align: start">例として、ブログの詳細ページなどで、ブログのタイトルをメタデータに設定したい場合などがあります。<br>その時は、以下のようにすると、動的にメタデータを設定できます。</p><pre><code>import { Metadata } from &quot;next&quot;;

export const generateMetadata = async ({ params }: { params: { blogId: string } }): Promise&lt;Metadata&gt; =&gt; {
　// ブログの詳細データを取得する関数
  const blogData: ArticleContent = await blodDetailData(params.blogId);

  return {
    title: blogData.title,
    description: blogData.title
  };
}
</code></pre><p style="text-align: start">このように、「generateMetadata」関数をエクスポートする形で定義、その中でデータの取得、メタデータの設定を行うことができます。</p><h1 style="text-align: start" id="hf19074e66e"><strong>Faviconを設定</strong></h1><p style="text-align: start"></p><p style="text-align: start">最後に、Faviconを設定する方法です。<br>いくつか方法があるみたいですが、今回は「icon.tsx」を設置する方法について書いていきます。<br>まず、ルートディレクトリにある「page.tsx」と同じ階層に「icon.tsx」を設定し、以下のようにソースを書いていきます。</p><h3 style="text-align: start" id="h48c056f1ea"><strong>〇設定する項目</strong></h3><ul><li><strong>runtime</strong><br>ランタイム(実行中にコードで使用できるライブラリ、API、および一般的な機能)を設定</li><li><strong>size</strong><br>画像のサイズを設定</li><li><strong>contentType</strong><br>画像の形式を設定</li><li><strong>Iconメソッド</strong><br>ICONを生成するメソッド</li></ul><pre><code>import { ImageResponse } from &apos;next/og&apos;
 
// Route segment config
export const runtime = &apos;edge&apos;
 
// Image metadata
export const size = {
  width: 32,
  height: 32,
}
export const contentType = &apos;image/png&apos;
 
// Image generation
export default function Icon() {
  return new ImageResponse(
    (
      // ImageResponse JSX element
      &lt;div
        style={{
          fontSize: 24,
          background: &apos;black&apos;,
          width: &apos;100%&apos;,
          height: &apos;100%&apos;,
          display: &apos;flex&apos;,
          alignItems: &apos;center&apos;,
          justifyContent: &apos;center&apos;,
          color: &apos;white&apos;,
        }}
      &gt;
        A
      &lt;/div&gt;
    ),
    // ImageResponse options
    {
      // For convenience, we can re-use the exported icons size metadata
      // config to also set the ImageResponse&apos;s width and height.
      ...size,
    }
  )
}
</code></pre><p style="text-align: start">以下の記事に、主な実装例が書いてあります。</p><p style="text-align: start"></p>

[Next.js App Router]メタデータの設定をしよう

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

Hukuryo-no-Blog