OYA Hiroki

久しぶりにTypeScriptを触って未経験で入社して2ヶ月と少し経ちました。最近では、バックエンドを動かしながら課題を進めていますが、入社する前までは、JavaScriptを中心にHTMLやCSSを学んでいましたが、入社して初めて、本格的にバックエンド（今回ではAWS）の使い開発を進めるにあたり、かなり苦戦しています。特にAPIを使って欲しい情報を取得するという流れも、アプリを作る上では当たり前のことですが、その当たり前すら初めての経験で、毎日新しい発見と数多くのエラーに遭遇しています。TypeScriptも少しだけ基礎的なことを学び、簡単なTODOリストなどに型を付けるという作業はしましたが、AWS Amplifyなどを使って開発に挑戦してみる際に、どうしても型定義でのエラーが目立ってしまい、なかなか本題のバックエンド開発の方に行き着かないということもありました。そのため、その時はTypeScriptを使わずReactでフロント側を作り課題を進めました。そんな中、今回久しぶりにTypeScriptを触り、かなり型指定でハマってしまいました。どうしてハマったのかTypeScriotを最初学習している際には一から作りながら、それに合わせて型を決めるという感じで進めていたのですが、今回は、社内でよく使うサービスを学びつつTypeScriptも書こうということで、ある程度サンプルが出来上がっているものをReactで少し書き換えてそれにTypeScriptで型を付けるという流れで行いました。久しぶりに触り、少し忘れているところもありましたが、とりあえずどういった値が入るのかを一つ一つ調べて型を定義していきました。（少し余談ですが、頭が大文字から始まるのと小文字から始まる（Stringとstringなど）ので意味が大分違ってくることを知り、基本小文字で書くということを今回初めて知りました。）まず、ハマった原因一つ目は、しっかり理解できている型以外は、エラーを消すのが目的になっていたことです。エラーのメッセージで出てくる中には、入る値は分かっていても、使っているライブラリなどによっては初めてみるものも多く、調べてある程度機能を把握するものの、それが他にどのように影響するかを深くまで理解できていないことがあります。そうなった際に、とりあえずエラーを消すことだけを考えてしまい、調べて出てきたものを試し、それによってエラーがなくなれば良しとしているところがあり、これにより後々直した際に、それが原因でまたハマってしまうという流れができてしまいました。これにより、そもそも型を付ける本来の目的を見失っており、ここでやっていることは型にanyを付けていることと何も変わらないと感じました。二つ目のハマった原因は、TypeScriptを型の付け方の理解度がまだ低いことにあると思います。そもそも今まで使ってこなかったので仕方ないのですが、それでも学習した基本の型などはできると思っていました。しかし、実際は「この型であっているのか？」「関数コンポーネントの場合、FCで[children]を含まない場合はVFCを使うが、こんな書き方だったか？」などと自信がなくなり、結果今回、「利用しているライブラリの型を変えるのでは？」と普通に考えたら、あり得ない考えに至ってしまいました。三つ目にハマった原因は、タイトルにもある通りTypeScriptのありがたみを感じておらず、少し毛嫌いしていることにあると思います。まだ、ほとんど使ったことがないのに何気毛嫌いしているんだと思いますが、使ったことがない上にその便利さに気付けていないんだと自分でも思います。学び始めたタイミングも、Reactを段々と理解してきた矢先にTypeScriptを学び始め、自分の中で整理できていない状況で学習を進めていたために、混乱してしまい理解が中途半端な状態であったような気がします。さいごにTypeScriptは会社の先輩やネット記事などでも、開発においてはとても重要だということは知っているのですが、自分が使った方がいいと認識のもと自信を持ってTypeScriptを使う段階にまだいけてないので、とりあえず今は、とにかくTypeScriptと向き合う回数を増やし、少しでも好きになれるように努力していきたいです。

TypeScriptを好きになりたい

