はてなブックマーク

オブジェクト型 とは？ オブジェクト型は、TypeScript で最も重要な要素の一つで、複数の値を一つのオブジェクトとしてまとめるための構造体です。これにより、値や関数などを構造化して管理することが可能となります。 たとえば、ユーザー情報を管理する場合を考えてみましょう。ユーザーの名前と年齢をオブジェクト型で表現することができます。 このように、TypeScript のオブジェクト型を使うと、ユーザー情報を一つのオブジェクトとして管理し、型安全にコードを記述することが可能となります。 オブジェクトリテラルとオブジェクト型は別物 紛らわしいですが、オブジェクトリテラルとオブジェクト型は別物です。 オブジェクトリテラルは JavaScript（および TypeScript）における値の表現形式の一つで、キーと値の組を {}（波括弧）で囲んで定義します。例えば、以下のようになります。

TypeScript とは？ 一言で言うと TypeScript は、JavaScript に静的な型システムを追加したプログラミング言語です。型チェックを行うことができます。TypeScript の静的型付け以外の部分は JavaScript と同じです。 型注釈（Type Annotation） TypeScript では、変数の宣言時に「型注釈」と呼ばれる型情報を使用して、その変数がどのような型の値を持つべきかを指定することができます。型注釈はコロン（:）に続いて型名を書くことで行います。

REST API とは？ あなたが小さな冒険者で、何か情報を探していると想像してみてください。例えば、あなたが図書館に本を探しに行ったとしましょう。そこで図書館員さんに「この本がどこにあるか教えてください」と尋ねたら、図書館員さんが教えてくれるかと思います。 これが REST API の一番基本的な考え方です。あなたが図書館員さん（REST API）に問い合わせ（リクエスト）をし、図書館員さんが答え（レスポンス）を返してくれます。 同じ考え方で、REST API はウェブ上で情報を取得したり、情報を変更したり、新しい情報を作成したり、情報を削除したりするための一連のルールや手段です。これを用いることで、ウェブページやアプリケーションは情報を交換できます。以下は、REST API を用いて情報を取得する基本的なコード例です。 // ファイル名: pages/api/books.ts impo

TL;DR この記事では、Tailwind Just-in-Time（JIT）モードの実装について説明します。JIT モードを使用すると、[] ブラケット内に任意の値を直接指定できます。このモードにより、スタイルの柔軟性が増し、ページの読み込み速度も向上します。 Tailwind JIT モードは、実際にプロジェクトで使用されるクラスだけを生成するため、最終的な CSS ファイルサイズが小さくなります。 後述しますが、アコーディオンメニューも JavaScript を使わずに簡単に実装できます。 開発環境 バージョン

<h1>見出し1</h1> <h2>見出し2</h2> <h3>見出し3</h3> <ul> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> </ul> <b>太字</b> <i>斜体</i> Next.js では、サーバーサイドで Markdown を HTML に変換し、それをブラウザに送信して表示することができます。 Next.js で、Markdown を HTML に変換 dataディレクトリにある Markdown ファイルを HTML に変換するには、fsとpathモジュールを使ってファイルを読み込み、その内容をmarkedを使って HTML に変換します。以下にその方法を示します。 まず、Markdown ファイルを読み込み HTML に変換するユーティリティ関数を作ります。 utils/markdownToHtml.ts import

テンプレートリテラルとは バッククオートで囲う文字リテラルです。テンプレートリテラルは、JavaScript の表現法の 1 つで、文字列の中に変数や式を埋め込むことができます。従来の文字列表現では + や連結関数を用いて変数と文字列をつなげる必要がありましたが、テンプレートリテラルを用いると、より直感的で読みやすい形で文字列と変数を結合することが可能になります。 変数や式は ${} の中に記述します。以下に基本的なテンプレートリテラルの使用例を示します。 const name = 'John Doe' const age = 25 // テンプレートリテラルを使用して文字列と変数を結合 const message = `Hello, ${name}! You are ${age} years old.` console.log(message) // "Hello, John Doe!

エラー内容 開発ツールで見ると、次のようなエラーが出ることがあります。一体このエラーはどういう意味なのでしょうか。 「「A cross-origin resource sharing (CORS) request was blocked because of invalid or missing response headers of the request or the associated preflight request . To fix this issue, ensure the response to the CORS request and/or the associated preflight request are not missing headers and use valid header values. Note that if an opaque respon

型引数とは？ 型引数とは、関数やクラスで使用される型を動的に指定できる変数です。これにより、再利用可能なコードを書く際に、柔軟に型を決定できます。 // ジェネリック型 const identity = <T>(value: T): T => { return value } // <number>や、<string>が型引数 const numberValue = identity<number>(42) const stringValue = identity<string>('hello') この例では、identity 関数に型引数 <T> を指定しています。この型引数は関数を呼び出す際に具体的な型として指定することができます。 ジェネリック型と型引数の違い ジェネリック型と型引数は、TypeScript でよく用いられる考え方ですが、それぞれの役割と関係について説明しますね。 ジ

