React-Router-Domを導入したい URLによって表示内容をフロント側で変更する「ReactRouterDom」について書いていきます。 今回使う環境はReact+RailsAPI環境です。 環境構築に関しては以下を参照してください。 インストール Reactをインストールしたディレクトリで以下のコマンドを実行して、React-Router-Domをインストールしてください。 ターミナル npm install react-router-dom 中略 + react-router-dom@5.2.0 added 340 packages from 91 contributors, removed 230 packages, updated 1458 packages and audited 1808 packages in 1537.164s 132 packages are looking for funding run `npm fund` for details found 0 vulnerabilities React－Router-Domを実装 以下のようにファイルにコードを書いていきます。 App.js //react-router-domで使うものをimportする import React from 'react'; import { BrowserRouter as Router, Switch, Route, } from "react-router-dom"; //切り替え先のcomponentをimportする import {SampleA} from './components/sampleA.jsx' import {SampleB} from './components/sampleB.jsx' import {SampleC} from './components/sampleC.jsx' function App() { return ( {/*全体を<Router><Switch>で囲む*/} 　<Router> <Switch> {/* <Route>で個々のルーティングを定義する */} <Route exact path="/sampleA"> <SampleA /> </Route> <Route exact path="/sampleB"> <SampleB /> </Route> <Route exact path="/sampleC"> <SampleC /> </Route> 　 </Switch> </Router> ) } export default App; Routeについて書きますと、今回のコードでは以下を使用しております。 Routeについて <Route exact path="/SampleA"> <SampleA /> </Route> exactを使用すると pathで指定したURLが完全一致したときのみ動作するようになります。 exactをつけないと、pathで指定したURLと部分一致で動作するようになります。 基本的にはexactをつけておいて、意図しないURLが発火した時に表示されないように制御するといいかなと思います。 pathに関しては、どういったURLに対して、動作するかを定義しています。 そして、URLが一致した場合、< Route>< /Route>の間に挟んだ処理を実行します。 切り替える先のjsxを定義する ここでは、< Route>< /Route>の中身、指定のURLを入力されると表示される画面の本体を書いていきます。 このようにAPP.jsに直接書かず、別ファイルに切り出すことで部品のようにコードを管理できます。 Routeで表示する中身を簡単に書いていきます。 src/components/SampleA.jsx import React, {Fragment} from 'react' export const SampleA = () => { return ( <Fragment> 　　　sampleAページ </Fragment> ) } src/components/SampleB.jsx import React, {Fragment} from 'react' export const SampleB = () => { return ( <Fragment> sampleBページ </Fragment> ) } src/components/SampleC.jsx import React, {Fragment} from 'react' export const SampleC = () => { return ( <Fragment> 　　　sampleCページ </Fragment> ) } 実装確認 実装したコードを動かしてみます。 npmstartコマンドを実行した後に、、http://localhost:3000/SampleAなど、pathに設定したURLにアクセスしてみましょう。 コードを動かす npm start ちなみに、http://localhost:3000 だと、path='/'と定義していないため、何もレンダリングされません。 適宜、表示させたいpathと中身をRouterで定義していきましょう! 参考 RailsとReactでUberEats風SPAアプリケーションをつくってみよう！ https://www.techpit.jp/courses/138/curriculums/141/sections/1048/parts/4151

症状 ReactでReact-Router-Domを実行しようとしていた時に、下記エラーが発生しました。 コンソールにはエラーメッセージが表示されていませんでした。 翻訳すると、 「エラー：App（...）：レンダリングから何も返されませんでした。これは通常、returnステートメントが欠落していることを意味します。または、何もレンダリングしない場合は、nullを返します。」でした。 つまり、APP.jsから何も返ってきていないといわれているとのこと。 該当のAPP.jsはこのようになっていました。(SampleA.jsxに関しては今回関係なかったので割愛) App.js import React from 'react'; import { BrowserRouter as Router, Switch, Route, } from "react-router-dom"; import {SampleA} from './containers/SampleA.jsx' import {SampleB} from './containers/SampleB.jsx' import {SampleC} from './containers/SampleC.jsx' function App() { 　<Router> <Switch> <Route exact path="/sampleA"> <SampleA /> </Route> <Route exact path="/sampleB"> <SampleB /> </Route> <Route exact path="/sampleC"> <SampleC /> </Route> 　 </Switch> </Router> } export default App; 解決策 APP.jsにreturnの記載がなかったため、APP.jsからのreturnがないと怒られていたようです。 APP.jsにreturnを追加したら、正常に動作するようになりました。 App.js import React from 'react'; import { BrowserRouter as Router, Switch, Route, } from "react-router-dom"; import {SampleA} from './containers/SampleA.jsx' import {SampleB} from './containers/SampleB.jsx' import {SampleC} from './containers/SampleC.jsx' function App() { return ( 　<Router> <Switch> <Route exact path="/sampleA"> <SampleA /> </Route> <Route exact path="/sampleB"> <SampleB /> </Route> <Route exact path="/sampleC"> <SampleC /> </Route> 　 </Switch> </Router> ) } export default App; 参考 コンポーネントから返り値が返ってこない https://teratail.com/questions/313829