はじめにAmplify CLIを新しく環境を作成する機会がありましたので簡単にまとめておきます。Amplify CLIで環境を作成amplify env listコマンドでで現在ある環境を確認できます。amplify env addコマンドで「? Do you want to use an existing environment」今ある環境を使いたいか聞かれるので「No」を選択します。(amplify env add (環境名)でも作れたと思います。)次に「? Enter a name for the environment」と聞かれるので、環境名を入力します。その後、同じようにamplify env listコマンドで確認すると、作った環境が増えていますので、amplify env checkout (環境名)で変更できます。さいごにamplify pushコマンドをするとAmplifyコンソールに反映されると思います。さいごに途中から環境をもう一つ作りたいときや、検証用として試しに動かしてみたいといったときに複数の環境を簡単に作れるのはありがたいです！

Amplify CLIで新しく複数の環境を作成する方法

はじめに今回、Amplifyを使っての開発でハマったことは、前回まとめた、[ AWS Amplifyで既存のCognito User Pool / DynamoDBをimportする方法 ]　https://qiita.com/03hiro/items/118f6e0f66d6cdff439bで作っていたアプリです。その中で、「Cognitoでの認証機能の実装」、「AmplifyでCognitoのユーザープールからユーザー情報を取得する」、「AmplifyでDynamoDBのからユーザー情報を取得する」。また、「開発の経験がないことによってハマったこと」。この4点についてまとめようと思います。Amplifyを使うのが慣れていなかたったこともあり、かなり作るのに時間がかかってしまい、最初の方での作業でハマったことに対する対処方法が違う点があるかもしれませんが、その際は教えていただけたら幸いです。1、Cognitoでの認証機能の実装でハマったこと（実践したことも）1、amplify import authコマンドで既存のCognitoをimportする2、その後、Reactの「App.js」ファイルを書き換え、amplify pushで更新した。3、Amplify コンソールで確認すると、ビルドの際にエラーが発生していた。対処方法環境変数が設定されていないことが原因でした。１、Amplify コンソールを開く２、サイドバーのアプリ設定>環境変数を選択肢する。3、変数の管理ボタン押し、環境変数を設定する。(今回の場合は[amplify/team-provider/info.json]から定義してある変数を設定しました)2、CognitoのUserPoolから自分以外のユーザー情報を取得する際にハマったこと（実践したことも）1、APIを使ってのデータのやり取りについて未経験の為知識がなく、とりあえずそれらしいことを、片っ端から調べてみる。2、調べると「aws-sdk」を使う必要があることは分かった。3、以前勉強したチュートリアルでは「GraphQL API」で学習をしていたのでとりあえず、amplify add apiコマンドで追加してみる。4、CLIの? Restrict API accessで「Yes」を選択するとエラーが起きる。5、[4]をとりあえず置いといて、調べたコードを自分のに当てはめてみるが動かない。6、自分では対処法が分からなかったので、先輩にアドバイスをもらう。対処方法1、「aws-sdk」をnpm i aws-sdkコマンドでインストールする。2、「GraphQL API」でもできるが、「REST API」の方で今回は進めた。3、上記の[4]での原因は、最初のCognitoでの設定が途中うまくいってなかった為、「Yes」にするとエラーが起きることが分かり、やり直すよりも今回は「No」を選択肢し、サーバー側の方で、設定を定義するようにした。4、これ以降は、前回の記事の通りに進めたら取得ができました。※ 5、作業を進めていくと、たまに「AWS IAM」がdefaultに切り替わってることがあり、最初は変わってることに気付かずにCognitoの認証が通らずハマりました。なので作業に入る前は、毎回使っているIAMを確認する必要があります。3、DynamoDBからユーザー情報を取得する際にハマったこと（実践したことも）1、とりあえず、CognitoのUserPoolからユーザー情報を取得するやり方を参考にAPIの実装しamplify pushをするとエラーが出てうまく更新されない。2、amplify pushをするとエラーが出てうまく更新されない。2、本来、APIを追加するとCLIの選択によってここで「Function」も作られるはずが、作られない。3、取得方法を探すが記事などの内容のどこまでを参考にすれば良いのか分からない。4、基本的な書き方を先輩にアドバイスをもらい実践するが動かない。5、その後、アドバイスをもらいコードを書くが取得できない。対処方法1、作業しているローカルの「git」や「Backend environments」などに手探りで色々と追加などをしたため、一度、git cloneし作り直した。2、「Function」が作られない原因はCLIの途中でエラーが起き最後まで完了していなかったことが原因でした。（ここでも「Restrict API access」が主な原因でした。。。）3、動かなかったのは、コードを試したのがReactの方で試したのが原因でした。Create React Appでは「　REACT_APP_（名前）　」のように一定の命名規則に則った環境変数をビルド時だけ読み込むのが仕様となっているそうです。その為、その命名の規則ではない環境変数では読まれずに「セットした環境変数が読まれていない！」という問題が発生するみたいです。4、2つ目の動かなかった原因は、APIのパスがもう一つのAPIのパスと同じだったのが原因でした。5、[backend/function/app.js]に直接テーブル名を直接コードに落とし、「scan」で一括取得を試しました。その後に「query」の書き方に変更し、取得する条件を加えていきます。（この辺りも前回の記事の通りに進めました）4、開発の経験がないことによってハマったこと正直、ここでの原因は最初の作業に入る前の環境を作る際に、あまり今後を意識しないで始めた為に後々になってから、遭遇しなくていいエラーにも遭遇したと思います。手探りで作業を開始しので仕方がないとは思いますが、ここまで影響が出るとは思いませんでした。。。gitやAmplify environmentsの環境を開発用（dev）と本番用（prod）として初めから分けていなかったことが、作業途中で気付き（本番用のUserPoolと開発用のUserPoolを分ける際）、environmentsではprodなのに取得しているUserPoolはdevといったおかしな事になってしまいました。さいごに今回はアプリを作っていく上で一日に少なくとも3、４回ハマってしまい、作業が止まってしまいました。それの半分は作業している環境が悪かったことが原因だと思います。今起きているエラーの原因は、書いているコードが違いエラーが起きているのか、それともそれ以外が原因なのかが、これだと分からなくってしまいますので、環境だけはしっかりと整えた上で今後は作業していきたいと思いました。また、今回一度だけ、「AWS Amplify」自体の不具合にも遭遇したため、今後経験を積んで行き、自分に問題があるのか、それともサービス自体に問題があるのかを見極める力も培っていきたいです。

