はてなブックマーク

ソフトウェア開発者にとって、堅牢でテスト可能で拡張性があり、保守性の高いオブジェクト指向のソフトウェアシステムを設計することは重要です。 そこで登場するのがSOLID原則です。 SOLIDは、ソフトウェア開発中に生じるかもしれない特定の問題を解決するために5つの設計原則が組み合わさったセットです。 この記事では、SOLID設計の原則について詳しく学んでいきます。 具体的には、SOLID原則が何を意味しているのか、各部分がそれぞれ何を表しているのか、また実際のプログラム例を挙げながら現役のプログラマーが説明します。 さらに、JavaScriptを使ってこれらの原則を実装する方法も紹介します。 SOLID設計原則とは？ 単一責任原則 (SRP) Open/Closed原則 リスコフ置換原理 (LSP) インターフェース分離原則 (ISP) 依存関係逆転の原則 最後に SOLID設計原則とは？

本日は、初心者向けのReactアプリケーションにTailwind CSSを統合した、効果的なスタイリング方法について解説します。 初心者向けのReactで学ぶTailwind CSSチュートリアルとなります。 まず、Tailwind CSSをReactに統合する手順については以前の記事で詳しく紹介しています。 手順については、以下のリンクを参照してください。 dev-k.hatenablog.com このチュートリアルでは、すでにプロジェクトにTailwind CSSがインストールされていることを前提としていますので、その点をご了承ください。 それでは、Reactで学ぶTailwind CSSの効果的なスタイリング方法について見ていきましょう。 Tailwind CSSの特長と利点および考慮すべき短所 Tailwind CSSのカスタマイズとtailwind.config.jsファイルの重

Reactは単なるUIライブラリではなく、コンポーネントベースのアプリケーション開発フレームワークです。UI/UXデザインの基本原則に加え、再利用性や状態管理、データフローなどの概念も重要です。 Reactのコンポーネントベースのアーキテクチャを活用すると、UIと裏側のロジックを分離して管理しやすくなり、効率的なアプリケーションの開発が可能です。 今日は、Reactにおけるコンポーネントの基本原則の解説と、初心者に役立つReactコンポーネントライブラリの紹介を提供します。 コンポーネントの設計原則 UI（ユーザーインターフェース） UX（ユーザーエクスペリエンス） UIのデザインに役立つReact コンポーネントライブラリ React Material UI React-Bootstrap Fluent UI Chakra UI Semantic UI React Ant Design

すでにNext.jsを使用している場合は、最近Next.js 13向けに多くの優れた機能が発表されたことをご存知でしょう。 Next.js 13以降から魅力的な新機能が大量に追加され、Reactのサーバー側レンダリングと、それがインタラクティブなクライアント側コンポーネントと接続する方法がより魅力的で一貫したものになります。 この記事では、最新のNext.js 13以降のいくつかの新機能を詳しく掘り下げて、アップグレードによる主な変更点を初心者に詳しく解説していきます。 Next.js 13はまだ実験版であるため、運用アプリ（本番環境）での使用は推奨しません。 コミュニティは現在も開発と改善に取り組んでいます。 Next.js 13が安定リリースされると、Next.js開発者向けのチュートリアルコースも完全にアップデートされ、最新のNext.js 13の特典がすべて含まれるようになります。

はじめに プロジェクト作成 スタイリング 親コンポーネント 子コンポーネントの実装 ログイン状態の保持 ユーザー情報の保存 ログアウト処理 注意点 最後に はじめに 本日は、ユーザー登録、ログイン、ログアウトの機能を持つ認証アプリの基本的な構成を初心者向けに解説します。 Reactでは、ユーザーの認証状態を管理するためにReact ContextやReduxなどの状態管理ライブラリを使用するのが一般的です。 初心者には、Reactの状態管理やファイル構造、データフローに関する概念を理解することは初めての課題かもしれません。 そのため、React ContextやReduxのような状態管理ライブラリを使うことが一般的ですが、これらは初心者にとっては少し複雑に感じるかもしれません。 React Contextフックを使った状態管理では、通常よりもファイル構造が複雑になることがあります。 また、

