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

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

ただいまの
回答率

90.52%

  • React.js

    829questions

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

  • React Native

    181questions

    React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

React Nativeでの開発の進め方について教えてください。

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 652

yoppy0066

score 247

現在、React Nativeの使い方を調べています。

理想はデザイナーまたはコーダーに頂いたHTML+CSSをアプリ化したいのですが、React Nativeではスタイルシートではなく、Style用のクラスを作らなくてはならないと認識しております。そうなるとプログラマーがデザインの移植作業を行うと認識しました。

タグについてもHTMLではなく、React Nativeのタグを用いるため、デザイナーでは開発が難しいと感じました。

実際にReact Nativeで開発されている方に教えていただきたいのですが、どのような流れで開発されていますでしょうか?

プログラマーとデザイナーの分業は可能なのでしょうか?
よろしくお願いいたします。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 2

checkベストアンサー

0

ビジュアルデザインを切ってもらうとはどのような作業をさしていますでしょうか?

ビジュアルデザインは UI の配置や装いなど目で見てわかる形で作ってもらったものです。
「切ってもらう」というのはすみません、単純に「作ってもらう」という意味合いです。

例えばWebサイトなどの場合、CSSだけで数千行にもなることがあると思いますが、これらを全てプログラマーがStyleに置き換えるのはかなり手間かと思います。進め方はもちろん個人によるかとは思いますがプログラマー側でReactNativeでページ遷移できるような枠組みを作り、デザイナーさんにコーディングしてもらうのがスムーズかと思ったのですが、そのようなイメージでしょうか?

↑のやりかたでもよいかと思います。
遷移も UX に関わる部分なのでここまでやるのであればデザイナーさんにすべて任せてよいかと思いますが。

ただ、いまはフロントエンドエンジニアという形でプログラマーが画面も含めて全部作るのが主流な気がします。
ぼくの周りだけかな?

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/03/27 17:22

    丁寧にありがとうございます。

    > ただ、いまはフロントエンドエンジニアという形でプログラマーが画面も含めて全部作るのが主流な気がします。
    CSS+ReactNativeの基本的なところをまるってやってしまうという意味ですよね?

    キャンセル

  • 2017/03/27 17:35

    はい、そのとおりです
    ロジックも含めてまるっと、ですね

    キャンセル

0

理想はデザイナーまたはコーダーに頂いたHTML+CSSをアプリ化したいのですが、React Nativeではスタイルシートではなく、Style用のクラスを作らなくてはならないと認識しております。そうなるとプログラマーがデザインの移植作業を行うと認識しました。

Style 用のクラスと言っても、次のように CSS のプロパティ名をキャメルケース化したものをそのまま指定できます。 Web の知識がある方は違和感ないと思います。

import { StyleSheet } from 'react-native'

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    text: {
        fontSize: 32,
        fontFamily: 'mono',
        color: '#398ab8',
        backgroundColor: '#859d83',
    },
    image: {
        margin: 32,
        position: 'absolute',
        top: 8,
        left: 8,
        width: 64,
        height: 64,
    },
})

タグについてもHTMLではなく、React Nativeのタグを用いるため、デザイナーでは開発が難しいと感じました。

HTML との対応については、次を覚えておけば大丈夫です。

 HTML    React Native  
 div     View          
 img     Image         

実際にReact Nativeで開発されている方に教えていただきたいのですが、どのような流れで開発されていますでしょうか?

ぼくのところではデザイナーさんにビジュアルデザインを切ってもらってそれをエンジニアが実装しています。

プログラマーとデザイナーの分業は可能なのでしょうか? 

何を分業とするのかはケースによると思いますが、可能です。
元デザイナーさんでバリバリ画面実装できる方もいらっしゃいますので、あまり心配されなくても大丈夫かと思いますよ。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/03/27 10:35

    ご回答ありがとうございました。
    非常に参考になります。

    ビジュアルデザインを切ってもらうとはどのような作業をさしていますでしょうか?

    例えばWebサイトなどの場合、CSSだけで数千行にもなることがあると思いますが、これらを全てプログラマーがStyleに置き換えるのはかなり手間かと思います。進め方はもちろん個人によるかとは思いますがプログラマー側でReactNativeでページ遷移できるような枠組みを作り、デザイナーさんにコーディングしてもらうのがスムーズかと思ったのですが、そのようなイメージでしょうか?

    お手数おかけますがご確認お願いいたします。

    キャンセル

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

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

関連した質問

  • 解決済

    react-native

    前提(今のスキル) Swift 一年 JS            一年 質問 react-nativeを勉強しようとしているのですが、 オススメの学習サイ

  • 受付中

    react native tutorial について

    前提・実現したいこと チュートリアルのandroidの react-native run-androidをやりたい 発生している問題・エラーメッセージ Starting

  • 解決済

    react-nativeでjqueryのプラグインは使用できますか?

    タイトルのとおりですが、react-nativeでjqueryのプラグインは使用できますか?

  • 解決済

    react-nativeでimageを正方形にcropする方法

    react-nativeを初めているのですが、画像を正方形にcropする方法がわからずに困っています。 画像はurlで渡され、縦長か横長かは不明です。 画像比率を維持したま

  • 解決済

    React NativeでCordovaのプラグインのような機能はありますか?

    表題のとおりですが、React Nativeで実装した場合、予め用意されていないネイティブの機能が使えるかどうかが質問となります。

  • 解決済

    【React】react-redux-starter-kitのデプロイ

    https://github.com/davezuko/react-redux-starter-kit で公開されているスターターキットでReactに入門し,ある程度のものができた

  • 解決済

    React Native FirebaseでFacebookログインができない

    React NativeでFacebookログインができずに困っています。 どんなやり方を試してみても、Facebookの画像すらでず赤い呪いのエラーが出てきています。。  エ

  • 受付中

    JQueryとReact

    Webのフロント言語は何を学べばよいでしょうか これからWebのフロント言語(Javascriptなど)を学ぼうとしている者です。 Webで調べたところ、よく見るような、テキス

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

  • React.js

    829questions

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

  • React Native

    181questions

    React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。