Amplifyのバックエンド開発でハマったことと、その対処方法

はじめに今回、開発未経験の私がAWSのAmplifyを使いユーザーの検索を行うアプリを作りました。そこで、既に作成されているCognitoからUserPoolをimportしてユーザー情報を取得する方法と、既に作成されているDynamoDBから取得したいテーブルをimportして情報を取得する方法を、今後も扱うことがあると思いますので、メモとして残しておこうと思います。また、右も左も分からない手探りな状態で進めているので、もしやっている事とその意味が違った場合は、教えていただけたら幸いです。作成されているCognitoのUserPoolをimportする方法私は、CognitoのUserPoolからユーザー情報を取得して、名前が存在した場合は表示させる機能を実践したのでそれを軸に書いていきます。1: 自分以外のユーザー情報を取得するにはaws-sdkをまずimportして使う必要がある。2: aws-sdkのドキュメントで取得する方法を探す。それらしい処理を書いてみる。（この際はテスト的に書くため別ファイルを作り検証する）const { CognitoIdentityServiceProvider } = require("aws-sdk");const cognito = new CognitoIdentityServiceProvider({    region: "us-east-2",  });cognito.listUsers({    UserPoolId: 'us-east-2_xxxxxxxxxx',}).promise().then(user => {    console.log(user)}).catch(e => {    console.log(e)})(ここで自分はAWS IAMがdefaultになっていたので使っているProfileをawspで確認しておく必要がある。...なぜか勝手に切り替わってることがあるので作業に入る前に都度確認する方が良い。)これをnode (ファイル名)で実行し、取得できていることが確認できる。※このときにエラーコードAccessDeniedExceptionが返ってきた場合は、AWS LambdaのIAMロールにポリシーの追加が必要なので、[function/src/(function名)cloudformation-template.json]の中を変更する必要があります。3、次に検索の絞り込むを追加します。公式ドキュメントを参考に絞り込む方法を探し、「Filter」でusername= \ "Reddy \"すればいいみたいです。https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_ListUsers.html今回は、前方一致でユーザー名を検索したいので、=を^=と書き変えます。const { CognitoIdentityServiceProvider } = require("aws-sdk");const cognito = new CognitoIdentityServiceProvider({    region: "us-east-2",  });cognito.listUsers({    UserPoolId: 'us-east-2_xxxxxxxxxx',    Filter: "username^='dev_abc'"}).promise().then(user => {    console.log(user)}).catch(e => {    console.log(e)})これによりdev_abcのユーザー名から始まるデータをまとめて取得できます。４、次びamplify add apiコマンドでAPIを追加しますここでは[GraphQL API]と[REST API]を選べますが、今回は、[REST API]を選びました。（また、amplifyの一番最初の設定で間違えていたため、? Restrict API accessをYesにするとうまくいかないので、Noを選択肢し、認証機能をfunctionで設定します）また、? Choose a Lambda source Create a new Lambda functionを選択するとAPIと一緒にFunctionも作られます。5、[function/(function名)/src/app.js]の中を書き換えます。今回はデータの取得だけなので、Example get methodの中身のみ変更を加えます。const express = require('express')const bodyParser = require('body-parser')const awsServerlessExpressMiddleware = require('aws-serverless-express/middleware')const { CognitoIdentityServiceProvider } = require("aws-sdk");const cognito = new CognitoIdentityServiceProvider({    region: "us-east-2",  });/** * [4]で話していた認証設定をここで行う。 **/const getCognitoUserByToken = async (req) => {  const authorization = req.headers.authorization;  if (!authorization) {    return;  }  const data = await cognito    .getUser({      AccessToken: authorization || "",    })    .promise();  if (!data) return;  return data;};/** * Cognitoユーザーをユーザー名（前方一致）で検索する機能を定義する * * @TODO  * @param {string} username  * @returns  */const searchUserByName = async (username) => {    const { Users } = await cognito.listUsers({        UserPoolId: getUserPooldId(),        Filter: `username^='${username}'`    }).promise()    return Users}/** * 実際はLambdaの環境変数などを使う。（今回は2択そのまま書きます） */const getUserPooldId = () => {  const env = process.env.ENV || ''  switch (env) {    case 'prod':    case 'production':      return 'us-east-2_xxxxxxxxxx'    default:      return 'us-east-2_zzzzzzzzzz'  }}// declare a new express appvar app = express()app.use(bodyParser.json())app.use(awsServerlessExpressMiddleware.eventContext())// Enable CORS for all methodsapp.use(function(req, res, next) {  res.header("Access-Control-Allow-Origin", "*")  res.header("Access-Control-Allow-Headers", "*")  next()});app.get('/users/:username', async function(req, res) {  try {    const user = await getCognitoUserByToken(req);    if (!user || !req.headers.authorization) {      res.status(401).json({        message: "UnAuthorized",      });      return;    }    const users = await searchUserByName(req.params.username)    // Add your code here    res.json({users, env: process.env});  } catch (e) {    console.log(e)    res.status(500).json({message: e.message, code: e.code})  }});app.listen(3000, function() {    console.log("App started")});// Export the app object. When executing the application local this does nothing. However,// to port it to AWS Lambda we will create a wrapper around that will load the app from// this filemodule.exports = app6、最後にamplify pushします。作成されているDynamoDBをimportする方法1、REST APIやGraphQLで既に作成されているDynamoDBのテーブルにアクセスしたい場合は、Amplify CLIでデータをインポートします。2、amplify import storageを実行しStorageとしてDynamoDBのテーブルをimportします。3、選択にS3 bucketかDynamoDB tableの選択がでますが、DynamoDB tableを選びます。4、importするテーブルの候補は? Select the DynamoDB Table you want to import:のようにCLI側が出してくれます。（AmplifyのProjectでのリージョンと同じ必要があるみたいです。）また、一回で複数の選択はできないので、importしたいテーブルが複数ある場合は、何回か同じように実行する必要があります。5、Cognitoの時と同じようにamplify add apiでREST APIを追加します。? Choose a Lambda source Create a new Lambda functionを選択するとAPIと一緒にFunctionも作られます。6、[function]を書き換えます。const queryAllSiteItem = async (username) => {  const params =  {    TableName: 'xxxxxxxxxxx',    IndexName: 'xxxxxxxxxxxxxxxxxxx',    KeyConditionExpression: 'site_owner = :site_owner AND begins_with(stock_state, :stock_state)',    ExpressionAttributeValues: {      ':site_owner': username,      ':stock_state': 'in'    },   }  const result = await ddb.query(params).promise()  console.log(result)  return result}7、変更を加える箇所はDynamoDBからデータを取得する上記の定義ぐらいで、他はCognitoのUserPoolからユーザー情報を取得する流れとあまり変わらないと思います。（変更があった場合は、最後にamplify pushをするのを忘れないようにする。）　さいごにここまで、あたかも全て理解している様に書いてましたが、今回行ったことのほとんどが自分一人では分からず、会社の先輩にアドバイスをいただきながら実装しました。終わった今では多少理解できるようになりましたが、今回ハマった箇所がかなり多かったため、正直今だに頭の中が整理できていない状態です。その為、次は「Amplifyのバックエンド開発でハマったことと、その対処方法」について、できるだけ思い出しながらまとめようと思います。