TL;DR 今回は TypeScript の lookup 型について一緒に学びましょう。一言でいうと、lookup 型は既存の型から特定のプロパティの型を「引き出す」ための型です。 以下が今回の開発環境です。 開発環境 バージョン

TL;DR Open Graph プロトコルと @vercel/og ライブラリを使用して、ソーシャルメディア画像生成の最適化方法を解説します。動的な Open Graph（OG）画像を生成するために、Vercel の @vercel/og ライブラリを使用して、Vercel Edge Functions を用いてソーシャルカード画像を計算・生成することができます。 つまり、分かりやすくいうと、CSS とテキストを使って画像を自動生成できる ということです。今までのようにアイキャッチ画像や OGP 画像を記事ごとに作る必要が無くなるので、とても便利です。 利点 画像生成に必要なコード量が少ないため、Edge Functions はほぼ瞬時に開始することができます。これにより、画像生成プロセスが迅速に行われ、Open Graph Debugger のようなツールによって認識されます。 HTM

仮想 DOM とは？ まずはじめに、React が提供している仮想 DOM という考え方について理解しましょう。 みなさんがお絵かきをするときに、ちょっと難しい絵を描きたいと思ったことはありますか？例えば、大きな城や美しい風景などです。そのような複雑な絵を一発で完璧に描くのは難しいですよね。 そんなとき、どうしたらいいでしょう？まず、下書きをすると思います。下書きでは、全体の形をざっくりと描いたり、どこに何を描くかを決めたりします。そして、その下書きを見ながら、本番の絵を少しずつ描いていくと、難しい絵でも上手に描くことができます。 仮想 DOM（Virtual DOM）は、その下書きのようなものです。コンピュータがウェブサイトを描くときに、まず仮想 DOM という下書きを作ります。そして、その下書きを見ながら本当のウェブサイト（本番の絵）を描きます。これにより、効率よく美しいウェブサイトを

useEffect は「ある状況がきたら、あることをする」 useEffect は、React（ウェブサイトを作るためのツール）の一部で、「関数（やりたいことのまとまり）」を特定のタイミングで動かすためのものです。これが何を意味しているか説明するために、実際の日常生活から例を出してみましょう。 例えば、学校から帰った後に宿題をする、という日常的な行動がありますよね。これを useEffect で表現すると、学校から帰ることが「特定のタイミング」で、宿題をすることが「やりたいことのまとまり（関数）」になります。つまり、学校から帰ったら宿題をする、という動きを useEffect を使ってプログラムすることができるのです。 また、useEffect にはもう一つ特徴があります。それが「クリーンアップ」機能です。これは、例えば遊び終わった後に片付けをする、という行動を表しています。遊び終わったら

Rest パラメータ（残余引数）とは？ Rest パラメータは、JavaScript と TypeScript の関数で、引数の数が不確定な場合に使用します。Rest パラメータを使うと、複数の引数を配列としてまとめることができます。 Rest パラメータとは、関数に任意の数の引数を渡すことを可能にする JavaScript と TypeScript の特性を指します。 この特性は "残余引数" とも呼ばれ、3 つのドット（...）を引数名の前に付けることで利用できます。これにより、関数は可変数の引数を配列として受け取ることができます。

スクロール時のイベント実行 スクロール時のイベント実行とは、ユーザーがウェブページをスクロールするときに特定の処理を実行する考え方のことを指します。スクロールに反応して何らかのアクションを実行することで、ユーザー体験を向上させたり、ユーザーに情報をより効率的に提供したりすることができます。 具体的な例としては、次のようなシナリオを考えてみてください。 ユーザーがページを下にスクロールするとナビゲーションバーが消え、上にスクロールすると再び表示される。 ユーザーがページを下にスクロールすると「ページトップに戻る」ボタンが表示される。 これらの挙動は、ウェブサイトのインターフェースをユーザーが期待するように動作させるために重要です。それでは、基本的なスクロールイベントリスナーを設定する方法を見てみましょう。 // components/ScrollListener.tsx // useEffe

