過去にReact Nativeの環境構築はしたことがあるが(react native でアプリを作る環境構築をやってみるよ⚡)、それから随分と経つので、再度0からやってみる。 Expo Goの利用 モバイル開発が初めての場合はExpo Goの仕様が推奨されているので、それにならうことにする。 必要なのは、最新バージョンのNode.jsとスマホまたはエミュレータ。 React Native CLI という環境もあるが、Xcode またはAndroid Studioになるとのこと。 また初めてであれば環境構築に1時間を要することになる。 ということで、迷うことなくExpo Goを採用した。 開発サーバーの起動まではとてもシンプルで下記コマンドを実行する。 npx create-expo-app AwesomeProject cd AwesomeProject npx expo start 既存ディレクトリへの展開 ただ今回はリポジトリ作成済みでディレクトリが存在していたので、 npx create-expo-app $(pwd) 上記コマンドで現ディレクトリにAppを展開した。 そのうえで開発環境PCとエミュレータスマホを同一のWi-Fiに接続し、 npx expo start 上記コマンドで開発サーバーを立ち上げた。 エミュレータスマホでApp.jsに書かれた、Open up App.js to start working on your app!が表示されれば、立ち上げが成功している。 Hello World ! 次に、 <Text>Open up App.js to start working on your app!</Text> を <Text>Hello World!</Text> に変更すれば、当然、Hello World!が表示される。 これでReact Nativeでスマホを開発するスタート地点に立った。

英語を話す必要性を感じた瞬間 英語が喋れるようになりたいと思ったことは何度もあるが、必要性を感じたことはなかった。 だって翻訳機がこんなにも発達した世の中なのだから。 わざわざ英語を覚えることに、脳のメモリを使わなくてもって思っていた。 英語学習のきっかけ それがなぜ、英語を話せる必要性を感じたかというと、話はこの記事を書いている今から数日だけ遡る。 その日は仕事中に次に個人開発するアプリのことを考えていた。アプリの技術に何を採用するかということで頭を悩ませていた。やりたい言語はたくさんある。しかし時間は有限である。ということで行き着いた結論は、自分の好きな企業、サービスが採用している技術を採用しようということになった。 そういうわけで好きな企業の採用サイトを横断していると多くの企業で英語を採用基準にしているではないですか。 なんということでしょう。中には公用語に英語を採用している企業もある。 つまり好きな企業に行くには英語が必須である。ということに気がついてしまった。 英語学習の方法を検討 そういうわけで英語の勉強を始めようと思いたった。 じゃ、どう勉強するか。 思いついたのは、 Udemy YouTuber Podcast とかだが、性格上座学とか受動的な勉強は向いていない。 それにそういういった勉強はすでに義務教育9年間、さらに高校、大学で行っており、いま喋れていない現実がある。 うん、やっぱり能動的に学習する必要がある。 多分英語で会話をするのが一番の近道に違いない。サラリーマン金太郎もそれで英語とサウジアラビア語を覚えていた。 ということで、外国人と話ができる環境を探すことにした。最初に思いつくのは英会話だけど、仕事と双子の似非育児をしている身としては、そんな時間は取れない。 じゃあ、そもそもいつ時間が取れるかというと、まあ、1番は車の中、つまり通勤中である。 そこで勉強できるのがベストに違いない。ということで色々調べると、オンライン英会話というのがあるらしい。それを使えば車の中の暇な時間を勉強の時間に充てられるんじゃないかということで、さらに調べてみると、NativeCampというオンライン英会話が良さそうだった。 NativeCampの選択理由 複数あるうちで NativeCamp がいいと思ったのは、24時間即時レッスン可能で、回数無制限という点である。 通勤は、特に帰りは何時になるかわからないので予約せずに即時レッスンができるというのは理想的だった。 まあ、それ以上に、7日間無料で、有料登録すれば Amazon ギフトカードが貰えるというのも大きな後押しになったけど。 そういうことで、NativeCamp 始めました。 とりあえず７日間の無料体験でどこまでできるかやってみる。

domの操作をしていると、 「あれ、動かない、domの生成がまだ行われていない？　試しに５秒待った後に実行してみよう」 みたいなことが良くある。 その都度、下記のように実行してきた。 window.setTimeout(() => { operation() }, 5000) という風に、setTimeoutの中に該当する関数を入れていく。 ただこれだと、入れるべき関数がたくさんあると面倒くさい。 そこで以降すべて５秒後に実行されるというワンライナーを覚えることにした。 それ以降の行はすべて５秒後に実行されますよっと await new Promise((resolve) => setTimeout(resolve, 5000)); ただこれだけのこと。 ただこれだとasyncをつけたメソッドを用意する必要があるけれど。

