2022-01-01から1年間の記事一覧

ReactとJQueryを共存する方法と注意点

React基礎 ライブラリ

React内部でJQueryを正しく使用する方法と注意点について解説致します。

#react #jQuery #JavaScript

ReactとTypeScriptでuseEffectフックの正しい使用方法

React基礎 React with TypeScript 入門

ReactとTypeScriptでuseEffectフックを正しく使用する方法を解説致します。

#react #React Hooks #async/await #useEffect #TypeScript

Next.jsのデメリット【欠点】を理解する

React基礎 フレームワーク

Reactを利用した、フレームワークであるNext.jsの欠点について焦点をあてて初学者様に解説していきます。

#React #Next.js #NestJS #フレームワーク

React-Queryとは？使い方と重要性を分かりやすく解説

React基礎 ライブラリ

React-Query-libraryの使い方とその重要性について初学者様に解説を致します。

#react #React Query #Library

React Server Components【RSC】とは？　

React基礎 テクノロジー

RSCとは？ 利点 サーバーとクライアントのコンポーネント分割と仕組み 適用ルール SSRとの違い 最後に RSCとは？ ※ RSCはまだReactチームにより開発中であり、本番環境にはまだ推奨されていないことに注意してください。 つまり、実験段階にあるためこの機能…

#react #RSC

30〜40代や50代以降のキャリアチェンジ者に向けたプログラミング学習のコツと成功の秘訣

その他

この記事では、30〜40代または50代以降でプログラミングへのキャリアチェンジを考えている読者様に向けた記事となっております。 30歳でコーディングを学び始めたばかりの方でも、40歳でソフトウェア エンジニアになる方でも、50歳で再訓練する方々に、30代…

#キャリア #エンジニア 転職 #プログラマー #ソフトウェアエンジニア

当ブログからの【お知らせ】

その他

いつも当ブログをご閲覧頂き、ありがとうございます。 少し遅れてしまいましたが、ブログ開設して11月4日に一年が経過しました。 いつもお越し頂いている読者様ならびに新規様には感謝申し上げます。 当ブログで学習される読者様に、今後のお知らせと注意点…

ReactのHOC（Higher-Order Component）パターンの理解と使用法：実際の例でユースケースをカバー

React基礎

HOCとは？ HOCのユースケース HOCパターン コンポーネントの拡張 フックのHOC フックとHOCについて 注意点 最後に 高階コンポーネントHigher-Order-Component(HOC)は、Reactの構成上の性質から派生した設計パターンです。 フックが導入される前は、コンテキ…

#react #高階関数 #JSX

JavaScriptのonchange Event

JavaScript基礎

JSでのonchangまたはaddEventListenerによる入力テキスト、ラジオボタン、チェックボックスおよび選択要素のJSイベントについて解説致します。

#JavaScript #イベント処理 #input

JavaScriptのボタン作成とクリックイベント処理

JavaScript基礎 人気記事

JSでボタン生成とイベント処理について初心者様に解説致します。

#JavaScript #クリックイベント

JavaScript ES6モジュールシステムの基本的な使い方：初心者向け完全ガイド

JavaScript基礎

JavaScriptでES6 moduleを作成して使用する方法を初心者様に解説致します。

#JavaScript #MODULE #ES6

React コンポーネントをリファクタリングする方法

React基礎

Reactアプリに適用されるリファクタリングに関する一般的な問題について解説します。

#React Hooks #react #リファクタリング

React JSを使用した【PWA】化の構築方法

React基礎

ReactのWebアプリをPWA化する方法を解説致します。

#react #PWA

Next.jsプロジェクトを手動で作成する方法

フレームワーク React基礎

Next.jsをCNAを使用せずに手動でプロジェクトをセットアップしていく方法を解説致します。

#react #Next.js #JSX

ReactとTypeScript useRefフックの型指定と使い方

React基礎 TypeScript + React 入門

useRefフックを使用してrefを宣言するさまざまな方法が、現在のrefプロパティの不変性にどのような影響を与えるかを学びます。 当記事では、currentプロパティを不変にする方法、可変にする方法を紹介します。 useRefフックとは？ useStateとuseRefの違い us…

React 18 Suspense 遅延読み込みとパフォーマンスを理解する 基礎

React基礎

ReactのSuspenseおよび遅延読み込みとパフォーマンスについて初心者様に解説致します。

#react #suspense #遅延読み込み #非同期処理

WebサイトとWebアプリの違い 知っておくべきこと 基礎

JavaScript基礎 React基礎 その他

ウェブ開発とモバイルアプリ開発を専門とするプログラマとして、私たちはクライアントとそれぞれの目的について頻繁に話し合い、それらを区別する方法を説明してきています。 そのため、これら2つの主な違いを指摘するガイドを作成することを考えました。 い…

#web site #Web application

React TypeScriptでの型指定されたuseStateフックの使い方：初心者向け基礎解説

React基礎 React with TypeScript 入門

React TypeScriptでのuseStateフックで状態の型を宣言する方法について解説致します。

#React Hooks #react #TypeScriot

