表記のとおり、Map型でループしてコンポーネントを返したい場合、 function Qiita(props: { chikyuwaMawaruMap: Map<Date, Unit> }) { return ( //NG Map<>型でループできる方探してたらforEach があったのでreturn returnで返るのかなと憶測で考えていたけどだめでした。Object.entries() する必要があるみたいです。 return ( {props.chikyuwaMawaruMap.forEach((value, index) => { return(<JikkoWaSarerukedoReturnSarenai />) }} ) //OK {Array.from(props.chikyuwaMawaruMap.entries()).map((entry, index) => { Return (<SampleComponent />); }} //FYI interface Map<K, V> { clear(): void; delete(key: K): boolean; forEach(callbackfn: (value: V, key: K, map: Map<K, V>) => void, thisArg?: any): void; get(key: K): V | undefined; has(key: K): boolean; set(key: K, value: V): this; readonly size: number; }
表記のとおり、Map型でループしてコンポーネントを返したい場合、
function Qiita(props: { chikyuwaMawaruMap: Map<Date, Unit> }) { return ( //NG Map<>型でループできる方探してたらforEach があったのでreturn returnで返るのかなと憶測で考えていたけどだめでした。Object.entries() する必要があるみたいです。 return ( {props.chikyuwaMawaruMap.forEach((value, index) => { return(<JikkoWaSarerukedoReturnSarenai />) }} ) //OK {Array.from(props.chikyuwaMawaruMap.entries()).map((entry, index) => { Return (<SampleComponent />); }} //FYI interface Map<K, V> { clear(): void; delete(key: K): boolean; forEach(callbackfn: (value: V, key: K, map: Map<K, V>) => void, thisArg?: any): void; get(key: K): V | undefined; has(key: K): boolean; set(key: K, value: V): this; readonly size: number; }
Reactを触ってみたいけど、 ちょっと敷居高そうだな～ 環境作るのめんどくさそうだな～ と思っているあなたへ。 ちょっと試してみたいだけなら、とても簡単に環境を用意できます。 以下のコードをHTMLファイルとして保存し、ブラウザで表示してみてください。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>easy react</title> </head> <body> <div id="root"></div> <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <script type="text/babel"> class HelloWorld extends React.Component { render() { return ( <h1> {this.props.text} </h1> ) } } ReactDOM.render( <HelloWorld text="HelloWorld!!" />, document.getElementById("root") ); </script> </body> </html> HelloWorld!!と表示されたと思います。 簡単ですね。 ちょっと試してみたいだけなら、これでも十分です。 しかし、このままではVSCodeでオートフォーマットが効きません。 <script type="text/babel">を<script type="text/javascript">に書き換えることで、オートフォーマットが効くようになります。 コードを書いているときはtext/javascript、実行するときはtext/babelといった具合に使い分けましょう。 興味が湧いたら、ぜひ公式へ！ React 公式ページ
Reactを触ってみたいけど、
と思っているあなたへ。
ちょっと試してみたいだけなら、とても簡単に環境を用意できます。 以下のコードをHTMLファイルとして保存し、ブラウザで表示してみてください。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>easy react</title> </head> <body> <div id="root"></div> <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <script type="text/babel"> class HelloWorld extends React.Component { render() { return ( <h1> {this.props.text} </h1> ) } } ReactDOM.render( <HelloWorld text="HelloWorld!!" />, document.getElementById("root") ); </script> </body> </html>
HelloWorld!!と表示されたと思います。 簡単ですね。 ちょっと試してみたいだけなら、これでも十分です。
HelloWorld!!
しかし、このままではVSCodeでオートフォーマットが効きません。 <script type="text/babel">を<script type="text/javascript">に書き換えることで、オートフォーマットが効くようになります。 コードを書いているときはtext/javascript、実行するときはtext/babelといった具合に使い分けましょう。
<script type="text/babel">
<script type="text/javascript">
text/javascript
text/babel
興味が湧いたら、ぜひ公式へ！ React 公式ページ
swift Objective-cは敷居が高い。 使い慣れたVS Codeでコーディングがしたい。 はじめは簡単なアプリ作りたい そんな方にReact Native ※少しReactかじった方が良いかも 環境 mac XCode シュミレーター必須 React Nativeのはじめ 公式チュートリアル Expoの方ではなく、「React Native CLI Quickstart」を実施 homebrewで各インストール brew install yarn brew install node brew install watchman brew tap AdoptOpenJDK/openjdk brew cask install adoptopenjdk8 npmでreact-native-cliをグローバルへインストール npm install -g react-native-cli ソースを置くフォルダでinitして実行 react-native init AwesomeProject cd AwesomeProject react-native run-ios Reactのモジュールが無いよとビルドエラーになった場合、以下のコマンドで、モジュール取得して再ビルドしたらいけた。 cd ios pod install こちら参考 動いたあとは、App.jsを修正していくことでアプリの開発が行える。 簡単
そんな方にReact Native ※少しReactかじった方が良いかも
公式チュートリアル
Expoの方ではなく、「React Native CLI Quickstart」を実施
brew install yarn brew install node brew install watchman brew tap AdoptOpenJDK/openjdk brew cask install adoptopenjdk8
npm install -g react-native-cli
react-native init AwesomeProject cd AwesomeProject react-native run-ios
Reactのモジュールが無いよとビルドエラーになった場合、以下のコマンドで、モジュール取得して再ビルドしたらいけた。
cd ios pod install
こちら参考
動いたあとは、App.jsを修正していくことでアプリの開発が行える。 簡単
似たような用語とか言葉が多く、よくわからなかったので簡単に調べてみました。それぞれは詳しく調べてないので間違っていたらすみません。 上から順番に見ていくとそれぞれの関係性がわかるかと思います。 英単語としてのReactive 反応する、反発する、状況の変化に対応するなどの意味 reactiveの意味・使い方｜英辞郎 on the WEB：アルク Reactive Programming reactive programmingはデータフロー指向のプログラミングパラダイム 手続き型とかオブジェクト指向とかあるけどそういうレベルで異なるコンセプトのプログラミング手法ってことかな？ リアクティブプログラミングへの理解がイマイチだったのでまとめてみた - UUUM攻殻機動隊(エンジニアブログ) それを関数型に落とし込んだのがFRP（Functional Reactive Programming）？ * FRPライブラリを作ってわかった、FRPの意味と意義 - Qiita Rxとは Rxはc#のライブラリであるReactiveExtentionの略 RPを実現させるためのライブラリ（正確にはちょっと違うかも？） はじめてのRx超入門 - Qiita ReactiveExtensionはFRPのバリエーションの一つらしい 関数型プログラマのための Rx 入門（前編） - Okapies' Archive Rxの各言語への拡張 Rxの思想は秀逸で他の言語へも拡張 RxJS、RxJava、RxSwift… リアクティブプログラミングの概観と、各言語での実装について | ALTUS-FIVE 各言語に広まったRx（Reactive Extensions、ReactiveX）の現状・これから - Build Insider RxJS / Reactive Extensions とは - Qiita Reactとは React - Wikipedia Facebookが開発しているUI用のJSライブラリ（フレームワーク？） 名前の由来や関係性として、ReactもRP/FRPを表現する仕組みがあるのでReactなのかな？ React入門 - Qiita あくまでFacebookのような常に状態が変更される（リアクティブ）サイトのためのライブラリだからReactなのかも Why is React called React? - Quora React Native ReactをNative系（Android、iOS、UWP）に拡張したもの
似たような用語とか言葉が多く、よくわからなかったので簡単に調べてみました。それぞれは詳しく調べてないので間違っていたらすみません。 上から順番に見ていくとそれぞれの関係性がわかるかと思います。
反応する、反発する、状況の変化に対応するなどの意味
reactive programmingはデータフロー指向のプログラミングパラダイム 手続き型とかオブジェクト指向とかあるけどそういうレベルで異なるコンセプトのプログラミング手法ってことかな？
それを関数型に落とし込んだのがFRP（Functional Reactive Programming）？ * FRPライブラリを作ってわかった、FRPの意味と意義 - Qiita
Rxはc#のライブラリであるReactiveExtentionの略 RPを実現させるためのライブラリ（正確にはちょっと違うかも？）
ReactiveExtensionはFRPのバリエーションの一つらしい
Rxの思想は秀逸で他の言語へも拡張 RxJS、RxJava、RxSwift…
Facebookが開発しているUI用のJSライブラリ（フレームワーク？）
名前の由来や関係性として、ReactもRP/FRPを表現する仕組みがあるのでReactなのかな？
あくまでFacebookのような常に状態が変更される（リアクティブ）サイトのためのライブラリだからReactなのかも
ReactをNative系（Android、iOS、UWP）に拡張したもの
NextJS + TypeScript 環境構築手順の備忘録です。バージョンはNext9.0.7。 公式: Learn - TypeScript | Next.js 手順 プロジェクトディレクトリを作成してパッケージをインストールします。 パッケージ: react react-dom next typescript @types/react @types/react-dom @types/node mkdir next-ts cd next-ts mkdir pages touch pages/index.tsx yarn add react react-dom next typescript @types/react @types/react-dom @types/node package.json の scripts を追加します。 package.json ... "scripts": { "dev": "next", "build": "next build", "start": "next start" } ... 動作確認 pages/index.tsxで動作を確認します。 pages/index.tsx const IndexPage = () => <h1>Helloworld!</h1>; export default IndexPage; npm run dev 初回起動時にnext-env.d.tsとtsconfig.jsonが生成されます。 TypeScriptが効いているか確認します タイプチェックをストリクトモードにしてみます。 tsconfig.json ... "strict": true, ... pages/index.tsx const IndexPage = ({ userAgent }) => ( <h1>Hello world! - useragent: {userAgent}</h1> ); IndexPage.getInitialProps = async ({ req }) => { const userAgent = req ? req.headers['user-agent'] : navigator.userAgent; return { userAgent }; }; export default IndexPage; VS CodeにTypeScriptプラグインを入れている場合はエディタ側にエラー表示がでていると思います。 サーバーをnpm run devで再起動します。 ブラウザとターミナル両方にエラーがでます。 最後にタイプエラーを修正して終わりにします。 pages/index.tsx import { NextPage } from 'next'; const IndexPage: NextPage<{ userAgent: string }> = ({ userAgent }) => ( <h1>Hello world! - useragent: {userAgent}</h1> ); IndexPage.getInitialProps = async ({ req }) => { const userAgent = req ? req.headers['user-agent'] || '' : navigator.userAgent; return { userAgent }; }; export default IndexPage;
NextJS + TypeScript 環境構築手順の備忘録です。バージョンはNext9.0.7。
NextJS
TypeScript
Next9.0.7
公式: Learn - TypeScript | Next.js
プロジェクトディレクトリを作成してパッケージをインストールします。 パッケージ: react react-dom next typescript @types/react @types/react-dom @types/node
react
react-dom
next
typescript
@types/react
@types/react-dom
@types/node
mkdir next-ts cd next-ts mkdir pages touch pages/index.tsx
yarn add react react-dom next typescript @types/react @types/react-dom @types/node
package.json の scripts を追加します。
package.json
scripts
... "scripts": { "dev": "next", "build": "next build", "start": "next start" } ...
pages/index.tsxで動作を確認します。
pages/index.tsx
const IndexPage = () => <h1>Helloworld!</h1>; export default IndexPage;
npm run dev
初回起動時にnext-env.d.tsとtsconfig.jsonが生成されます。
next-env.d.ts
tsconfig.json
タイプチェックをストリクトモードにしてみます。
... "strict": true, ...
const IndexPage = ({ userAgent }) => ( <h1>Hello world! - useragent: {userAgent}</h1> ); IndexPage.getInitialProps = async ({ req }) => { const userAgent = req ? req.headers['user-agent'] : navigator.userAgent; return { userAgent }; }; export default IndexPage;
VS CodeにTypeScriptプラグインを入れている場合はエディタ側にエラー表示がでていると思います。
VS Code
サーバーをnpm run devで再起動します。
ブラウザとターミナル両方にエラーがでます。
最後にタイプエラーを修正して終わりにします。
import { NextPage } from 'next'; const IndexPage: NextPage<{ userAgent: string }> = ({ userAgent }) => ( <h1>Hello world! - useragent: {userAgent}</h1> ); IndexPage.getInitialProps = async ({ req }) => { const userAgent = req ? req.headers['user-agent'] || '' : navigator.userAgent; return { userAgent }; }; export default IndexPage;
