Webの基礎を学びながらReact Hooksでポートフォリオサイトを作ろう

本教材は作成者自身のGithubアカウントの情報をもとに、ポートフォリオサイトを作成しながら、Web技術の基礎からJavaScript(ES6)、Reactの基礎を学びます。まだReactを触ったことがない、あるいは学び始めているという方向けの内容です。

ただ単にReactを書くだけ、ではありません。

「Webとは何か？」「HTTP通信はどのように行われているのか？」「ライブラリとは何か？」を具体例を用いながら解説していきます。一見説明が冗長と思われるかもしれませんが、今後必ず必要となる基礎知識です。もちろんこれだけでなく、実際に現場でWebフロントエンド開発を行う際に注意すべきポイントなども合わせて解説していきます。

本教材が終えたらどのような状態になっているか

Webアプリケーション開発に必要な基礎知識、技術を理解し、Reactアプリケーションを作れることを目指します。

• Webの技術の基礎を理解できる
• Reactアプリケーションの基礎を理解し、また書くことができる

受講における必要条件

• エディタやターミナルの基本的な使い方が分かること
• HTML/CSSの基礎知識(<div> <p>や padding: 0 display: flex などがわかること)
• Githubアカウントを作ること(推奨)

本教材の対象者

• プログラミング初学者(HTLMやCSS, JavaScriptの文法を学習中)
• Reactの基礎を学習したい方

学ばないこと

HTML,CSS,JavaScriptの発展的な内容は学びません。アプリケーション開発に必要な部分を重点的に学習します。
ただし適宜参照先文献を掲載するため、そちらとセットで学習することで基礎〜応用までを広くカバーできるようにします。

本教材の対応OS

• Mac OS

本教材の対応バージョン

• React 18.2.0

その他バージョンでも問題なく動作しますが、念の為バージョンを合わせて進めていただくことを推奨します。

作成するアプリケーションのイメージをつかもう

すぐに自分のポートフォリオサイトとして公開できるよう実装〜公開までをカバーします。

ご自身のGithubアカウントがあればそちらを参照することで、スキルをポートフォリオ上に表示することができます。

React(Hooks)を使いながらこれらを作成していきます。

所要時間(目安)

Reactが初めてという方でも10時間ほどで完成できるかと思います。

学習における注意点

実装においては必須ではありませんが、デプロイ(公開)までにはGithub以外にもサービスのアカウント登録が必要となります(無料で利用可能)。

執筆者について

株式会社アトラエにてSaaSアプリケーションの開発の仕事をしつつ、趣味で個人開発(アプリケーション開発、OSSなど)をしています。普段はReactとTypeScript、サーバーサイドはRuby on Railsを書いています。非エンジニア職から独学でいまに至るため、「わかりやすさ」を意識して伝えるよう心がけています。

目次

0章 はじめに

実装を始めるまでに必要な環境構築などをお話しします。すでにNodeの環境がある方などは読み飛ばしていただいて構いません。

第1章 Webの基礎

まず本格的に実装に入る前にWebの基礎を学習します。普段何気なく見ているWebページがどうやって表示されているのか？またその中身ではどんなことが起きているのか？を具体例を確認しながら学んでいきます。

第2章 JavaScript

JavaScriptの基礎文法をおさらいします。実際のアプリケーション開発に入る前にES6と呼ばれるJavaScriptの規格のものを中心に学習します。ここもすでにご存知の方はさらっと読む程度で構いません。

第3章 Reactプロジェクト作成

実際にアプリケーション開発を進めていきます。まずはReactの基礎を中心として、手を動かしながら学ぶというステップです。3章の最後ではまだ途中ですが、デプロイをするところまでいきます。

第4章 ポートフォリオサイト作成(基礎)

4章ではデプロイされたものに対して、追加修正という形で完成までもっていきます。実際の現場での開発もこの流れが基本で、完成されたものに追加で修正をして、それを適宜デプロイするというやり方を学習の中でも意識して行います。

第5章 ポートフォリオサイト作成(発展)

Axiosを使ってAPIと通信をし、そのレスポンスを見た目に反映するところを集中的に学習します。React Hooksでデータをシンプルに管理します。React Hooksを知らない、という方でも実装を進められるように適宜解説をはさみながら完成を目指します。

以上で今回のパートは終了です。

お疲れ様でした。