SNS活動とプライバシー保護：写真交換とメタデータの注意点 セキュリティ対策 一般のユーザーに向けた対策 ソフトウェア開発者向けの対策 攻撃手法や脅威について AIはサイバーセキュリティを侵害するのか？ AIを使用した新たな攻撃手法 最後に この記事では、セキュリティに関心のある人々にとって重要な情報を提供し、セキュリティやプライバシーの保護に役立つ知識と対策方法を紹介します。 さらに、ハッカーがAIを利用して攻撃を行う方法についても探ってみましょう。 現代のデジタル時代において、セキュリティの重要性はますます高まっています。 個人情報や機密データの保護は切迫した課題であり、特に開発者やプログラマーにとっては重要なテーマです。 個人情報やクライアントのデータは、悪意のある第三者に漏洩する可能性があるため、適切に保護する必要があります。 開発者やプログラマーは、暗号化技術やセキュアな通信プロ

現代のデジタル世界では、ウェブページやアプリにおいて画像は欠かせない要素となりました。 画像を使用することで、情報を迅速に伝えることができ、ユーザーエンゲージメントと体験を向上させることができます。 ただし、単に画像を追加するだけでは十分ではありません。画像を最適化することが重要です。 なぜなら、大きなサイズの最適化されていない画像は、ウェブサイトの読み込み速度を遅くし、ユーザーエクスペリエンスやコンバージョン率に悪影響を及ぼす可能性があるからです。 そのため、初めから画像最適化に注力することが不可欠です。特にNext.jsを使用している場合は、Imageコンポーネントを利用して効率的なNext.js画像最適化を実現することができます。 もしもあなたがNext.jsを利用しているアプリを開発している場合、本記事では効果的なNext.js画像最適化の方法について解説します。 しっかりと最適化

一般に、React Nativeを使い始めるには、「Expo CLI」または「React Native CLI」を使用する2つの方法があります。 どちらの方法にもそれぞれ長所と短所がありますが、React Nativeの公式ドキュメントでさえ、モバイル開発が初めての場合はExpo CLI から始めることを提案しております。 したがって、当記事ではWindowsを使用した最初の React Nativeプロジェクト用にExpo開発環境をセットアップするために必要なすべての手順を説明致します。 そして、Windows上でReactを使用してiOSアプリ開発を試してみたいと思っている方に向けた入門記事でもあります。 ですが、MacOSをお持ちの方はReact Native CLIを使用してプロジェクトをすばやく起動するのが標準的な方法ですので、すぐに移行をお勧めします。 また、この記事では、Re

この記事では、フレームワークを使用せずに純粋なNode.jsで構築された単純な静的ファイルサーバーを提供します。 Node.jsの現在の状態では、組み込みのAPIとわずか数行のコードによって、必要なほとんどすべてが提供されています。 Node.jsとは Node.jsのインストール Common JSモジュールとES6 モジュール Comon JSモジュールでのファイル作成 静的ファイルサーバー ES6 モジュール 最後に Node.jsとは Node.jsは、V8エンジンを使用して Webブラウザの外部でJavaScriptコードを実行するクロスプラットフォームのオープンソースバックエンドのJavaScriptランタイム環境です。 Node.jsを使用すると、開発者はJavaScriptを利用してコマンドラインツールとサーバー側スクリプトを作成できます。 これには、ユーザーのブラウザにペ

今回は、JavaScriptのテストフレームワークとコンポーネントをテストするためのReactユーティリティの組み合わせとして人気の高い、JestとReact Testing Libraryを使ってReactアプリケーションをテストする方法について説明します。 テストとは ユニットテストと結合テスト テストカバレッジで省略すべきもの Jestとは？ React Testing Library(RTL)とは？ ユニットテストの構築 結合テストの構築 JestとRTLのモック スナップショットのテスト 最後に テストとは テストは、アプリケーションとやり取りして、そのすべての機能と機能が意図したとおりに動作することを確認する行為またはプロセスです。 また一般に、「手動テスト」と「自動テスト」の2種類のテストがあります。 ・ 手動テスト： 手動テストは、テストを人間が手動で実行する手法です。 手

ChatGPTの印象的なレスポンシブ アルゴリズムにより、このAIテクノロジーは世界中で注目を浴びています。ニュース記事でもChatGPTが頻繁に取り上げられています。 一部の人々は、ChatGPTがソフトウェア開発者を完全に取って代わる可能性があると懸念しています。 しかし、実際には、ChatGPTはアプリ開発や定型的なコードの生成、デバッグ、テストなど、開発者の日常業務をよりスムーズかつ効率的にするための手段として役立つことが期待されています。 そこで、本記事では、現役のReactプログラマーである筆者が、ChatGPTがソフトウェア開発者に与える影響について考察してみたいと思います。 なお、本記事には筆者個人の意見も含まれていることをご了承ください。 OpenAIのChatGPTとは？ ChatGPTはコードを記述できるのか？ ChatGPTは開発者にとって脅威なのでしょうか? Ch

