実践『実践Expo』 〜第一章のかんそうと知識の整理〜
毎度のことながら段落どうのこうのは気にせず頭の中を整理するように書く。
React Nativeのよいところはビルドが速い。最初に一度ビルドしてしまえば、あとはJSの変更点だけを再ビルドするので速いらしい。これは業務で携わってない分にはわからないけど、これがあるからといってReact Nativeを採用するくらいの魅力にはならないのではないかなという印象。ネイティブのアプリのビルドがどれくらいかかるかは知らないので想像でしか無いけど。本によると規模がでかいと10分以上かかるとか。コーヒーでも入れに行けばいいと思ったけど、頻繁にこれだと確かにだるい。 でも実際はバグらないかとかドキュメントがしっかりしているかとか、そっちのほうが自分は大切な気がした。プロトタイプを半日で作る用の技術ってことなら大事になってくるとは思う。
JSXで書く。これはReactで採用されているJavaScriptのDSL。React NativeでもJSXで書く。
ハイブリッドアプリとの違いは、ハイブリッドアプリはあくまでアプリ内のWebViewを利用して描画する、だからコーディングはHTML5 + CSS + JavaScriptで、ネイティブのAPIは基本的には使えない（…はず。）なのに対して、React NativeはKotlinやSwiftなどを触る必要がでてくる。率直な感想としては、せっかくJS（もっといえばWebアプリ）っぽく書くことができるのがReact Nativeの強みだから、ネイティブにもJSを書いてアクセスしたいなぁというのが浮かんだ。これを解決するのがExpoで、ネイティブの機能をJavaScriptを書くことで使えるようになる。React Nativeは、Web開発、とくにReact.js（React.ts）を習得している人がアプリ開発を行う際に学習コスト的な意味でコスパが良さそうな技術だと思う。あとは、市場的に先にWebでアプリを展開してから、ウケればアプリ…みたいなことをするときに良さそう。逆に先にアプリならいろいろ他にも技術はある。Flutterとか。シェアとかコミュニティ規模とか、そういった違いは割愛。。でも最近はReact Native for Webとか出てきてるし、先にReact Nativeでモバイルアプリを制作してからWebに移行する際にReact Native for Webを採用して…ということができそう。たしかつい最近、ExpoがReact Native for Webに対応した。
Firebaseへの対応は、ver30.0.0時点では一部ないものがあるようだけど、正体的にはそれも対応される予定らしい。
Expoを使う際の登場人物は4人。
Clientは動作確認用？アプリで、CLIはinit等を行う。SnackはWeb IDEで、手元にモバイルがなくても簡単な動作確認ができる。SDKはネイティブのモジュールを利用できるようになるライブラリ。
ここまで読んだExpoの印象は「多少ネイティブの機能とか使えなくなってもいいからとにかくWebっぽくアプリを使いたい！」ときにジャスト・フィットするツール。よっぽどこったことをしなければExpoは必須なんじゃなかろうか。そもそもなんでReact Nativeを採用するのといったところに、AndroidとiOSの技術者を十分に集められない（金がなかったり人が居なかったり）から、React Nativeでやるみたいな場合は少なくないと思う。となると、やはりできるだけWeb文化圏の知識を応用して書きたいはず。ここまでが仮に正しいとすれば、Expoは大体のReact Nativeでの開発に必要になってきそうだなぁ〜。と思いました。
書籍自体の印象としては、導入をハードル低めに入ってくれて好き。本格的な中身はこれからなのでまだよくわかんない。
お次はSnackを使ってのサンプルの表示をやる。
実践『実践Expo』 〜読む前の頭の中整理編〜
現状の理解
一言で言えばReact Native + Expo + Firebaseの知識になるが、間違っているかどうかにかかわらず現状の知識も含めてもう少し細かく書いてみる。
React Nativeから直接操作できないようなネイティブの機能をReact Nativeのように使えるようにしてくれるのがExpoというのが現在の理解。React Nativeからでも使えるものは使えるけど、少ないので、Expoを介してネイティブのAPIを叩くイメージ。Firebaseの組み込みは…分からない。恐らくAndroidならAppDelegate.mファイルやらにいろいろ書き込むんだろうけど。
Firebaseを利用するためのコード（Firebaseを）をAndroidとiOSの各モジュールに持たせて、あとはJSファイル（React Nativeのコード内のどこか）に認証のための識別情報をもたせることでAccessを可能にしている…はず。
あとはExpo社のBaconさんが作成しているものとどう違うのか。あれは確かexpo ejectを実行するはずだけど、こちらではするのかとか。
わかりそうにないので他で補完しなければいけなさそうなこと
TypeScriptでの書き方がこれでは分からない。TypeScript自体まだ履修していないので型定義ファイルはどこにおくのか、そもそも必要なのかとか、そういったことは本書ではわかるかどうか不明。あとこれは自分のKindleアプリの調子が悪いんだと思うけど、書籍内の検索で「TypeScript」と検索してもずっと検索中でTypeScriptについて記載があるのかどうか不明。だから読んでみて分かる…けど恐らくそんなに記載はないはず。
あとはFirestoreの設計、データモデルの設計がわからなさそう。
ESLint + Prettier + VSCode 〜JavaScript編〜
今更感満載ですがやりました。あと日をまたいでしまって、後半はやる気失せたまま書いたので超雑です。
背景
（あとから付け足したら）長くなってしまったー。 JavaScriptを書いているときにいちいち自分でフォーマットを整形するのがメンドクサイ。でも整形はしたい。あとはちょくちょくESLint + Prettierで幸せになれたと聞く。
で、Prettierを使うけどもそうするとESLintで弾かれる時がある。なのでESLintで弾かれないように、ESLintに合わせる形でPrettierを機能させたい。もしくは逆。
JavaScriptはES6で、TypeScriptは次にやりたいけど今は後回し。
あと既にESLintとTSLintはVSCodeにインストール済み。
疑問なのはVSCodeの拡張機能としてインストールしたPrettier / ESLintと、npmでインストールしたものはどう違うのか、どっちがいいのかということ。…と思ったが、VSCode以外で自分がJavaScriptを書くかと言われたら、近い未来は恐らく基本的には無いのではないかと思うので、VSCodeにさえ機能ができれば問題ない気がしてきた。あとはどのPCでも同じ設定がサッと使えるとかフォーマッティングのルールを切り替えられるとかの知識のほうが大事な気がした。なのでここを調べるモチベーションは消えた。
これを頑張ると嬉しいこと
機能的にはフォーマットをいちいち手で整形する必要がなくなる。コードが見やすくなる。ESLintとの併用でバグを防げる。（使わなくてもいいけど）
あとは（他人と）働く的な文脈ではESLint + Perriterは最近のJavaScriptを書くにあたって必要になってきている場所が多いと感じるのでそれに対応できる。
やったこと
雑に
先に箇条書きでまとめてみる。 1. PerrierをESLintに合わせる。 2. ESLintはGoogleのJavaScriptスタイルガイドに合わせる。
PrettierのESLint似合わせて整形しますみたいなオプションをオンにした。あとはそれと同時に保存時に自動的に整形されるようにした。
もう少し具体的に
これに沿ってやった。 tech-1natsu.hatenablog.com
2つあるうち、自分も「1.」の方を採用した。
eslint --initがなかったので実行。実行結果は下記の通り。
How would you like to use ESLint? To check syntax and find problems ? What type of modules does your project use? JavaScript modules (import/export) ? Which framework does your project use? None of these ? Where does your code run? (Press <space> to select, <a> to toggle all, <i> to invert selection)Browser ? What format do you want your config file to be in? JSON Local ESLint installation not found. The config that you've selected requires the following dependencies: eslint@latest ? Would you like to install them now with npm? Yes
補足知識
- JavaScript StyleGuide ESLint、というかJavaScriptのスタイルガイドにはいくつかの種類がある。人気なのはGoogleとAirBnBのそれっぽい。今回はGoogleに統一してみる。
和訳はこれ。内容の正誤は保証しないと書いてあるのでそこは注意。
下記を実行。
npm install --global eslint npm install --global prettier npm install -d -g eslint-plugin-prettier eslint-config-prettier
かんそう
解説記事ではやたらと設定を開いたら（恐らくsetting.jsonに）この記述を追加してくださいみたいな物が多かった。けど自分の場合は設定開くとこうなるんだけど…みたいな状況だった。
次にやりたいこととしてはTypeScriptをTSLintで管理。ああいつになったら基礎は固まるのか…
結局できた感じの
npmでESLlintとprettierをインストール。そのあとeslint initをやるとルートディレクトリにeslintの設定ファイルができる。initの選択肢はこんな感じ。フォーマットはGoogleのものを採用。
MyMacBookAir:ES2015-sample swchrm $ eslint --init ? How would you like to use ESLint? To check syntax, find problems, and enforce code style ? What type of modules does your project use? JavaScript modules (import/export) ? Which framework does your project use? None of these ? Where does your code run? (Press <space> to select, <a> to toggle all, <i> to invert selectio n)Browser ? How would you like to define a style for your project? Use a popular style guide ? Which style guide do you want to follow? Google (https://github.com/google/eslint-config-goog le) ? What format do you want your config file to be in? JSON Checking peerDependencies of eslint-config-google@latest The config that you've selected requires the following dependencies: eslint-config-google@latest eslint@>=5.4.0 ? Would you like to install them now with npm? Yes
設定ファイルはjsonを選択したのでeslintrc.jsonができた。
あとはnpmでeslint-plugin-prettierとeslint-config-prettierをインストール。こちらはなにかinitをする必要はない。
prettierもinitをする必要はなかった。
eslintrc.jsonは以下の通り。
{ "env": { "browser": true, "es6": true }, "extends": ["google", "prettier"], "plugins": ["prettier"], "rules": { "prettier/prettier": [ "error", { "singleQuote": true } ] }, "globals": { "Atomics": "readonly", "SharedArrayBuffer": "readonly" }, "parserOptions": { "ecmaVersion": 2018, "sourceType": "module" } }
あとはsetting.jsonで保存時にESLint機能が働くようにすればOK
jsonファイル自体をいじらなくても（実際は中身をいじっているが）、ここを有効化すればOK