AWS Amplifyで既存のCognito User Pool / DynamoDBをimportする方法

近況報告今日で入社して約一ヶ月が過ぎました。そのため、ここで短めですが現状の振り返りまとめておこうと思いました。今の会社に入社して、ほんとに多くのことを学べているなと思いました。他の会社が未経験で入社した際にどのくらい学べるのかは分かりませんが、多分他の会社に比べても幅広い事を学べており、恵まれた環境だな思います。フロントエンド側では、入社しJavaScriptの復習から始まり、Reactの基礎やルーティング。また、Netlifyを使って実際に簡単なアプリを作り、それを公開する流れを学びました。バックエンド側を初めて使った学習は、ExpressやSequelizeを使ってのAPIサーバーの開発やAuth0によるユーザー認証機能の追加、またAWS Amplifyを使ってのアプリ開発など学びました。今まで、フロント側だけを学習で触ってきた自分からしたら、ここでのサーバーに関する記述など半分以上何を書いているのか分からず、呪文のように見えてしまい、学習しながらバックエンドをメインで開発している方はすごいなぁーと改めて思いました。ここ一ヶ月で、Web開発に必要な基礎を幅広く学べているなと思いますが、逆に幅広く学び過ぎて取得できている知識が浅いかもしれないと学習しながら感じました。自分でも未経験なのでとりあえず色々なことをやってみたい、というのはあるのですが実際にまだ業務には携わっていない為、今まで学んできたことがちゃんと活かせるのか、以前学んだことが新しい事を学ぶことによって忘れていないか、など不安なことが多々あります。しかし、今から不安に思っていても仕方ないですし未経験なんてそんなもんだな、と言い聞かせてとりあえず目の前のできることをやろうと思います。来週から会社での合宿があるので、とりあえずその合宿で多くのことを学べたらと思います。