ReactでのJSXで条件付き三項演算子を使用する

React基礎

Reactで三項演算子を使用する、切り替え表示・フック・インラインスタイルなどの方法について学習します。

#React #React Hooks #三項演算子

Next.jsアプリケーションで外部リンクとリダイレクトの実装方法

フレームワーク React基礎 人気記事

Next.jsでの外部ページにリンクおよびリダイレクトをする方法を解説致します。

React useMemoおよびuseCallbackフックの使用方法　

React基礎

一部のReact開発者がよく行う間違いは、パフォーマンスの問題を防ごうとして、必要のないときにもこれらのフックを乱用してしまう事です。useMemoとuseCallbackのこれらの実際の目的は何なのか、そしてそれらを適切に使用する方法と仕組みについて解説してい…

#react #React Hooks #JSX

Next.jsでローカルのJSONファイルからデータの取得と表示

React基礎 フレームワーク

Next.jsでローカルのJSONファイルからデータを読み取って表示する方法を解説いたします。

#react #JSON #Next.js

Next.jsでウィンドウオブジェクトにアクセスする方法 | 初心者向け解説

フレームワーク React基礎

Next.jsでウィンドウオブジェクトにアクセスするいくつかの方法を初心者向けに解説致します。

#react #React Hooks #NextJs

React コンポーネントを強制的に再レンダリングする方法

React基礎

コンポーネントを強制的に再レンダリングするべきかどうかを学習すれば、Reactの内部動作を理解するのに非常に役立ちます。

#React Hooks #react #レンダリング #コンポーネント

React v18から17にダウングレードする方法【CRAまたはCNA】

React基礎 フレームワーク

React v18から17にダウングレードするいくつかの方法と、Next.jsでのダウングレードも紹介致します。

#Node.js #create-react-app #react #コマンドライン

ReactでのonClickイベント処理 【イベントハンドラ】

React基礎 人気記事

ReactでonClickイベントで使用する方法と、さまざまな種類のイベントハンドラについて説明します。

#react #React Hooks #イベントハンドラ

React.js初心者におすすめ！CDNを使って簡単にReactプロジェクトを始めよう

React基礎

React CDNを使用しコンポーネントにJSXを追加する方法またはフックの使用と注意点を初心者に解説します。

#React Hooks #react #CDN #JSX #HTML5

ReactフックでlocalStorageを使用する方法

React基礎

このチュートリアルでは、ローカルストレージにアクセスし、それを使用してアプリケーションの状態を保存する方法を説明します。 ※前提条件として、Reactの概念およびReactフックの基本を理解していることを確認してください。 Webストレージとは フォームコ…

#React Hooks #react #localStorage #JSX

Reactフックを使用したAsync/Awaitを用いたAPI呼び出しの実装方法

React基礎

Reactフックでfetchを使用してasync/awaitでAPI呼び出しを処理する、簡単な方法を解説します。

#React Hooks #react #async/await #fetch #API

Typescriptで学ぶReact 入門 Propsの渡し方と定義

TypeScript + React 入門 React基礎 JavaScript基礎 人気記事

CRAを使い、TypeScriptを使用したReact関数コンポーネントでのpropsの定義方法と渡し方を解説致します。

#react #Props #TypeScript
プライバシーポリシー

© 2023 Icons8 LLC. All rights reserved.

© [deve.K], 2023. React logo is a trademark of Facebook, Inc. JavaScript is a trademark of Oracle Corporation and/or its affiliates. jQuery and the jQuery logo are trademarks of the JS Foundation. TypeScript and the TypeScript logo are trademarks of the Microsoft Corporation. Next.js and the Next.js logo are trademarks of Vercel, Inc. Firebase and the Firebase logo are trademarks of Google LLC. All logos edited by [deve.K].

'); $entries_archive.insertBefore(sections[0]); for(var i=0; i < view_sec_num; i++) { $(sections[i]).appendTo($entries_archive); page_index += 1; } archive_num += 1; for(var i=view_sec_num; i < sections.length; i++) { if(page_index==view_sec_num) { var $read_more_link = $('

もっと表示する

'); $read_more_link.on('click',{archive_num: archive_num},function(e){ $(e.target).hide(); $('#entries-archive-' + e.data.archive_num).fadeIn("slow"); }); var $before_archive = $('#entries-archive-' + (archive_num-1)); $before_archive.append($read_more_link); $entries_archive = $('
'); $entries_archive.hide(); $entries_archive.insertAfter($before_archive); page_index = 0; archive_num += 1; } $(sections[i]).appendTo($entries_archive); page_index += 1; } $entries_archive.hide(); } }); // ページトップ処理 $(function () { var pagetop = $('#pagetop'); // スクロールした場合 $(window).scroll(function() { // スクロール位置が200を超えた場合 if ($(this).scrollTop() > 200) { pagetop.fadeIn("slow"); } else { // ページトップへをフェードアウト pagetop.fadeOut("slow"); } }); // クリックした場合 pagetop.click(function() { // ページトップへスクロール $('html, body').animate({ scrollTop: 0 },"slow"); return false; }); });