< #3 React Native>〜描画とスタイリングの基礎を学ぶ〜
わくばです!
今回はUdemyの講座でReact NativeによるUI(ユーザーインターフェース)の作り方を勉強したのでそこで感じたことと、今後どう勉強していくかについて考えていきます。
描画部分の構造
React NativeのUIはJSXというマークアップ言語とJavaScriptを用いて構築するそうです。JSXは< >を使って記述されるもので一見本当にHTMLに見えます。正確にはXMLというマークアップ言語を基礎にしているのでHTMLとは違うそうなのですが、HTMLと比較して勉強したほうが実用的で一石二鳥なのでHTMLになぞらえてお話します。
描画の部分はこんな感じです。returnのブロック内が実際に描画される部分になります。
<View>
というのがHTMLにおけるいわゆる<div>
、<Text>
というのが<p>
だと思っていただいて問題ないです。
<View>
の中にあるstyle
というのがHTMLのclass
みたいなものです。このstyle
にStyleSheet
でデザインを施します。
スタイリング
こちらがスタイリングの部分です。container
の中を見ていただけると分かる通り完全にCSSですね。キャメルケース*1かケバブケース*2かに気をつければ問題なさそう?今の所CSS自体中途半端な知識しかないのではっきりとは言えませんがReactがHTMLとCSSでUI・UXを構成しているのでおそらくそういうことでしょう。
まとめ
さすがReactをもとにしているだけあって、Web開発の概念がベースにあるというのを強く感じました。やはりReactもちゃんと勉強したほうが良いように感じます。したがってHTMLやCSSも一通り学ぶ必要がありそうです。直接的に文法などが役に立つとは思いませんが、アプリ作成における発想の面ではかなりかぶっているので勉強になるでしょう。
とりあえず今やっているUdemy講座をやりきって一つアプリを作成してみて、それからまた感じたことも含めて方針を決めていこうと思います。
ではでは。