React 18 Suspense 遅延読み込みとパフォーマンスを理解する 基礎 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
遅延読み込み React.lazy React Suspenseとは？ エラー境界 Suspenseの使い方 注意点 最後に 遅延読み込み 遅延読み込みは、最適化手法やデザインパターンの一つです。 それは画像、ビデオ、Webページ、音楽ファイル、ドキュメントなど、必要になるまで読み込みを遅らせて貴重なデータを節約する手法です。 通常、Reactのシングルページアプリケーション（SPA）は小さいため、問題なく動作します。しかし、コンテンツ管理システムなどの複雑なアプリケーションを扱う際には、プログラム全体を一度に読み込むことは理想的ではありません。 そこで、Reactアプリケーションを本番用にする前に、Webpackなどのプリインストールされたバンドラーを使用してプロジェクトをパッケージ化します。 しかし、このパッケージ化されたプロジェクトを読み込むと、ユーザーが滅多にアクセスしないページも
Primer Prism
Create cohesive, consistent, and accessible color palettes
JavaScriptオブジェクトの基礎と使い方 | プロパティとメソッドの操作方法 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
本日は、JavaScriptのオブジェクトを使う方法について、初心者向けに基本的な操作を解説します。 この記事では、JavaScriptのオブジェクトについての基礎知識を身につけ、実際にコードを書いて操作する方法を学ぶことができます。 オブジェクトは、データをまとめて管理するための便利な手段であり、プログラムの構造をより明確にすることができます。 JavaScriptオブジェクトは、プログラマーが作成、追加、削除、アクセス、プロパティとメソッドを操作するための重要な概念です。 Array「配列」の基礎は以下で詳しく解説しておりますので参照ください。 dev-k.hatenablog.com JavaScript オブジェクト オブジェクト宣言 プロパティの属性 オブジェクトプロパティの操作 計算されたプロパティ名 プロパティの値を省略 プロパティ名の制限 定数宣言したオブジェクトのプロパテ
ReactとTypeScriptでuseEffectフックの正しい使用方法 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
useEffectとは 暗黙のリターン useEffectでのasync/await 最後に React.jsでは副作用を処理するためのフックが２つございます。 ・ useEffect ・ useLayoutEffect これらの主な違いは、詳しくは解説致しませんが、全ては実行時のタイミングです。 簡単に言ってしまえば、非同期なのか同期処理なのかです。 以下で、解説しておりますので参照下さい。 dev-k.hatenablog.com useEffectとは useEffectフックは２つの引数を受け入れます。 useEffect(() => { // Mounting return () => { // Cleanup function unmount } }, [//Updating]) // 第2引数 デフォルトでは、すべての再レンダリングで実行しますが、オプションとして２番目の引数
React.jsでのインポートとエクスポートとは 基礎 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
Reactを学び始めたときにまず気付く初期の構文のいくつかは、「インポート」と「エクスポート」というフレーズを目にする事がほとんどかと思います。 これらの用語は何なのか？またReact.jsにとって非常に重要な理由は何？どの側面がそれらを必要とするのか？これらのまだ非常に新しい概念を初学者様にそれらをここで説明することになります。 エスクポートとインポートの役割と概念 Reactエクスポートとインポート扱い方 それらを組み合わせ 最後に エスクポートとインポートの役割と概念 インポート・エクスポートの概念は、JavaScriptのES6モジュールです。 JavaScriptのES6モジュールは、以下で詳しく解説していますので参照ください。 dev-k.hatenablog.com React.jsでインポート・エクスポートすると、モジュラーコードを記述できます。 コードを複数のファイルに分
WebサイトとWebアプリの違い 知っておくべきこと 基礎 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
ウェブ開発とモバイルアプリ開発を専門とするプログラマとして、私たちはクライアントとそれぞれの目的について頻繁に話し合い、それらを区別する方法を説明してきています。 そのため、これら2つの主な違いを指摘するガイドを作成することを考えました。 いくつかのトリックを知っていれば、それらを区別するのは本当に簡単です。 本日は初心者様にこれらを解説致します。 Webサイト Webアプリケーション 類似点 違い デメリット 適切な選択は？ まとめ 最後に 完全なデジタル時代に移行するにつれて、Webサイトの人気がますます高まっております。 2022年では世界的にも、中小企業の71%以上がWebサイトを保有しております。 保有していない場合、ワールド・ワイド・ウェブ(WWW)の時代において、現代の世界で生き残ることは困難となります。 ただし、Webサイトを必ず持っていなければならないというわけではござい
Reactを学ぶ前に知っておくべきJavaScriptの基礎と必要なスキル・ツールのリスト - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
はじめに ReactでのJS必須級のスキル 学んでおくと尚良い 最後に はじめに Reactの開発者として学びたい初学者の方々にとって、以下の疑問が生じるかもしれません。 Reactを学ぶ前にどれくらいのJavaScriptを学ぶべきか？」「どの程度のJavaScriptの知識があれば、Reactを始められるのか？」。 このような疑問は非常に一般的であり、バニラJavaScriptの基礎を学ぶ必要があります。 また、最新の構文や機能を持つES6も理解する必要があります。 Reactの名前は聞いたことがあるけれど、詳しく知らないという方には、以下にReactについての説明を用意しています。 dev-k.hatenablog.com さらに、Reactを始める前に知っておくべきJavaScriptのスキル、ライブラリ、ツールなどもリストアップしています。これらをマスターすることで、より効果的な
ChatGPTはソフトウェア開発者に取って代われるのか? - ChatGPTが提供するAI技術の可能性 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
ChatGPTの印象的なレスポンシブ アルゴリズムにより、このAIテクノロジーは世界中で注目を浴びています。ニュース記事でもChatGPTが頻繁に取り上げられています。 一部の人々は、ChatGPTがソフトウェア開発者を完全に取って代わる可能性があると懸念しています。 しかし、実際には、ChatGPTはアプリ開発や定型的なコードの生成、デバッグ、テストなど、開発者の日常業務をよりスムーズかつ効率的にするための手段として役立つことが期待されています。 そこで、本記事では、現役のReactプログラマーである筆者が、ChatGPTがソフトウェア開発者に与える影響について考察してみたいと思います。 なお、本記事には筆者個人の意見も含まれていることをご了承ください。 OpenAIのChatGPTとは？ ChatGPTはコードを記述できるのか？ ChatGPTは開発者にとって脅威なのでしょうか? Ch
当ブログからの【お知らせ】 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
いつも当ブログをご閲覧頂き、ありがとうございます。 少し遅れてしまいましたが、ブログ開設して11月4日に一年が経過しました。 いつもお越し頂いている読者様ならびに新規様には感謝申し上げます。 当ブログで学習される読者様に、今後のお知らせと注意点を説明させて頂きます。 当ブログでは、個人で管理しているブログのプログラミング初心者向け学習記事ですので、どうしても1ページ事の文字数が多くなってしまいます。 記事によっては、5000〜10000文字以上などございます。 したがって、誤字および脱字が多数存在する場合がございますのでご了承下さい。 なるべく気を付けてはおりますが、発見したその際は、ご指摘頂けますと幸いでございます。 ご協力の程よろしくお願い致します。 なお、当ブログで扱うプログラミングテクノロジーに関する相談またはリクエストは、お気軽にお問い合わせやコメントからお願い致します。 迅速に
Typescriptで学ぶReact 入門 Propsの渡し方と定義 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
このチュートリアルでは、Reactアプリケーションの構築にTypeScriptを使用する方法を、Create-React-App （CRA）を利用して簡単に始められる手順とともに解説します。 また、TypeScriptを使用した独自のReact関数コンポーネントでのPropsの定義方法も紹介します。 前提として、あなたがNode.jsを既にインストールしていることを仮定しています。 また、このチュートリアルはTypeScriptの基本的な知識があることも前提としています。 ReactとTypeScriptの組み合わせについて学ぶことで、より堅牢なアプリケーションを開発するためのツールとしての利用価値を高めることができます。 この記事を参考にして、ReactとTypeScriptの基本をマスターしましょう。 TypeScriptとReactの利点 CRAのインストール TypeScriptで
ReactのHOC（Higher-Order Component）パターンの理解と使用法：実際の例でユースケースをカバー - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
HOCとは？ HOCのユースケース HOCパターン コンポーネントの拡張 フックのHOC フックとHOCについて 注意点 最後に 高階コンポーネントHigher-Order-Component(HOC)は、Reactの構成上の性質から派生した設計パターンです。 フックが導入される前は、コンテキストや外部データサブスクリプションにアクセスするためにHOCが広く使用されていました。 しかし、HOCを記述して理解するのは非常に複雑です。 そのため、フックが導入されたとき、誰もがフックに切り替えたのも不思議な事ではありません。 それでもHOCの概念は、クラスコンポーネントと関数コンポーネント両方に使用できるため、最新のReactの世界でも適用できます。 ただし、HOCには否定できない問題があり、その問題はReact Hookによって完全に解決されます。 面接担当者は、候補者がReactのコンポーネ
JavaScript While文でのループ処理 使用方法 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
このチュートリアルでは、JavaScriptでwhileまたはdo…whileループを記述して使用する方法を説明します。 Whileループ Whileループの構文 whileループの実行フロー whileループのフローを制御 ループのスキップ whileで配列をループする do… whileループ 最後に Whileループ whileループは、JavaScript言語でサポートされている最も単純なループの1つとなっています。 ループは、特定の条件が満たされている限り、コードの一連の命令の繰り返し実行を容易にするプログラミング構造です。 つまり、特定の条件が真になるまでデータの処理を続行する必要がある場合に役立ちます。 また、常に真の条件を使用して、whileループを無限ループとして簡単に実行することもできます。 JavaScriptでforループの代わりにwhileループを使用すると、ルー
初心者向け：ReactアプリケーションでのTailwind CSSスタイリングガイド - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
本日は、初心者向けの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ファイルの重
Next.jsでウィンドウオブジェクトにアクセスする方法 | 初心者向け解説 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
本日はNext.jsでウィンドウオブジェクトにアクセスするいくつかの方法を初心者向けに解説していきます。 NextJSでWindowが定義されていないのはなぜですか? Next.jsで"window is not defined"を回避するには？ useEffectフックを使用する 型のチェック globalThisプロパティを使用する 組み込み関数でウィンドウオブジェクトにアクセスする 最後に Next.jsを使用するときに遭遇する可能性のある非常に一般的なエラーは、ウィンドウオブジェクトにアクセスした際に返されるエラーです。 Next.jsではWindowは定義されておりません。 Next.jsアプリで HTML DOMからウィンドウオブジェクトにアクセスしようとすると以下のエラーがスローされます。 Unhandled Rejection (ReferenceError): windo
a primer on the canada tech brain drain and how to solve it
Over the past decade, Canada has steadily built a reputation as an incubator for young talent in the IT sector. The Toronto/Kitchener/Waterloo corridor, in particular, is an excellent place for up-and-coming IT professionals to obtain high-quality education and training. The problem is Canada’s having trouble holding onto talented IT professionals. what is the Canadian brain drain and why is it ha
React TypeScriptでの型指定されたuseStateフックの使い方：初心者向け基礎解説 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
Reactで関数型コンポーネントを書く際に、最も基本的でよく使われるフックがuseStateです。 しかし、ReactとTypeScriptを組み合わせて使う場合、useStateフックで状態の型を宣言する方法に混乱することがあるかもしれません。 実際、ReactのフックはTypeScriptのジェネリック型を大いに利用しています。 そのため、まずはジェネリック型について理解していることが重要です。 この記事では、「ブール値」、「文字列」、「数値」、「配列」、「オブジェクト」の型の宣言方法について解説します。 これらの型について理解を深めることで、useStateフックで状態の型を宣言する方法についても理解を深めることができます。 ただし、この記事では、TypeScriptの基礎についてある程度の知識があることを前提としています。 それを踏まえた上で、以下に進んでいきましょう。 TypeS
Octicons | Primer
A scalable set of icons handcrafted by GitHub.
JavaScript localStorageの使い方 データ保存と削除 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
本日はJavaScriptでローカルストレージを使用する方法について学習します。 localStoragとは？ localStorageの使用方法 ローカルストレージを使用する LocalStorageへのオブジェクトの保存 最後に Web StorageまたはlocalStorageとはなんなのか、メリットやデメリットそして安全性などに関する詳しい事は下記で解説しております。 dev-k.hatenablog.com このチュートリアルの前提条件は、JavaScriptに関する基本的な考え方を持っていることです。 事前準備 ・JSのある程度の知識 ・Web Storageのメリット・デメリット・安全性等 ・テキストエディタ(VS Codeなど) ・ブラウザはChromeを使用します それでは少しlocalStoragのおさらいだけしましょう。 必要ない方はスキップして頂いて構いません。
Reactフックの使用におけるルールとヒント：クリーンで読みやすいコードを書く方法 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
Reactを扱う初心者と熟練した開発者の両方が、Reactフックの使用においてルールを守り忘れてしまうことがあります。 この記事では、Reactコンポーネントにフックを実装する際に必要なルールについて説明し、クリーンで読みやすいコードを書くためのヒントを提供します。 これにより、日々の作業をより良くすることができます。 フックを使用する際は、必ずReactフックのルールを厳守してコードを書くようにしてください。 これにより、Reactアプリケーションをより安定させ、バグを回避することができます。 トップレベルのフックのみを呼び出す ネストされた関数で誤って呼び出す Reactの関数コンポーネントからのみフックを呼び出す ReactフックにESLintプラグインを使用する Propsの分解 関数コンポーネントのライフサイクルをより理解する トップレベルのフックのみを呼び出す 「ループ」、「条
JavaScript ES6モジュールシステムの基本的な使い方：初心者向け完全ガイド - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
このチュートリアルでは、JavaScriptのES6（ES2015）モジュールを作成し、使用する方法を解説します。 JavaScriptモジュールを使い始めるために必要な全ての情報を提供します。 モジュールシステムの歴史 ES6 moduleとは？なぜ必要？ ブラウザでES6 module 名前付きエクスポート 名前空間のインポート export default Node.jsでES6 module 注意すべき重要な機能 ES6 moduleの利点 最後に モジュールシステムの歴史 JavaScriptには長い間、モジュールシステムがありませんでした。 以前のアプリケーションは単純で小規模であり、コードも単純でした。 しかし、アプリケーションが改善されて肥大化するにつれて、コードも大きくなり、管理するために複数のファイルに分割する必要性が生じました。 そこで、モジュールの概念が生まれました
JSer.info #504 - Chrome 86ベータがリリースされました。 Chromium Blog: Chrome 86: Improved Focus Highlighting, WebHID, and More CSS 擬似クラスの:focus-visible、擬似要素の::markerをサポートされています。 Document Policy、FetchEvent.handled、Shadow DOM Distribution API、ParentNode.replaceChildren()のサポートなどのサポートも追加されています。 また、Origin TrialとしてWebHID API、Window placement API、<meta name="battery-savings">などの試験的に利用できるようになっています。 その他にはFTPのサポートの段階的な廃止
JestとReact Testing Libraryで学ぶReactアプリのテスト入門：基礎から応用まで - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
今回は、JavaScriptのテストフレームワークとコンポーネントをテストするためのReactユーティリティの組み合わせとして人気の高い、JestとReact Testing Libraryを使ってReactアプリケーションをテストする方法について説明します。 テストとは ユニットテストと結合テスト テストカバレッジで省略すべきもの Jestとは？ React Testing Library(RTL)とは？ ユニットテストの構築 結合テストの構築 JestとRTLのモック スナップショットのテスト 最後に テストとは テストは、アプリケーションとやり取りして、そのすべての機能と機能が意図したとおりに動作することを確認する行為またはプロセスです。 また一般に、「手動テスト」と「自動テスト」の2種類のテストがあります。 ・ 手動テスト： 手動テストは、テストを人間が手動で実行する手法です。 手
Reactを使用したシンプルな計算機アプリの作成 | 初心者向け四則演算対応 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
はじめに プロジェクトの作成 状態管理とリアルタイム表示の実装 数字ボタン処理 四則演算子ボタン処理 小数点ボタン処理と重複防止の実装 バックスペースボタン処理と入力値の編集機能の実装 クリアボタン処理とリセット機能の実装 計算ボタン処理とエラーハンドリング 安全な四則演算の評価 表示部分の実装 初心者向けのスタイリング例 コード保守性向上のリファクタリング 最後に はじめに この記事では、Reactを使用してシンプルな計算機アプリを構築する手法を紹介します。 このアプリは、iOSのiPhone電卓アプリに似たデザインを持っており、特に初心者に向けたプロジェクトです。 今回作成するReactベースの計算機アプリは、使いやすさを重視し、iOSの電卓アプリに見られるような操作感を提供します。コードはシンプルで分かりやすく保守性が高くなるように設計しています。 以下のデモを通じて、この記事で紹介
React.js初心者におすすめ！CDNを使って簡単にReactプロジェクトを始めよう - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
React.jsプロジェクトのセットアップは初心者にとって非常に時間がかかる手順であり、特にReactエコシステムの初心者の場合はより困難となります。 しかし、一般的にはcreate-react-app(CRA)を使用してReact.jsアプリケーションを作成することが推奨されています。 CRAは、正確なnpmバージョンやReact関連ライブラリなどの心配をする必要がなく、npx create-react-appのようなコマンドを使用するだけでReactプロジェクトを構築することができます。 CRAはReactプロジェクトの構築に非常に便利なツールであり、事前に学習しなくても簡単に始めることができます。 ただし、初心者がCRAを使用してReactプロジェクトを構築する場合、npm startコマンドがエラーで実行されないなどの問題に遭遇することがあります。 このような問題は、package
A Scheme Primer
The following is a primer for the Scheme family of programming languages. It was originally written to aid newcomers to technology being developed at The Spritely Institute but is designed to be general enough to be readable by anyone who is interested in Scheme. This document is dual-licensed under Apache v2 and Creative Commons Attribution 4.0 International and its source is publicly available.
React Server Components【RSC】とは？ - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
RSCとは？ 利点 サーバーとクライアントのコンポーネント分割と仕組み 適用ルール SSRとの違い 最後に RSCとは？ ※ RSCはまだReactチームにより開発中であり、本番環境にはまだ推奨されていないことに注意してください。 つまり、実験段階にあるためこの機能の実装の詳細は今後変更される可能性があります。 React Labs: 私たちが取り組んでいること – 2022 年 6 月 React-Server-Components（RSC）は、Reactアプリのパフォーマンスを向上させるために開発された方法であり、サーバー側でレンダリングされるReactコンポーネントを作成することができます。 ただし、RSCはサーバーサイドレンダリング（SSR）ではなく、SSRの代替手段でもありません。 これらの名前には両方に「サーバー」という言葉が含まれているため、混同されることがありますが、実際に
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
JavaScriptクラスの基礎： ES6とES7のクラス構文の使い方と仕組みを解説 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
本日のチュートリアルはJavaScriptのクラスについて学習します。 JavaScriptクラスを学習し始めたあなたは中級者レベルに到達しています。 Reactなどの一般的なJavaScriptライブラリはクラス構文を頻繁に使用するため、クラスに精通していると非常に役立ちます。 本日はES6クラス構文およびES7クラス構文の解説を致します。 JavaScriptにおけるクラスとPrototypeの違いは、他の記事として取り扱いますが、Prototypeについて精通していない初心者様もいらっしゃるかと思いますので短めに解説します。 この記事では、すでに（Prototype）および（this）にある程度精通している方を対象としている事をご理解ください。 Prototypeとは？ クラスとは？ JavaScriptクラス構文 初期化 クラスのインスタンス化 クラスのメソッド 静的メソッド クラ
ReactとJQueryを共存する方法と注意点 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
ReactでJQueryを使用できるのか？ ReactでJQueryを使用する正しい方法 JQuery CDNリンク ReactでJQueryが推奨されない理由 最後に JQueryは、JavaScript開発者が使用する最も有名なライブラリの1つであり、長年にわたって開発者に役立ってきました。 このライブラリは、DOM操作やアニメーションなどを簡単に実行する方法を提供します。 その人気のため、多くのWeb開発者はそれに精通しており、できる限りJQueryを使用することを好みます。 ただし、Reactとフレームワーク(Next.jsなど)は、コードのパフォーマンスと保守性を支援するためのより最新の機能を提供しています。 ほとんどの分野でJQueryよりも優れており、Reactの未来の方が明るいので、開発者はもっと早くReactに移行しなければならないかもしれません。 Reactは間違いなく
React 18について 知っておくべき事 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
変更点と新機能 React v18 同時レンダリング useTransitionフック useDeferredValueフック useIdフック useSyncExternalStoreフック useInsertionEffectフック 自動バッチ処理 サーバー上のサスペンス まとめ 最近ではReact 18がリリースされたばかりです。 React 18は2022年3月29日にリリースされました。 当ブログでは知っておくべき必要のあるすべてを解説していきます。 このリリースでは、いくつかの明確で根本的な変更を加え、これらには内部での重要な変更と多くの新しいAPIが含まれております。 React 18はこの新しいバージョンに更新するために必要なコードの変更は1つだけです。 それでもいくつかの既存の新しい概念が導入されています。 変更点と新機能 npx create-react-app rea
React-Queryとは？使い方と重要性を分かりやすく解説 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
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コードベース用に構築されたライブラリであり、ネットワークリクエストを作成する際に従うべきす
Next.js 入門 useRouter 基礎 ルート制御 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
ルーティングとは useRouterとは？ メソッド オプションのデコレータ useRouter使用例 最後に ルーティングとは ルーティングは、Webへのハイパーリンクと同様に、各Webアプリケーションの重要な側面となっております。 それは、リクエストを処理するコードにリクエストをルーティングするメカニズムとなっているのです。 ルーティングに関連してNext.jsページは一意のURLパスによって参照および識別できます。 簡単に言ってしまえば、ルーティングはユーザーがWebサイトのさまざまなページに移動する為のプロセスです。 pagesディレクトリからデフォルトでエクスポートされたReactコンポーネントとなります。 当ブログの記事では、Next.jsでのルーティングについて知っておく必要のあるルーティング方法を初学者様に解説していきます。 前回では静的および動的ページを作成するLink、
React 状態管理ライブラリReduxとは【仕組みと使い方】入門 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
当ブログの記事でReact学習されている読者様やそうでない初心者様もReactを学び始めて、Reduxという用語を何度も聞いたことがあるかもしれません。 特にWeb開発の世界に不慣れな方は、名前を聞いたことがあるかもしれませんが、ほとんどの方々は『 Reduxとは何ですか? 』と疑問に思っている方も多くいらっしゃるかと思います。 それを解決し、仕組みと使い方を学んでいきましょう。 この記事では、Reduxとは何かを説明し、その主な機能について説明します。 Reduxとは？ Reduxの仕組み Reduxのアクション Reduxのディスパッチ Reduxのreducer ReduxのStore Reduxはまだ正しい選択なのか？ 最後に Reduxとは？ Reduxは、Reactアプリケーションの状態管理ライブラリであり、アプリケーション内の状態をより効率的に管理するために使用されます。 毎
React テストライブラリ 基礎 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
Reactコンポーネントとアプリケーションの堅実なテストを作成するために必要なすべてを学びましょう。 本日ではコードの書き方の前にReactコンポーネントをテストするために設計された人気のあるライブラリまたはフレームワークをご紹介していきます。 なぜ使用するのか？ Reactでのアプリケーションを自信を持ってリリースしたい場合、そしてもちろんそうしている場合は、変更がユーザーに届いたときに何も壊れていないことを完全に確認するための優れたテストが必要です。 適切に機能するアプリケーションを構築するにはテストは必要不可欠となります。 軽量ライブラリは、ユーザーと同じようにコンポーネントを使用するテストを生成し、開発者にアプリケーションがユーザーに公開されたときに機能しますという確信を与えます。 つまりReactコンポーネントをテストしてReactコンポーネントを完全に信頼する方法という事です。
Reactでのスタイリングする方法 【CSS】 基礎 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
CSSを使用したReactでのスタイリング CSS Modulesとは CSS Modulesの作成 ReactでCSSを扱う方法について、初学者の方に向けて、利点やデメリットも含めてご紹介したいと思います。 ReactでCSSのスタイルを設定する方法は、いくつかあります。 そこで、本記事では複数の方法について解説していきます CSSを使用したReactでのスタイリング Reactにおけるスタイリングには、インラインスタイルや外部CSSファイル、CSSモジュールなどがあります。 インラインスタイルを使用する場合、値はJavaScriptオブジェクトとして渡す必要があります。 例えば以下のように、スタイルをJavaScriptオブジェクトとして定義して、要素に適用することができます。 const myStyles = { width: 400, height: 100, borderRadi
Tang Primerの使い方 中華格安FPGA；Tang Primerの使い方、入門編です．動かそうとしたところハマってしまったので解決してLチカするまでを書きます． Tang Primer 環境 windows10 Anlogic TD(IDE) となっています．Tang PrimerはTDというIDEで論理合成などを行います．このソフトはWindowsの他，Linuxにも対応しているらしいです．（研究室の仲間がArchLinuxで動かしていました） FPGAボードにしては非常に安く，2500円と激安！！！！使う予定もないのに買ってしまいました．性能をみると全然悪くなく，そこそこのものなら動かせそう．IDEも公式が配布しているようです． ラス1ゲット pic.twitter.com/0xljpbpcZv— fumi (@fumi_maker) February 12, 2020 みんな
Transformer-based models have pushed state of the art in many areas of NLP, but our understanding of what is behind their success is still limited. This paper is the first survey of over 150 studies of the popular BERT model. We review the current state of knowledge about how BERT works, what kind of information it learns and how it is represented, common modifications to its training objectives a
プログラミング初心者にオススメの最初の言語は何？現役プログラマーが解説 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
最初に学ぶプログラミング言語は… オススメの理由 多用途 学ぶ環境 ジョブ 他のオススメ言語 最後に 現役プログラマーである、筆記者が1番オススメする言語および初心者に最適なプログラミング言語をいくつかご紹介したいと思います。 初心者がどのプログラミング言語を選び、学んでいくべきか迷っていることがあるかと思います。 今回は、現役プログラマーである筆者が、オススメしたい言語や初心者に最適なプログラミング言語をいくつか紹介したいと思います。 なお、この記事で紹介する言語は、私個人がオススメするものであり、他のプログラマーの意見と異なる場合がありますので、ご了承ください。 あくまでも、参考程度にしてください。 最初に学ぶプログラミング言語は… 最初に学ぶべきプログラミング言語として、私が強くオススメするのは、「JavaScript」です。 フロントエンドのエンジニアの方々のほとんどが共感している
初心者向け！Node.jsとJavaScriptで簡単に学ぶWebサーバーの作成方法 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
この記事では、フレームワークを使用せずに純粋な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 Primer - 迷わないための入門書 #jsprimerの第二版の出版に向けて準備しています。 そこで、第二版のレビュアーをしてくれる方を募集しています。次のDisucssionで募集しています。 ひとまず集まりました。ありがとうございます！ 第二版のレビュアーを募集 · Discussion #1546 · asciidwango/js-primer 初版である第一版のリリース内容は次の記事にまとめています。 JavaScript Primerを出版しました！/JavaScript Primerはなぜ書かれたのか？ | Web Scratch 初版からの主な変更点をまとめると、次のようになります。 ECMAScriptの新しいバージョンであるES2020、ES2021、ES2022に対応した 新しいECMAScriptの機能によって、使う必要がなくなった機能は
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2020-09-08のJS: Chrome 86ベータ、Underscore 1.11.0(ESM)、JavaScript Primer v2
Release v4.0.0: ES2022 · asciidwango/js-primer
話題のFPGAボード: Tang PrimerをWindows10でLチカする - fumiLab
A Primer in BERTology: What we know about how BERT works
JavaScript Primer 第二版のレビュアーを募集