クロージャー（Closure）の概念は関数型プログラミングにおいて重要であり、JavaScriptの面接でよく質問される事もあります。 どこでも使用されていますが、クロージャーは把握するのがとても困難でもあります。 まず、クロージャーを学ぶまえに（スコープ）および（レキシカルスコープ）の基本を学ぶ必要があります。 そして、前提としてJSの変数および関数に精通しているかご確認下さい。 この記事では、JavaScriptクロージャーの仕組みおよびJavaScriptスコープについて解説します。 スコープ スコープチェーン レキシカルスコープ JSのクロージャーとは？ レキシカルスコープとクロージャーの違い JSでのクロージャの利点と欠点 最後に スコープ JavaScriptのスコープ(Scope)は、変数や関数がどこからアクセス可能かを定義する仕組みです。 変数や関数がどこで宣言されたかによ

当ブログの記事でReact学習されている読者様やそうでない初心者様もReactを学び始めて、Reduxという用語を何度も聞いたことがあるかもしれません。 特にWeb開発の世界に不慣れな方は、名前を聞いたことがあるかもしれませんが、ほとんどの方々は『 Reduxとは何ですか? 』と疑問に思っている方も多くいらっしゃるかと思います。 それを解決し、仕組みと使い方を学んでいきましょう。 この記事では、Reduxとは何かを説明し、その主な機能について説明します。 Reduxとは？ Reduxの仕組み Reduxのアクション Reduxのディスパッチ Reduxのreducer ReduxのStore Reduxはまだ正しい選択なのか？ 最後に Reduxとは？ Reduxは、Reactアプリケーションの状態管理ライブラリであり、アプリケーション内の状態をより効率的に管理するために使用されます。 毎

本日のチュートリアルはJavaScriptのクラスについて学習します。 JavaScriptクラスを学習し始めたあなたは中級者レベルに到達しています。 Reactなどの一般的なJavaScriptライブラリはクラス構文を頻繁に使用するため、クラスに精通していると非常に役立ちます。 本日はES6クラス構文およびES7クラス構文の解説を致します。 JavaScriptにおけるクラスとPrototypeの違いは、他の記事として取り扱いますが、Prototypeについて精通していない初心者様もいらっしゃるかと思いますので短めに解説します。 この記事では、すでに（Prototype）および（this）にある程度精通している方を対象としている事をご理解ください。 Prototypeとは？ クラスとは？ JavaScriptクラス構文 初期化 クラスのインスタンス化 クラスのメソッド 静的メソッド クラ

Reactのプロジェクトを実行するには、開発モードと Production buildの2つのモードを使用できます。 開発段階では、Reactがアプリコードの問題を簡単に検出して修正し、バグを排除するための多くの役立つ警告とツールを提供する開発モードを使用して、コードをローカルで実行します。 ただし、これらの余分なコードによってバンドルサイズが大きくなるため、アプリの実行が遅くなります。 つまり、開発モードでは、バグが発生する前に問題を見つけるのに役立つ多くの警告がReactに含まれていまが、そうすることでバンドルのサイズが大きくなり、アプリの実行が遅くなります。 アプリをローカルで作業している間はスローダウンを受け入れることができますが、デプロイではこれを許容できません。 Reactアプリケーションの本番ビルドを行う方法を学んでいきましょう。 プロダクションモードとは？ 開発モードの作成

クライアントサイドとは？ サーバーサイドとは？ クライアントサイドレンダリング サーバーサイドレンダリング 静的サイト生成 3つの主な違い 最後に ここ数年の傾向は、Webサイトのデザインがアプリに似てきています。 高度な応答性と双方向性は、幅広いコンテンツと同じくらい重要です。 現代では、主にWebプロジェクトをレンダリングするために提示されている3つの戦略であるCSR・SSR・SSGがございます。 当記事ではWeb初心者のために最も基本的なCSRとSSRおよびSSGについて解説していきます。 SSRおよびSSGはこちらのReactを使用した静的Webサイト制作のためのレンダリング戦略 - deve.K's Programming Primer - プログラミング初心者のための入門ブログでも触れておりますので参照下さい。 また、4つ目のISR「Intelligent Sampling a

謹んで新年のご挨拶を申し上げます。 本年も何卒よろしくお願い申し上げます。 いよいよ、2023年がスタートいたしました。 みなさまはどんなお正月をお過ごしでしょうか？ 皆様におかれましては、新春を清々しい気持ちでお迎えのこととお慶び申し上げます。 昨年は、多くのお力添えいただき誠にありがとうございました。 今年も更なる、更新や記事の質の向上に対して努めて参ります。 皆様のより一層のご支援を賜りますよう心よりお願い申し上げます。 ※ 当ブログの更新は、1月4日辺りを予定しておりますのでご了承下さい。

