はてなブックマーク

先日以下ツイートをしたら思いの外良い反応もらえたので、より詳細な紹介記事を書いてみました。 これは必見だわ!! TypeScriptの型についての問題集 想定に従って独自のユーティリティ型を作っていく感じの問題がレベル別に提供されてる Playgroundのリンクから手を動かしながらチャレンジできるので凄くやりやすい （自分はeasyの問題でも分からんのあった。頑張ろ😅）https://t.co/tkEFe7VrBQ — Kawamata Ryo (@KawamataRyo) September 3, 2020 type-challengesとは type-challenges/type-challenges: Collection of TypeScript type challenges with online judge VueUseやVueDemiの開発者である @antfu7さ

Vue Composition API + TypeScriptで DI(依存性の注入）, DIP（依存性逆転の原則） を実装してみるTypeScriptVue.js SOLID原則に出てくるDI（依存性の注入）とDIP（依存関係の逆転の原則)を勉強したので、自分なりにVue Composition API + TypeScriptでのコンポーネント設計に応用してみました。 🛠 DI, DIPとは？ 最初にサンプルコードを元にDI（依存性の注入）とDIP（依存関係の逆転の原則)を復習します。 既にDI, DIPを知っている方はスキップしてこちらへ。 以下Engineクラスに依存するCarクラスをDI, DIPを用いてリファクタリングしていきます。 class Car { private engine: Engine; constructor(private type: string) {

2020/08/25に開催されたv-tokyo#11の参加レポートです。 とても良い勉強会だったので見逃した方は是非スライドだけでも!! まちにまった Vue.js 3 @kazupon 📁スライド： https://speakerdeck.com/kazupon/matinimatuta-vue-dot-js-3 📝 内容メモ： - SFCの改善PRについて - Viteの紹介 - vuedxの紹介 SFCの改善PR の内容を知ることができて良かったです。setupのDXの改善やリアクティブなCSS変数の作成は便利だと思いました。SFCの改善自体はv3.1xでのリリース予定とのことですが、とても楽しみですね。あと、@vuedxは全く初耳でした。templateの型検査などpluginとして切り出して使えるようであれば是非使いたいです。今後の開発を追っていきたいです。あと個人的に、発表

最近Chrome DevToolsについて調べていて発見した便利機能を紹介します。 誰もが使える最高便利な開発マシンChrome DevToolsを使いこなして開発体験を変えましょう！ 1. $0で選択中のDOM要素の取得 特定の要素に何かしたいという時には、要素のIDやclassを確認してConsoleでdocument.querySelector("#xxx")で取得するというのが一般的だと思います。実はそれはカーソル選択と$0で代替できます。 Classや、IDがついていない特定のDOMを取得したい時とかにも使えるので地味に便利です。 手順 カーソルで取得したい要素を選ぶ Consoleタブで$0を入力 最近知ったChrome DevToolsの便利機能① $0 での選択中のDOM要素取得 Elementsタブで選択状態のDOM要素は、Console上で $0 を入力することで取得で

最近、GitHub CLIが便利だな〜と思ったので紹介します。 この記事は以下リリース時点の情報です。 Release v0.11.1 · cli/cli GitHub CLIとは？ コマンドライン上でGitHubの操作を行えるCLIツールです。GitHubが公式で公開しています。 (参考： GitHub公式ブログ） インストール Macの場合はbrewでインストールできます。Windowsの場合は公式のREADME.mdを参照してください。

TypeScript の構文の中でも、屈指のググラビリティの低さを誇る is と in を自分なりにまとめてみました。 is は TypeScript の型推論を補強する user-defined type guard（ユーザー定義型ガード） で使われます。 unknown 型や、any 型、Union 型の型の絞り込みを行えます。 使用例 例えば、unknown 型を引数に受け取る関数で、もし引数の型が string 型だったら文字列の長さを出力するという処理があるとします。 その場合は、以下のように型を絞り込む必要があります。 const example = (foo: unknown) => { if (typeof foo === "string") { console.log(foo.length); // fooはstringとして推論される } }; この一つの関数ならば良い

8月上旬に正式リリース予定とされているVue3の変更点をいち早く理解できるように概要をまとめてみました。それぞれの項目ごとにvuejs/rfc又はVue3 Documentへのリンクを貼っているので索引的に使ってもらえると嬉しいです。 この記事は以下バージョン時点の情報です。 vue-next v3.0.0-rc.5 Composition APIの追加 rfcs/0013-composition-api.md at master · vuejs/rfcs Composition API RFC | Vue Composition API おそらく一番大きな目玉となる変更はこちら。Composition APIという新しいAPIが追加されます（PluginでVue2系でも使用可能です）。 Composition APIはコンポーネントのロジックの柔軟な再構成を可能にする関数ベースのAPI群

Functional Componentから、Fat Componentを防ぐ設計、Vue3のリアクティブまで!! Remote.vue#2 参加（登壇）レポートJavaScript勉強会TypeScriptVue.jsVuex 2020/07/31 19:30からLAPRASさん主宰で開催されたRemote.vue#2の参加（登壇）レポートです。 勉強会のYouTube配信アーカイブはこちら。 https://www.youtube.com/watch?v=hUcQXgUxQVc&feature=youtu.be 関連ツイートはこちら。 https://twitter.com/hashtag/remote_vue?src=hashtag_click&f=live SFCで挑戦するFunctional Component （@FruitRiin) スライド: https://speaker

エンジニアに転職して早2年半。いまだに再帰関数が苦手です。 再帰関数を含むコードレビューがあると「よく分からんけど、動作も良いしテストも書かれてるしヨシ！！approved!!」としてしまったことも...（絶対あかん😇）。 さすがにそれはヤバイと、再帰関数を学び直したのでその結果をまとめてみました。 再帰関数とは？ 再帰関数とは、関数内で、自分自身を呼び出す関数です。 この時点で謎ですよね。最初にみたときは「無限ループでは？」って思いました。 以下再帰関数の例として度々あげられる階乗の計算です。 const factorial = (n: number): number => { if (n < 2) { return 1; } return n * factorial(n - 1); }; test('factorial' => { expect(factorial(0)).toBe(

最近発見したGitHubのTemplate Repository機能の紹介です。 リンターやらテストライブラリの設定等は、ほぼどの環境でも行いますが毎回設定するのは地味に面倒ですよね。 GitHubのTemplate Repository機能を使えばその環境構築が不要で、本質的な開発をすぐに始められるようになります。 GitHubのTemplate Repositoryとは？ あるリポジトリのコードベースをそっくりそのまま新規のリポジトリ作成で利用できる機能です。 「え、それってforkと違うの？」っと思った方もいるかもですが、以下の点でforkとは異なります。 1つのリポジトリから複数作成できる（forkだと、同名のリポジトリとなるので1人のユーザー内で複数作成は不可） 元となったリポジトリのコミット履歴を継承せず、クリーンな状態でスタートできる 使い方 以下実際にTemplate Re

Vue Composition APIのリファレンスを見たらリアクティブ周りのAPIが大量に追加されていたのでまとめてみました。 この記事は以下バージョン時点の情報です。 vuejs/composition-api: v1.0.0-beta.1 vuejs/vue-next: v3.0.0-beta.17 Vue Composition APIのAPI Reference に掲載されているいくつかのAPIは、まだVue2系で使えるComposition APIのプラグイン（vuejs/composition-api）でサポートされていません。 そのAPIについては マークを末尾につけています。サポート対応状況についてはこちらの記載をもとにしています。 reactive 引数に渡したオブジェクトのリアクティブなプロキシを返します。 Vue2系のVue.observable()と同等の機能です

2020年6月26日18:00より開催された Firebase Realtime Meetup に参加したので参加レポートを書きました。 勉強会自体のアーカイブ動画 は以下に掲載されています。 https://www.youtube.com/watch?v=4iS8EySYU14 FJUGの紹介 @k2wanko スライド: - 動画開始位置： https://youtu.be/4iS8EySYU14?t=5 内容メモ： Firebase Japan User Groupの活動内容・Slackの紹介 FJUG Appの紹介・テスター募集 Firebase Japan User Groupの活動紹介と、@k2wankoさんが個人で開発中のFJUG Appの紹介でした。 Firebase Japan User GroupのSlackは私も度々参考にさせてもらっています。日本でFirebaseを

2020/06/16 19:00よりオンラインで行われたTypeScript Meetup #4 の参加レポートです。 動画アーカイブはこちらで公開されています。 TypeScriptでテストコードを徹底的に型推論する @okunokentaro スライド: https://speakerdeck.com/okunokentaro/typescript-meetup-4 動画開始位置： https://youtu.be/b6WpRCC5GoM?t=1066 内容メモ： テストコードでanyを使わず正しい型定義をするための方法 Jestのtype.d.tsから型定義の読み方の解説（overload, Mapped Types, Conditional Types, infer） AngularのTestBedを型定義した例 最初の「テストコード、anyで諦めていませんか？」から同意しかなかっ

OSS活動をはじめて5ヵ月が経過したのでその振り返りと、OSS活動での学びを書きます。 「OSS活動ってハードル高そう。。」と躊躇している方に読んで貰えると嬉しいです。 自己紹介 最初に誤解のないように自分のスペックを。 消防士歴6年、エンジニア歴2年半、PC持つよりホース持ってた期間が長いエンジニアです。 28歳の年にエンジニアへ転職し、今は茨城県からフルリモートで働いています。 ※ 消防士からエンジニアへの転職経緯などは以前こちらに書きました OSSとは？ OSSの定義をWikipediaより。 オープンソース・ソフトウェア（英: Open Source Software、略称: OSS）とは、利用者の目的を問わずソースコードを使用、調査、再利用、修正、拡張、再配布が可能なソフトウェアの総称である また、本文中でのOSS活動はGitHubに公開されているOSSに対してプルリクエストやイ

2020/05/04 追記 portal は teleport にリネームされたようです。 記事内容も修正しました。 -- 2020年Q1リリース予定のVue.js 3.0の新機能 Teleport を試してみたのでまとめます。 （参考） 以下でVue 3.0（vue-next）の環境構築、他の新機能についてもまとめています。 vue-next（Vue.js 3.0 wip）+ TypeScript + webpackでの開発環境を構築する Vue.js 3.0 の新機能を試す。 〜 Suspense 編〜 Teleportとは？ 定義したコンポーネントが属するDOMツリーとは別の場所に、まるでテレポートしたかのようにコンポーネントを移動できる機能です。 直接指定の位置に表示できるので、 Modal、Tooltipなど要素の上部レイヤーに表示したいコンテンツでもz-indexでのCSSハッ

はじめに PNGやGIFの圧縮は、ブログ記事やGitHubのPull Requestの実行画像貼り付けとかで割とあります。 自分はTinyPNGやiLoveIMG を利用していましたが、プラウザを開きファイルをアップロード・圧縮しダウンロードという手順が毎回面倒でした。 なので、alfred-imagemin というPNG / JPEG / GIFを手軽に圧縮するAlfred Workflowを作ってみました。 （GIFでも使えるというのが嬉しいポイントです） この記事ではalfred-imageminの概要と、仕組みを紹介します。 ※ Alfred WorkflowはAlfredでAlfred Powerpackを導入済みの方のみ使える機能です。便利なWorkflowで作業効率爆上がりなので、未導入の方はぜひこの機会に！ インストール 以下コマンドでnpmからインストールできます（後述す

最近猛烈にスターを集めているビルドツール、Viteを触ってみたので簡単に紹介します。 この記事はVite v0.19.1時点での情報です。 Viteとは？ ViteはVue.jsの作者のEvan You氏が開発中のノーバンドルなビルドツールです。 ネイティブのESモジュールのインポートを利用しバンドル不要で高速に動作するdevサーバーと、Rollup.jsをベースとしたプロダクションビルド機能を提供します。 設定不要で.vueのSFC（Single File Components）をコンパイルできて、さらにデフォルトで今開発中のVue3.0が使えます。 しかも、vue-cliのようにVue.js限定ではなく、React、Preactにも対応しています。 注意 Still experimental, but we intend to make it suitable for producti

Denoの学習用にRESTfulなAPIサーバーを作ってみたのでまとめます。 今回作るもの DenoとServestを使ってRESTfulなAPIサーバーを作り、GCPのCloud Runへデプロイするまでです。 （GIFではcURLで実行していますが、もちろんプラウザでも確認できます） 今回記載するサンプルコードは全て以下GitHubリポジトリにあります。もし、動かなければこちらを参照してみてください。 Denoとは？ Denoは、Node.jsに変わる新しいJavaScriptのランタイムです。 ネイティブでTypeScriptをサポートしています。また、package.json での依存管理は不要で、URLから直接パッケージをimportしてキャッシュに保存します。ローカルに巨大な node_modules を持つ必要もないです。 その他詳細な情報は以下にとても分かりやすく記載されて

Vue.jsでForm要素のラッパーコンポーネントを作る際の2つの方法（v-bind.sync, v-model）TypeScriptVue.js input欄を含むコンポーネントを作る際に毎回忘れるのでメモ v-bind.syncを使う方法 v-bind.syncはv-bind:hoge, v-on:update:hoge="hoge = $event"のシンタックスシュガーです。 これを意識して子コンポーネントでイベントを発行することで、Form要素を内包するコンポーネントを簡潔に実装できます。

流行りのノーコードツールのGlideでアプリを作ってみたのでその所感を書きます。 🍱作ったもの テイクアウトを提供している地元飲食店の検索アプリです。 店名・住所・メニューでの検索やマップ表示などが出来ます。 製作時間は8時間程（8割の時間は情報元サイトからのデータ取得・整形）。 Takeout-Hitachinaka · 店舗一覧 機能 - 店名・メニュー・地名などでの検索機能 - 詳細情報の表示 - マップ情報の表示、マップ画面での現在位置取得 - コメント機能 - お問い合わせフォーム 🔧なぜ作った？ 地元の商工会議所が提供しているテイクアウト飲食店のまとめページが、かなり味のあるデザインで気になったのがきっかけです。 せっかくの良いキャンペーンが上手く伝わらず勿体ないなと思いました。 新型ウイルスに負けないぞ! テイクアウト&デリバリー応援キャンペーンサイト 特に以下点が気にな

SOLID原則を勉強中です。 TypeScriptでOCPを説明している記事があまりなかったので、自分なりにまとめてみました。 オープン・クローズドの原則（OCP）とは？ software entities (classes, modules, functions, etc.) should be open for extension, but closed for modification クラス・モジュール・関数は「拡張」に対して開いていて、「修正」に対して閉じていなければならない という原則です。 これだけ読んでも「拡張に対して開いて、修正に対して閉じている？　何も分からん🤔」という感じですが、 自分の中では機能の拡張の際、既存コード修正せず、新しくコードを追加するだけで対応できる設計にすることだと解釈しています。 以下の仕様でプログラムを書くと仮定して、OCPに違反したコード・遵

2020年Q1リリース予定のVue.js 3.0の新機能 Suspense を試してみたのでまとめます。 かなり使い勝手が良さそうです。 （参考） 以下でVue 3.0（vue-next）の環境構築、他の新機能についてもまとめています。 vue-next（Vue.js 3.0 wip）+ TypeScript + webpackでの開発環境を構築する Vue.js 3.0 の新機能を試す。 〜 Teleport 編〜 Suspenseとは？ 非同期処理が解決されるまでフォールバックコンテンツ（例えばLoading中アイコン）を表示してくれる特別なコンポーネントです。 いままで、v-if="loading === true"などの状態変数を使って制御していたものを、状態変数を使わずに簡潔に書くことができます。 ※ Reactには既にあるようです。https://reactjs.org/doc

2020年のQ1にVue.js 3.0のリリースが予告されています。 公開に先駆けてVue 3.0の新機能を試したいと思い、TypeScript + Webpackでの開発環境を整えてみたのでまとめます。 （2020/06/04 追記） vue-cli-nextが出ているようです。 https://github.com/vuejs/vue-cli-plugin-vue-next （2020/02/04 追記） この記事で作った環境を使いVue3.0の新機能Suspense, Teleportを試しました。こちらも参考までに。 Vue.js 3.0 の新機能を試す。 〜 Suspense 編〜 Vue.js 3.0 の新機能を試す。 〜 Teleport 編〜 内容 vue-nextのREADME.mdで紹介されている以下リポジトリを参考に、Webpack版のVue.js 3.0の開発環境を

認証付きGraphQL APIサーバーを爆速で立てる。 Hasura + Firebase AuthenticationFirebaseGraphQLcloudfunctionsFirebaseAuthenticationHasura HasuraはPostgreSQLからGraphQL APIサーバーを爆速で構築できるものの、認証については外部の認証基盤を使う必要があります。 今回は、認証基盤としてFirebase AuthenticationのJWT認証を使った例を紹介します。 Hasuraの認証について Hasuraの認証はWebhook方式と、JWT方式があり、今回はJWT方式を使います。 JWTは属性情報をJSONデータ構造で表現したトークンを使い認証を行う方法で、Firebase Authenticationにて採用されています。 Hasuraの認証でFirebase Auth

CloudFunctions for Firebaseの一つの利点は、他のFirebase サービスとの強力な連携です。 Functionの起動トリガーとして、各サービスのイベントを利用できます。 今回はサービスごとに多様にあるトリガーをまとめてみました。 ここで紹介したコードはこちらのGithubリポジトリにあります。 https://github.com/kawamataryo/firebase-functions-trigger-list Firestore #onCreate document()で指定したコレクションへのドキュメントの追加をトリガーに関数が実行される。 export const onCreate = functions.firestore .document("/users/{userId}") .onCreate(async (snapshot, context

テスト駆動で学ぶ Firestoreセキュリティルール の書き方（認証、スキーマ検証、バリデーション）FirebaseJestFirestoreCloudFirestoreTypeScirpt 今までセキュリティルールをあまり書かずセキュリティ的にアレなものを量産していたので、 その反省からFirestoreのセキュリティルールについて学んだことを記します。 2020/12/01 追記 この記事は、以下バージョン時点の情報です。 node: 10.15.3 @firebase/testing: 0.12.3 内容案内 本記事では以下について記載しています。 Firestore セキュリティールールのテスト環境構築方法（TypeScirpt & Jest) ユーザー認証のルール記載方法、テスト方法 スキーマ検証のルール記載方法、テスト方法 値のバリデーションのルール記載方法、テスト方法 コー

Hasuraで既存のPostgreSQLのDBから爆速でGraphQLのAPIサーバーを構築出来たのでその内容を備忘録としてまとめます。 本記事は以下のような方を対象にしています。 HerokuのPostgres add-onを利用してアプリのDBを構築している GraphQLでのAPIサーバーを試したい でもリゾルバとかTypeDefをイチから書くのは面倒 Hasuraとは？ Instant realtime GraphQL engine とドキュメントでは紹介されていますが、 ざっくり言うとPostgreSQLからGraphQL APIサーバーを自動で構築するものです。 公式の以下図の通り、DBであるPostgreSQLと、GraphQLのAPIを使うクライントとの間に入り、GraphQLとSQL（or JSON）を相互変換してくれます。 （公式サイトより） Hasuraサーバーの構築