質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Material-UI

Material-UIは、Material Designを利用可能なオープンソースのReact向けUIコンポーネントキットです。

SPA(Single-page Application)

SPA(Single-page Application)は、単一のWebページのみでコンテンツの切り替えができるWebアプリケーションもしくはWebサイトです。ブラウザでのページ遷移がないため、デスクトップアプリケーションのようなUXを提供します。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

439閲覧

ReactでマテリアルUIを用いたweb構築の記述方法と構成について

re-re-

総合スコア13

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Material-UI

Material-UIは、Material Designを利用可能なオープンソースのReact向けUIコンポーネントキットです。

SPA(Single-page Application)

SPA(Single-page Application)は、単一のWebページのみでコンテンツの切り替えができるWebアプリケーションもしくはWebサイトです。ブラウザでのページ遷移がないため、デスクトップアプリケーションのようなUXを提供します。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2019/03/03 14:41

React初学者です。現在、入室管理アプリの作成を進めており、その選択肢の一つとしてViewにSPA要素を加えたく、Reactの学習をはじめました。Webに関してはHTML+css+jsの基本的なwebアプリの作成経験、MVCフレームワークではRailsを学び、タスク管理アプリなど基本的なアプリの作成経験がある程度です。動的Webに関してはあまり経験がありません。

React開発環境構築2018を参考にして環境を構築し、SPAの例を元に、単純なマテリアルUIを貼り付けることができるようになりました。

ここで、初歩的なことなのですが、Reactはサイトの例で出てくるようなRect.jsなどのコンポーネントと呼ばれるパーツのようなものを組み合わせてVIEW部分を作っていくために用いると理解しています。各コンポーネントの機能を実装するのがReactなのかなと理解しています。 ここでわからなくなったのが、デザインの構築の部分です。

複数のコンポーネントを貼っていくときに、そのページとしての構成の構築はどこに記述して行うのがよいのか?
例えばBootStrapならhtmlの記述に適応したいデザインを追加していくのでわかりやすかった。Reactではindex.jsxで最後に<div id="root">にApp.jsの仮装DOMを展開しているが、例えば

html

1<div id="top"></div> 2<div id="body"></div> 3<div id="bottom"></div>

のようにhtmlに大まかに構成を記入してそこにそれぞれの仮装DOMを展開するのがよいのか?
そもそもApp.jsやindex.jsは何を記述するためのファイルを分割しているのか?

CSSやBootstrapは組み合わせてもいいのか?
前述の通り、IDなどに対してCSSやBootstrapを適応してページのレイアウトを構成してもよいのか?例えばReactのコンポーネントの配置を考えるときに、Gridデザインなどを適応したい場合にはどのように記述するのがいいのか?

データの入出力について
データの入出力はどのタイミングで行えばよいのか?いくつか記事を調べたところ、MVCと異なり、FLUXの原則としてはAPIベースで問い合わせを行うこと、そして子コンポーネントではそのAPI呼び出しは行わないこと。というように理解しました。
REDUXについて
つまりこれは「一番大元となり、他のコンポーネントを内部に持つ親コンポーネントを生成する際のコンストラクタ(?)でAPI(GET)を呼び出してJSONかなにかでデータを取得し、FORMやチェックリストは子コンポーネント内部のクリックアクションかなにかでDBなどのサーバサイドへAPI(PUT)呼び出しを行うようにしなさい」 ということでしょうか?

長文となり失礼いたします。サイトなどをいくつかみていたのですが、サイト間で書いてあることやコーディング方法に差分があり、サンプルプログラムもHello Worldやマテリアルを少し動かす程度で終わっているものが多かったため、先に進めず困ってしまっため質問いたしました。アドバイスをお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

・複数のコンポーネントを貼っていくときに、そのページとしての構成の構築はどこに記述して行うのがよいのか?

以下はreact-routerを使ったルーティングの例ですが、ページ単位のコンポーネントを用意する感じになると思います。

jsx

1// ルーティングの設定 2const App = () => ( 3 <Router> 4 <Route path="/" exact component={Home} /> 5 <Route path="/about" component={About} /> 6 </Router> 7); 8// トップページ 9const Home = () => ( 10 <> 11 <h1>Home</h1> 12 </> 13); 14// Aboutページ 15const About = () => ( 16 <> 17 <h1>About</h1> 18 </> 19);

コンポーネントを配置するディレクトリ構成は基本的に自由ですが、Pages/{PageName}.jsなどの様に、ページごとのコンポーネントをまとめる方法もあると思います。
index.jsApp.jsは、アプリケーションの要件にもよりますが、Reactで構築したDOMを流し込む、エントリポイントが記述されていることが多いと思います。

CSSやBootstrapは組み合わせてもいいのか?