オプショナルチェーンとは？ JavaScript と TypeScript の世界では、一部のオブジェクトが undefined または null になる可能性があります。これは頻繁に発生する場面で、例えば API からのレスポンスが想定した形式ではなかったり、ユーザー入力が想定外だったりすると起こり得ます。そのため、開発者は常に null チェックや undefined チェックを行わなければなりません。 しかし、そのようなチェックが多くなると、コードは読みにくく、保守しにくくなります。ここでオプショナルチェーンの出番です。オプショナルチェーンを使えば、安全にプロパティにアクセスし、その値が存在しない場合はただちに undefined を返すことができます。 let user = { name: 'Taro', address: { zip: '123-4567', prefecture

「ページとレイアウト」 とは？ 最初に「ページ」と「レイアウト」の概念について説明します。 「ページ」は Next.js アプリケーション内の個々の画面を表現します。これは、ウェブサイトの HTML ファイルに相当します。Next.js では、pages ディレクトリ内の各 React コンポーネントが一つのページとして扱われます。たとえば、pages/index.tsx はアプリケーションのホームページに対応します。また、pages/about.tsx は /about パスのページを表します。 一方、「レイアウト」はページの共通の構造を表現します。これはヘッダーやフッターなど、複数のページで共有するコンポーネントを含むことができます。レイアウトは、ページの一部として直接実装することもできますが、より再利用性を高めるためには、レイアウトを個別のコンポーネントとして定義し、ページでインポー

replace() メソッドとは？ replace() メソッドは、文字列内で特定のパターンまたは値を見つけて新しい値に置き換える際に使用される JavaScript のメソッドです。特定のパターンは、文字列または正規表現で指定できます。また、新しい値は、文字列または関数で指定できます。この方法は、非常に強力で、さまざまな文字列操作に活用できます。 最初にマッチしたもののみを置換する 基本的な使用例を見てみましょう。 const str = 'こんにちは、世界' const newStr = str.replace('世界', 'みなさん') console.log(newStr) // "こんにちは、みなさん"

モーダルウィンドウの実装 それでは、早速モーダルウィンドウを実装してみましょう。まずは、全体のソースコードを見ていただきます。ここでは ModalComponent とその呼び出し方法を示します。 ファイル名：ModalComponent.tsx import { useState } from 'react' import { css } from '@emotion/react' type ModalProps = { buttonLabel: string } const ModalComponent = ({ buttonLabel }: ModalProps) => { const [isOpen, setIsOpen] = useState(false) const toggleModal = () => { setIsOpen(!isOpen) } return ( <> <

React のライフサイクルとは？ React のライフサイクルとは、React コンポーネントが生成され、更新され、最終的に破棄されるまでの流れを表す考え方です。この流れを理解することで、React コンポーネントがどのように動作するのか、いつどのような処理を書くべきなのかがわかります。 React のライフサイクルは大きく分けて以下の 3 つのフェーズに分類されます。 マウントフェーズ（Mounting）：コンポーネントが DOM に挿入されるフェーズ 更新フェーズ（Updating）：コンポーネントが再レンダリングされるフェーズ アンマウントフェーズ（Unmounting）：コンポーネントが DOM から削除されるフェーズ それぞれのフェーズで特定のライフサイクルメソッドが呼び出されます。以下に基本的なソースコードを示します。 type Props = { message: stri

Tailwind CSS とは？ Tailwind CSS は、スタイリングを効率的に行える CSS フレームワークです。HTML タグ内に、規定の短いクラスを追加するだけで、多くのスタイルを適用できます。クラス名は直感的なので、CSS を書いたことがある方なら、すぐに使い方を覚えられます。

TL;DR フロントエンドエンジニアの方々にとって、npm コマンドは日常的に使用されるツールだと思います。 Next.js を用いたプロジェクトでは、npm コマンドを活用して開発作業を効率化する場面が多く、修正やバージョンアップにも役立ちます。この記事では、Next.js プロジェクトで頻繁に使われる npm コマンドを一覧で紹介し、各コマンドがどのような状況で活躍するのか、使いどころを解説します。 予備知識 npm コマンドを扱う上での予備知識を簡単に解説します。 npm について npm（Node Package Manager）は、Node.js のパッケージマネージャーで、JavaScript のコードやライブラリを管理するためのツールです。npm は、公式の npm レジストリからパッケージをダウンロードしたり、自分自身で作成したパッケージを公開したりすることができます。これ

Next.js のメタデータの最適化について Next.js 13.4 の App Router において 便利な Metadata API が使えるようになりました。これを使うことで、アプリケーションのメタデータ（例えば、HTML の head 要素内の meta タグや link タグ）を簡単に定義することができるんですね。SEO（検索エンジン最適化）が向上します。Pages Router に比べると、シンプルに記述できるようになりました。 メタデータをアプリケーションに追加する方法は主に 2 つあります。 設定ベースのメタデータ layout.js ファイルや page.js ファイルで静的なメタデータオブジェクトをエクスポートするか、動的な generateMetadata 関数をエクスポートします。 ファイルベースのメタデータ ルートセグメントに静的または動的に生成された特別なフ

Front-end Framework Svelte Svelte は、フロントエンドフレームワークですが、他のフレームワークとは異なり、ビルド時にコンポーネントを効率的な命令セットにコンパイルします。これによって、ランタイムのパフォーマンスが大幅に向上します。 // Svelteコンポーネントの例 <script lang="ts"> let count = 0; function handleClick() { count += 1; } </script> <button on:click={handleClick}> Clicked {count} {count === 1 ? 'time' : 'times'} </button> Svelte WebIDE AI サポート付きのマルチプラットフォーム向け WebIDE。ウェイトリストに登録する必要があります。Google Clo

Fetch API の基礎 Fetch API とは、JavaScript の標準的な API で、非同期的にリソースを取得するためのものです。多くの Web API やデータベースと通信するための基本的な方法ですね。Promise をベースに動作していて、非同期操作を管理するためのインターフェースを提供します。 fetch() fetch()をわかりやすく解説すると、私たちがパソコンやスマホでウェブサイトを見るときに、そのウェブサイトの情報を取ってくるためのツールのようなものです。 例えば、あなたが遊んでいるゲームアプリがあったとしましょう。そのゲームが進行するたびに、スコアやランキングなどの情報を保存しておく場所が必要ですよね。この情報は、ゲームを作った人たちが管理しているコンピュータ（これをサーバーと呼びます）に保存されます。 さて、あなたがゲームの中で新しいハイスコアを出したとしま

Fetch API の基礎 Fetch API とは、JavaScript の標準的な API で、非同期的にリソースを取得するためのものです。多くの Web API やデータベースと通信するための基本的な方法ですね。Promise をベースに動作していて、非同期操作を管理するためのインターフェースを提供します。 fetch() fetch()をわかりやすく解説すると、私たちがパソコンやスマホでウェブサイトを見るときに、そのウェブサイトの情報を取ってくるためのツールのようなものです。 例えば、あなたが遊んでいるゲームアプリがあったとしましょう。そのゲームが進行するたびに、スコアやランキングなどの情報を保存しておく場所が必要ですよね。この情報は、ゲームを作った人たちが管理しているコンピュータ（これをサーバーと呼びます）に保存されます。 さて、あなたがゲームの中で新しいハイスコアを出したとしま

e.target.value とは？ e.target.value は、イベントが起きた要素の value 属性の値を取得することができます。 e はイベントを表し、target はイベントが発生した要素（ここでは入力要素）を指し、value はその要素の現在の値を指します。イベントオブジェクトの名前は任意なので、e 以外にも event、ev など、何でもよいです。 なんだか難しいですよね？e.target.value を理解するために、まず HTML のフォームと JavaScript の世界を少しご紹介します。 みんながよく見かけるウェブサイトには、様々な情報を入力するためのフォームがあります。例えば、ユーザー名を入力したり、パスワードを設定したり、お問い合わせのメッセージを書いたりしますよね。これらはすべて、ウェブページ上の「フォーム」という部分で行われます。 JavaScript

microCMS の基本 microCMS とは、ヘッドレス CMS（Content Management System）の一つです。ヘッドレス CMS とは、フロントエンドとバックエンドが完全に分離された CMS のことを指します。これにより、データの入力と表示が分離され、任意のフロントエンドでデータを表示することができます。 microCMS は API によるデータの取得が可能で、これにより JavaScript のフレームワークである Next.js からデータを取得し、ウェブサイト上に表示することが可能となります。 microCMS でブログを作成する microCMS の管理画面に入ります。 管理画面の左 > コンテンツ（API）の「＋」をクリック > 「カテゴリ API」を作成 API 名 > 「ブログ」、エンドポイント名を「blog」と指定 API スキーマ > フィールド

関数に関する記事 コールバック関数 高階関数 再帰関数 再帰関数とは？ 再帰関数とは、関数の中から自分自身を呼び出す関数のことを言います。プログラミングにおける再帰は、繰り返し処理を行う一つの方法で、特定の条件が満たされるまで関数が自身を呼び出し続けます。 なんだか難しそうな単語が出てきたかもしれませんが、実はシンプルなアイデアに基づいています。 再帰関数は「ドミノ倒し」 再帰関数を理解するためには、「ドミノ倒し」をイメージしてみてください。ドミノ倒しは、一つのドミノを倒すとその次のドミノも倒れて、その次のドミノも倒れて...というように、一つ一つのドミノが次のドミノを倒していく遊びですよね。 これを再帰関数に置き換えて考えてみると、一つの関数（ドミノ）が次の同じ関数（ドミノ）を呼び出し（倒し）、その関数がまた次の同じ関数を呼び出し（倒し）...というように、一つ一つの関数が次の関数を呼び