Yuki Hamanaka

中学時代からMSXでプログラミングを始め、学生時代にPascal/C++を学び、Per…

Yuki Hamanaka

中学時代からMSXでプログラミングを始め、学生時代にPascal/C++を学び、Perl5のCGIで生計を立てる。Node.jsリリース後、効率的なHTML/CSS/JavaScript開発を求めてReact.jsに出会い、現在はNext.jsに特化したエンジニアとして活動中。

最近の記事

PostgreSQLのRow Level Security (RLS):入門ガイド

はじめに データベース管理において、セキュリティは重要な要素の一つです。特に、複数ユーザーがアクセスする環境では、各ユーザーがどのデータにアクセスできるかをきちんと制御することが必要です。このような状況において、PostgreSQLのRow Level Security (RLS)は、データベースのセキュリティ機能を強化するための強力なツールとなります。 Row Level Security (RLS) とは何か? RLSは、特定の行に対するアクセスをユーザーごとに制御

    • Sheriff: Eslint設定の新たな旅

      ※タイトル画像と内容は全く関係ありません。 ソフトウェア開発は、多くの挑戦と選択を伴います。その中で、コード品質を向上させ、エラーやバグを最小限に抑えるためにEslintを使うことは一般的という話を先日しました。しかし、Eslintの設定はしばしば複雑で、導入に時間と労力がかかることがあります。毎回、細かく設定し直すこともしばしばです。そこで、今回は新たな仲間、SheriffというEslint設定に焦点を当ててみましょう。 まず最初に、この動機が全てソフトウェア開発におけ

      • TypeScriptとESLint:コード品質向上のための究極のツールボックス

        ソフトウェア開発者の間で、TypeScriptとESLintの組み合わせは、コード品質の向上と開発プロセスの効率化における究極のツールボックスとして広く認識されています。今回は、TypeScriptとESLintの利点、特にESLintの有用性に焦点を当て、その力強さをブロガー風に紹介します。 TypeScript:静的型付けの魔法以前の記事でも取り上げたTypeScriptは、JavaScriptに静的型付けを導入することで、開発者に多くの利点を提供します。静的型付けは、

        • サイズとパフォーマンスにこだわるなら、軽量で効率的なRollupがおすすめ!Webpack vs Rollup - バンドラー選びのポイント

          こんにちは、みなさん!今回はJavaScriptのバンドラーについてお話しします。Webpackは非常に人気のあるバンドラーで、柔軟性と多機能性が魅力の一つです。複雑な依存関係を解決し、様々なファイル形式をロードすることができます。また、プラグインの豊富な選択肢により、ビルドプロセスをカスタマイズすることも可能です。さらに、コードスプリッティングによるページロードの最適化も行えるため、大規模なプロジェクトには非常に適しています。 しかしながらです。すでにデザインやレイアウト

        PostgreSQLのRow Level Security (RLS):入門ガイド

          TypeScriptのLiteral Typeとその利点

          どうも、こんにちは!今日はTypeScriptの魅力的な機能、Literal Typeとその強力な相棒、Zodライブラリについてご紹介します!これらの組み合わせは、TypeScriptの静的型付けをよりパワフルにし、開発の信頼性を向上させる秘密の武器なんですよ♪ まずはLiteral Typeの特徴をチェックしてみましょう!Literal Typeは、文字列、数値、真偽値などのリテラル(具体的な値そのもの)を型として使用することができます。つまり、特定の値のみを受け付ける型

          TypeScriptのLiteral Typeとその利点

          Supabase: Prismaとの相性も抜群!AWS Amplifyと比較してサーバーレス開発の新たな選択肢

          サーバーレス環境の構築は、現代の開発者にとって重要な課題です。AWS Amplifyは多くの開発者にとってポピュラーなツールですが、最近になって新たな選択肢が登場しました。それがSupabaseです。Supabaseは、AWS Amplifyと比較してどのように優れた開発体験を提供するのか、詳しく見ていきましょう。さらに、Prismaとの相性も抜群である点も注目です。 簡単なセットアップSupabaseは、AWS Amplifyと比較してセットアップが非常に簡単です。必要な

          Supabase: Prismaとの相性も抜群!AWS Amplifyと比較してサーバーレス開発の新たな選択肢

          TypeScriptの基礎構文: プログラミング初心者のためのガイド

          こんにちは!プログラミングの初心者の皆さん、お疲れ様です。今日は、TypeScriptの基礎構文についてお話ししましょう。TypeScriptはJavaScriptのスーパーセットであり、型安全性や開発効率の向上を実現するために開発されました。この記事では、変数や型といった基本的な構文について解説しますので、一緒に学んでいきましょう! 変数の宣言と初期化変数は、データを格納するための箱です。TypeScriptでは、変数の宣言方法や初期化における注意点があります。また、変

          TypeScriptの基礎構文: プログラミング初心者のためのガイド

          Pages Router から App Routerへ〜 Next.jsの未来への展望:パフォーマンスと安定性の向上に焦点を当てて

          今日は、Next JS の最新ブログ(https://nextjs.org/blog/june-2023-update)から現在の取り組みについてまとめてみました。以下、要約です。詳しくは本家のブログサイトの方をご覧ください。 イントロダクションNext.jsの開発チームは、Next.jsの未来に向けてApp Routerの重要性を認識しており、現在の優先順位を共有したいと考えています。 App Routerとは?App RouterはNext.js 12.0.0から導入

          Pages Router から App Routerへ〜 Next.jsの未来への展望:パフォーマンスと安定性の向上に焦点を当てて

          最新のUIデザインを簡単に作成!〜Radix UIとshadcn UIの紹介

          最近は、色々なAIのAPIがあって、それを使って独自のChatサービスを作って楽しむ機会が増えましたね。ただ、こういうAIを使って楽しもうと思う時に必要になるのが、UIですね。おしゃれなUIを作ろう、モダンなUIを作ろう、APIの応答待ちの間のアニメーションや画像の遅延ローダーを考えているとなかなか進まないなと感じたことはありませんか? 実際、私は自作の専用のUIライブラリを作ることも楽しいと感じる性格なので、本質はそこではないのにUIについて色々考えているうちに開発が遅々

          最新のUIデザインを簡単に作成!〜Radix UIとshadcn UIの紹介

          開発時のCSS管理における選択肢:Next.jsのCSSモジュール vs. Bootstrap vs. Tailwind CSS vs. styled-components

          ウェブアプリやサイトの開発において、CSSの管理方法を選択することは悩ましい問題です。私はこれまで様々な方法を試してきましたが、どれが一番という明確な答えは見つかりませんでした。今回は、私が経験した各アプローチについて、パフォーマンス、可視性、可読性、設定の煩雑さなどの観点から考察してみたいと思います。 Next.jsのCSSモジュール利点 コンポーネントベースのスタイリングが可能で、スタイルのカプセル化が容易です。 クラス名が自動的に一意になるため、スタイルの競合や衝

          開発時のCSS管理における選択肢:Next.jsのCSSモジュール vs. Bootstrap vs. Tailwind CSS vs. styled-components

          ウェブのスタイルは、CSSからTailwind CSSの利用へ

          学生時代からCなどのプログラミングを学んできた私は、最初にCSSを学んだ時、すごく違和感があったことを鮮明に覚えています。C言語のようなプログラミング言語は、論理的な手続きを記述して目的の結果を得るというスタイルでしたが、CSSはまったく異なるアプローチを要求しました。 当時、ウェブ開発においてデザインを行うためには、CSSによるスタイルシートの作成が不可欠でした。しかし、CSSは要素のスタイルを指定するためのセレクタやプロパティの組み合わせによって構成されており、シンタッ

          ウェブのスタイルは、CSSからTailwind CSSの利用へ

          ブラウザのクッキーのセキュリティ機能: 属性ごとの解説

          ブラウザのクッキーは、ウェブサイトがユーザーのブラウザに保存する小さな情報の塊です。しかし、セキュリティの観点からは、クッキーの適切な設定が重要です。この記事では、ブラウザのクッキーのセキュリティ関連の属性について詳しく解説します。それぞれの属性がどのような役割を果たし、セキュリティにどのような影響を与えるのかをご紹介します。 Secure属性Secure属性は、セキュアな接続(HTTPS)の場合にのみクッキーが送信されることを保証します。この属性が有効になっている場合、ク

          ブラウザのクッキーのセキュリティ機能: 属性ごとの解説

          パッケージングツールとTypeScriptを活用した効果的なプロジェクトの立ち上げ

          最近のWeb開発では、JavaScriptのパッケージングツールとTypeScriptが重要な役割を果たしています。この記事では、パッケージングツールの概要とTypeScriptを使用したプロジェクトの立ち上げ方法について解説します。これらのツールを活用することで、効率的な開発プロセスを構築することができます。 まず最初に、パッケージングツールとは何かを説明しましょう。主なツールとして、WebpackとGulpがあります。Webpackはモジュールバンドラとして、JavaS

          パッケージングツールとTypeScriptを活用した効果的なプロジェクトの立ち上げ

          最新の研究による非認知能力の重要性とその効果に迫る

          こんにちは、読者の皆さん。今日は閑話休題で教育心理学について最近学んでいることをまとめておきたいと思います。 最近の教育や心理学の研究では、学業成績や個人の成功において認知能力だけでなく、非認知能力も重要な役割を果たしていることが明らかになってきました。今回は、最新の非認知能力の研究結果をご紹介し、その重要性と効果についてまとめてみました。 非認知能力とは非認知能力の定義 まず、非認知能力についての定義をご紹介しましょう。非認知能力とは、認知的なスキルや知識以外の、個人の

          最新の研究による非認知能力の重要性とその効果に迫る

          TypeScriptの旅:誕生からバージョンの歴史まで

          こんにちは、開発者の皆さん!今日は、TypeScriptの興味深い旅に出かけましょう。TypeScriptは、JavaScriptのスーパーセットとして誕生し、多くの開発者に愛される言語となりました。では、その旅の始まりからバージョンの歴史までを紹介していきます。 TypeScriptの誕生は、2012年にマイクロソフトによって発表されました。当時、JavaScriptは急速に成長していましたが、大規模なアプリケーションの開発には限界がありました。そこで、TypeScrip

          TypeScriptの旅:誕生からバージョンの歴史まで

          TypeScript学習のための最適なサイトはこちら!最新の流れと実践的なリファレンスを提供

          こんにちは、開発者の皆さん!今回は、私がTypeScriptの学習に使ったウェブサイトをご紹介します。どちらかというと既にプログラムやコーディングの基礎がわかっている人向けとは言え、正直このサイトで学習するだけで十分理解できます。 TypeScriptはJavaScriptの強力な静的型付け言語であり、プロジェクトの品質や保守性を向上させるための重要なツールです。では、さっそく紹介していきましょう! TypeScript(公式サイト) このサイトは、TypeScript公式

          TypeScript学習のための最適なサイトはこちら!最新の流れと実践的なリファレンスを提供