Flutter動画やってみよ(Foodアプリ)3/5
画面遷移を作る
遷移先のページを用意します。
lib/pages 以下に、HomePage.dart を作成します。
st[enter] のショートカットから、StatefulWidget を選択し、クラス名をHomePage とします。
しばらく、HomePageを編集していくので、確認しやすいように初期ページをHomePageに変えておきます。
void main() => runApp( MaterialApp( debugShowCheckedModeBanner: false, theme: ThemeData(fontFamily: 'Roboto'), home: HomePage(), ) );
まずは、何もない黄色の背景ページとしておきます。
import 'package:flutter/material.dart'; class HomePage extends StatefulWidget { @override _HomePageState createState() => _HomePageState(); } class _HomePageState extends State<HomePage> { @override Widget build(BuildContext context) { return Scaffold( body: Container( color: Colors.yellow, ), ); } }
StartPage に、画面遷移処理を追加する
画面遷移のアニメーションパッケージを import して、初期化します。
AnimationControllerと、Animation の初期化を行います。
import 'package:page_transition/page_transition.dart'; ... class _StarterPageState extends State<StarterPage> with TickerProviderStateMixin{ AnimationController _animationController; Animation<double> _animation; bool _textVisible = true; @override void initState() { _animationController = AnimationController( vsync: this, duration: Duration(milliseconds: 100) ); _animation = Tween<double>( begin: 0.0, end: 25.0 ).animate(_animationController); super.initState(); } @override void dispose() { _animationController.dispose(); super.dispose(); }
Startボタンが押されたら画面遷移するように、関数を追加します。
void _onTap() { setState(() { _textVisible = false; }); _animationController.forward().then((f) => Navigator.push(context, PageTransition(type: PageTransitionType.fade, child: HomePage())) ); }
最後に、ボタンが押されたら _onTap() を呼びます。
child: MaterialButton( onPressed: () => _onTap(),
リロードして、Startボタンを押してみます。
iPhone 11 Proでも、そこまで滑らかではないのが気になる…
最後に、もう少しアニメーションを追加します。
FadeAnimation に渡していたContainer を、ScaleTransitionで囲みます。
child: Padding( ... child: Column( ... children: <Widget>[ ... FadeAnimation(1.2, ScaleTransition( scale: _animation, child: Container( decoration: BoxDecoration(
MaterialButtonも、同様に AnimationOpacity で囲みます。
child: Container( ... child: AnimatedOpacity ( opacity: _textVisible ? 1.0 : 0.0, duration: Duration(milliseconds: 50), child: MaterialButton( onPressed: () => _onTap(), minWidth: double.infinity, child: Text("Start", style: TextStyle(color: Colors.white),), ), )
Youtubeを見てると、ボタンを押すと
文字が大きくなりつつアニメーションするようですが…
シュミレーターでは、カクカクしすぎてわかりませんでした…
アニメーション重いな…
つづきます。
完成したら、改めて振り返ってみよう。
Flutter動画やってみよ(Foodアプリ)2/5
今回も、Youtubeで見かけた Flutter UI作成動画をなぞります。
前回は、こちら。 Flutter UI作成動画やってみよ(Foodアプリ)その1 - もっぺんプログラミング(´・ω・`)
フォントを変更する
フォントもassetsとして扱うことで、読み込むことが出来るようです。
フォントは、ここからダウンロード出来ます。 Flutter-food-delivery-app-ui/assets/fonts at master · afgprogrammer/Flutter-food-delivery-app-ui · GitHub
アセットとして利用出来るように、pubspec.yaml に fonts 以下を追加します。
flutter: fonts: - family: Roboto fonts: - asset: assets/fonts/Roboto-Regular.ttf - asset: assets/fonts/Roboto-Bold.ttf - asset: assets/fonts/Roboto-Light.ttf
アプリのテーマに、上記で定義したフォントファミリーを指定します。
void main() => runApp( MaterialApp( debugShowCheckedModeBanner: false, theme: ThemeData(fontFamily: 'Roboto'),
リロードすると、フォントが適用されます。
(稲妻マークのリロードが必要だと思います。)
アニメーションを追加する。
アニメーションの動作を加えるWidgetを作成します。
lib の下に、animations フォルダを作成し、FadeAnimation.dart ファイルを作成します。
StatelessWidget で FadeAnimation というクラス名にします。
※動画では、StatefulWidgetで作成していますが、後でStatelessWidgetに修正していました。 ですので、StatelessWidget で作成します。
アニメーションで使う外部ライブラリの追加。
pubspec.yaml に、以下のライブラリを追加
dev_dependencies: flutter_test: sdk: flutter simple_animations: ^1.3.3 page_transition: ^1.1.5
動画で設定しているバージョンと異なっています。
ライブラリのバージョンは、以下のサイトでチェックして設定しました。
simple_animations の最新ライブラリは、2.2 系でしたが
最新バージョンにすると、使用しているクラスが Duplicated になっていたので
一旦は、動画と同じバージョンで進めます。
Visual Studio Code の flutter pub get が終了しない場合は
コマンドラインから、flutter pub get を実行してみることをおすすめします。
ログから終わらない原因が分かる場合があります。
作成した FadeAnimation クラスのコードを以下のように修正します。
import 'package:flutter/material.dart'; import 'package:simple_animations/simple_animations.dart'; class FadeAnimation extends StatelessWidget { final double delay; final Widget child; const FadeAnimation(this.delay, this.child); @override Widget build(BuildContext context) { final tween = MultiTrackTween([ Track('opacity').add(Duration(milliseconds: 500), Tween(begin: 0.0, end: 1.0) ), Track('translateX').add(Duration(milliseconds: 500), Tween(begin: 120.0, end: 0.0), curve: Curves.easeOut ) ]); return ControlledAnimation( delay: Duration(milliseconds: (500 * delay).round()), duration: tween.duration, tween: tween, child: child, builderWithChild: (context, child, animation) => Opacity( opacity: animation['opacity'], child: Transform.translate( offset: Offset(animation['translateX'], 0), child: child, ), ), ); } }
次に、StarterPage を修正して組み込みます。
先程作ったWidgetツリーの間に、FadeAnimation を挟んでいっています。
FadeAnimation のコンストラクタは、1つ目の引数で遅延時間、2つ目の引数で子Widgetツリーを渡します。
child: Padding( padding: EdgeInsets.all(20.0), child: Column( ... children: <Widget>[ FadeAnimation(.5, Text('Taking Order For Delivery', style: TextStyle(color: Colors.white, fontSize: 50, fontWeight: FontWeight.bold, ))), SizedBox(height: 20, ), FadeAnimation(1, Text("See resturants nearby by \nadding location", style: TextStyle(color: Colors.white, height: 1.4, fontSize: 18))), SizedBox(height: 100, ), FadeAnimation(1.2, Container( ...
ここまで実装して、リロードを押すと
FadeAnimationで装飾したWidgetが、右側からスライドして入ってきます。
アニメーションを簡単に組み込むことが出来ました。 すごい。
つづきます。
Flutter動画やってみよ(Foodアプリ)1/5
Youtubeで見つけた、Flutter UIを作る動画を見ながら なぞっていきます!
26分の動画ですが、今回は6分までのコードです。
(書ききれなかったので、続きます)
アプリ書き始め
Visual Studio Code を起動して、Flutterの新規プロジェクトを作成します。
作成できたら、main.dart を以下の内容にする。
import 'package:flutter/material.dart'; void main() => runApp( MaterialApp( home: ) );
lib フォルダの下に pages フォルダを作成し、StartPage.dart ファイルを追加します。
StatefulWidget のテンプレートコードを記述します。
st 通すと、ショートカットで作れます。
そのまま、クラス名を入力すると必要箇所全てを同時編集出来ます。
ここでは、StarterPage と入力します。
↓ 以下のコードが、自動的に作成されます。
import 文を追加して、コンパイルエラーを消します。
import 'package:flutter/material.dart'; class StarterPage extends StatefulWidget { @override _StarterPageState createState() => _StarterPageState(); } class _StarterPageState extends State<StarterPage> { @override Widget build(BuildContext context) { return Container( ); } }
main.dart に戻って、StarterPageを呼び出すように変更します。
void main() => runApp( MaterialApp( theme: ThemeData(), home: StarterPage(), ) );
StartPage の編集(背景画像)
StarterPageを編集していきます。
背景画像を設定します。
アセットの登録をしていきます。
class _StarterPageState extends State<StarterPage> { @override Widget build(BuildContext context) { return Scaffold( body: Container( decoration: BoxDecoration( image: DecorationImage( image: AssetImage('assets/images/starter-image.jpg') ) ) ), ); } }
pubspec.yaml ファイルを編集し、アセットファイルを登録します。
flutter: assets: - assets/images/starter-image.jpg - assets/images/one.jpg - assets/images/two.jpg - assets/images/three.jpg
GitHubから、該当ファイルをダウンロードします。
https://github.com/afgprogrammer/Flutter-food-delivery-app-ui/tree/master/assets/images
void main() => runApp( MaterialApp( debugShowCheckedModeBanner: false, theme: ThemeData(), home: StarterPage(), ) );
スタートページを再読み込みして、初期画像が表示されることを確認します。
単純なリロードで読まれないので注意。
(カミナリマークを押してリロード)
StartPage の編集(タイトルとボタンの追加)
タイトルを付けて行きます。
写真にグラデーションをかけます。
class _StarterPageState extends State<StarterPage> { @override Widget build(BuildContext context) { return Scaffold( body: Container( … child: Container( decoration: BoxDecoration( gradient: LinearGradient( begin: Alignment.bottomCenter, colors: [ Colors.black.withOpacity(.9), Colors.black.withOpacity(.8), Colors.black.withOpacity(.2), ] ) ) ) ), ); } }
次に、タイトルを入れます。
return Scaffold( body: Container( … child: Container( … child: Padding( padding: EdgeInsets.all(20.0), child: Column( mainAxisAlignment: MainAxisAlignment.end, children: <Widget>[ Text('Taking Order For Delivery', style: TextStyle(color: Colors.white, fontSize: 50, fontWeight: FontWeight.bold, )), SizedBox(height: 20, ), Text("See resturants nearby by \nadding location", style: TextStyle(color: Colors.white, height: 1.4, fontSize: 18)), ], ) ) ), ), ); } }
ボタンを追加します。
return Scaffold( body: Container( … child: Container( … child: Padding( padding: EdgeInsets.all(20.0), child: Column( crossAxisAlignment: CrossAxisAlignment.start, mainAxisAlignment: MainAxisAlignment.end, children: <Widget>[ Text('Taking Order For Delivery', style: TextStyle(color: Colors.white, fontSize: 50, fontWeight: FontWeight.bold, )), SizedBox(height: 20, ), Text("See resturants nearby by \nadding location", style: TextStyle(color: Colors.white, height: 1.4, fontSize: 18)), SizedBox(height: 20, ), Container( decoration: BoxDecoration( borderRadius: BorderRadius.circular(10), gradient: LinearGradient( colors: [ Colors.yellow, Colors.orange, ] ) ), child: MaterialButton( minWidth: double.infinity, child: Text("Start", style: TextStyle(color: Colors.white),), ) ) ], ) ) ), ), ); } }
StartPage の編集(表示位置の調整)
各表示の位置関係を調整します。
class _StarterPageState extends State<StarterPage> { @override Widget build(BuildContext context) { return Scaffold( body: Container( decoration: BoxDecoration( image: DecorationImage( image: AssetImage('assets/images/starter-image.jpg'), fit: BoxFit.cover ) ), child: Container( decoration: BoxDecoration( gradient: LinearGradient( begin: Alignment.bottomCenter, colors: [ Colors.black.withOpacity(.9), Colors.black.withOpacity(.8), Colors.black.withOpacity(.2), ], ), ), child: Padding( padding: EdgeInsets.all(20.0), child: Column( crossAxisAlignment: CrossAxisAlignment.start, mainAxisAlignment: MainAxisAlignment.end, children: <Widget>[ Text('Taking Order For Delivery', style: TextStyle(color: Colors.white, fontSize: 50, fontWeight: FontWeight.bold, )), SizedBox(height: 20, ), Text("See resturants nearby by \nadding location", style: TextStyle(color: Colors.white, height: 1.4, fontSize: 18)), SizedBox(height: 100, ), Container( decoration: BoxDecoration( borderRadius: BorderRadius.circular(10), gradient: LinearGradient( colors: [ Colors.yellow, Colors.orange, ] ) ), child: MaterialButton( minWidth: double.infinity, child: Text("Start", style: TextStyle(color: Colors.white),), ) ), SizedBox(height: 30, ), Align( child: Text("Now Deliver To Your Door 24/7", style: TextStyle(color: Colors.white70, fontSize: 15, ),) ), SizedBox(height: 30, ), ], ) ) ), ), ); } }
今日は、ここまで。
もっぺんheroku(仕組み・ビルド〜アプリ起動まで)
herokuでアプリを動かす仕組みを調べたので簡単にまとめてみました。
具体的なコマンドなどは書いてませんが、基礎知識として持っておくことでドキュメントを調べたりする際のヒントになれば…
■Herokuの仕組み
こちらの解説がわかりやすかったです。
■全体の仕組み
• アプリケーションのソースコードは、Heroku上のGit で管理する
• Heroku上のGitリポジトリにPushすると、自動的にビルドされ必要なファイルをまとめたパッケージが作られる。(Slug)
• Slugは、Heroku上の仮想環境(Dyno)にデプロイされ実行される。
■HerokuのGitとの連携
• HerokuのGitリポジトリは heroku create コマンドでアプリ作成時に同時に出来る。
• ローカルGitリポジトリのルートでコマンドを実行すれば、heroku という名前のremote 設定が自動で追加される。
■ビルド〜アプリ起動
• Herokuのビルドは、buildpacksという仕組みが使われる。
• ライブラリのインストールは、各言語のツールに従った設定ファイルがあれば読み込んでくれる。(PHPならcomposer.json、Pythonならrequirements.txt)
• アプリの起動には、Procfileが使われる。
■Procfile とは
• アプリ起動時に実行するコマンドを指定するファイル
• Gitのルートディレクトリに置く。(拡張子はつけない)
• <プロセスタイプ>:<コマンド>の形式で記述する"web" は特別で、HTTPを受けるアプリ宣言に使われる。その他のプロセスタイプは、自由に定義することが可能
The Procfile | Heroku Dev Center
■Buildpacksとは
• Herokuは、標準で言語ごとにビルドの定義を用意している。(Buildpacks)Buildpackで何が行われるのかは、各ドキュメント参照
• 現在のアプリで使われる buildpacks は、heroku コマンドで確認できる。指定することも可能>
heroku buildpacks:set heroku/pythonなど
Buildpacks | Heroku Dev Center
■Heroku CLIの操作
• heroku は、CLIをインストールして、コマンドで操作できる。
• アプリの制御、heroku 上の環境変数、heroku上でコマンド実行、ログ確認などなど、いろいろ出来る。
基礎知識を持っておくと、Qiitaにあるチュートリアルを見た時に、何をしているのか想像がつくようになるので理解が進みますよね。 頑張っていこう。
個人開発をはじめよう!クリエイター25人の実践エピソード (技術の泉シリーズ(NextPublishing))
- 発売日: 2020/04/03
- メディア: オンデマンド (ペーパーバック)
Gitでローカルリポジトリを後からリモート管理にする方法
すごく初歩的な課題なのですが、ローカルでGit管理した後に、GitHubやBitBucket管理に移行する方法がが分からなかったので調べてみました。
この記事のゴール
ローカルのGitリポジトリを、新規作成したBitBucketのリポジトリにPUSHする!
背景
Gitを使う場面でよく見かけるのが、GitHubなどからCloneして使う方法ですよね。
存在するリポジトリをローカルに持ってきて使うのはその通りなのですが、自分で作ったソフトウェアをGit管理するには、どうしたらいいんだろう?と思ったのがきっかけです。
- ソフトウェアを開発するときは、先にGitHub上で空のリポジトリを作って、Cloneするところから始めないとダメ?
- ローカルでコードを書き始めてから、GitHub管理に移行するには、上記のように改めてCloneして、そこにファイルを手で移動しないとダメ?
そんな不便なはずなし!
やってみる
ローカルリポジトリを作成
ここでは、BitBucketでソースコード管理することを前提に作業を進めます。
まずは、ローカルでGit管理開始
> dev % > dev % mkdir hello > dev % cd hello > hello % echo "print('hello!');" > hello.py > hello % python hello.py hello!
とりあえず、ディレクトリ作ってHelloだけ表示するPythonプログラム作成
> hello % git init Initialized empty Git repository in /Users/momoizo/Documents/dev/hello/.git/
git init コマンドで、ローカルリポジトリ作成!
先程作った、hello.py をリポジトリに追加します。
git status で状態を見つつ、add からの commit !
> hello % git status On branch master No commits yet Untracked files: (use "git add <file>..." to include in what will be committed) hello.py nothing added to commit but untracked files present (use "git add" to track) > hello % git add . > hello % git status On branch master No commits yet Changes to be committed: (use "git rm --cached <file>..." to unstage) new file: hello.py > hello % git commit -m "first commit" [master (root-commit) 93e51ea] first commit 1 file changed, 1 insertion(+) create mode 100644 hello.py > hello %
これで、ローカルリポジトリが作成できました。
次に、このリポジトリをBitBucketにアップしてみます。
BitBucketにリポジトリ作成
BitBucketは、Atlassian社が提供するオンラインのGitリポジトリです。
オンラインのGitリポジトリといえば、GitHubが有名ですが、BitBucketは、他にもドキュメント管理や、タスク管理などの機能も無料で使えるなどの特徴があります。
(GitHubも、いろんな機能を持っていますが)
今後、開発でそれらの機能も使ってみたいので、今回はBitBucketで作業を進めます。
Create Repositoryで先に進むと、次のような画面が出ます。
ここでポイントになるのは、「Readmeを含めますか?」です。
「No」を選んだ場合、空のリポジトリが作成され、ローカルリポジトリのPUSHも非常に簡単なのです。
でも、せっかくなので、初期ReadMeを自動生成して欲しい気も。
以降は、それぞれのパターンでPUSHの仕方を記載します。
ローカルリポジトリをPUSH(1):ReadMeを含めなかった場合
実は、空の状態でリポジトリを作ると、BitBucketの画面でローカルリポジトリをPUSHするためのコマンドを教えてくれます!
試しに、このコマンドを実行してみましょう。
> hello % git remote add origin https://momoizo@bitbucket.org/momoizo/hello_python.git > hello % git push -u origin master Enumerating objects: 3, done. Counting objects: 100% (3/3), done. Writing objects: 100% (3/3), 233 bytes | 233.00 KiB/s, done. Total 3 (delta 0), reused 0 (delta 0) To https://bitbucket.org/momoizo/hello_python.git * [new branch] master -> master Branch 'master' set up to track remote branch 'master' from 'origin'. > hello %
できた!簡単でしたね!
※初めて接続する場合、BitBucketの認証を求められるかもしれません。
ローカルリポジトリをPUSH(2):ReadMeを含めた場合
次に、ReadMeを含めたリポジトリを作った場合です。
この場合、画面に案内されるのは、「clone して使ってね」という操作のみです。
試しに、リモートリポジトリに接続してPUSHしてみます。
リモートリポジトリに接続
既存のリモートリポジトリがある場合は削除して、改めて追加しなおします。
> hello % git remote origin > hello % git remote rm origin > hello % git remote add origin https://momoizo@bitbucket.org/momoizo/hello_python.git > hello % git remote -v origin https://momoizo@bitbucket.org/momoizo/hello_python.git (fetch) origin https://momoizo@bitbucket.org/momoizo/hello_python.git (push) > hello %
そのままPUSH
git push コマンドでリモートリポジトリにPUSHします。 git push origin master は、originというリモートリポジトリの、master ブランチにソースコードをPUSHするという意味です。
> hello % git push origin master To https://bitbucket.org/momoizo/hello_python.git ! [rejected] master -> master (fetch first) error: failed to push some refs to 'https://momoizo@bitbucket.org/momoizo/hello_python.git' hint: Updates were rejected because the remote contains work that you do hint: not have locally. This is usually caused by another repository pushing hint: to the same ref. You may want to first integrate the remote changes hint: (e.g., 'git pull ...') before pushing again. hint: See the 'Note about fast-forwards' in 'git push --help' for details. > hello %
失敗!リジェクト(拒否)されてしまいました…
ヒントを見ていると、push の前に pull して。と言っているようです。
リモートリポジトリには、ローカルにはない「ReadMeの追加」という操作が入っているので、先にその修正を取り込まないといけない(Pullしないといけない)のですね。
リモートリポジトリの内容をPULLする
指摘にしたがって、PULLしてみましょう。
> hello % git pull origin master warning: no common commits remote: Counting objects: 3, done. remote: Compressing objects: 100% (2/2), done. remote: Total 3 (delta 0), reused 0 (delta 0) Unpacking objects: 100% (3/3), done. From https://bitbucket.org/momoizo/hello_python * branch master -> FETCH_HEAD * [new branch] master -> origin/master fatal: refusing to merge unrelated histories > hello %
失敗!! 「unrelated histories」つまり、編集履歴の関連が無いのでマージ(統合)できない。ということのようです。
確かに、それぞれ別々に編集してきたので、統合が難しいのかもしれません。
ただ今回は、同じ名前のファイルが無いため(リモートは、ReadMe.mdのみ)強引にマージしても問題は起こりません。
では、やってみましょう。
mergeのオプションに「--allow-unrelated-histories」をつけることで、強制的にマージさせることが出来ます。
先程のpull コマンドの結果を見ると、リモートリポジトリの内容はローカルの「origin/master」という 新しいブランチに持ってきていることがわかります。
(実は、pull コマンドは、fetch (リモートからローカルに持ってくる)操作と、merge (統合)操作を同時に行うコマンドなのです。)
ですから、後はブランチから、ローカルの master にマージできればOKです。
merge コマンドを使いましょう。
> hello % git merge --allow-unrelated-histories origin/master -m "remote merge" Merge made by the 'recursive' strategy. README.md | 45 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 45 insertions(+) create mode 100644 README.md > hello %
README.mdが追加されました!
あとは、これをリモートにPUSHすれば…
> hello % git push origin master Enumerating objects: 6, done. Counting objects: 100% (6/6), done. Delta compression using up to 8 threads Compressing objects: 100% (3/3), done. Writing objects: 100% (5/5), 498 bytes | 498.00 KiB/s, done. Total 5 (delta 0), reused 0 (delta 0) To https://bitbucket.org/momoizo/hello_python.git aea44a4..2f1675d master -> master > hello %
できました!
BitBucketを確認してみたところ、ソースに hello.py が追加されています。
大成功!
まとめ
リモートリポジトリが空なら(履歴が無いなら)、そのままローカルリポジトリのソースをPUSHすることが出来ました。
仮に、リモートリポジトリに中身があっても、うまくローカルリポジトリにマージすれば、PUSHすることが出来ました。
コマンド操作なので、Gitに慣れていないと混乱するかもしれませんが、簡単なケースで色々試してみてください!
それでは!
わかばちゃんと学ぶ Git使い方入門〈GitHub、Bitbucket、SourceTree〉
- 作者:湊川 あい
- 発売日: 2017/04/21
- メディア: 単行本(ソフトカバー)
Flask + React + Redux のボイラーテンプレート見つけた
探してたら、GitHubにそのものがありました(´ω`)わーい
https://github.com/dternyak/React-Redux-Flask
React、Redux、Flask(Python)で、さらに、Material-UI まで組み込んである! きゃー!作りたかった組み合わせで完璧!!
ボイラーテンプレートを公開してもらえて、一気にスタート出来るなんて!!
どこのどなたか存じませんが、ありがとう!
ディレクトリ構成も完成されている。 BackEnd、FrontEnd、それぞれ分けて実行可能
すばらしすぎる。
ただ、若干構成が古いのでパッケージのバージョンアップは必要ぽい。 自分の環境だと、node-sass のバージョン上げないと、node start した時にエラーで動きませんでした。 (Forkして新しいバージョンを公開しろよ、という話なのかもですが、、、いかんせん自信なく…)
これをベースにWebアプリ作っていきます! さっそくフリープランが出た IBM Cloud (旧 BlueMix)に乗せてみよう・・・
読了:作りながら学ぶReact入門
この3連休で、読み切りました。「作りながら学ぶ React入門」
ふぅー
Reactというキーワードは以前から聞いていたものの、なかなか手を出すチャンスがなく、、、先延ばしになっていたのですが ようやく勉強することが出来ました。
フロントエンド系は特に進化が早い分野で、ようやく使い方がわかったと思ったら「まだxxxで消耗してるの?」みたいな記事で時代遅れ感を突きつけられたりするため、40歳を超えたエンジニアにとって、ある種の精神的な強さが求められる恐ろしい分野なのであります。(被害妄想)
適度な量と内容で、一気に概要をつかめる良書
技術書にも色んな種類がありますが、自分が新しい技術を勉強する場合は、以下の基準で本を選んでいます。
- 読み切りやすい(200ページ前後くらい)
- プログラムを動かして確認できる
- 広く浅く
日中の仕事とは別で勉強時間を取っている場合が多いため、最初の一冊は長くても1〜2週間で読み切れる量にしています。(飽きちゃうので・・・)
また、そんなに理解が早い方ではないため、本文だけでなくプログラムを動かして確認出来るという点も重視しています。
フレームワークは、設計理念/概念の理解が大切だと思うのですが、目に見える何かがあるわけではないので、文章だけで理解を深めるのはとても難しいです。
そのため、プログラムを動かしながら本文の解説を何度も読み返し、頭の中で概念図が書けるようになるまで試行錯誤するようにしています。
なので、実際に動くプログラムが提供されているのはすごく助かります。
本書でも、じゃんけんアプリを少しずつ完成させながら、解説が進むので、とても読みやすかったです。
Reactを使って簡単なアプリを作る
↓
コンポーネントの使い方を書き換えながら学習
↓
Material-UIで、見た目を良くしてみる(書き換え)
↓
ルーティングを足してみる(書き換え)
↓
テストコードを追加してみる(書き換え)
とすすみ、本格的になっていきます。書き換えながらパワーアップしていくので、差分がわかりやすくて良かったです。
また、見た目(CSS Framework)の組み込みと、テスト自動化は、Reactと直接関連しませんが一緒に勉強しておきたい分野だったので、そこがサンプルコード付きで網羅されてたのは、とても助かりました。
すぐに同じ構成で、アプリ開発を初められます。(∩´∀`)∩ワーイ
Redux などは補足扱い
React関連でインターネットの記事を読むとき、大抵はReduxがセットで語られます。
ところが本書ではReduxは補足情報扱いで深く触れられていません。
この点は、本書を買う時点で悩みました。「Reduxまで扱った本の方が良いのでは・・・」とも思ったのですが、読了してみると、まったく問題ありませんでした。
むしろ、Reactだけに絞って解説してくれている分、内容が複雑になりすぎず、サクサク進めたと思います。
Reduxは次に勉強しないと行けない部分ではありますが、まずは「Reactで簡単なアプリが作れる」という点では自信がもてるようになり、自分の中で良い足場が作れた気がします。
どんな人にオススメ
かなり丁寧に解説されているので、相当初級の方でも読める本だと思います。
とはいえ、「変数とは?」といったレベルは理解している前提ですので、全くの未経験では辛いでしょう。
できれば npm は使ったことがあって、JQueryでWebページを作ったことがあるくらいの知識量があった方が良いとは思います。
そのうえで、「最近よく聞く React というのを、ちょっと触ってみたい」という方には、かなりオススメです。
#ほぼ、自分を思い起こして書いてるだけですがw
よーし。
React使って、アプリ開発してみるぞ!!
- 作者: 吉田裕美
- 出版社/メーカー: 秀和システム
- 発売日: 2017/09/16
- メディア: 単行本
- この商品を含むブログを見る
サンプルコードの修正版つくりました。
本書では、Material-UI 0.19 を使っていますが、これを Material-UI 1.0.0 beta 19 に書き換えたコードをGitHubに上げました。
テストコードも動きます。
GitHub - momoizo/react-janken: 書籍「作りながら学ぶReact入門」のjankenプロジェクトです。Material-UI ver1.0 β.19 対応版