material-uiでカウンターがサポートされてない マテリアルデザインのスペックでは、テキストフィールドにカウンターもありますが、material-uiにはカウンターのAPIが実装されていません。 ということで何回かカスタムコンポーネントを書くことになったので、メモとして残します。 TextFieldをラップする maxLengthプロップを持たせたカスタムコンポーネントを作成します。 type AdditionalTextFieldProps = { maxLength?: number; }; type CustomTextFieldProps = TextFieldProps & AdditionalTextFieldProps; const CustomTextField: React.FC<CustomTextFieldProps> = ({ maxLength, inputProps, helperText, ...rest }) => { const inputRef = useRef<HTMLInputElement>(null); const currentValueLength = inputRef.current?.value?.length; const isCounterAvailable = maxLength && typeof currentValueLength === 'number'; return ( <TextField inputRef={inputRef} inputProps={{...inputProps, maxLength}} helperText={ (helperText || isCounterAvailable) && ( <Box component="span" display="flex" justifyContent="space-between"> <Typography variant="caption" color="textSecondary"> {helperText || ''} </Typography> {isCounterAvailable && ( <Typography variant="caption" color="textSecondary"> {currentValueLength}/{maxLength} </Typography> )} </Box> ) } {...rest} /> ); }; その他 FormHelperTextPropsのcomponentがタイプ定義されてないみたいです。

