ちらしの裏(TypeScript奮闘記 No.02)

ちらしの裏っぽく、TypeScriptの勉強をまとめていく〜

Objectの構造を定義するもの

type, interface, class ってやつがある。

今日はTypeをキャッチアップ

Type

正確には Type Alias(型エイリアス) って名前

type StrOrNum = string | number;

let sample : StrOrNum;

sample = 1
sample = "test"

また、前回の Interfaceのように宣言する事も可能

type Item = {
    name: string;
    price: number;
}

で、同様に使用する事ができる

const pencil: Item = {
    name: "鉛筆",
    price: 110
}

Type Alias と Interface の違い

Type Alias は Interfaceのように拡張したり、実装したり出来ないという事に違いがある

これとか腹落ちしやすかった

qiita.com

ざっくりアウトプットして後で振り返る為のブログ。 つーことで次は Class 編

ちらしの裏( Typescript 奮闘記 No.01 )

ちらしの裏っぽく、TypeScriptの勉強をまとめていく〜

Objectの構造を定義するもの

type, interface, class ってやつがある。

とりあえず Interface を勉強した

Interface

Property

interface Item {
    name: string;
    price: number;
}

Customer の Interface は name と age の プロパティを持っています。 Interfaceでプロパティを定義すると、そのInterfaceを実装するオブジェクトは 定義されたプロパティを持たなければならない。

const pencil: Item = {
    name: "鉛筆",
    price: 110
}

Interface は 型なので、別のInterfaceから参照する事もできる

interface SaleRow {
    item: Item
    total: number
}

method

また、メソッドのコントラクト的なのを定義できる。ただし、メソッドの実装を定義するものではない。

interface Item {
    name: string;
    price: number;
    getDiscountPrice(discountRate: number): number;
}
  • パラメータの型さえ同じなら、実は discountRate の部分を discountPercentage とかに変えても動く
  • でも、メソッド名を変更したり、パラメータの型や戻り値の型を変えるとコンパイルは通らない
  • 上記の事もあって、Interfaceにて メソッドを定義する場合は、パラメータ名を定義しない事も風習としてある。
interface Item {
    name: string;
    price: number;
    getDiscountPrice(number): number;
}

Option

interface Item {
    name: string;
    price: number;
    image?: string;
    getDiscountPrice(discountRate: number): number;
}

上記のように ? をつけて宣言する事で、Optionalの型を定義できる

Readonly

  • プロパティの前に readonly キーワードを使用する事で、最初に設定された後にプロパティが更新できないようにする.

Extend

既にあるInterfaceについて それを拡張して新しいInterfaceを再定義する事もできる。

週報:2020/10/26

今週の出来事

  • バグ踏み抜いた
  • Tailwind css で色々UI作ってる

所感

バグ踏み抜いた

Django の Swaggerサポートを対応しようとして、 drf-yasg を導入した。

そうすると、エラーが出た。調べていくと以下のissueがあたった。

github.com

自分が使っていたのは Django Rest Framework 3.11.x 系だったので ばっちり該当のレポジトリに相当するものだった。

drf-yasg2 を使いなさい という話だったので一時的にそちらを使って有効化していたが、やっとリリースされたみたいですね。

ご対応ありがとうございます!!

Tailwind CSS でUI作ってる

  • 目薬を刺さないといけなくて、その辺を管理する為にツールを作って見たいと思って模索中。。。
  • f:id:ikkitang1211:20201102115544p:plain
  • 雰囲気であれこれいじって調整・・!
  • 日課管理みたいなのアプリとか色々インストールしてみて調べながらやってる

週報:2020/10/19

今週の出来事

  • ブログ書いた
  • 会社で半期振り返りをした

所感

ブログ書いた

www.ikkitang1211.site

www.ikkitang1211.site

英語の文献を DeepL で翻訳しつつ学びをまとめる、とか割と良いインプットの手法だったので継続するの良さそうだった。

会社で半期振り返りをした

  • まあ、また 本家ブログで振り返りをまとめるかな〜〜

まとめ

  • 今週もまあまあアウトプットしたぞ。

週報:2020/10/12

今週の出来事

  • 結構一杯ブログを書いた
  • React を結構書いた一週間だった

所感

ブログを書いた

www.ikkitang1211.site

www.ikkitang1211.site

www.ikkitang1211.site

まあまあ、結構調べてブログを書いてるんだけど、割と 2~4時間 ぐらい掛かるので 中々時間が必要で大変 ()

でも着実に学びになるので、楽しさがありますね。

React を結構書いた一週間だった

もちろんプライベートで。

Next.js でフロント / Golang + Echo でサーバーサイドを書いてて、タスク管理 を試しに作ってみよう、っていう感じです。