react-bootstrap等のライブラリがありますので、それを使えばbootstrapを使うことができます。
ただ、Material-UIをご利用であれば不要ではないかと思います。
CSSはstyled-componentやCSS Modules, CSS in JSなどやり方は色々あります。
自分の記事で恐縮ですが、CSS Modulesの例を共有します。
https://qiita.com/nouka/items/89bdb81a49f556a7f629

データの入出力について

react-reduxを使う場合は、コンテナコンポーネントとプレゼンテーショナルコンポーネントの2つに役割を分担する方法が公式に書いてあります。

コンテナコンポーネント...データやコールバック関数をプレゼンテーショナルコンポーネントに渡す。
プレゼンテーショナルコンポーネント...DOMを構築する。コールバック関数を使ってデータを更新する。

親コンポーネントを用いてデータを子コンポーネントに渡すという部分は認識が合っていると思います。
全ての状態が1つの親コンポーネントで表現できればそれでも問題ないと思いますが、おそらくいくつかの単位に分けたくなると思いますので、ご参考いただければと思います。

追記: API呼び出しをどこに書くのか

redux-thunkを使ったパターンを紹介します。

js

1export default function reducer(state, action) { 2 switch (action.type) { 3 case REQUEST_LOGIN: 4 return Object.assign({}, state, { 5 isFetching: true, 6 }); 7 case RESPONSE_LOGIN: 8 return Object.assign({}, state, { 9 isFetching: false, 10 isLogin: action.isLogin, 11 }); 12 default: 13 return state; 14 } 15} 16 17export function requestLogin() { 18 return { 19 type: REQUEST_LOGIN, 20 }; 21} 22 23export function responseLogin(json) { 24 return { 25 type: RESPONSE_LOGIN, 26 isLogin: json.is_login, 27 }; 28} 29// この関数がコンポーネントから呼ばれる 30// fetchの結果、非同期でActionがコールされ、Storeが書き換わります。 31export function isLogin() { 32 return (dispatch) => { 33 dispatch(requestLogin()); 34 return fetch('/api/auth', { credentials: 'include', cache: 'no-store' }) 35 .then(response => response.json()) 36 .then(json => dispatch(responseLogin(json))); 37 }; 38}

reactは自由度が高いライブラリですので、色々なサイトを見てもそれぞれ違った方法で構築されている事が多いので、戸惑うことがあると思いますが、それがReactの良さでもあるのかもしれませんね。
回答になりましたでしょうか?
追加のご質問があれば、コメントいただければと思います。

投稿2019/03/03 23:40

編集2019/03/04 10:41
noka_blank

総合スコア252

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

re-re-

2019/03/04 10:26

回答ありがとうございます。マテリアルデザインの中にページ整形の記述(Gridデザイン等)があるのですね。そこまで理解していませんでした。CSSについてはどれかに絞って今後理解を深めて行きます。 また、データの入出力について、やはりわからない点があります。外部API等のコールはどこで行うのが理想なのでしょうか?MVCではモデルおよびコントローラ(コントローラ太り)で行うことが多いと思いますが、REACTの場合にはどこに記述するのでしょう? あくまでREACTはVIEWなので、他の部分で呼び出した結果を渡してもらうイメージなのですが、どこでしょうか??
noka_blank

2019/03/04 10:31

APIの呼び出し場所についても、いくつかのパターンがあります。 redux-thunkというライブラリを使うパターンが、reduxの公式で紹介されています。 redux-thunkではコンポーネントからのActionに関数を指定できるようになります。 実装例を回答に記載します。
re-re-

2019/03/04 16:46

コードを読ませていただきましたが、やはりredux(もしくはFLUX系)前提で構築しないといけないのでしょうか? 正直reactのview構築の手軽さは好きなのですが、バックエンドとフロントエンドをもう少しはっきり分けたいなーとおもってしまいます。この回答を見るにreduxを用いるならば、バックエンドはrestfulなAPIを用いてVIEWとバックエンドの間にreduxが出てくる感じなのでしょうか?(ここがスッキリしたらBAをします。)
noka_blank

2019/03/05 00:21

> redux(もしくはFLUX系)前提で構築しないといけないのでしょうか? reduxを用いずアプリを構築する事も可能です。 その場合は、コンポーネントのコンストラクタ等でfetchをする事になります。 最近のアップデートで使えるようになったContextAPIについても有用な情報かと思いますので、共有しておきます。(自分の記事で恐縮ですが。) https://qiita.com/nouka/items/205ca1a9cb0b9916cc49 > バックエンドはrestfulなAPIを用いてVIEWとバックエンドの間にreduxが出てくる感じなのでしょうか? reduxが状態を管理し、reactがviewを状態に応じて書き換える、一方向なフローになりますので、間に入る、という表現は適切でないかもしれません。 reduxもcontextもデータと、それに対するミューテターを保持している点では、Modelに近いと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問