swchrm logs

妄想技術録

Expo操作 〜eject〜

覚書です。 基本的には公式ドキュメントを理解したものを書き連ねただけ。

expo ejectはなんのためにやるのか

カスタムネイティブモジュールを利用したいときに行う。カスタムネイティブモジュールとは、iOSならSwiftやObjective-Cで書かれたモジュールのこと。Epxoは基本的にネイティブコードとReact Native（JavaScript）部分の間のあれこれをうけもってくれている。そのために利用者はネイティブコードを気にしなくて済む様になる。普段はネイティブのコードを書いて実装するはずの機能を、React Native CoreまたはExpo SDKを利用することで実現できるのだ。そのかわりに、React Native CoreまたはExpo SDKから提供されている以外の処理を実現したかったら諦めるか、ネイティブコードを書くしか無い。このようなときに、expo ejectを実行してネイティブコードを書く作業に移る。

ejectを実行した後に出てくる「ExpoKit」。これは、Objective-CとJavaのライブラリである。

参考にした文献

docs.expo.io

docs.expo.io

qiita.com

qiita.com

developer.android.com

GitHubのログインパスワード変更による、Gitからのリモートリポジトリへプッシュできなくなる事象の対処法　〜osxkeychain版〜

git GitHub MacOS 覚書

個人的な覚書です

環境

事象

いつもどおりローカルでGitのステージング、コミット、プッシュを行った。そうしたらプッシュ時にエラーがでた。ターミナル出力は下記の通り。リポジトリ名等は一部hogeなどとボカしてます。

MyMacBookAir:hoge-project swchrm$ git push -u origin master
remote: Invalid username or password.
fatal: Authentication failed for 'https://github.com/hoge/hoge-project.git/'

原因

GitHubのパスワードを変更したことで、ローカルに保存してあるGitHubアカウントのパスワードと実際のパスワードが食い違ってしまっているため。

対処法

osxkeychainで保存されている認証情報内のパスワード欄を更新します。

MacOS標準搭載のキーチェーンアクセスアプリで、GitHubの項目からパスワードを変更します。変更後にプッシュ成功すればOK。自分は変更後一回目のプッシュでusernameとパスワードを聞かれたけど、2回目以降は聞かれなかった。

osxkeychainの情報が反映されているのか確認したかったらgit credential fillコマンドで確認すると確実。

補足

自分の認証情報を閲覧する

git credential fillコマンドの詳細は下部の参考文献の1件目にある。コマンドを実行するとプロトコルとホスト名を入力。一行空白をおき実行。そのあと、ユーザー名とパスワードを聞かれるので、入力すると以下の情報が得られる。

MyMacBookAir:.git swchrm$ git credential fill
protocol=https
host=github.com

Username for 'https://github.com':hoge
Password for 'https://hoge@github.com': 
protocol=https
host=github.com
username=hoge
password=hogehoge

自分が利用できるhelperを確認する

git help -a | grep credentialで確認可能。 確認結果は以下。

MyMacBookAir:.git hoge$ git help -a | grep credential
  credential                remote-ext
  credential-cache          remote-fd
  credential-cache--daemon  remote-ftp
  credential-osxkeychain    remote-ftps
  credential-store          remote-http

複数helper利用時

認証情報の保存は複数のhelperで行われる様子。複数のhelperを利用している場合はどのhelperに保存されている情報が優先で適用されるのかを確認する必要がありそう。今回は自分がキーチェーンアクセスのみなのでここでの紹介はありません。

所感

git credential fillで自分の認証情報を閲覧できるけども、これがどの方式で保存されているか分からない。Gitの認証情報保存方法はいくつかあるということで、自分の保存方法が何かを確認するのに少し手間取ってしまった。

参考にした文献

git-scm.com

gist.github.com

React.jsの理解促進のために、問に答える形でここまでの理解を書き出してみる。

React.js TypeScript Jest Redux SPA

はじめに

アウトプットによる理解度の確認を目的としてます。 情報の正確性を保証するものではないです。

問) Reactとはなにか。またそれにまつわる技術は。書けるだけ書け。

React.jsはUIを簡単に構築するためのFacebook製のUIフレームワーク。と思っていたが早速違うようで、React.jsはフレームワークではなくライブラリ。公式にも「A JavaScript library for building user interfaces」との記載がある。

基礎概念・キーワードは下記の通り

また実用に伴って関係が出てくる要素は下記の通り

  • TypeScript
  • Jest
  • React Native
  • Webpack

リアクティブとは…よくわからない。

コンポーネントとは、SPA（Single Page Application）を制作する際に重要になってくる概念。SPAとは旧来のWebサイトで主流だったページ遷移を行わない。ページ遷移を行わないというよりかは複数のHTMLファイルを利用しないといったほうがいいのか。そのかわりに、表示されている要素（ブロック、ヘッダーやコンテンツなどなど）を細かく部品として捉え、その部品化された各要素をなんらかのアクションによって入れ替えてアプリの状態・表示を変更する。このときの部品をコンポーネントという。大抵はこのコンポーネントごとにファイルを作成する。例えばヘッダーだったら「Header.tsx」のようになる。またコンポーネントの中にもコンポーネントは存在できる。ヘッダー内にログインコンポーネント、メニューコンポーネントなど…（実際のコンポーネント分割）

