React + TypeScript で

効率のいいランディングページ作成環境を構築する

​

Atsunori Kihara

自己紹介

Atsunori Kihara ソフトウェアエンジニア

​

最近やっていること

React + TypeScriptでのSPA・LP制作

React Native / Google Action Script / HASURA

など

概要

​

1. コンポーネントを使えば <div/> タグをもうコピーアンドペーストしなくていい！
2. スクロール位置に反応して表示するアニメーションの実装
3. useContext を使用した Form のバリデーションの実装

​

リポジトリ�https://github.com/atnr/react-ts-lp

デモ�https://react-ts-lp.vercel.app/

繰り返しdivを貼り付けたり

中身を書き換えたりするのに

消耗していませんか？

​

例えばこういうの

5個続いたら？ 20個続いたら？

辛くない？

データとビューを分ける

解決策

方法

同じフォーマットのコンテンツはJSONに各項目を書く

{� "title": "Aenean commodo ligula eget dolor",� "description": "Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. ",� "imagePath": "/images/plants.jpg"� }

表示部のHTMLはカードコンポーネントに一度書くだけでよい

​

スクロール位置をトリガーとして

アニメーションさせながら要素を表示したい

InteractionObserverを使う

解決策

react-inview-monitorとanimate.cssを使う

react-inview-monitorがInteraction Observerの面倒なことをやってくれる

要素が画面に入ったらトリガーしてクラス名を付与

アニメーションはanimate.cssを使う、基本的なアニメーションはカバー可能

TypeScriptの型定義エラーは自分で型定義かけば回避可能

Polyfillはpolyfill.ioを使うと楽

フォームデータのバリデーションを

かんたんに実現したい

React Contextを使ってフォームを作る

解決策

React Contextとは

Providerで囲まれた他のコンポーネントを値を共有する仕組み。

<Provider>

この中にあるコンポーネントで値が共有可能

</Provider>

useContextを使うとProvider以下に存在するコンポーネントで値を読み書きできる

フォームでContextを使うメリット

常にコンテキストに最新のデータが格納されて逐次バリデーションが可能

​

=>入力欄を全て埋めたら、送信ボタンが押せるようになる

Contextに何が入っているかはインスペクタで確認できる

結論

SPA(Single Page Application)だけでなくLP制作にReactが使える

カルーセルやパララックスなどのコンポーネントがNPMにある

jQueryなどを使わずにモダンな環境でLP制作ができる

レガシーなデプロイ環境(FTPなど)でも問題ない

【重要】コンポーネント化で再利用や自動化が捗り工数が削減できる

​

参考資料

Create React App - Adding TypeScript https://create-react-app.dev/docs/adding-typescript/

Context - React https://reactjs.org/docs/context.html

map() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

animate.css https://animate.style/

react-inview-monitor https://www.npmjs.com/package/react-inview-monitor

Ambient Modules https://www.typescriptlang.org/docs/handbook/modules.html

​