未経験入社一ヶ月を終えて

今週学んだことReact、React-Router-Dom、TypeScript型定義の復習先週作ったauth0のエラー修正AWS(Amplify)を使ってのアプリケーション開発　学習の成果React、React-Router-Dom、TypeScript型定義の復習ここでは、特にTypeScriptでの型定義が自分の中でなかなか理解するのが大変でした。最初は、なんでわざわざ型を定義しなくちゃいけないのかよく分からず、今までコードを書いていて型なんてあまり意識していなかったし、逆に型を付けることによってエラーが出てしまったり、必要性をあまり感じませんでした。型をpropsで渡すときなど、VFCに型を付けて定義したり型用のファイルを作成してそこからimportして使ったりと、そこまでして型定義するものかなと不思議に思ってました。しかし、使い続けていると段々と型を定義することにも慣れてきて、値を入力すると予測で出来てきくれるし（ここで出来きてくれるのが地味に嬉しかった）、なによりもコンポーネント間での渡し忘れを教えてくれるのが、コードを書き慣れていない私からしてみたらとても助かりました。先週作ったauth0のエラー修正この学習では、初めてAPIサーバーを開発したり、Reactと連携させたりと学ぶことがとても多かったです。そんな中、auth0のサービスを使ってユーザー認証機能を追加する際に、なぜか401エラーが出てしまいうまく機能しませんでした。この時は先輩エンジニアの方が、エラー内容からエラー箇所の大体の場所を教えていただけたのでなんとか無事解決しましたが、これを一人で解決するには、まだまだ知識が足りず学習が必要だな思いました。AWS(Amplify)を使ってのアプリケーション開発AWS Amplifyを使った開発でも初めて聞く単語なども多かったですが、前回NetlifyやHerokuなど色々なサービスを使っての開発だったのでそれなりに必要なコードなども多く、自分が今どこの実装をしているのか、エラーが出た際にどの場所でエラーが出ているのかを調べるのが、今の私にはかなり難しく大変でした。でも、AWS AmplifyではAmplify Cliに従って進むだけで簡単に欲しい機能が実装できるし、何よりReactアプリ作成だけに専念でき、他は数行のコードだけで済むのが前回と比較するとあまりにも違いすぎて驚きました。今後学んでいきたいことReactに関しては初めに比べたらかなり理解出来てきてるかなと感じるので、今後はアプリケーションを作っていく上で必要なReact以外の箇所にも力を注げたらいいかなと思います。特に、今回学んだAWSではまだほんの一部の機能しか触っていないし、出て単語なども初めて聞くものも多かったので今後学習を進めていき理解を深めていけたらなと感じました。

