「基礎からはじめるReact入門」連載一覧
-
2018/11/29Next.jsのシングルページアプリケーションをデプロイして、基本をマスターする
前回は、サーバーサイドレンダリングに対応した、プロジェクトのセットアップの方法を解説しました。最終回となる今回は、作成したプロジェクトをデプロイしてから、Next.jsの基本的な使い方について解説していきます。
-
2018/11/09Next.jsのサーバーサイドレンダリングで、シングルページアプリケーションの課題を解消
シンプルに構成されたシングルページアプリケーションでは、サーバーはファイルを配信するだけで、画面を組み上げるための処理はブラウザ側で行われます。この方式におけるいくつかのデメリットを埋めるために考案されたのが、ある程度の画面構築をサーバー側で行う、サーバーサイドレンダリングです。今回は、サーバーサイドレンダリングの概要と、実際に使う場合のフレームワークの解説を行います。
-
2018/10/04Firebase Hostingでアプリを本番環境にデプロイする
Webアプリケーションは、インターネット上に配置（デプロイ）して世の中に見える状態にしてこそ、意味のあるものです。今回は、create-react-appで生み出したプロジェクトを本番環境向けにビルドし、サーバーにデプロイすることを目的とします。近年ではWebアプリケーションをホスティングしてくれる便利なサービスがいくつかありますが、今回はFirebase Hostingの使い方を紹介します。
-
2018/09/07Reduxにおける同期的／非同期的なAction Creatorをテストする
前回はJestを用いて、同期的な処理であるReducerのテストを行う方法を学びました。今回はAction Creatorのテストについて解説します。同期的な処理のテストだけではなく、一歩踏み込んだ、非同期処理を伴うAction Creatorをテストする方法についても学ぶことを目的とします。
-
2018/08/21Reduxで作成したロジックをJestでテストする
Reactアプリ開発の基礎を解説してきた本連載。前回までは、Reduxの概念や実装について学んできました。今回は、ReducerやActionCreatorのロジックの品質を担保する上で有用なユニットテストの方法を覚えることを目的とします。
-
2018/07/17Reduxで非同期処理を行う～ES2017のasync/await構文を使って実装する方法
Reactアプリ開発の基礎を解説してきた本連載。前回の第9回では、Reduxに備わったMiddlewareの仕組みを使って非同期処理を実現する方法について学びましたが、Middlewareを使わずに非同期処理を実現する方法もあります。今回は、ECMAScript 2017のasync/await構文とReduxを併用しながら非同期処理を実現する方法について学んでいきます。
-
2018/06/15Reduxで非同期処理を行う～Middlewareを使って実装する方法
第8回ではFluxの概念を紹介しながらReduxの基本的な使い方を学びましたが、Reduxを実際の業務で使う場合には、実践的なノウハウが必要になります。今回は、よりReduxを現場で使えるツールとして活用するために、Middlewareの仕組みを導入しながら、外部との通信を行う際に必須となる非同期処理を行う方法について学ぶことを目的とします。
-
2018/04/09アプリの状態管理を安全に行うためのFluxとRedux
Reactはコンポーネントを組み合わせて開発を行うことで、保守性の高いアプリケーションを実現できるライブラリです。同時に、優れたUIを提供するライブラリでもあります。今回は、Propsの型を定義することでコンポーネントの可用性を向上させる方法を学びましょう。
-
2018/03/30「prop-types」でPropsのデータ型を担保する
Reactはコンポーネントを組み合わせて開発を行うことで、保守性の高いアプリケーションを実現できるライブラリです。同時に、優れたUIを提供するライブラリでもあります。今回は、Propsの型を定義することでコンポーネントの可用性を向上させる方法を学びましょう。
-
2018/03/02Storybookでコンポーネントの品質を向上する
Reactはコンポーネントを組み合わせて開発を行うことで、保守性の高いアプリケーションを実現できるライブラリです。同時に、優れたUIを提供するライブラリでもあります。今回はStorybookというツールの使用方法を利用してコンポーネントのカタログを作ることで、高速に動作確認を行う方法を学びましょう。
-
2018/02/01React Routerで複雑な画面遷移をシンプルに実装する
Reactはコンポーネントを組み合わせて開発を行うことで、保守性の高いアプリケーションを実現できるライブラリです。同時に、優れたUIを提供するライブラリでもあります。今回はライブラリ「React Router」を利用して、GUIアプリケーションには欠かせない画面遷移とURLの管理を行う方法を学びましょう。
-
2017/12/28Reactによるフォーム／リストの基本
Reactはコンポーネントを組み合わせて開発を行うことで、保守性の高いアプリケーションを実現できるライブラリです。同時に、優れたUIを提供するライブラリでもあります。今回はJavaScriptでステートフルなアプリケーションを実装しながら、「リスト」と「フォーム」のWebアプリケーションに欠かせない要素を学びましょう。
-
2017/04/12React×Material-UIでモダンなUIを実装する
Reactはコンポーネントを組み合わせて開発を行うことで、保守性の高いアプリケーションを実現できるライブラリです。同時に、優れたUIを提供するライブラリでもあります。前回はReactコンポーネントの基本であるPropsとState、およびライフサイクルについて解説しました。本稿ではデザイン性をアップさせてくれるサードパーティー製のコンポーネントセット、Material-UIの使用方法について紹介します。Material-UIは、Googleのデザインガイドラインに則って開発されたコンポーネント...
-
2017/02/09Reactコンポーネントへの理解を深める
Reactはコンポーネントを組み合わせて開発を行うことで、保守性の高いアプリケーションを実現できるライブラリです。同時に、優れたUIを提供するライブラリでもあります。本稿ではコンポーネントを使いこなすためには避けて通れない、PropsやState、およびライフサイクルについて解説します。
-
2017/01/04Reactの概要と基礎技術要素を理解する
本連載は、Reactアプリを開発するための基礎を身につけることを目的としたものです。Reactは、コーディング方法が少し独特なため、最初のハードルが高めに感じる方も多いかと思います。しかし、一度その方法を身につければ高い開発生産性を発揮します。本連載では、はじめてReactに触れる方でも無理なく開発スキルを身につけられるよう1つずつステップを踏んで解説していきます。連載では、Reactの概念・文法・作法などといった基礎的な事項を学んだ後、Fluxアーキテクチャを採用した本格的なアプリ開発の手法...