はじめに Next.jsを使って、Google Cloud Storageに画像をアップロードしていきます。 今回コードを書くファイルは以下の2つです。 「src/pages/index.tsx」 「src/pages/api/upload.ts」 Next.jsにはAPIルートというものがあり、 pages/api内にあるファイルは '/api/*'にマッピングされ、APIエンドポイントとして使えます。 今回の場合は、'/api/upload'で扱う事ができます。 以下のような写真を入力し、アップロードするだけのシンプルなものを作っていきます。 githubにコードも置いています。少しだけ他のも混ざってます。すみません。 https://github.com/tokio-k/Gcs-Upload-Nextjs GCP側の準備 GCPを開きます。 https://console.cloud.google.com/?hl=ja 検索の箇所に「認証情報」と入力し 1番上に来ている「認証と情報 APIとサービス」をクリックします。 認証情報のページに来たら、上部の「認証情報を作成」をクリックします。 認証情報を作成→サービスアカウントと進みます。 サービスアカウント名は任意の名前を入れてください。 ロールを選択で、Cloud Storageに権限を与えます。 完了をクリックし、サービスアカウントを作成します。 サービスアカウントが作成できたら、アカウントをクリックします。(メールアドレスの箇所) サービスアカウントのページに来たら、「キー」のタブを選択し鍵を追加します。 新しい鍵を作成でjsonファイルを作成します。 このjsonファイルに様々な認証の情報が載っています。(他の人に見せてはいけません) これで、GCP側の準備は完了です。 .env.localに追加していく {} hello-world-project-311214...が先程作成したjsonファイルです。 (gitignoreでgitにあげないようにしてください。) ㅤ.gitignore hello-world-project-311214-b249833a2985.json (追加するだけです。) .env.localにjsonファイルのパスとプロジェクトIDを設定します。 ㅤ.env.local PROJECT_ID=hello-world-proje.... GOOGLE_APPLICATION_CREDENTIALS="hell....85.json" ライブラリのインストール ターミナルで以下を実行して、ライブラリをインストールします。 yarn add @google-cloud/storage コードの編集 index.tsx (react-hook-formやuseStateなども使ってますがなくてもできます。) index.tsx import { useCallback, useState } from "react"; import { useForm } from "react-hook-form"; const IndexPage = () => { const { handleSubmit } = useForm({defaultValues: {name:"", iconUrl:""}}); const [file, setFile] = useState<File>(); const handleChangeFile = (e: any) => { setFile(e.target.files[0]); }; const uploadImg = useCallback(async (file:File) => { const fileName = "imgfile2" const res = await fetch(`/api/upload?file=${fileName}`); const { url, fields } = await res.json(); const body = new FormData(); Object.entries({ ...fields, file }).forEach(([key, value]) => { body.append(key, value as string | Blob ); }); const upload = await fetch(url, {method:"POST", body}); if (upload.ok) { console.log('Uploaded successfully!'); } else { console.error('Upload failed.'); } },[]) const handleClick = handleSubmit ( async () => { if(file) { uploadImg(file) } }) return ( <> <div> 写真 <input type="file" accept="image/*" onChange={handleChangeFile} id="icon" /> <input type="submit" onClick={handleClick} /> </div> </> ) } export default IndexPage; inputの写真が変更された時に、handoleChangeFileが呼ばれて、 setFileでファイルをfileにセットしてる。 送信（input type submit）がクリックされた時に、setFileが呼ばれて、 fileを引数にuploadImgが呼ばれている uploadImgが今回のアップロードの処理です。 uploadImgのみを抜粋 index.tsx const uploadImg = useCallback(async (file:File) => { const fileName = "imgfile2" ① const res = await fetch(`/api/upload?file=${fileName}`);② const { url, fields } = await res.json(); const body = new FormData(); Object.entries({ ...fields, file }).forEach(([key, value]) => { body.append(key, value as string | Blob ); }); const upload = await fetch(url, {method:"POST", body});③ if (upload.ok) { console.log('Uploaded successfully!'); } else { console.error('Upload failed.'); } },[]) ① fileNameはアップロードする画像の名前になります。 fileから名前を取得したり、ランダムな文字列を取得してつけると良いと思いますが、今回は固定にしています。 ② ここで、pages/api/upload.tsの処理が実行できます。 file=${fileName}はクエリパラメータです。情報を渡しています。 アップロードするためのurlや認証に関する情報などをレスポンスとして受け取っています。 ③ 実際に、画像をアップロードしている箇所です。 ②で取得したurlや、その他bodyなどを使って画像をアップロードしています。 upload.ts upload.ts import { Storage } from "@google-cloud/storage"; export default async function handler(req: any, res: any) { const storage = new Storage({ projectId: process.env.PROJECT_ID, keyFilename: process.env.GOOGLE_APPLICATION_CREDENTIALS, }); const bucketName = "sample-upload-img"; const bucket = storage.bucket(bucketName); const file = bucket.file(req.query.file); const options = { expires: Date.now() + 1 * 60 * 1000, fields: { "x-goog-meta-test": "data" }, }; const [response] = await file.generateSignedPostPolicyV4(options); res.status(200).json(response); } req.query.fileにはクエリパラメータの値が入ってきます。 bucket.file("IconImage/" +req.query.file)などにすると、フォルダの中に画像を入れることも可能です。 bucketNameにはバケットの名前を入れます。 作成していなければ、Google Cloud Storageのサイト上部の「＋バケットを作成」から、作成します。 これで、画像のアップロードの処理を書く事ができました。 最後に、CORSの設定をします。 CORSの設定 右上の赤丸の箇所をクリックして、画面下部の黒い画面を開きます。 ここからはこの画面で進めていきます。 プロジェクトに含まれるバケットを一覧表示します。 $ gsutil list gs://sample-upload-img/ corsの設定を書くファイルを作成します。 $ touch cors_setting.json corsの設定を記述していきます。 $ vim cors_setting.json 以下の様に書き換えます。 ㅤ.json [ { "origin": [ "http://localhost:3000" ], "responseHeader": [ "Content-Type" ], "method": [ "POST" ], "maxAgeSeconds": 60 } ] 最後に、corsの設定ファイルの内容をバケットに設定します。 $ gsutil cors set cors_setting.json gs://sample-upload-img/ (確認もできます。) gsutil cors get gs://sample-upload-img/ これで、corsの設定が完了しました。 これで画像がアップロードできる様になりました！ わからないところ、間違っているところがありましたらコメントお待ちしております。 参考文献 https://github.com/leerob/nextjs-gcp-storage https://daiiz.hatenablog.com/entry/2017/03/05/001700

