医学生わくばの技術ブログ

〜僻地医大の5年生がIT技術で僻地をなくすまで〜

<自作アプリを作りたい ネイティブアプリ編 React Native> #3 〜描画とスタイリングの基礎を学ぶ〜

f:id:PYEcracker99:20200922143701p:plain




  わくばです!

 

 今回はUdemyの講座でReact NativeによるUI(ユーザーインターフェース)の作り方を勉強したのでそこで感じたことと、今後どう勉強していくかについて考えていきます。

 

描画部分の構造

 React NativeのUIはJSXというマークアップ言語とJavaScriptを用いて構築するそうです。JSXは< >を使って記述されるもので一見本当にHTMLに見えます。正確にはXMLというマークアップ言語を基礎にしているのでHTMLとは違うそうなのですが、HTMLと比較して勉強したほうが実用的で一石二鳥なのでHTMLになぞらえてお話します。

 描画の部分はこんな感じです。returnのブロック内が実際に描画される部分になります。

f:id:PYEcracker99:20200811153756p:plain

構造化の部分

  <View>というのがHTMLにおけるいわゆる<div><Text>というのが<p>だと思っていただいて問題ないです。

  <View>の中にあるstyleというのがHTMLのclassみたいなものです。このstyleStyleSheetでデザインを施します。

 

スタイリング

f:id:PYEcracker99:20200811153608p:plain

スタイリング部分

 こちらがスタイリングの部分です。containerの中を見ていただけると分かる通り完全にCSSですね。キャメルケース*1ケバブケース*2かに気をつければ問題なさそう?今の所CSS自体中途半端な知識しかないのではっきりとは言えませんがReactがHTMLとCSSでUI・UXを構成しているのでおそらくそういうことでしょう。 

   

まとめ 

 さすがReactをもとにしているだけあって、Web開発の概念がベースにあるというのを強く感じました。やはりReactもちゃんと勉強したほうが良いように感じます。したがってHTMLやCSSも一通り学ぶ必要がありそうです。直接的に文法などが役に立つとは思いませんが、アプリ作成における発想の面ではかなりかぶっているので勉強になるでしょう。

 とりあえず今やっているUdemy講座をやりきって一つアプリを作成してみて、それからまた感じたことも含めて方針を決めていこうと思います。

 

 ではでは。

*1:キャメルケースとはCamelCaseのように単語の区切りを大文字にする表記法のことです。大文字の部分がラクダのコブのように見えるらしいです笑

*2:ケバブケースというのはkebabu-caseのように単語の区切りをハイフンで区切る表記法です。これは串刺しに見えるからだそうですね。ユニークです笑