ReactとAWSを使ったアプリ開発をやってみて

現在学んでいることReactの基礎知識Netlifyを使ってのWebアプリの公開ReactとAPIサーバーの連携Herokuを使ってのAIPサーバーを公開三週間経っての現在の状況入社する前まではReactの勉強はほとんどやっておらず、学んでいたことはHTMLとCSS、それとバニラでのJavaScriptだけで、Vueは少しだけ触ってみたことがありましたが、簡単なTodoリスト（かなり時間をかけて）ぐらいしかできませんでした。まず最初に苦戦したのが、Reactを使う上での環境構築でした。今まではJavaScriptという環境構築も簡単にできる言語での学習をしていたため、　Node.jsを使ったことも、さらにはコマンドをパチパチ叩いたこともほとんどありませんでした。一からパッケージをインストールして、またそのインストールしたパッケージのバージョンが違くて動かないといったことが起き、入社前に学習している上で教えてくれるエンジニアの方が何度もおっしゃっていたバージョンの重要性をここで知りました。（それに気付かず一時間ほど頭を抱えていました。。。）他にもJavaScriptでは、場合によってはスルーされる　.　や　;　といったタイプミスや、「とりあえず書いておこう。。」などの余計なコードがReactではほとんどエラーになってしまうため、よくコードを見返す癖やできるだけ綺麗にコードを書こうといった良い癖が付いたと思います。最後に、今書いているQiitaの投稿も職場の先輩エンジニアの方にやってきたことの復習やわからない事などのアドバイス等がもらえるから、やっといた方がいいよーとのことで始めました。こういった投稿はあまり経験がないのですが、文章力を鍛える為にもちょくちょく投稿できたらなと思います。初めての投稿なのでこのぐらいで。。。