Udemy

【 Udemy 】 React Native デザイン講座をやってみた

React Native デザイン講座をやってみた サムネイル

どうも!BASHO運営してるYOSHIです。

 

JSフレームワークは流行り廃りあるけれどReactを中心に使っときゃだいたいアプリもモダンなウェブも全部できるじゃん!

しかもFirebase使えばサクッとプロトタイプも作れていいことしかないやんけ!

 

という軽いノリでReactを少しずつかじるようになって1年近くは経ちました。ぜんっぜん成長していません爆

 

メインはアフィリ収益を高めることなので1日1時間も使えていませんね。

 

さて、少しでも時間に抗って学習効率を高めたいんで、この記事ではUdemyのReact Native Design – Build front end of 10 mobile Apps(英語動画)を実際にやってみての感想と学んだことをシェアします。

 

動画の雰囲気を知りたい人。

動画の途中でつまづいた人。

 

このタイプのあなたに分かるように学習状況をまとめることにしました。

 

ちなみに「英語の動画かよ」って思って動画あんま興味ないなーという人もいると思います。

ですが僕の英語力は面倒なので計測したことはありませんが大したことはありません。

いわゆるトラベラーズイングリッシュなので真面目に大学で英語を学んだ人よりも劣ると思います。

 

動画に関しても高校、大学でちょっと頑張った〜くらいの人であればみながら雰囲気でわかると思います。(曖昧でごめんなさい)

 

もっとも、Reactのような時流が早すぎる分野では海外情報はきっても切り離せないと思うのでいずれは英語にぶち当たると思います。

どうせぶち当たるならナウでいきましょう???(え

 

この記事は備忘録的な記事でもあり、今後シリーズ化にして更新していくのかもわかりませんが、とりあえずではじめてます。

ブログっぽさはは少し消しつつとりあえず更新していきます。

 

別の記事でも時間が空いている時に僕のスペックを晒す記事を書きたいなと思います。

僕はただ自分がつくりたいものを作れるようになりたいのでReactを触っていて、一から何もみずにLPの完成させることもできません。

 

ただ、仕事を自動化させるためにJavaScriptを触ったりPythonでOpenCVあたり触ったりはしました。

そんな独学エンジニア経歴なしのかじり虫マンの僕が動画の解説していきます。

 

あと、僕と同じようにつくりたいものがあって手段としてプログラミングをはじめた人を対象に解説しています。

なのでエンジニアさんにとってはツッコミどころが多いと思います。

 

変なところがあればマシュマロホイップ級にソフトなご指摘をもらえるとありがたいです。

 

React Native デザイン講座は空き時間にやりやすい

※現在Project3が終了しました。

React Native Design – Build front end of 10 mobile Apps(英語動画)

僕は今のところ5つくらいのReact関連の動画を触って来ましたがReact Native Designは合計で10個のReactアプリデザインを仕上げることができます。

 

Projectが進むごとに難易度が上がってくるので自分のレベルや課題に合わせて触れてみると良いと思います。

一つ一つのProjectが1時間未満の長さになっていて壁にぶち当たらなければ1日1Projectと進められそうです。

 

ReactNative デザイン講座で得たいもの

僕はTwitterに関連したアプリをReactで作れるようになりたいので、デザインのアイデアを盗むことを目的にはじめました。

 

講座の中身解説

講座の中身

Before We begin

Project1

Project2

Project3

Project4

Project5

Project6

Project7

Project8

Project9

順番にやっていった内容を解説します。

 

Before We begin

環境構築のために必要なツール、node.jsやExpo XDEのダウンロードなどの解説です。

 

手順の解説はありますが丁寧な構築手順の動画ではないのでReact初心者の人はnpmやyarnのパッケージで理解につまづくと思うので初見の人には向いていないかなと思います。

 

あと、Expo XDEの話をしていますが、Expo XDEは現在、サポート終了したのでexp-cliを使わないいけません。

 

自力でexp-cliを導入できる人は進められるかと思います。

 

わからなければ、exp-cliを使って0から環境構築をするやり方がReact Native で iOS / Android アプリ開発をゼロから始めよう!の動画講座で1から解説されているので先にこっちをやる方が効率良いですよ。

exp-cliを使ってAndroidシミュレーターを立ち上げるところも乗っています。

 

Project1

環境構築が終わった人を前提に基本的なことを解説する動画になっています。

 

importの使い方やStylesの説明が入ります。

基本的なところの解説が中心になって進みました。

特に見た通りに進めていればつまづくことはないのかなと思います。

 

あとはFlexbox関連の説明が多めでした。

Flexboxのオススメのサイトが紹介されていました。Flex関連のスタイルを全部直感的に理解できるデザインで紹介している!わ、わかりやすいww

A Complete Guide to Flexbox

 

Project2

Project2

水平に複数のViewを表示させる内容になっていました。

React nativeライブラリのDimensionsを使って縦幅と横幅をフルの値に指定しています。

 

横幅いっぱい

width: Dimensions.get(‘windows’).width,

 

縦幅いっぱい

height: Dimensions.get(‘windows’).height,

 

といった感じですね。

各Viewは<ScrollView horizontal={true}>を使って横スクロールできます。

これだと動きが変なのでpagingEnabled={true}を追記することで1ページずつ切り替わりました。

 

Project3

Project3

ログイン画面のデザイン講座になっています。

シミュレーターが重くてノロノロしています笑

キーボード出現したらサイズ変わるようにしているんですけど、自動で変わらなかったんですね(当たり前

Styles

flexGrowというCSSを知りませんでした。

flexGrowプロパティは空間に対して平等に要素を割り当ててくれる?プロパティです。

 

flexGrow:1

flexGrow:2

 

この場合、数字は比率を表します。1:2の割合でボックスを当ててくれます。講座では縦方向にアイコンボックスとログインボックスが1:1で割り当てています。

詳細:MDN-web-docs

 

React nativeライブラリ

・TextInput

・TouchableOpacity

・KeyboardAvoidingView

この3つのライブラリを使いました。

TextInputはテキスト入力を可能にするので簡単です。TouchableOpacityもタップ時に透過させてくれます。

 

KeyboardAvoidingViewはキーボード出現時にキーボードの出現に合わせて画面の比率を変えてくれます。(ボックスがキーボードで隠れなくなる)

behaviorオプションでpaddingを使いました。

 

Project4

comming soon

Project5

comming soon

Project6

comming soon

Project7

comming soon

Project8

comming soon

Project9

comming soon

 

React Native デザイン講座のまとめ

まだ途中までなので全部終わったらまとめたいと思います。