Reactを使う際にはReactのコアライブラリとReactDomをインポートする必要がある。なぜ別れているのかは現時点では不明。Reactはコアライブラリなので必須なのはわかる。ReactDOMが必須かどうかは不明。Reduxは必須ではない。ただし大規模アプリでは入れたほうがいいっぽい。 Reduxは何かという話だが、これは状態管理に特化したライブラリという認識。必須ではないといったのは、ReactのコアライブラリだけでコンポーネントないにState項目を設けて、そこに状態を保持できるから。どのくらいの規模ならReduxが必要になってくるのかは不明。恐らく傾向があるだけでこれと行った正解はないはず。 ReduxはFluxから影響をうけて作成されている。Fluxと何が違うかはよくわかっていない。

「状態」の概念が重要になってくる。ここでいうところの状態とは、例えばユーザー（ユーザーオブジェクト）がログインしている/していないことや

Jestはフロントエンドのテストツールであり、公式ドキュメントのチュートリアルでも使われているテストツール（テストフレームワーク？）。テストしたいDOM要素を選択し、入力と予想結果を決められた形で書く。チュートリアルのデフォルトだとhoge.test.tsxのようにテストしたいファイル名の拡張子の直前に.testを入れるとファイル保存時にテストが走るようになる。コケるとコンソールにエラーが出る。実際はEnzymeと一緒に使う。詳しくは下記記事参照。

mae.chab.in

TypeScriptについてはJavaScriptで書くかTypeScriptで書くかという話で、自分はTypeScriptを選択している。理由としては保守フェーズで型の恩恵が得られるということ。ソフトウェアには開発だけでなく保守がつきものだと思っているので、よっぽど開発速度を争うような自体でなければ、開発規模にもよるが多少開発速度が落ちても運用・保守・拡張をしやすいほうがいいといえる。実際にTypeScriptのほうが良いのかという話は、見聞きした中でとりあえず採用して実感してみるという段階なので正直不明。

不明点メモ（順不同）

  1. リアクティブ
    そういえばリアクティブがよくわかっていない。恐らくわかっていなくても雑には書けそうだが、基礎概念を理解することでより理解度を上げたい。

  2. コンポーネントを分割する単位、分割の基準
    コンポーネントを分割する単位がよくわからない。例えばヘッダーはヘッダーで別れた後、メニューコンポーネント、ログインボタンコンポーネント…という具合に分かれるのか？この辺は「React コンポーネント設計」とかで検索すれば出てきそう。

  3. Reduxが必要/不必要の基準
    Reduxは必須ではない。だがどのようなときに必要で、どのようなときにいらないのかが分からない。また何を基準にするのかが分からず、その閾値も不明。 予想ではアプリのの規模、特にStateやコンポーネントの複雑性が高くなってくると必要になりそう。

  4. StateとPropの違い
    Stateは状態で、ログインしてるかなどの情報を管理する概念だということはなんとなく把握できている。ではPropは？一般的にデータモデルはこのPropで管理され、ここに値をセット/ゲットしていくことで表示を変えたりDBに値を書き込んだりするのか？

  5. Reduxの使い方
    これは実際にどうコードとして書いていくかみたいなところ。 マッピー氏の記事にいいのがありそう。

不明点解消…？に向けて

  1. リアクティブ
    下記を参照にした。 www.reactivemanifesto.org が、抽象的でまだわからないのでこれは保留。

  2. コンポーネントを分割する単位、分割の基準
    下記が参考になった。コードもあって具体的。ヘッダー、ボディ、とDOMのブロックごとにComponentを分けている。これが個人的には分かりやすい。 medium.com
    ただし、下記3.の記事に

「Reactを少し使ってみれば、Reactのデータフローが親コンポーネントから子コンポーネントにpropsを渡す作業であることがわかります。」

とあるので分けまくると実装がだるいことになりそう。

  1. Reduxが必要/不必要の基準
    下記で解決。分かりやすい。

techracho.bpsinc.jp

特に必要となる原因は

「Reactでは（他のフレームワークでも同様ですが）、親子関係にないコンポーネント同士でのやりとりがスムーズにできません。Reactでは、それが必要な場合にはFluxのパターンに従ってグローバルなイベントシステムを構築せよとアドバイスしています。そしてここがReduxの出番なのです。」

そして解決法は

「Reduxを使うと、アプリの全ステートを保持する「ストア」が使えるようになります。コンポーネントAでステートが変更されるとそのことがストアに伝わります。コンポーネントAのステート変更を監視する必要のあるコンポーネントBやCはストアにサブスクライブすることで、ステートの変更がストアから中継されます。」

と明快に示されている。原文には図があってさらにわかりやすくなっている。 4. StateとPropの違い
基本的には下記記事を参考にした。 qiita.com 上記記事ではStateはComponentを持つが、 また5.で掲載した記事でも触れているが、StateはPropに紐付けられるものであるので不可分ではない。
5. Reduxの使い方
下記がとてもわかり易かった。一度では把握しきれないと思うので何回か見直そうと思う。 qiita.com

Steteの分け方はここに推奨方法の記述があった。ひとまずはこれに習おうと思う。

DomainState、 AppState、 UIState という３つのStateに分割することが提案されています。

www.enigmo.co.jp

あとがき

なんかオーダーリストで引用を挟むと順番がリセットされるけど、対処してません。