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

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

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

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

React.js

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

Q&A

解決済

2回答

1984閲覧

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

yoppy0066

総合スコア293

React Native

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

React.js

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

0グッド

0クリップ

投稿2017/03/26 18:06

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

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

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

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

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

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

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

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

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

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

guest

回答2

0

ベストアンサー

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

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

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

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

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

投稿2017/03/27 07:01

januswel

総合スコア301

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

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

yoppy0066

2017/03/27 08:22

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

2017/03/27 08:35

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

0

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

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

js

1import { StyleSheet } from 'react-native' 2 3const styles = StyleSheet.create({ 4 container: { 5 flex: 1, 6 justifyContent: 'center', 7 alignItems: 'center', 8 }, 9 text: { 10 fontSize: 32, 11 fontFamily: 'mono', 12 color: '#398ab8', 13 backgroundColor: '#859d83', 14 }, 15 image: { 16 margin: 32, 17 position: 'absolute', 18 top: 8, 19 left: 8, 20 width: 64, 21 height: 64, 22 }, 23})

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

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

HTMLReact Native
divView
imgImage

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

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

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

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

投稿2017/03/27 01:26

januswel

総合スコア301

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

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

yoppy0066

2017/03/27 01:35

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問