TypeScript/React/Next.jsおすすめ学習資料のご紹介
はじめに 今回は、現代のWEB開発で最も使用されている言語/フレームワークであるTypeScript/React/Next.jsについて学ぶために、私がおすすめしたい学習資料についてご紹介したいと思います。 非常に有用で、初心者から中級者、上級者まで幅広い層に向けた内容が含まれていますので、時間を見つけて是非読んでみてください。 ※TypeScript/React/Next.jsって何？という方のために、簡単に以下にそれぞれご説明いたします。 TypeScript Microsoftが開発した、JavaScriptを拡張したプログラミング言語。JavaScriptに比べ、型安全性の向上によるエラーの早期発見や、型注釈でコードの意図を明確にすることによる可読性/メンテナンス性の向上が期待できる。現代のWEB開発においては、ほとんどの開発者がJavaScriptからTypeScriptへ移行し
【最新版】フロントエンドを学べる最高の教材集 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに フロントエンドを学べる教材をまとめました。 今回紹介するフロントエンド技術は下記になります。 ロードマップ (全体像) JavaScript TypeScript React Next.js 対象者 これからフロントエンドを学びたい人 モダンフロント技術に挑戦したい人 ロードマップ (全体像) エンジニア向けの学習ロードマップがまとめられている。 現在の自分の立ち位置を把握し、次にやるべきことの方向性を知れる。 エンジニアが使うであろう、ほぼ全技術が網羅的にまとめられているので、全体像を掴む上では一度目を通す価値はある資料にな
2022年秋版 最新React/Typescript開発環境の作成 - Qiita
はじめに Reactの開発環境は、CRA(Create React APP)がよく使われますが、CRAは沢山のモジュールの整合性の確認などのため、アップデートがリリースされるまでの間隔が結構あります。 また、使われているモジュールをアップデートするとエラーに悩まされたりします。 ゼロからReactの開発環境を作成していたのですが、いろいろとトライを繰り返すうちに以下の方法に落ち着きました。 比較的短時間で環境が作成できますし、全て最新のモジュールが使えます。 Vite nodejsを用いたJavaSriptプロジェクトは、、Webpackなどでプロジェクト内のJavaScriptモジュールをひとつのファイルにまとめるバンドルと呼ばれる作業が必要でした。 これは、ブラウザがESモジュールに対応していないことや、ひとつのHTMLファイルから沢山のjsファイルをダウンロードさせると、その数だけア
フロントエンド界隈で新しく提唱されているT3 Stackについて調べてみた
T3 Stackとは 昨今のWeb開発ではTypescriptによる型安全なWebアプリケーションの開発を求められている。またバックエンドとフロントエンド、さらにBFFによる構成においていかに型安全で効率よく開発するかはWebアプリ開発において非常に重要な課題となっている。 そこでTheo氏によって「T3 Stack」という技術スタックが提唱された。 これは最近注目のWeb開発の技術スタックとなっている T3 Stackにおいては以下3つの思想に焦点が当てられている。 simplicity(簡潔さ) modularity(モジュール性) full-stack typesafety(フルスタックの型安全) そしてこれらの思想を実現するためにT3 Stackでは以下6つの技術を採用する Next.js tRPC Tailwind CSS Typescript Prisma NextAuth.j
【入門】フロントエンドのテスト手法まとめ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 自分は2021年に新卒でweb系の開発会社にフロントエンジニアとして入社し2022年で2年目になります。 実務ではReact×TypeScriptを利用したフロント周りの開発をメインで行なっていなす。 今回は実務でNext.jsプロジェクトにテストを導入することになり「React-Testing-Library」と「Jest」について改めて学び直したのでその内容を紹介します。 はじめに「React-Testing-Library」と「Jest」の概要を説明しその上で具体的なテストコードを何パターンか書いていきます。 この記事の
より良いReactJS開発者になるための10のヒントとコツ - Qiita
より良いReact開発者になり、より優れたコードを書き、コーディング面接で抜き出るため、Reactの技量を改善するすぐに使える知識です。 さあ、皆さん。始めましょう。 1. Reactフックを使った関数コンポーネント フックはReact v16.8で導入され、Reactの関数型プログラミングを大きく向上させました。Reactフックで、クラスコンポーネントの代わりに関数コンポーネントが使えますし、使うべきです。しかし...関数コンポーネントとステートとは？ライフサイクルメソッドとは？ 怖がる必要はありません。Reactフックを使えばできます。 例をいくつか見てみましょう。 これは、クラスを使う従来の方法です。次のようにuseStateフックが使えます。 簡単に見えますか？その通りです！useStateフックを使って、初期状態を空の文字列（''）に設定し、現在の状態（value）とその状態を変
Reactを学ぶときに役立つ情報・本など
React公式ドキュメントのチュートリアルは古くなっているので、TypeScriptやReact Hooksで開発することも考えて参照するときにおすすめできるサイトを置いておく。 ほかにも有益な情報はあると思うが、あまり多すぎても大変なので、被りがなさそうかつ有益だと思っているリンクに絞っている。 2021年11月30日に編集 React公式ドキュメントのリニューアルが公開されるまでの繋ぎ。 New React Docs · Issue #3308 · reactjs/reactjs.org https://github.com/reactjs/reactjs.org/issues/3308 React公式ドキュメントがBeta版で公開されています。まずはこちらを参照するといいと思います！
5歳娘「パパ、余分なpropsいっぱい書くんだね！」 - Qiita
新しい記事もよろしくやで！ 5歳娘「パパのReact、めっちゃ遅いね！」 とある平日 娘（5歳）「パパ、今日は何のお仕事してるの？」 ワイ「おお、娘ちゃん」 ワイ「今日はな、ショッピングサイトを作ってんのや」 今日のお仕事内容 ワイ「↓このデザインの通りに、コーディングをせなあかんのや」 娘「なるほどー」 娘「このショッピングサイトで商品を売りたい！っていうお店があったとして」 娘「そのお店の人が、最初にお店の情報を登録するためのページだね！」 ワイ「せやせや」 まずはデザインを眺めてみる ワイ「この店舗登録ページにはなぁ」 ワイ「↑こんな感じの」 ワイ「項目名と入力欄がセットになったパーツが何度も登場するから」 ワイ「そのためのコンポーネントを作ろうかなー、って」 ワイ「そう思ってたとこなんや」 娘「ふーん」 娘「ラベル付きテキストフィールド的なコンポーネントってことだね」 娘「どこまで
React を深く知るための入り口
Reactに対する見方をアップデートする 国内外の優れた開発者の方による React の各論の記事は枚挙にいとまがありません。しかし、React の入門を一通り終えた方に向けの浅く広い総論はあまり見かけません。 React の公式ドキュメントのトップページに掲載されている短い3つの文章があります。この React の本質を表現した文章を掘り下げることが、初学者のステップアップにつながるのではないかと考え、各章に対して注釈を加えました。 React について少し深く知ることで、さらに React を好きになったという方を一人でも多く増やしたい。その思いから本記事を執筆しました。 本記事は React の考え方を知ることで、React に対する見方をアップデートすることを目的としています。 Reactとは何か。それはUIを構築するためのJSライブラリである React公式ドキュメントの一文 R
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
