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として推論される } }; この一つの関数ならば良い

先日以下ツイートをしたら思いの外良い反応もらえたので、より詳細な紹介記事を書いてみました。 これは必見だわ!! 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さ

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を参照してください。

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群

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/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ハッ

最近猛烈にスターを集めているビルドツール、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

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

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

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

テスト駆動で学ぶ 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サーバーの構築

Firebase Extensionsをサクッと試してみた　〜Firebase Extensions機能一覧、Translate Textの使い方〜FirebaseFirebaseCloudFunctionsCloudFirestoreFirebaseExtensions 2019/09/26にFirebase Summitで発表されたFirebase Extensionsをサクッと試しみたので書きます Firebase Extensions とは？ Firebaseコンソールでポチポチと設定するだけで、既存のFirebaseの機能を補助するCloud Functionsを作成出来る機能です。 Firestorageでの画像リサイズや、Firestoreに保存されたタイミングで任意の言語に翻訳できる機能など以下の9つのExtensionが発表されています。 簡単に各Extensionsの紹

vue.jsとapollo、graphQLの学習用に、CRUD機能(create、read、update、delete）を持つ名簿アプリを作りました。 実装をチュートリアル形式でまとめます。 バックエンドはgraphQLのAPIサーバーであるGraphCMSというヘッドレスCMSを使っています。 概要 CRUD機能を持つ名簿アプリを作成します。 右上のボタンから名簿の追加。 各レコード右側のボタンで更新、削除が行えます。 さらにvuetifyのdata-tableの機能ですが、並び替えやページングも行えます。 デモサイトはこちら（追加更新削除やってみて大丈夫です。） https://vue-sample-crud.firebaseapp.com/ 全コードはこちら https://github.com/kawamataryo/vue-apollo-crud バージョン情報 vue-cli

先日私事でelectron-vueとNeDBでデスクトップアプリを作成したので、忘れないうちにメモ。 途中はまった箇所も何箇所か・・ vue-routerの設定 bootstrap4のscss設定 jQueryの設定 NeDBのlike検索 NeDBのdb配置場所 electronもvue.jsも初めてなので、何か間違いとかこうやったほうが良いとかご指摘ありましたらお願いします。 作成するもの 簡易データベース検索アプリ 使用するフレームワーク electron-vue NeDB bootstrap4 作業環境構築 electron-vueのインストール // グローバルにvue-cliをインストール $ npm i -g vue-cli // electron-vueの設定 $ vue init simulatedgreg/electron-vue my-project