前回は環境構築したので、今回のゴールは簡単なアプリっぽいものを立ち上げるまでとする⚔️ sampleProjectという名前のサンプルプロジェクトを作成するために下記コマンドを叩く。 と、沢山の選択肢が示される。 $ expo init sampleProject ? Choose a template: » - Use arrow-keys. Return to submit. ----- Managed workflow ----- // Expo のサポート下で開発できる（簡単） blank a minimal app as clean as an empty canvas // １番シンプルな状態で blank (TypeScript) same as blank but with TypeScript configuration // １ページからスタート > tabs (TypeScript) several example screens and tabs using react-navigation and TypeScript // 複数の画面遷移ができる状態に ----- Bare workflow ----- // Expo なしでの開発に近く、カスタマイズ性は上がる（難しい） minimal bare and minimal, just the essentials to get you started 今回は勉強なので、１番しっかりしてそうな「複数の画面遷移ができる状態に」を選択。...

まずは、Node.js LTSをインストールする必要がある。 私はnode管理ツールにvoltaを使用しているので、 $ volta install node success: installed and set node@16.16.0 (with npm@8.11.0) as default ↑を実行する。 Expo CLI のインストールする npm install --global expo-cli 正常にインストールできたかは、 expo whoami ↑を実行する。 結果、 bash: expo: command not found できていない…。 ログを辿る限り↓が怪しい。 Please ensure you have correct permissions to the Volta directory. 翻訳すると Volta ディレクトリに対する正しい権限があることを確認してください。 とのこと…、なるほど🤔? 調べてみるとそそもそもvoltaを使う際は開発者モードを有効にする必要があるとのこと。 会社のPCはvoltaを入れる前に有効にしていたので気が付かなかった。 ということで有効にしたうえで再挑戦。 npm install --global expo-cli やって、 expo whoami やると Not logged in, run expo login to authenticate 無事にインストールできた👍...

まずはAPIで色々配列を取得しました。 そのuuidを使って取得したいAPIがあるので、foreachで回してデータを加工しようと思ったがうまくいきませんでした。 という事象にひどく悩まされた。 例えば、こんなコードを実行してみた。 const array = [1, 2, 3, 4, 5] array.forEach(el => { window.setTimeout(() => { console.log(el) }, 1000) }); console.log('forEach完了') // forEach完了 // 1 // 2 // 3 // 4 // 5 上記のコードを実行すると、コメントアウトのようになる。 いや、違う違う、4が出た後に「forEach完了」が欲しい。 じゃあ、どうするか？ のように実行することでコメントアウトのように、つまり臨んだ結果になった。 const array_2 = [1, 2, 3, 4, 5] var Promises = [] array_2.forEach(el => { Promises.push( new Promise((resolve) => { window.setTimeout(() => { console.log(el) resolve() }, 1000) }) ) }); console.log('forEach完了！') Promise....

いや、本当に今更なんだけれど、JavaScriptの復習をしていて、「即時関数」の便利さ、スマートさに気が付いた。 即時関数を使ってみた 今まで初回実行 & 使い回す場合は const consoleHello = () => { console.log("hello") } consoleHello() のように、書いていた。 が、即時関数を使えば、 const consoleHello = (() => { console.log("hello") })() のように書くことができる。 つまりこれで初回実行 & 関数としての使い回しが可能なのである。 なんで、いままで使ってこなかったのか。 使い回せない と思ったけど、使い回せなかった。 まあ、即時って言ってるし… つまりこういう使い方じゃない。 使い回すことはできなかったけど、中に関数を書くことはできた。 const consoleHello = (() => { console.log("hello") return { consoleGoodbye: () => { console.log('goodbye') } } })() こんな感じで関数を書いて、 <button onclick="consoleHello.consoleGoodbye()">JavaScriptを実行する</button> で、実行できる。 うーん、なるほど。 つまりタイトルでスマートとか書いたけど、思っていたスマート差はなかった…気がする。

Layout header や footer 等 全てのページで使われるパーツ ng g component layouts/componentName Pages ページごとのコンテンツを表示するページ ng g component pages/componentName Parts layout や page で使われるカードなどの UI パーツ ng g component parts/componentName テストをするためには必要だが、無駄なファイルを増やさないために ng generate component componentName --skip-tests でspecファイルを作らずに済む。 コンポーネントを呼び出したい <app-componentName></app-componentName> で、コンポーネントを呼び込む。