誰も興味ないサイトの紹介をする意義 仕事では主にAngular、Vue、Reactを使っているフロントエンドしかできない30歳が、インフラ～すべてに手を出してみた。 作成したはいいけど、12か月後、awsの無料枠終了を見据え、運用する気はない。 そこで、ひとつ記事にでも残しておこうという思いで筆を取ることにした。 作成したサービス Vote For Name-難読エンジニアワードの読み方を投票で決めよう 簡単なアンケートサイト。 アイデアに関しては、悲しいかな、特筆すべき点はない。 エンジニアリングするうえで、読み方がよくわからない言葉が良くあるので、それを投票で決めようといった魂胆。 競合とかは特に調べていない。 使用した技術 インフラ aws Lambda aws RDB aws API GateWay Vercel バックエンド NestJS TypeORM フロントエンド NextJS インフラ インフラは初めて、awsに手を出してみた。 永久無料枠がない従量課金制は初めてなので、請求に不安を感じる。 柔軟にスケールできていいのだろうけれど、スケールアップしないので、定額の方がうれしい。 まあ、いい勉強にはなった。 無料枠のよくわからないawsの無料枠について真剣に調べてみた CORSでクロスオリジンの設定をする際に、なんでドメインを絞り込む必要があるのか浅く理解した AWSのRDSに接続したいけど踏み台サーバーでうまく接続できなかったので、RDSをパブリックサブネットに置きHeidiSQLで接続を試みる バックエンド バックエンドにはNestJSを採用した。 理由は、フロントと言語を統一することで効率化を図れるという点と、学習コストが低そうだった点。 Angularに似ている言語ということで、普段Angularを業務利用している身としては、非常に手っ取り早く、概要をつかむことができた。 言語としての不満はなく、今後も使っていきたいと思ったが、いかんせん日本語の情報が少なく苦労した。 NestJSのエラーレスポンスをカスタマイズする NestJsで作成したプロジェクトをAWSのLambdaにあげて動かすまでの作業ログを残しておく LambdaにのせたNestJSでapp.enableCors();を指定しているのにCORSエラーがでたので解消するまでを記録した フロント 迷うことなく、NextJSにした。 現在、個人開発をするとなったら、一択の選択肢かなと感じている。 ただ今回、Next13のAppDirにちょっと戸惑う点もあった。 SSRの書き方とかが簡略してていいと思う反面、サーバーコンポーネントとかの概念がいまだにつかみ切れていない。 それでも、引き続きNextJSを採用し続けると思われる。 フロントのサーバーはVercelにアップしたNextJS使うのであれば、第一の選択肢だろうし、実際そうなった。 エックスサーバーで借りたドメインのサブドメイン使用し、Vercelにカスタムドメインを設定する このサービスの今後 awsの無料枠を終えた後も続けるメリットはないので、運用していく気はない。 ただせっかく勉強のために作ったので、無料枠を終えるまでは暇を見つけて、issueを解決していきたいと考えている。 isuue 動けばいいやという思いもありつくったので、細かい箇所を理解しつつ、ブラッシュアップしていきたい。 初回アクセス時Vercelがサーバーレス関数の発火をまたずにタイムアウトする。 CORSの設定をちゃんやる LambdaとGithubの連携をする JWT認証をCSRF認証に変更してみる マイグレーションの設定をちゃんとやる とか🤔🤔

個人開発でawsデビューをしたが、料金不安なので調べてみることにした。 正直開発したサービスがawsの何のサービスを使用しているかわからないので請求書ダッシュボードからあげだしてみた。 請求書ダッシュボードにあるデータ AWSの概要 アクティブなサービスの合計数：８ アクティブな AWS リージョンの合計数：５ アクティブなサービスの合計数が何かというのを調べるために、aws の請求 > 請求に行き、サービス別料金を見ると一覧で見れる。 アクティブなサービス 今回は下記を使用しているらしい。 API Gateway CloudWatch Data Transfer Elastic Compute Cloud Key Management Service Lambda Relational Database Service Simple Storage Service ぱっと見、知らないサービスもあったが、いったん寝かせておく。 アクティブな AWS リージョン 次にアクティブな aws リージョンの合計数について調べてみる。 調べた感じ利用できるリレージョンとのこと、つまり使用しているリレージョンではない。 つまり気にしなくていい。 awsの無料枠 AWSの無料枠は注意が必要。 というのも3パターンの無料枠がある。 無料トライアル 指定期間利用できる無料枠 12 か月間無料 AWS に最初にサインアップした日から 12 か月間無料で使用できるプラン 無料枠 有効期限はなく、AWS のすべてのお客様が利用可能 つまり上の２つは期限が過ぎれば支払いが発生する可能性がある。 また最後の１つも枠を超えれば、支払いが発生する可能性がある。 ただこちらは枠さえ守れば永久的に無料で使用することができる。 AWS 無料利用枠を参照することで無料枠を調査することができる。 これを用い、使用したサービスの無料枠を中心に見ていきたい。 今回使用したawsのサービスがどういう無料枠の形態を取っているか API Gatewayは12か月無料で以降は課金される。 CloudWatchは無期限無料で10 のカスタムメトリクスおよびアラームが無料とのこと カスタムメトリックスはユーザーが独自に定義し、収集、監視できるメトリックデータのこと アラームとは特定の条件が満たされた場合にユーザーに通知を送信するための仕組み Data Transferは記述がない。 使っているかもわからない Elastic Compute Cloud（EC2）は12か月無料で以降は課金される。 Key Management Serviceは無期限無料で20,000/月の無料リクエスト枠がある Lambdaは無期限無料で100 万/月の無料リクエスト枠がある Relational Database Serviceは12か月無料で以降は課金される。 Simple Storage Service（S3）は12か月無料で以降は課金される。 うーん、どうなんだろう 正直、釈然としない。...