Material-UIのTooltipコンポーネントをButtonに使ったとき、disabledとの兼ね合わせで少し戸惑ったことについて書き留めます。 Material-UIとTooltipコンポーネント Material-UIは、Googleが提唱するMaterial Designに則った、ユーザーインタフェースを提供するReactコンポーネントライブラリです(Material Designについては、「Googleが推奨する『マテリアルデザイン』とは？5つの特徴と、メリット・デメリット・作り方について解説」参照)。豊富なコンポーネントとシンプルで直感的なデザイン・操作感に定評があります。 Tooltipコンポーネントの使い方は、マウスが重なったたとき表示したい部品を包むだけです。titleに与えたテキストがツールチップとして表れます。 <Tooltip title="tooltip" arrow> <Button variant="contained" color="primary"> button </Button> </Tooltip> 無効化(disabled)したButtonにTooltipを出す 問題は、無効化(disabled)したButtonをTooltipコンポーネントで包んだ場合です。以下のようなメッセージが示されてしまいます。無効化されたButtonからはユーザー操作のイベントが送られないので、Tooltipが働かないということです。 <Tooltip title="disabled" arrow> // 変数disabledの値はtrue <Button variant="contained" color="primary" disabled={disabled}> disabled button </Button> </Tooltip> Material-UI: You are providing a disabled button child to the Tooltip component. A disabled element does not fire events. Tooltip needs to listen to the child element's events to display the title. でも、この問題については公式サイトの「無効な要素」(原文「Disabled Elements」)できちんと説明されています。Buttonを別の要素、たとえば<span>でつぎのようにくるんでしまえばいいのです。 <Tooltip title="disabled" arrow> <span> <Button variant="contained" color="primary" disabled={disabled}> disabled button </Button> </span> </Tooltip> 実は、メッセージにもそのヒントが示されていました。 Add a simple wrapper element, such as a span. 動的に変わるButtonの有効・無効に応じてTooltipの表示・非表示を切り替える 筆者が困ったのは、無効化したButtonにはTooltipを出したくないという場合でした。それなら、Tooltipを外せばいいと思われるかもしれません。でも、やりたかったのは、有効・無効は動的に切り替えてTooltipを表示・非表示したいということです。 そこで、無効のときは包んだ要素のstyleに、pointer-events: "none"を加えることで対応しました。以下にCodePenのサンプルも添えます。Buttonの有効・無効は、Checkboxで切り替えてください。 <Tooltip title="enabled" arrow> <span style={disabled ? { pointerEvents: "none" } : {}}> <Button variant="contained" color="primary" disabled={disabled}> button </Button> </span> </Tooltip> See the Pen React + Material-UI: Tooltip issue by Fumio Nonaka (@FumioNonaka) on CodePen.

はじめに Reactで画像を読み込みたい時は以下のようにするが、TypescriptでReactを書いている場合、画像を読み込まなかった。 import Image from './images/image.svg' const ImageComponent = () =>{ return <img src={Image} alt="アイコン" /> } export default ImageComponent 相対パス、なんか間違っているのか？といじってみたけど違うみたいだ。 解決方法 頭にurl:をつける。 import Image from 'url:./images/image.svg' 以上です。

