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

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

ただいまの
回答率

90.40%

  • Node.js

    2458questions

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

  • Vue.js

    1476questions

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

  • React.js

    1193questions

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

  • SPA(Single-page Application)

    44questions

  • Material-UI

    26questions

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

受付中

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 205

re-re-

score 1

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を展開しているが、例えば

<div id="top"></div>
<div id="body"></div>
<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やマテリアルを少し動かす程度で終わっているものが多かったため、先に進めず困ってしまっため質問いたしました。アドバイスをお願いいたします。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

0

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

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

// ルーティングの設定
const App = () => (
  <Router>
    <Route path="/" exact component={Home} />
    <Route path="/about" component={About} />
  </Router>
);
// トップページ
const Home = () => (
  <>
    <h1>Home</h1>
  </>
);
// Aboutページ
const About = () => (
  <>
    <h1>About</h1>
  </>
);

コンポーネントを配置するディレクトリ構成は基本的に自由ですが、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を使ったパターンを紹介します。

export default function reducer(state, action) {
  switch (action.type) {
    case REQUEST_LOGIN:
      return Object.assign({}, state, {
        isFetching: true,
      });
    case RESPONSE_LOGIN:
      return Object.assign({}, state, {
        isFetching: false,
        isLogin: action.isLogin,
      });
    default:
      return state;
  }
}

export function requestLogin() {
  return {
    type: REQUEST_LOGIN,
  };
}

export function responseLogin(json) {
  return {
    type: RESPONSE_LOGIN,
    isLogin: json.is_login,
  };
}
// この関数がコンポーネントから呼ばれる
// fetchの結果、非同期でActionがコールされ、Storeが書き換わります。
export function isLogin() {
  return (dispatch) => {
    dispatch(requestLogin());
    return fetch('/api/auth', { credentials: 'include', cache: 'no-store' })
      .then(response => response.json())
      .then(json => dispatch(responseLogin(json)));
  };
}

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/03/04 19:26

    回答ありがとうございます。マテリアルデザインの中にページ整形の記述(Gridデザイン等)があるのですね。そこまで理解していませんでした。CSSについてはどれかに絞って今後理解を深めて行きます。

    また、データの入出力について、やはりわからない点があります。外部API等のコールはどこで行うのが理想なのでしょうか?MVCではモデルおよびコントローラ(コントローラ太り)で行うことが多いと思いますが、REACTの場合にはどこに記述するのでしょう? あくまでREACTはVIEWなので、他の部分で呼び出した結果を渡してもらうイメージなのですが、どこでしょうか??

    キャンセル

  • 2019/03/04 19:31

    APIの呼び出し場所についても、いくつかのパターンがあります。
    redux-thunkというライブラリを使うパターンが、reduxの公式で紹介されています。

    redux-thunkではコンポーネントからのActionに関数を指定できるようになります。
    実装例を回答に記載します。

    キャンセル

  • 2019/03/05 01:46

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

    キャンセル

  • 2019/03/05 09:21

    > redux(もしくはFLUX系)前提で構築しないといけないのでしょうか?

    reduxを用いずアプリを構築する事も可能です。
    その場合は、コンポーネントのコンストラクタ等でfetchをする事になります。
    最近のアップデートで使えるようになったContextAPIについても有用な情報かと思いますので、共有しておきます。(自分の記事で恐縮ですが。)
    https://qiita.com/nouka/items/205ca1a9cb0b9916cc49

    > バックエンドはrestfulなAPIを用いてVIEWとバックエンドの間にreduxが出てくる感じなのでしょうか?

    reduxが状態を管理し、reactがviewを状態に応じて書き換える、一方向なフローになりますので、間に入る、という表現は適切でないかもしれません。

    reduxもcontextもデータと、それに対するミューテターを保持している点では、Modelに近いと思います。

    キャンセル

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

  • ただいまの回答率 90.40%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • Node.js

    2458questions

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

  • Vue.js

    1476questions

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

  • React.js

    1193questions

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

  • SPA(Single-page Application)

    44questions

  • Material-UI

    26questions