Kuzunoha-NEのブログ

プログラミングなどの勉強をしてます

TypeScript

【React】ReactHookとTypeを使った型定義

こんばんは、葛の葉です。 個人で最近Reactを触れています。 ReactHookを使ったステートの変更を行うときにtypeを使うとよいということがわかりましたので連携しようと思います。 コードはこんな感じ type SetFileTextAction = { type: "setFileText", fileT…

【Typescript】ネストなObjectが持つ文字列の全ての長さを整える

こんばんは葛の葉です。 ネストになっているオブジェクトを処理しようとすることが多くて、そのネストの深さがものによってまちまちな場合の処理書くの辛いなぁっている昨今なんですよ。色々と考えたら、これは再起処理でコードを書くのがいいんじゃないかな…

【TypeScript】Objectのディープコピー

こんばんは葛の葉です。 Javascriptのディープコピーをちょっと書きます。Javascriptではconst copyedObj = JSON.parse(JSON.stringify(obj));を使うと思います。 const obj1 = { hoge: 1, piyo: "hiyoko", fuga: true }; const copyedObj1 = JSON.parse(JSO…

【TypeScript】MongoDBのBulkWriteと戦う

こんばんは葛の葉です。今回はMongoDBのBulkWriteについて書いていきます。 公式ドキュメントはこちら MongoDB本体のドキュメント docs.mongodb.com NodeのMongoDBドライバーのドキュメント mongodb.github.io version packageのversionはこんな感じです。 {…

【TypeScript + AWS】CloudWatchLogsからデータを引っ張りたかったんだ

こんばんは、葛の葉です。 今回はAWSのCloudWatchLogsにたまったログに検索をかけ、それを吐き出すということをやっています。いくつか大変なことがあったので、それを書いていこうと思います。 CloudWatchLogsクラスからインスタンスを作る前に awsのsdkを…

【TypeScript】Promise.allで頑張る

こんばんは。今回はPromise.allを使ってみます。MongoDBも使います。 developer.mozilla.org 記載の通り、配列に入ったPromiseを全部解決するまで待つという動きが出来るようになります。 Promise.allを使わないやりかた import {MongoClient, MongoClientOp…

【TypeScript】Puppeteerで言語を固定できるみたい

こんばんは、葛の葉です。 今回は疲れているので省エネです。 起こったこと PuppeteerでE2Eテストをやっててヘッドレスだとテストが通らないのに、ヘッドレスをやめるとテストが通るという現象がおきました。そしてそれはタイトルの文字が正しく表示されるか…

【TypeScript】Mongodbが持つ数字を正規表現で取ろうとしたら出来なかった

こんばんは葛の葉です mongodbのフィールドにある数字を取り出そうと正規表現を使ったのですが、全くヒットせず、正規表現の書き方が間違ってるのかなんなのかがわからず、暫く格闘を続けるというアホみたいなことをしていました。 MongoDBの公式について Pr…

【TypeScript】CookieとSessionとSessionIDを使ったログイン情報の保持

こんばんは、葛の葉です。 今回はCookieとSessionとSessionIDを使ったログイン情報の保持を実施します。 前述 普段我々が使用しているWebページでは、ログインを必要とするページが多いかと思います。ログインに一回成功するとその成功したログイン状態とい…

【TypeScript】TypeScriptでBasic認証をやってみる

こんばんは、葛の葉です。 今回はBasic認証をやってみます。 Basic認証とは Basic認証とはHttpに搭載されている認証方法の一つになります。Httpヘッダーに認証のためのユーザー情報とパスワード情報をBase64にて暗号化して送付します。その値をサーバーが受…

【Typescript】Expressで任意のステータスコードで配信する。

こんばんは葛の葉です。 今回はExpressで任意のhttpステータスコードを送信する機能を書きます。 github.com import e from 'express'; import {Request, Response} from 'express'; const app = e(); app.get('/', (req:Request, res:Response)=>{ // 200 s…

【GitHub】GitHubにActionっていうCIツールが追加されてたよ

こんばんは葛の葉です。 いつものアホ面でGithubを眺めてたら見慣れないのがあった。GitHubアクションというものらしい。そういえば邪魔くさいポップが出ていたっけ。ちょっと触ってみることにした。 help.github.com GitHub Actions では、エンドツーエンド…

【Typescript】PuppeteerとJestでE2Eテストを作る

こんばんは葛の葉です。 最近はPuppeteerとテストコードを使用しE2Eテストを書いています。今回はそのことについて記載してきたいと思います。 今回のソースコードはこちら github.com E2Eテストとは E2EテストとはEnd to End Testのことで、Webブラウザなど…

【TypeScript】ifとimport

こんばんは、葛の葉です。 さて、TypeScriptで条件によってモジュールをインポートする、あるいはインポートしないようにしたい場合があるかと思います。 if(true){ import {hoge, moge} from "./ex"; } // error TS1232: An import declaration can only be…

【TypeScript】Webpackでフロントにnpmモジュールを使う

こんばんは、葛の葉です。 今回はWebpackを使います。 Webpackとは Webpackとはざっくり説明すると、複数のJavascriptをまとめて一つにしてくれるものです。これを使用することでnpm経由でインストールしてきたモジュールをフロントで使用することができます…

【TypeScript】PostgreSQLとExpressをつなぐ

こんばんは、葛の葉です。 今回はPostgreSQLとExpressを繋いでみましょう。 諸々のバージョン postgres (docker) postgres:11.5-alpine node (docker) 8.16.1-alpine pg(npm package) 7.12.1 データベースの情報 今回はPostgresを使用します。Herokuでも使え…

【TypeScript】ExpressとApplicationFactory

こんばんは葛の葉です。 さて、ExpressでApplicationFactoryを作りましょう。 以前Flaskで作ったようなものを作成します。 kuzunoha-ne.hateblo.jp version express == 4.17.1 プログラム ディレクトリはこんな感じなのだ . ├── app.ts └── factory.ts Expre…

【JavaScript】SocketIOで通信しよう

こんばんは葛の葉です。 今回はSocketIOでJavaScriptとPythonを通信してみます。 JavaScript側(サーバー側) 前回のWebAPIの記事の際はJavaScriptがクライアント側でしたが、今回はサーバー側に回ります。 SocketIOで通信をする場合、Httpでの通信を確立し…

【Node.js】WebAPIを受け取ってみる。

こんばんは葛の葉です。 さて、簡単なWebAPIを作成し、Javascriptで値を受け取るようにしてみます。 pythonでWebAPIをつくる # app.py from flask import Flask, request, jsonify app = Flask(__name__) @app.route('/') def index(): data = { 'status': '…

【TypeScript】抽象クラスの作成

こんばんは、葛の葉です。 今回は抽象クラスを作ってみます。 前回のインターフェイスをパクります。 kuzunoha-ne.hateblo.jp 動物という抽象クラスを作る classを作る際の雛形を作る。共通部分を作る部分としてはインターフェイスと似ているようだけど、内…

【TypeScript】interfaceを作る

こんばんは、葛の葉です。 今回はTypeScriptでinterfaceオブジェクトを作ってみます。 生物に対し足の数と全長メンバー+成長というメソッド 犬というクラスとカエルというクラスを作る。 それぞれ、footというメンバーとlengthというメンバー,そしてgrowthと…

【TypeScript】mochaとchaiでユニットテストする

こんばんは、葛の葉です。 前回からTypeScriptを使っています。 kuzunoha-ne.hateblo.jp 今回はTypeScriptでUnittestを行いたいと思います。 フォルダ構成 ├── src │ └── fizzbuzz.ts └── test └── fizzbuzz.test.ts FizzBuzzをつくる srcディレクトリ内でfi…

【TypeScript】列挙型をTypeScriptで使う

こんばんは、葛の葉です。 現在、TypeScriptを勉強しています。 Enumesをちょっとだけ勉強しました。 ディレクトリ構成 ├── app │ └── enum.ts └── enum.html enum.html /*./app/enum.tsじゃないよ*/ <script src="./app/enum.js"></script> TypeScriptを書く app/enum.tsをいじる。 enum Hoge { f…