ReactでJQueryを使用できるのか？ ReactでJQueryを使用する正しい方法 JQuery CDNリンク ReactでJQueryが推奨されない理由 最後に JQueryは、JavaScript開発者が使用する最も有名なライブラリの1つであり、長年にわたって開発者に役立ってきました。 このライブラリは、DOM操作やアニメーションなどを簡単に実行する方法を提供します。 その人気のため、多くのWeb開発者はそれに精通しており、できる限りJQueryを使用することを好みます。 ただし、Reactとフレームワーク(Next.jsなど)は、コードのパフォーマンスと保守性を支援するためのより最新の機能を提供しています。 ほとんどの分野でJQueryよりも優れており、Reactの未来の方が明るいので、開発者はもっと早くReactに移行しなければならないかもしれません。 Reactは間違いなく

useEffectとは 暗黙のリターン useEffectでのasync/await 最後に React.jsでは副作用を処理するためのフックが２つございます。 ・ useEffect ・ useLayoutEffect これらの主な違いは、詳しくは解説致しませんが、全ては実行時のタイミングです。 簡単に言ってしまえば、非同期なのか同期処理なのかです。 以下で、解説しておりますので参照下さい。 dev-k.hatenablog.com useEffectとは useEffectフックは２つの引数を受け入れます。 useEffect(() => { // Mounting return () => { // Cleanup function unmount } }, [//Updating]) // 第2引数 デフォルトでは、すべての再レンダリングで実行しますが、オプションとして２番目の引数

Webテクノロジーは、ほぼ毎月のように成長し、変化し続けています。 決定を下すには、各オプションの長所と短所を事前に知る必要があり、自信を持って適切な選択を行うことはますます困難になってきています。 本日はReactを利用したフレームワークであるNext JSの欠点に焦点を当てて解説していきます。 Next.jsとは Next.jsの短所 技術的な短所 プロジェクトにNext.jsは必要か？ 最後に Next.jsとは Next.jsは、以前はZEITとして知られていたVercelという名前の会社が所有しており、そのオープンソース開発プロセスを主導および維持しています。 Next.jsの最初の作成者は、VercelのCEOであるGuillermo Rauch氏でした。 Next.jsのサーバーレスアプローチにより、Vercelを使用してWebサイトおよびアプリをデプロイできるため、ホスティ

React-Queryとは？ ReduxやuseEffectとの違いは？ React-Queryを使用する理由 React-Queryを使用したデータ取得 QueryClientProvider クエリ クエリキー クエリを実行する関数 バックグラウドでのデータ取得をユーザーに通知 Mutations クエリの無効化と停止 最後に React-Queryを開始する前の前提条件ございます。 ・ React フックと関数コンポーネントに関する中級レベルのスキルが不可欠です。 ・ JavaScriptでのREST APIとデータ取得の基本的な理解。 ・マシンにNode.jsがインストールされていることを確認してください。 React-Queryとは？ React-Queryは、ReactおよびNext.jsコードベース用に構築されたライブラリであり、ネットワークリクエストを作成する際に従うべきす

RSCとは？ 利点 サーバーとクライアントのコンポーネント分割と仕組み 適用ルール SSRとの違い 最後に RSCとは？ ※ RSCはまだReactチームにより開発中であり、本番環境にはまだ推奨されていないことに注意してください。 つまり、実験段階にあるためこの機能の実装の詳細は今後変更される可能性があります。 React Labs: 私たちが取り組んでいること – 2022 年 6 月 React-Server-Components（RSC）は、Reactアプリのパフォーマンスを向上させるために開発された方法であり、サーバー側でレンダリングされるReactコンポーネントを作成することができます。 ただし、RSCはサーバーサイドレンダリング（SSR）ではなく、SSRの代替手段でもありません。 これらの名前には両方に「サーバー」という言葉が含まれているため、混同されることがありますが、実際に

この記事では、30〜40代または50代以降でプログラミングへのキャリアチェンジを考えている読者様に向けた記事となっております。 30歳でコーディングを学び始めたばかりの方でも、40歳でソフトウェア エンジニアになる方でも、50歳で再訓練する方々に、30代半ば現役プログラマーの私があなたに後押し出来ればと思っております。 プログラミングはハードなスキルを必要とする分野です。 まず、人によって効果的な方法は異なりますが、キャリア全体を通じて、常に新しい問題に頻繁に遭遇するため、必要とされる最小限の独学が常にあることを覚えておいてください。 プログラミングは最終的には独学です。 ソフトウェアエンジニアの年齢制限 時間管理 給与 資金 学ぶ意欲 業界の知識 アドバンテージ 個人プロジェクトの構築 最後に ソフトウェアエンジニアの年齢制限 中年でソフトウェアエンジニアリングに興味がある場合、ある時点

いつも当ブログをご閲覧頂き、ありがとうございます。 少し遅れてしまいましたが、ブログ開設して11月4日に一年が経過しました。 いつもお越し頂いている読者様ならびに新規様には感謝申し上げます。 当ブログで学習される読者様に、今後のお知らせと注意点を説明させて頂きます。 当ブログでは、個人で管理しているブログのプログラミング初心者向け学習記事ですので、どうしても1ページ事の文字数が多くなってしまいます。 記事によっては、5000〜10000文字以上などございます。 したがって、誤字および脱字が多数存在する場合がございますのでご了承下さい。 なるべく気を付けてはおりますが、発見したその際は、ご指摘頂けますと幸いでございます。 ご協力の程よろしくお願い致します。 なお、当ブログで扱うプログラミングテクノロジーに関する相談またはリクエストは、お気軽にお問い合わせやコメントからお願い致します。 迅速に

HOCとは？ HOCのユースケース HOCパターン コンポーネントの拡張 フックのHOC フックとHOCについて 注意点 最後に 高階コンポーネントHigher-Order-Component(HOC)は、Reactの構成上の性質から派生した設計パターンです。 フックが導入される前は、コンテキストや外部データサブスクリプションにアクセスするためにHOCが広く使用されていました。 しかし、HOCを記述して理解するのは非常に複雑です。 そのため、フックが導入されたとき、誰もがフックに切り替えたのも不思議な事ではありません。 それでもHOCの概念は、クラスコンポーネントと関数コンポーネント両方に使用できるため、最新のReactの世界でも適用できます。 ただし、HOCには否定できない問題があり、その問題はReact Hookによって完全に解決されます。 面接担当者は、候補者がReactのコンポーネ

前回では、onclickによるイベント処理の解説を致しました。 本日のチュートリアルでは、そのイベント処理の続きとしましてonchange属性およびaddEventListener()メソッドを使用し、入力テキスト、ラジオボタン、チェックボックス、および選択要素のJavaScriptイベントについて学習します。 前回のクリックイベントはこちらの JavaScriptのボタン作成とクリックイベント処理で解説しております。 JSのchangeイベントとは？ JSのonchangeイベントはどのように機能する？ テキスト入力要素のchangeイベント ドロップダウンでのchangeイベント ラジオボタンでのchangeイベント onchangeとaddEventListenerの違い 最後に JSのchangeイベントとは？ このイベントハンドラは、フォームフィールドが変更されたときにすぐに呼び

JSのイベント ボタンオブジェクトの生成 ボタンオブジェクトのプロパティ イベントハンドラ addEventListener()とonclick イベントハンドラを削除 クリック数の制御 共通のイベント Event object イベントのバブリングについて 最後に Buttonオブジェクトは、HTMLの<button>要素を表しています。 通常は、<button>要素にアクセスするために「getElementById()」メソッドを使用します。 ただし、プログラム上でHTMLボタンを作成する必要がある場合があります。 JavaScriptを使用して、HTMLボタンをプログラムで作成する方法を学ぶために、DOM操作の基本である要素の取得【追加・削除・置換】を理解する必要があります。 また、JavaScriptでクリックイベントを処理する方法も重要です。 したがって、この記事では、JavaS

このチュートリアルでは、JavaScriptのES6（ES2015）モジュールを作成し、使用する方法を解説します。 JavaScriptモジュールを使い始めるために必要な全ての情報を提供します。 モジュールシステムの歴史 ES6 moduleとは？なぜ必要？ ブラウザでES6 module 名前付きエクスポート 名前空間のインポート export default Node.jsでES6 module 注意すべき重要な機能 ES6 moduleの利点 最後に モジュールシステムの歴史 JavaScriptには長い間、モジュールシステムがありませんでした。 以前のアプリケーションは単純で小規模であり、コードも単純でした。 しかし、アプリケーションが改善されて肥大化するにつれて、コードも大きくなり、管理するために複数のファイルに分割する必要性が生じました。 そこで、モジュールの概念が生まれました