最近Hotな話題だけあって、色々な情報がみつかって助かりますね。 その反面、アップデートが積極的で 1年前の記事が使えなかったり・・とかありました。

後、 デザインについては特にこだわり無くて 有りものでいいかんじに済ませたいという思ったので、 Tailwind CSS ってのを使ってみるようにしていて、 本当 Component集はありがたいですね・・!

来週

  • 病院
  • タスク管理のページで新しいタスク追加のAPIが実行出来るようにする.

週報:2020/10/05

今週の出来事

  • 病院・病院・仕事・仕事・病院
  • Go とか React とか やってる
  • 新しい本を図書館で借りてきた

所感

病院・病院・仕事・仕事・病院

仕事に集中出来ない一週間だったな〜。

まあ、来週は一週間集中出来そうなので引き続き頑張りたいと思いますね

Go とか React とかやってる

『初期で loading... って表示を出す => APIからデータを取ってくる => setState で更新 => UIに反映 』 こういうのやってるんだけど、 『 setState で反映 』 ってのが動かない。

「高橋さん、まずReactのドキュメントでライフサイクルについて理解しておいた方がいいですよ」 って会社の人からアドバイスもらったので、公式サイト読んでた。

ja.reactjs.org

今週は外出が多くて夜に働いてたのでキャッチアップ出来たのはこれぐらいかな〜〜。

docker で 別コンテナを待つ方法について調べた

そういえば、 Docker で開発の時に MySQL の起動を待てなくて APIサーバーの起動が失敗するってのが結構あって(仕事とかでも) 毎回 docker の 各サービスを再起動したりとかしてよしなにしてたんですけど、 先日 isucon10 の docker-compose 見てる時に お? 良さげ? って奴見つけた。

github.com

それがこれ。

dockerize ってのを使ってやれば 別の docker コンテナが起動するのを待てるらしい。

github.com

使い方のイメージは qiita のサイトが参考になる。

qiita.com

良い改善点が見つかったので今後仕事側のレポジトリにもプルリク送ってみような〜〜〜、って気持ちになった。

新しい本を図書館で借りてきた

本を借りる(二週間期限) => 返す => 新しい本を借りる って感じで締め切り駆動で本を読んでる。

今日返したのはこれだった。

今日借りてきたのはこれ

Go言語によるWebアプリケーション開発

Go言語によるWebアプリケーション開発

  • 作者:Mat Ryer
  • 発売日: 2016/01/22
  • メディア: 大型本

マインドとしてはストレス無く続けるのが目標。 二週間中に読みきれなかったとしても、延長せずに返す。 熟読せずに斜め読みして 「へ〜」 「ふーん」 を溜めるみたいな感じ。

もう一回読みたいな? ってなったら 買うか もう一回借りるかしてる。

来週

  • らすとわんまいる

週報:2020/09/28

今週の出来事

  • Golangを書いてみてる
  • Djangoのブログ書いた
  • 自分の仕事だったり会社へのバリューの出し方について思いを馳せてる

所感

Golang書いてみてる

go-tour-jp.appspot.com

Web上で動くので なんとなーく理解していくの便利だね。

Goについては学びをやっていきつつ、REST API を書きたいので、軽量フレームワークとか調べてたんだけど Echo ってのがあってそれが良いみたいなのが分かった。

echo.labstack.com

最近見てた isucon10 とかの Goの参考実装とかでも使われてた。

isucon10-qualify/go.mod at master · isucon/isucon10-qualify · GitHub

isucon10 は SPAのサイトなので、いい感じに扱えるといいなー、という感じ。

んで、Golang + Next.js (React) で環境を作ってみて、今 買い物リストを登録するアプリケーションみたいなの作ってる。

docker-compose とかは以下サイトを参考にした。

qiita.com

public にしても良いんかな?って気もするし、また public で 公開してみるか。

ちなみに、土日・・色々やってみたけど、Golangの勉強ってより Reactの勉強になってる(震

Djangoのブログ書いた

zenn.dev

Migration って奥深いな。

しっかし、めちゃくちゃよく出来てる〜。

ちなみに Zenn ってので書いてみた。普通に書きやすかった。

zenn.dev

自分の仕事だったり会社へのバリューの出し方について思いを馳せてる

まあ、色々あるなー。。

もっとテックリードとしてチームメンバーのヒューマンマネージメントに取り組んでいかないといけないよな、と思うこの頃。

自分の存在をもっと消していって、自分がこれまでやってた仕事をチームのメンバーに委譲して成長機会を作ったりとか。

もっと色々考えないといけないな、って気持ち。

来週の予定

  • 月曜: 病院
  • 火曜: 病院
  • 金曜: 病院

って感じで厳しさがありますね()