React(Next.js)でTopへ戻るボタンを実装する方法になります。 ライブラリ等は使用しないので、導入もしやすいかと思います。 クリックイベントを設定する ReturnTopButton.tsx const ReturnTopButton = () => { return <button onClick={returnTop}>ボタン</button> } export default ReturnTopButton まずは、コンポーネントを作り、クリックイベントを設定します。 Topへ戻るイベントを追加する ReturnTopButton.tsx const ReturnTopButton = () => { const returnTop = () => { window.scrollTo({ top: 0, behavior: 'smooth' }) } return <button onClick={returnTop}>ボタン</button> } export default ReturnTopButton window.scrollToメソッドを使用して、Topへ戻す処理をしています。 behavior: smoothとオプションを指定することで、スムーズスクロールさせることができます。 behavior: autoだと一瞬で移動します。 スクロールしたらTopへ戻るボタンが表示するようにする 初期表示ではTopへ戻るボタンを表示させずに、ある程度スクロールしたら表示させる方法です。 ReturnTopButton.tsx import { useEffect, useState } from 'react' const ReturnTopButton = () => { const [isButtonActive, setIsButtonActive] = useState(false) const returnTop = () => { window.scrollTo({ top: 0, behavior: 'smooth' }) } useEffect(() => { window.addEventListener('scroll', scrollWindow) return () => { window.removeEventListener('scroll', scrollWindow) } }, []) const scrollWindow = () => { const top = 100 //ボタンを表示させたい位置 let scroll = 0 scroll = window.scrollY if (top <= scroll) { setIsButtonActive(true) } else { setIsButtonActive(false) } } const normalStyle = { opacity: 0, transition: '0.5s', pointerEvents: 'none' } const activeStyle = { opacity: 1, transition: '0.5s' } const style = isButtonActive ? activeStyle : normalStyle return ( <button style={style} onClick={returnTop}> ボタン </button> ) } export default ReturnTopButton useEffectでwindowイベントを設定します。 useStateの真偽値によってスタイルを変えることで、ボタンを表示を変えています。

React 使ったことないけど React Native 使う事になったから頑張ってお勉強します 公式の Docs を見た時のメモを記載 （メモなので非常にゆる〜くふわっとしてる） わかるレベル React はほぼ触れてないけど Vue.js は結構触っている JavaScript は大好き Youtube で React の動画は見てるので用語だけなんとなく知ってる React Native とは Reactの書き方でマルチプラットフォームなアプリが作れる 最終的にSwiftとかKotlinとかHtmlCssとかになるみたい 最近流行りのFlutterとの一番の違いはネイティブUIなのか独自のUIなのかって感じらしい ReactNativeで書いたやつはiOS、Android、ブラウザそれぞれでコンポーネントの見た目が違う つまり全部テストしないといけない・・・？ 参考 公式 Docs これの「The Basics」を一通り見るだけでなんとなくわかった気になれる コンポーネントの書き方に、関数とクラス両方の書き方を紹介してくれているのでとても助かる （ネットの記事はクラスだけだったりが多かった） ソースは全部公式 Docs から引用 基本的な使い方 import React from "react"; import { Text, View } from "react-native"; const YourApp = () => { return ( <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}> <Text>Try editing me! ?</Text> </View> ); }; export default YourApp; こいつらなんやねん！ →View Text React Native が用意してくれてる Components ここで探せば色々見つかる 基本的な物として紹介されてたヤツら View とりあえずこれ書いとけばいい感じに見た目を調整してくれるらしい <div>になるみたい Text 読んで字のごとく <p>になるみたい Image 読んで字のごとく <img>になるみたい ScrollView View のスクロールしてくれる版 <div>のスクロールでいる版（overflow:scrollが付いた版？）になるみたい TextInput 読んで字のごとく <imput type="text">になるみたい そもそも React の書き方知らんがな そんな奴はまず React から勉強してこいとか言わないで・・・ 大体このページの流用 JSX Vue.js だと 1 つのファイルに template に html script に js style に css と分けて書くけど、React は全部 js で書くらしい js で書いてるから当然 ↓ みたいに変数だって使えるし const Cat = () => { const name = "Maru"; return <Text>Hello, I am {name}!</Text>; }; 関数を代入する事もできる const getFullName = (firstName, secondName, thirdName) => { return firstName + " " + secondName + " " + thirdName; }; const Cat = () => { return <Text>Hello, I am {getFullName("Rum", "Tum", "Tugger")}!</Text>; }; 色々試してて思った・・・ if 文や for 文を return 内で書けるのは便利だった vue だと v-if とか v-for を使うけど、結構 template が煩雑になるし、思うように動かせない場合がある その点 React はもろ js なので汎用性が高い const Cat = ({ name }) => { if (name) { return <Text>Hello, I am {name}!</Text>; } else { return <Text>I am a cat. I don't have a name yet.</Text>; } }; 三項演算子とかもいける const Cat = ({ name }) => { return name ? <Text>Hello, I am {name}!</Text> : <Text>I am a cat. I don't have a name yet.</Text>; }; ただし return()内の{}の中に if とか for みたいな構文は書けないらしい そのときは ↓ のように関数を利用する const CatCaffe = () => { const cats = ["mugi", "sora", "reo", "koko"]; return ( <View> {cats.map((cat) => { return <Text key={cat}>Hello, I am {cat}!</Text>; })} </View> ); }; js だからとやりたい放題したらぐちゃぐちゃになりそう 何事もバランスが大事 その内調べる この return は何を返してるんだろう・・・""で括ってないから文字列でもなさそうだし 独自でコンポーネントを作る ↑ の Cat は関数だけど、これを他の関数で流用することも可能 const Cat = () => { return ( <View> <Text>I am also a cat!</Text> </View> ); }; const Cafe = () => { return ( <View> <Text>Welcome!</Text> <Cat /> <Cat /> <Cat /> </View> ); }; Props 親コンポーネンとから子コンポーネントへ情報を渡すときは関数の引数として渡す 引数名はなんでもいいっぽいけど props にするのが推奨ぽい const Cat = (props) => { return ( <View> <Text>Hello, I am {props.name}!</Text> </View> ); }; const Cafe = () => { return ( <View> <Cat name="Maru" /> <Cat name="Jellylorum" /> <Cat name="Spot" /> </View> ); }; State 状態の変化を検知したいときは State を使う Vue.js でいう computed？ 関数コンポーネントとクラスコンポーネントで書き方が違うけどとりあえず関数コンポーネントがおすすめらしい 関数コンポーネントの書き方は Hooks って呼ぶみたい（フック） 変数とセッター？を１行でかけるから便利！ import React, { useState } from "react"; const Cat = (props) => { const [isHungry, setIsHungry] = useState(true); return ( <View> <Text> I am {props.name}, and I am {isHungry ? "hungry" : "full"}! </Text> <Button onPress={() => { setIsHungry(false); }} disabled={!isHungry} title={isHungry ? "Pour me some milk, please!" : "Thank you!"} /> </View> ); }; フラグメント 注釈として書かれていたけど、へーって思ったので一応記載 const Cafe = () => { return ( <> <Cat name="Munkustrap" /> <Cat name="Spot" /> </> ); }; 今まで<View></View>で囲っていたけど、急に出てきた<></> １コンポーネントは１要素で囲まれなきゃいけないから、View って毎回書かなきゃいけないのかなと思っていたら <></>これで囲んだらとりあえず OK みたい ScrollView の注意点 これ使うだけでスクロールが簡単に実装できる けど・・・・画面内に収まっていない物でも全部レンダリングするからパフォーマンスが悪いっぽい アイテムのリストが長すぎる場合は FlatList を使うんだって リスト表示 FlatList に data と renderItem を渡すことでリストを表示できる いっぱいデータがある場合 ScrollView で表示するよりこっちの方がいいみたい const FlatListBasics = () => { const data = [ { key: 1, value: "Devin" }, { key: 2, value: "Dan" }, { key: 3, value: "Dominic" }, ]; return ( <View style={styles.container}> <FlatList data={data} renderItem={({ item }) => ( <Text style={styles.item}> {item.key}:{item.value} </Text> )} /> </View> ); }; style の書き方 SectionList の例から抜粋 StyleSheet 　は react-native のモジュールみたい import { SectionList, StyleSheet, Text, View } from "react-native"; const styles = StyleSheet.create({ container: { flex: 1, paddingTop: 22, }, sectionHeader: { paddingTop: 2, paddingLeft: 10, paddingRight: 10, paddingBottom: 2, fontSize: 14, fontWeight: "bold", backgroundColor: "rgba(247,247,247,1.0)", }, item: { padding: 10, fontSize: 18, height: 44, }, }); const SectionListBasics = () => { return ( <View style={styles.container}> <SectionList sections={sections} renderItem={({ item }) => <Text style={styles.item}>{item}</Text>} renderSectionHeader={({ section }) => <Text style={styles.sectionHeader}>{section.title}</Text>} keyExtractor={(item, index) => index} /> </View> ); }; Vue.js のクラスバインディングとかとで、普通の css ならfont-sizeなのがfontSizeになってるので注意 スタイルも全部 js でかけるし js 好きにはうれぴい なんだか tailwindcss とかと相性良さそうだな〜と思った ReactNative で React の UI コンポーネントは使えるのだろうか・・・ material-uiの見た目好きなんだが まとめ こんな感じで ReactNative には色んなコンポーネントが用意されていて それを使えば各プラットフォームに対応した UI が簡単に作れるらしい しかも React の JSX は UI の記述も JavaScript ベースなので色々できる Vue.js で学んだことは結構生かせるし、それを元にマルチプラットフォームなアプリが簡単に作れるとか神か！ これからちゃんと勉強しまっす どうでもいい話 １年前友達に「ReactNative 勉強し始めたわ」って LINE してた そしてちょうど１年後に「ReactNative 勉強し始めたわ」ってまた LINE しちゃった 一度挫折したことがバレた