Kawamata

先日初めて真面目に自分のコードを OSS として公開する機会があり、色々試行錯誤したのでまとめます。「真面目に」の基準は過去に自分が公開したリポジトリに比べてです 🙏 何を公開した？Vue Word Highlighter という Vue.js のコンポーネントライブラリを公開しました。機能はとても単純で、文字列と検索クエリを渡すと検索クエリに合致した文字をハイライトする（<mark>タグ又は任意のタグ囲む）というものです。https://github.com/kawamataryo/vue-word-highlighter自分なりに良い感じに使えるコンポー...

真面目にOSSを公開する際にやってみたこと・意識したこと

先日リリースした個人開発のアプリについて感想や技術スタックなど色々書きます。 どんなアプリを公開した？以下ツイートで紹介している、 Slack の絵文字スタンプ用のアニ GIF を簡単につくれるアプリを公開しました。https://twitter.com/KawamataRyo/status/1425292135356682248タイミングが良かったのか数多く Retweet してもらえ、 Twitter を初めて初のバズの波動を感じました。アプリ自体はこちらです。とても簡単に試せるのでぜひ使ってもらえると嬉しいです。https://www.animated-emoji-ge...

Vue3 で「動く」Slack絵文字ジェネレーターを作って公開した話

esa を CMS に VuePress v2 でサイトを作る機会があったので紹介します。 🛠 何を作った？こちらのツイートで紹介されている LAPRAS 組織ハンドブックというサイトの基盤を esa  と VuePress v2 で作りました。https://twitter.com/320KZCD/status/1417679812114616321 👨‍💻 システム構成基本構成はこちらです。esa の GitHub Webhook (β) を使い、esa 上の特定のディレクトリ配下に記事を追加したとき、Webhook で指定した GitHub リポジトリの特定のディ...

esa を CMS に VuePress v2 で管理しやすいドキュメントサイトを作る

ホームページ制作の副業をやっていたときに作成した Wordpress サイトで、 WP Facebook Portal というプラグインを使ってました。https://wordpress.org/plugins/wp-facebook-portal/Facebook pages の投稿内容を自動で取得して、Wordpress のブログを投稿してくれるという便利なプラグインです。Wordpress のブログ投稿は面倒だけど、Facebook Pages にはよく投稿しているというお客様用としてかなり重宝していました。しかし、2021 年の 4 月頃から投稿情報の取得に失敗して動かなく...

WP Facebook Portalを復活させるまでのメモ

最近、無限に YouTube を見てしまい時間を溶かしまくっています😇 このままではアカンと連続視聴防止のための UserScript を書いてみました。 何を作った？以下の機能をもつ UserScript です。YouTube の視聴ページの広告やコメントを非表示YouTube の視聴完了時の自動再生をキャンセルYouTube の視聴完了時の広告を非表示にするBefore適応前の YouTube 視聴ページがこちらです。サイドバーのリコメンドから、視聴完了のリコメンドまで気になる情報がありまくりですね。見終わったら（むしろ見てる途中から）次の動画に行きたい欲が湧い...

YouTube の連続視聴を防止するための User Script

GAS を書くたびに開発環境構築を調べている気がするので、GAS 開発用の Template リポジトリを作ってみました。 Templateリポジトリhttps://github.com/kawamataryo/google-app-script-starter-template機能はこちらです。claspによる App Script へのデプロイTypeScript 対応Webpack5 でのビルド※ESLint / prettier でのコード整形husky / lint-stage でのプレコミットフックClasp を使えば TypeScrip での...

Google App Script 開発 のための Templateリポジトリを作った

GitHub API v4 でページネーションを考慮してクエリを投げる機会があったので、その作業メモです。 GitHub API v4のページネーションGitHub API v4 で nodes や edges を持つリソースには、PageInfoというオブジェクトフィールドがあり、以下 4 つのフィールドを持ちます。endCursorhasNextPagehasPreviousPagestartCursorページングでは、このendCursorとhasNextPageのペア又はstartCursorとhasPreviousPageのペアを使います。endCurso...

GitHub API v4 でページネーションを考慮したクエリの実装

フロントエンドの開発時に仮の API を使いたいってシチュエーションはわりとあると思います。そんな時に、Mock Service Worker を使うと便利だったのでまとめます。 Mock Service Worker とは？Mock Service Worker は、ネットワークレベルで API リクエストをインターセプトして mock のデータを返すためのライブラリです。API リクエストを含む処理のテストや、開発時の mock サーバーの代替として利用出来ます。https://mswjs.io/テストでの利用については以前こちらの記事でまとめました。https://z...

Mock Service Worker で開発用のモックAPIを作る

Elixir でシンプルなクローラーを作ってみたのでまとめます。 何を作る？URL を渡すと、そのページに含まれるリンクから同ホストのページを再帰的にクロールして、全ページの title と description を出力するクローラーを作ります。実際の動作はこちらです。※ 以降で説明するコードは全て以下リポジトリにあります。https://github.com/kawamataryo/elixir-crawler 環境構築mix で Elixir のプロジェクトを作成します。                      $ mix new crawler$...

Elixir で再帰的にリンクをクロールしページ情報を取得するクローラーを作る

ネストされた辞書に対して再帰的に処理をしたい場面があったのでメモ。 コードサンプル最初に高階関数を作ります。create_recursive_action は値の判定関数とその判定関数が適応した場合に行う関数を受け取り、再帰的に処理を行う関数を作る関数です。                      def create_recursive_action(is_target: Callable[[any], bool], action: Callable[[any], any]) -> Callable[[Union[dict, list]], Union[dict...

[Python] ネストされた辞書と配列の各値に対して再帰的に処理をしたい場合のコードサンプル

Elixir の勉強のために GitHub Trending の内容をスクレイピングするコードを書いてみたのでまとめます。 何を作る？GitHub Trending repositoriesのリポジトリ一覧の主要データを配列で返してくれる関数を作ります。一応引数で言語指定もできるようにします。                      GithubTrendingCrawler.crawl() # 言語指定なしのトレンドリポジトリを取得GithubTrendingCrawler.crawl("python") # Pythonのトレンドリポジトリを表示      ...

Elixir で GitHub Trending をスクレイピングしてみる

マークダウン形式のスライド作成ツール Slidev を試したら、とても良かったので紹介です。 Slidevとは？Slidev はVue UseやType Challengesの作者であり、Vue.js のコアチームメンバーでもあるAnthony Fuが開発しているマークダウン形式でのスライド作成ツールです。Vite、Vue3、WindiCSSを用いて開発されています。まだ Public Beta ですが、リリースからわずか数日で 7,000 を超える GitHub スターを集めています。Slidev is still under heavy development. API...

開発者のためのスライド作成ツール Slidev がすごい

Svelte と WebSocket の勉強のため簡単なチャットアプリを作ったので備忘録としてまとめます。 基本 Svelte とは？Svelte は React や Vue.js のように宣言的 UI で Web アプリケーションを作れるツールです。Vue.js の SFC のように、.svelteファイルで HTML、JavaScript、CSS を単一コンポーネントとして管理し、それを組み合わせてアプリケーションを構築していきます。React や Vue.js との大きな違いは、事前にアプリケーションコードを純粋な JavaScript ファイルとしてコンパイルすること...

Svelte + WebSocketでシンプルなチャットアプリを作る

Raspberry Pi で 8BitDo Zero2 を簡単に使うための Python パッケージを作ってみたので紹介です。 8BitDo Zero2とは？8BitDo という ゲームハードウェアの開発会社が販売している格安・小型の Bluetooth ゲームコントローラーです。Amazon で 2,000 円程度で購入出来ます。https://www.amazon.co.jp/-/en/6922621501121/dp/B081HML6MPSwitch などのゲームでも使えますし、Raspberry Pi と Bluetooth 接続し、ボタン押下のイベントで GPIO ...

ラズパイで 8BitDo Zero2 (Bluetoothコントローラー)を使うためのPythonパッケージを作ってみた

Mock Service Worker について色々試したので紹介です。 Mock Service Worker とは？Mock Service Worker（以下 msw）は、ネットワークレベルで API リクエストをインターセプトして mock のデータを返すためのライブラリです。API リクエストを含む処理のテストや、SPA 開発時の mock サーバーとして利用出来ます。https://mswjs.io/以下テストで利用する場合のサンプルコードです。setupServerでインターセプト用のサーバーを定義し、listen()でインターセプトをスタート、close()で...

Mock Service Worker で jest.mock を使わず非同期リクエストのテストを書く

Raspberry Pi Zero + PCA9685 で複数サーボモーターを動かすまでのメモです。 作るものこの動画のように Raspberry Pi Zero で複数サーボモーターを動かします。https://twitter.com/KawamataRyo/status/1388768862116618242 準備物Raspberry Pi ZeroPCA9685MG996R * 3電池ボックスPCA9685 は 16 チャンネルの PWM 出力ドライバー搭載基板です。I2C でラズパイと接続し、複数のサーボモーターや LED を操作出来ます。https...

Raspberry Pi Zero + PCA9685で複数サーボモーターを動かす

自動的にライブラリのアップデートのプルリクエストを作ってくれるDependabotはとても便利です。ただ、何かと通常の開発タスクに追われライブラリアップデートのプルリクエストは滞留しがちです。それを解決するための仕組みはないかなと思い、試行錯誤してみたので書きます。 静的アセットのビルド差分からレビューの必要性を判断今のチームのプロダクトでは静的アセット（JS, CSS, Image）のビルドにのみ Node.js を利用しています。そのため、npm モジュールのライブラリアップデート時にプルリクエストのブランチでビルドされた静的アセットが、master ブランチでビルドされた静...

GitHub Actions で Dependabot のプルリクエストの滞留を防ぐ仕組みづくり

ビジュアルリグレッションテストのプラットフォーム  Percy を使ってみたらなかなか良かったので紹介です。 Percyとは？https://percy.io/Percy はビジュアルリグレッションテスト（ページのスクリーンショットをピクセル単位で比較をすることで意図せぬ UI の変更を検知するテスト手法）のプラットフォームです。Percy を使うことでビジュアルリグレッションテストに必要な画像の保存や、画像変化を検出するページのレンダリング、変更の通知までとても手軽に実現できます。 料金体系Percy の料金体型はアップロードするスクリーンショットの枚数によって変わりま...

Percy + Cypress + GitHub Actionsで手軽にビジュアルリグレッションテストを導入する

特定のブランチ名のプルリクエストの場合にの実行される GitHub Actions のジョブを作ろうとしたときに詰まったのでメモ。 よくある間違い最初によくある間違いというか、自分が最初書いていて「なぜか実行されん🤔」と詰まった書き方です。以下は dependabot の作ったプルリクエストの場合のみ実行される GitHub Actions のジョブを作ろうとした場合の例です。                      name: Sample actionson:  pull_request:    branches:      - 'dependabot/*...

特定のブランチ名のプルリクエストで動作するGitHub Actionsを作る

Puppeteer + Lighthouse + GitHub Actions を使って Web アプリのフロントエンドパフォーマンスを定期計測するプロジェクトを作ってみたら良い感じだったので紹介です。 何を作った？このように GitHub Actions 上で 認証付きの Web アプリに対して Puppeteer 介し Lighthouse を定期実行し、結果を Datadog に送信するプロジェクトを作りました。実際にそのプロジェクトの計測値を使った Datadog のダッシュボードはこちらです。Webperf の主要指標をページ別に時系列で表示しています。サンプル...

Puppeteer +Lighthouse +GitHubActionsで認証付きWebアプリのWebperfを定期計測

消防士時代からQiita投稿を続け、累計投稿数は140記事を超えました。投稿記事が増えると「あれ？これ前Qiitaに書いた気がするけどなんだっけな..？」となっても、自分の過去投稿を探すのが一苦労です。そんな手間を解消するため、Qiita APIとAlfredを使って自分のQiita記事をインクリメント検索するAflred Workflowを作ってみました。結構便利なので、Qiitaヘビーユーザーの方々に使ってもらえると嬉しいです。alfred-my-qiitaこちらのGIF画像のように、自分の投稿記事をインクリメンタル検索できます。初回はAPIリクエストが走るので少し時間がかかりますが、その後はキャッシュが効くのである程度高速に動作します。インストール・環境変数の設定以下コマンドでnpmからインストールできます（後述するAlfyで実現しています）。npmインストールするだけでAlfredがWorkflowを認識し、すぐに使えるようになります。$ npm i -g alfred-my-qiitaまた、GitHubのリリース から直接alfred-my-qiita.workflowファイルをダウンロードし、Alfredに取り込むことも可能です。インストールが完了したら、AlfredのWorkflow設定画面から alfred-my-qiita を選択して、環境変数を設定してください。設定する環境変数は以下2つです。名前値API_TOKENQiita APIのAPIトークン。こちらの案内にしたがって取得・設定してください。USER_NAMEQiitaのユーザー名（@を除く）を設定してください。これで準備は完了です。Alfredを開き.qiitaと打ち、あとは半角スペースを空けて検索したい文字列を入力すればOKです!!実装今回も以前こちらの記事で紹介したAlfy というNode.jsベースでAlfred Workflowを作れるフレームワークを使っています。Alfyを使う利点は以下の通りです。Node.jsでWorkflowを作れるnpmモジュールが使えるnpmに公開し、手軽にインストールしてもらえるようになる何より、Bashスクリプト書かなくてよいというのが最高便利です。今回のworkflowは以下2つのファイルで構成されています。1つはQiita APIから投稿記事を取得する処理です。最初に自分の投稿総数を取得して、その後Promise.allとmapを使い全投稿データを取得しています。lib/fetchAllPosts.jsimport alfy from "alfy"export const fetchAllPosts = async (username, token) => {  const options = {    headers: {      Authorization: `Bearer ${token}`,    },    json: true,    maxAge: 60000  };  const user = await alfy.fetch(    `https://qiita.com/api/v2/users/${username}`,    options  );  const maxPage = Math.ceil(user.items_count / 100);  let posts = [];  await Promise.all(    [...Array(maxPage)].map(async (_, i) => {      const res = await alfy.fetch(        `https://qiita.com/api/v2/authenticated_user/items?page=${          i + 1        }&per_page=100`,        options      );      posts = [...posts, ...res];    })  );  return posts};そして、index.jsがメインの処理です。AlfyのinputMatches APIを使い投稿記事をフィルタリングして出力しています。index.jsimport alfy from "alfy";import { fetchAllPosts } from "./lib/fetchAllPosts";const token = process.env.apiToken;const username = process.env.username;const createResponse = (title, subtitle, url) => {  return {    title,    subtitle,    arg: url,    icon: {      type: "png",      path: "icon.png",    }  };}(async () => {  const posts = await fetchAllPosts(username, token);  if(alfy.input.length > 1) {    const items = alfy.inputMatches(posts, "title").map(        (p) => createResponse(p.title, p.body, p.url));    if (!items.length) {      alfy.output(          [createResponse("The requested post was not found. ⚠️", "", "")]);      return;    }    alfy.output(items);  } else {    alfy.output([createResponse("Loading...", "", "")])  }})()終わりに以上「自分のQiita記事をインクリメンタル検索するAlfred Workflowを作ってみた」でした。完全自分用のツールとして作ってみたものなのですが、Qiita投稿数が多い方には何かと便利だと思います。使ってもらえると嬉しいです。（もし動かない場合は、TwitterかGitHub Issue, この記事のコメントで教えてください  ）

自分のQiita記事をインクリメンタル検索するAlfred Workflowを作ってみた

先日以下ツイートをしたら思いの外良い反応もらえたので、より詳細な紹介記事を書いてみました。これは必見だわ!!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 judgeVueUseやVueDemiの開発者である @antfu7さんが開発している、TypeScriptの型問題に気軽に挑戦できるリポジトリです。ある型上の問題に対処するために、独自のユーティリティタイプを作成する型パズルを提供TypeScript Playgroundで実際に手を動かしながら学べる世界のプログラマーの回答が確認できるという点が特徴です。使い方1. READMEから挑戦したい問題を選ぶhttps://github.com/type-challenges/type-challenges にアクセスして、READMEのChallengesから挑戦したい問題を選びます。レベル別に掲載されているので、まず黄緑ラベルのeasyから順に解いてみるのがおすすめです。バッジをクリックすると、問題詳細ファイルに遷移します。ここが問題挑戦や、回答の起点になります。2. TypeScript Playgroundで問題にチャレンジTake the Challengeのバッジを押してTypeScript Playgroundにアクセスします。TypeScript Playgroundでは問題文と回答欄、テストケースが記載されてます。テストケースではtype-challengesから型チェック用のユーティリティタイプがimportされています。JestのAssertionのような形で、ジェネリクスにユーティリティタイプを入れることで型を検証しています（すごい..!!）。テストケースで型エラーが発生しないように、Your Code Hereの部分の型を修正してみてください。3. 回答を確認 or  回答をIssueとして提出Playgroundで問題に挑戦して型エラーを解決できたら、check out Solutionsのバッジから、対象の問題に対する回答（Issue）を確認してみましょう。もし同様の回答が見つかったら投票やコメントをしてみてください。 また、もし自分の回答がユニークなものだったら、Share your solutionsのバッジからIssueを作成して回答をシェアしてみましょう。バッジを押すと回答用のIssueが開かれるので、your answersの部分に自分の回答を貼り付け、Submit new issueボタンを押せば完了です。Appendix: おすすめのTypeScript学習資料「いやいや、型パズルをやる前にそもそもこれからTypeScript学ぶんだわ..」という方に向けておすすめ資料を紹介します。TypeScript 公式ドキュメント最近リニューアルされたTypeScript公式ドキュメントです。Handbookという章がとても分かりやすいです。Handbookには基礎的な内容。Handbook Referenceにはconditional typesなど応用的な内容が掲載されています。TypeScript: Handbook - The TypeScript HandbookちなみにこちらのIssueで日本語への翻訳プロジェクトも動いています。コントリビューションしてみるのも良いと思います。Japanese Translation Coordination Issue · Issue #220 · microsoft/TypeScript-WebsiteTypeScript Deep Dive言わずと知れたTypeScriptの入門書ですね。TypeScriptを学びたいという方に「何から読めば？」と聞かれたら、まずこちらを進めることが多いです。JavaScriptの歴史からTypeScriptへの移り変わり、TypeScriptのトランスパイル過程、高度な型機能まで幅広く解説されています。TypeScriptの型システム - TypeScript Deep Dive 日本語版@uhyo さんの記事私は@uhyoさんの記事でTypeScriptを学びました。どの記事もとても良いのですが、最初は以下記事で概要を理解するのがおすすめです。TypeScriptの型入門 - QiitaTypeScriptの型初級 - Qiitaそしてこちらの演習で理解度を確認するのが良いと思います。TypeScriptの型演習 - QiitaTypeScriptの型演習（解答・解説編） - QiitaO'Reilly プログラミングTypeScriptより体系的にTypeScriptを学ぶならO'Reillyから出ている書籍も良いです。TypeScriptの型システムが網羅的に解説されています。O'Reilly Japan - プログラミングTypeScript終わりに以上「TypeScriptの"型"を学びたいあなたへ。type-challengesのすゝめ」でした。「TypeScriptの型は完全に理解してる!」「全く自信がない!」どちらの人にもおすすめなので、是非挑戦してみください。（こんな記事を書いておきながらeasyレベルのTuple to Objectでつまづいた私も鍛錬あるのみです🙈）2020/09/06 追記な、なんと!!type-challengesの作者の@antfu7さんがコメント付きRTしてくれました（しかも完璧な日本語で）。嬉しい!!😆ご紹介ありがとうございます!! TSの学習過程でさまざまな問題に遭遇したので、この問題セットを作成しました。 お役に立ててうれしいです。😆 https://t.co/RNa50HEQxq— Anthony Fu (@antfu7) September 5, 2020

TypeScriptの"型"を学びたいあなたへ。type-challengesのすゝめ

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として切り出して使えるようであれば是非使いたいです。今後の開発を追っていきたいです。あと個人的に、発表資料のその他の章で以前自分がremote.vueで発表した資料が紹介されていて嬉しすぎました。紹介ありがとうございます🙏発表で言及していたkazuponさんの過去スライドにも目を通しておくとVue3への備えは万全かと思います!Vue.js 3 に向けた Vue.js 入門 - Speaker DeckNative-ESM powered web dev build tool - Speaker DeckVue.js コアチーム座談会（@kazupon, @ktsn, @ota-meshi, @kiaking）@kiakingさんのファシリテーションが上手すぎて、まるでベテランのラジオパーソナリティのようでしたw 深夜ラジオのようでずっと聞いていたい気持ちにも☺️ 全体的にコアメンバー、Vueコミュニティの良い雰囲気を感じられました。今回話を聞いてVueがますます好きになった気がします。以下座談会のメモです（間違いあるかもなので参考程度で）。Vue3について期待していることは？どんどん書きやすくなっているので良いSFCの改善PRに対する eslint-plugin-vueの開発は大変Vue3でもClassコンポーネントはサポートするComposition APIの課題をClassでサポートしていきたいvue-i18nには大きな影響はない今後開発者にどう受け入れられていくのかが楽しみコアチームの体制はどうなっているの？サイトにコアチームとして紹介されている以外にも多くのメンバーがいるDiscordで普段はやりとりしているReact, Angularと違い、企業が絡まないので良い意味で気楽にできる良い意味でゆるく、居心地が良い。皆優しいEvan氏がVueが好き他のOSSだと最初に作った人がもういないとかがある。Vueは作者がずっとやっているのが良い。方向性がはっきりしている皆好きなことをやっているのでモチベーションが続くコアチームメンバーは何をやっている隔週でDiscordを使いミーティングしている英語が喋れなくてもやっていけるどうやってコアチームになるの？コアメンバーが気になった人をdiscordに入れている目覚ましい成果をあげるか長期間の貢献があった人開発で課題にあがったものをissueで報告してたりPRを作ったりするのが大事座談会の内容はこちらの参加レポートも参考にさせて頂きました。 Vue.js v-tokyo オンライン Meetup #11で聞いたことのメモ動画の再生速度を変更するコンポーネントを作ろうとして諦めた話 @FruitRiin📁スライド https://speakerdeck.com/fruitriin/talk-about-give-up-to-create-video-with-playback-rate-controller📝内容メモ- VueコンポーネントでVideoタグの動画速度変更は可能- ネイティブのコントローラーとの同期はかなり大変..- 本当に解決したいのは要求!!Vueで動画の再生速度を変更するコンポーネントを作ることになり、どのように対応したのかのお話。現場感のあるリアルな内容でとても面白かったです。わかりみが深すぎて終始頷きっぱなしでした。Vueで管理されていない生DOMをMutationObserverで制御するテクニック、プロダクトで使えそうです（生DOM避けたいけど、どうしてもね..）。あと最後に言及されていた「本当に解決したいのは要求」という言葉は心に刻もうと思いました。provide/inject @kahirokunn📁スライド： https://slides.com/kahirokunn/deck-ceb739📝内容メモ：- provide/injectの話- 手軽なstate管理の手法として有力provide/injectがVue2系だとアプリケーションコードで推奨しないと説明されてたことをまず知らなかったです（ドキュメント読もう..）。今回のサンプルみたいなprovide/injectの使い方は実際にプロダクト開発で行っていたので便利さを実感しています。同名のkeyでprovideがネストされている場合の挙動は知らなかったので勉強になりましした。また、CodeSandboxの実装コードが、factoryを作成したり関数が分割されていて見通しが良いなーと思いました。とても参考になりました。viteではじめるVue 3 @yuneco📁スライド： https://docs.google.com/presentation/d/1ua_U8BPdyrKDxGux7N2rykBbKxzJ1T72wa2DPHaL-6g/edit#slide=id.gcb9a0b074_1_0📝内容メモ：- viteの起動は超早い- ESModuleビルドで変更がほぼノータイムで反映される- まだviteは個人開発・勉強したい層向け。今後に期待viteとvue cliとの起動速度の比較動画がとてもわかりやすかったです。感覚的に早いなーとは思ってましたが、しっかり数字で比べると違いが明確ですね。viteのビルドの仕組みや、viteを今使うべきかの説明もとても良かったです。スライド・イラストが全体的に綺麗でスッと頭に入るプレゼンでした。また、サンプルで紹介されていたvite-kingyoのリポジトリをcloneして実際に動かしてみました。Viteの起動速度ももちろんですが、金魚を動かすアプリとして面白いし、実装コードも勉強になりました。viteに興味ある方は、実際にcloneして動かしてみることオススメです。Vue.js と TSX が出会うことによってできること @potato4d📁スライド： https://speakerdeck.com/potato4d/vue-dot-js-with-tsx-from-vue-2-dot-x-to-vue-3-number-v-tokyo11📝 内容メモ：- Vue3ではTSXがネイティブサポートされてる- TSXはコンポーネントの粒度を小さく保ちやすい（同ファイルに別コンポーネントなど）- Vue2系で使う場合はかなり注意TSXを使う利点をあまり分かってなかったのでとても参考になりました。SFCとTSXの比較のスライドなどめちゃくちゃ分かりやすくてTSXを導入する際の検討資料としてそのまま使えそうです。Vue2系だと色々考慮点があって利用は難しそうな印象でしたが、Vue3ではTSXも全然ありだなと思いました。まず個人開発からTSXを使ってみて感触を確かめていきたいです。終わりに以上「Vue.js v-tokyo オンライン Meetup #11 参加レポート」でした。茨城在住のため今回初参加のv-tokyoだったのですが、どの発表もとても濃い内容で本当に勉強になりました。また懇親会でもコアメンバーの方とお話して気になっていたことが聞けたのでよかったです（vue-apollo v4の開発状況、class componentとcomposition APIの共存 etc）。Vueコアメンバーの方、Vueコミュニティにとても魅力を感じたのでいつかそこに自分も入っていけたら良いなと思いました。運営、登壇者の皆様、本当に良い勉強会をありがとうございました!!

Vue3への期待が広がる! Vue.js v-tokyo Meetup #11 参加レポート

最近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 を入力することで取得できる。querySelector()でわざわざ探す必要はない。#Chrome #DevTools pic.twitter.com/asPILTYF85— Kawamata Ryo (@KawamataRyo) August 16, 2020 $0はChromeが提供しているConsole Utilities APIです。Console Utilities API Reference で他にも色々便利機能が紹介されているので一読をお勧めします。他のAPI一例$(selector)セレクタに一致するDOM要素を返す。document.querySelectorと同意。（一見jQueryですが、Console Utilities APIです）$('#hoge') $$(selector)セレクタに一致するDOM要素の配列を返す。document.querySelectorAllと同意$$('div')$x(path)xpathに一致するDOM要素の配列を返す。$x("//p")2. DOM変化からのDebugger起動（Break on）DevToolsでのデバッグというとソースコード上にdebuggerを仕込んでというのがありますが、ソースコードを何もいじらずDevTools単体でも実行できます。1つはElementsタブからのBreak onの設定です。何か表示が変わるDOM要素を選択して右クリックでBreak onを選択、表示されるサブメニューでいずれかの項目にチェックを入れます。その状態で画面上にて表示の変化のトリガーとなる動作を行うと、DOMの変化の実行前に処理が止まり、該当変化のイベント処理からステップ実行が可能になります。（Chrome DevToolsを調べようと思ったきっかけの機能。会社のチームリーダーに教えてもらいました）Break Onの起動オプションは以下の通りです。option名内容Subtree modifications現在選択されているノードの子が削除または追加されたとき、または子の内容が変更されたときにトリガーされます。子ノード属性の変更、または現在選択されているノードへの変更ではトリガーされませんAttribute modifications現在選択されているノードで属性が追加または削除されたとき、または属性値が変更されたときにトリガーされますNode removal現在選択されているノードが削除された時にトリガーされます手順Elementsパネルをひらく下位要素が変化する、または自身の属性が変わる or 破棄される要素を選ぶ右クリックでBreak onを選択、サブメニューのいずれかにチェックを入れる画面上で変化のトリガーとなる操作をする最近知ったChrome DevToolsの便利機能②DOM要素の変化起因でのDebugger起動（Break on）ElementタブからDOM要素を選び右クリックでBeak on を選択。サブメニューでattribute modificationsなどにチェックすればOK。対象のDOM変化の要因となるスクリプトでDebuggerが起動#Chrome #DevTools pic.twitter.com/5ccPX72tfB— Kawamata Ryo (@KawamataRyo) August 16, 2020 3. Exceptionの発生箇所で自動停止エラー発生時に自動的にブレークポイントを設定することも可能です。「console上にエラー出てるけど、何処で発生しているんだろう？」という時にわざわざ該当箇所を探しブレークポイントを設定する必要はありません。一瞬でデバッグできます。手順Sourcesタブを開く右側のデバッグコンソールのストップアイコンを押すPause on caught exceptions にチェックを入れるエラーの発生する動作を行う最近知ったChrome DevToolsの便利機能③Exception発生箇所に自動でブレークポイント設定"Pause on caught exceptions"をONにすると自動でException発生時点で止めてくれる。ソースの何処でエラーが発生しているのか即わかる。#Chrome #DevTools pic.twitter.com/xjtPO4z1RB— Kawamata Ryo (@KawamataRyo) August 16, 2020 4. snippetの登録良く使うスクリプトをsnippetとして登録する機能です。登録したスクリプトはコントロールパネルから実行できます。私はちょっとしたデバッグ用のスクリプトなどを登録しています。手順cmd + shift + p でコントロールパネルを開きsnippetで検索Sources Create new snippetを選択snippetウィンドウで自由にスクリプトを作成（自動保存されます）実行ボタン、またはcmd + pでコントロールパネルを開き!を入力してsnippet一覧を表示し実行最近知ったChrome DevToolsの便利機能④スクリプトのSnippet機能任意のコードをSnippetとして登録し、ワンクリックで実行出来る。使用頻度の高いのバック用の関数とかを登録しておくと何かと便利。 #Chrome #DevTools pic.twitter.com/nvC6sNWhG8— Kawamata Ryo (@KawamataRyo) August 16, 2020 5. ScreenShot（フルページ or ノード）スクロール分を含んだフルページのスクリーンショットを撮りたい時ってありますよね。そんな時はおそらくChrome拡張を使っている人が多いと思います。でも実はDevTools単体でもできます。他にも、Screenshot Capture node screenshotを選べばElementsの選択画面で選択しているノードの範囲でのスクリーンショットもお手軽に撮れます。手順cmd + shift + P でコントロールパネルを開きscreenで検索Screenshot Capture full screenshotを選択フルページのスクリーンショットがダウンロードされる最近知ったChrome DevToolsの便利機能⑤フルページ or DOM単位でのスクリーンショットChrome拡張機能不要で、Chrome DevTools単体でもページ全体のスクショが撮れる。あと、選択中のDOM要素単位でのスクショも撮れる。#Chrome #DevTools pic.twitter.com/hRdHwPafIU— Kawamata Ryo (@KawamataRyo) August 16, 2020 6. APIリクエストの実行形式でのコピーAPIのテストや別クライアントでの操作の際に、APIリクエストをcURLやその他の形式で使いたいって時あると思います。そんな時もDevToolsが使えます。ネットワークタブからリクエストを選び、右クリックでCopyを選択するだけで様々な実行形式のコードベースが取得可能です。手順Networkタブを開くコピーしたいリクエストを選択して右クリックCopyのサブメニューから指定の形式を選ぶ最近知ったChrome DevToolsの便利機能⑥リクエストの実行形式でのコピー別クライアントでのAPIリクエストのテストなどの時にわざわざcURLのクエリを組み立てる必要なくコピペでOKになる。fetchや他の形式にも対応している。 pic.twitter.com/ZdpRtTiJBw— Kawamata Ryo (@KawamataRyo) August 16, 2020 7. 使用していないCSS、JSの調査DevTools単体で静的解析的に、ロードしているものの未使用のCSS、JSを調べることも可能です。※ あくまでページ単体での調査なので、全ページで使う共通スクリプトをbunldeしていると値が悪く出たりします。そこは注意が必要です。cmd + shift+ P でコントロールパネルを開くShow Coverageを選択表示されるタブで、リロードボタンを実行最近知ったChrome DevToolsの便利機能⑦Coverageでの使用していないJS、CSSの調査Coverageタブで今のページでロードされているCSS、JSの内どれくらいのコードを実際に使っているか可視化することができる。 pic.twitter.com/XuKWYUhD9t— Kawamata Ryo (@KawamataRyo) August 16, 2020 apx. 画面上で自由にテキスト編集これはChrome DevToolsの機能という訳ではないのですが、分かりやすく凄いので紹介します。DevToolsのConsoleタブ上で以下のコードを実行すると、画面上の要素を自由に改変できるようになります。文字列を編集したり、画像を削除したり色々できます。document.designMode = "on"ちょっと表現を変えてデザインを見てみたりとかする時に便利です。That feeling when you first discovered document.designMode pic.twitter.com/bxA1otzCjN— Tomek Sułkowski (@sulco) September 27, 2019 ちなみに$0と組み合わせて、選択中の要素を編集可能にしたい場合は以下でも出来ます。$0.contentEditable = 'true'contentEditable初めて知った。HTMLElement.contentEditable = "true"でブラウザ上で指定要素の内容を書き換えられるようになる。Worpdressのエディタとか、Webページを見たまま編集できる系のツールではこれ使ってるのかな？ pic.twitter.com/xov3BopxA4— Kawamata Ryo (@KawamataRyo) August 17, 2020 終わりに以上「開発体験を変えるChrome DevTools Tips 7選」でした。ふと調べ始めたら色々ありました。知ってると知らないとでデバッグ効率や開発体験がかなり変わると思います。まだまだ知らない便利な機能があると思うので、よく使っている機能などあればコメントやRTで教えてもらえると嬉しいですー!参考Chrome DevTools  |  Google Developers5 Chrome DevTools Tricks You Didn't Know! - YouTubeCHROME DEVTOOLS 101 TIPS AND TRICKS FOR WEB DEVS - YouTubeTwelve Fancy Chrome DevTools Tips | by David Gilbertson | HackerNoon.com | Medium

開発体験を変える! Chrome DevTools Tips 7選

最近、GitHub CLIが便利だな〜と思ったので紹介します。この記事は以下リリース時点の情報です。Release v0.11.1 · cli/cliGitHub CLIとは？コマンドライン上でGitHubの操作を行えるCLIツールです。GitHubが公式で公開しています。(参考： GitHub公式ブログ）インストールMacの場合はbrewでインストールできます。Windowsの場合は公式のREADME.mdを参照してください。brew install gh認証最初に自分のGitHubアカウントと連携するために認証が必要です。なんらかのghコマンドを打つと認証を求められるので、案内にしたがって認証を完了してください。$ gh issue listNotice: authentication requiredPress Enter to open github.com in your browserコマンド補完の設定GitHub CLIはコマンドが長いので最初にシェルの補完設定をしておくと便利です。gh completionで補完関数が表示されるので、お使いのシェルの設定ファイルにevalを記述してください。fishの場合config.fisheval (gh completion -s fish| source)zshの場合.zshrceval "$(gh completion -s zsh)"bashの場合.bashrceval "$(gh completion -s bash)"何が良いの？そのままですが、ブラウザを開いてマウスカーソルで操作する必要がないのが何より良いです。新しくリポジトリを作成する時や過去のプルリクエストの検索の際などに、いちいちブラウザを開いて集中力を途切れさせる必要はありません。そのままエディタ、ターミナルと向き合えば良いのです。最高に便利。以降でコマンド一覧と実際に普段の業務でよく使うコマンドを紹介します。コマンド一覧GitHub CLIで使えるコマンド一覧です。コマンドごとのオプションなど詳細情報は、リンク先のドキュメントを参照してください。repo - リポジトリの操作リポジトリの作成、クローン、表示などが行えます。# リポジトリの作成$ gh repo create [<name>] [flags]# リポジトリのクローン$ gh repo clone <repository> [<directory>] [flags]# リポジトリのフォーク$ gh repo fork [<repository>] [flags]# リポジトリ内容の閲覧$ gh repo view [<repository>] [flags]pr - プルリクエストの操作プルリエクストの作成、マージ、レビューなどが行えます。たぶん一番使うコマンドですね。# プルリクエストのブランチへのチェックアウト$ gh pr checkout {<number> | <url> | <branch>} [flags]# 現在のブランチからのプルリクエストの作成$ gh pr create [flags]# プルリクエストのクローズ$ gh pr close {<number> | <url> | <branch>} [flags]# プルリクエストの差分を確認$ gh pr diff {<number> | <url>} [flags]# プルリクエストの一覧を取得$ gh pr list [flags]# プルリクエストをマージ$ gh pr merge [<number> | <url> | <branch>] [flags]# プルリクエストにレビューを追加$ gh pr review [<number> | <url> | <branch>] [flags]# プルリクエストの内容を閲覧$ gh pr view [<number> | <url> | <branch>] [flags]# 自分に関係のあるプルリクエストのステータスを閲覧$ gh pr status [flags]# ドラフトのプルリクエストをレビューに変更する$ gh pr ready [<number> | <url> | <branch>] [flags]# クローズしたプルリクエストを再度オープンにする$ gh pr reopen {<number> | <url> | <branch>} [flags]issue - イシューの操作イシューの作成や、ステータスの確認などが行えます。# イシューの作成$ gh issue create [flags]# イシューのクローズ$ gh issue close {<number> | <url> | <branch>} [flags]# イシューの一覧表示$ gh issue list [flags]# イシューの再オープン$ gh issue list [flags]# 自分の関連するイシューのステータス確認$ gh issue status [flags]# 指定のイシューの閲覧$ gh issue view {<number> | <url>} [flags]gist - GitHub Gistの操作GitHub gistの作成が行えます。# gistの作成$ gh gist create [<filename>... | -] [flags]api - GitHub APIの実行GitHub APIの実行ができます。GraphQLのqueryを手軽に実行できます。# 自分のリポジトリ一覧の取得$ gh api graphql --paginate -f query='  query($endCursor: String) {    viewer {      repositories(first: 100, after: $endCursor) {        nodes { nameWithOwner }        pageInfo {          hasNextPage          endCursor        }      }    }  }alias - CLIコマンドのエリアスの登録GitHub CLIの各コマンドのエイリアスを作成できます。# エイリアスの登録$ gh alias set <alias> <expansion> [flags]# エイリアスの削除$ gh alias delete <alias> [flags]# エイリアスの一覧表示gh alias list [flags]実際に良く使うコマンド紹介最後に、実際に使用頻度が高いコマンドを紹介します。自分の出したプルリクエストの一覧取得プルリクエストの概要欄に過去の関連プルリクエストを貼りたいときなど、過去のプルリクエストを検索しますよね。GitHub CLIを使えばコマンドライン上でgrep検索できます。$ gh pr list -s all -a <自分のアカウント名> | grep "検索文字列"オプションの入力を省くためにaliasを作っておくとなお便利です。# myprでエイリアスとして登録$ gh alias set mypr "pr list -s all -a kawamataryo"# 検索の実行$ gh mypr | grep "Vue化"リポジトリの作成どのようなコードを書くにせよGitHubにリポジトリを立ててから書き始めるタイプなので重宝しています。今まではブラウザを開いて、GUIでぽちぽちやる必要があり煩わしかったのですが、GitHub CLIならコマンド1つでリポジトリが作成可能です。# my-super-programというリポジトリをパブリックで公開$ gh repo create my-super-program --public -d 'The best library ever!'私はローカルのリポジトリ管理をghqで行っているので、リポジトリの作成ghqでの取得VSCodeで開くまでの一連の流れを行う関数をfishシェルに登録して使っています。config.fish# githubにリポジトリを作り、ghqで取得、vscodeでひらくfunction ghcr gh repo create $argv ghq get git@github.com:kawamataryo/{$argv[1]}.git code /Users/kawamataryou/ghq/github.com/kawamataryo/{$argv[1]}endghcrコマンドを使えば、速攻で実装をスタートできます。便利！$ ghcr my-super-program --public -d 'The best library ever!'2020/08/16 追記@ryoppippi さんが汎用的に使えるように書き直してくれました!!function ghcr gh repo create $argv ghq get $argv[1] code (ghq list --full-path -e $argv[1])endプルリクエストの作成プルリクエストの作成時も便利です。通常は、push --set-upstream origin hogehogeとしてブランチをpushして、その後表示されるリンクからプルリクエスト作成画面へ移動という流れかと思います。GitHub CLIを使えばその作業を1つのコマンドで行うことができます。CLI上でプルリクエストのタイトルや概要などの項目を埋めることも可能です。自分は概要に動作確認の画像の貼り付けなどを行いたいので、いつも-wのオプションを指定してブランチのpush後に自動的にGitHubのプルリクエスト作成画面がブラウザで開くようにしています。$ gh pr create -wこれもエイリアスに登録しておけば楽です。# prcとしてエイリアスの登録$ gh alias set prc "pr create -w"# プルリクエストの作成$ gh prc終わりに以上「GitHub CLIで始める快適GitHub生活」でした。今回紹介出来てないんですが、GitHub APIをもっと上手く使えばかなり色々出来そうです。今後も継続して使っていきたいです。参考GitHubを操作するCLI「gh – The GitHub CLI tool」(Beta)を試す | Developers.IOGitHub CLI Beta | Take GitHub to the command linecli/cli: GitHub’s official command line tool

GitHub CLIで始める快適GitHub生活

8月上旬に正式リリース予定とされているVue3の変更点をいち早く理解できるように概要をまとめてみました。それぞれの項目ごとにvuejs/rfc又はVue3 Documentへのリンクを貼っているので索引的に使ってもらえると嬉しいです。この記事は以下バージョン時点の情報です。vue-next v3.0.0-rc.5Composition APIの追加rfcs/0013-composition-api.md at master · vuejs/rfcsComposition API RFC | Vue Composition APIおそらく一番大きな目玉となる変更はこちら。Composition APIという新しいAPIが追加されます（PluginでVue2系でも使用可能です）。Composition APIはコンポーネントのロジックの柔軟な再構成を可能にする関数ベースのAPI群です。なお、Vue2系のOptions APIのサポートも継続されるので、Vue2系からのVue3へのバージョンアップ時にComposition APIに書き換える必要はありません。<template>  <form>    <input type="text" v-model="formState.name" />    <input type="text" v-model="formState.value" />    <p>{{ contentLength }}</p>    <button @click="submit" type="submit">submit</button>  </form></template><script lang="ts">import { defineComponent, computed, ref, onMounted, reactive } from "vue";export default defineComponent({  props: {    maxContentLength: {      type: String,      required: true    }  },  setup(props, context) {    // reactive data    const formState = reactive({      name: '',      content: ''    })    // computed    const contentLength = computed(() => `${formState.content.length} / ${props.maxContentLength}`)    // emit    const submit = () => context.emit('submit', formState)    // lifecycle hook    onMounted(() => {      // ....    })    return {      formState,      contentLength,      submit    };  }});</script>Composition APIについてはこちらの記事でより詳細にまとめています。先取りVue 3.x !! Composition API を試してみる - QiitaVue Composition APIで使えるリアクティブ関連のAPI一覧 - QiitaTeleportの追加rfcs/0025-teleport.md at master · vuejs/rfcsTeleportは定義したコンポーネントが属するDOMツリーとは別の場所に、まるでテレポートしたかのようにコンポーネントを移動できる機能です。Vue2系でもサードパーティのプラグインLinusBorg/portal-vueで実現されていました。以下のようにモーダル表示をハンドルするコンポーネントで<teleport>を使うと、toで指定したDOM要素に内部のコンポーネントを移動できます。<template>  <div class="container">    <button @click="toggleModal">toggle modal</button>    <teleport to="#teleport-target">      <MyModal v-if="isVisible"/>    </teleport>  </div></template><script lang="ts">import { defineComponent, ref } from "vue";export default defineComponent({  setup() {    const isVisible = ref(false);    const toggleModal = () => {      isVisible.value = !isVisible.value; };    return {      isVisible,      toggleModal    };  }});</script>toで指定できるDOM要素は自身のVueインスタンスをマウントしたDOM要素以外も指定できます。<html lang="ja"><body>  <div id="app"></div>   <div id="teleport-target"></div>   <script src="/dist/main.js"></script></body></html>teleportを利用すると、いままでCSSのz-indexで調整していたDOMの重なり順制御を、宣言的に制御できるようになりz-indexの指定に悩まされることはなくなります。Vue3を入れたらすぐに使いたいと思える実用的な機能ですね。こちらの記事でも詳細をまとめています。Vue.js 3.0 の新機能を試す。 〜 Teleport 編〜 - QiitaFragmentsの追加Fragments | Vue.jsrfcs/0031-attr-fallthrough.md at master · vuejs/rfcsFragmentsはVue2系では実現できなかったmulti-root nodeのコンポーネントを可能にするものです。Vue2系ではコンポーネントのroot要素は必ず1つという制約がありました。<template>  <div>    <header>...</header>    <main>...</main>    <footer>...</footer>  </div></template>Vue3ではFragmentsのおかげでその制約がなくなり、root要素に複数の要素を記載できます。冗長なdivでのラップなどが不要になります。簡潔で良いですね。<template>  <header>...</header>  <main>...</main>  <footer>...</footer></template>ただ、注意点としてコンポーネントに直接Class指定をしていると、今まで自動的にroot要素にClassを当てられたのですが、それがfragmentsの場合は明示的な指定が必要になるというのがあります。Suspenseの追加（実験的）rfcs/0026-async-component-api.md at master · vuejs/rfcsSuspenseは非同期処理が解決されるまでフォールバックコンテンツ（例えばLoading中アイコン）を表示してくれる特別なコンポーネントです。いままで、v-if="loading === true" などの状態変数を使って制御していたものを、状態変数を使わずに簡潔に書くことができます。Suspenseはまだ実験的な機能で、Vue3.0の段階では仕様が確定しておらず今後変更が入ることも考えられます。Vue 3.1での正式リリースを見越しているとのことです。<template>  <Suspense>    <template #default>      <AsyncComponents/>     </template>    <template #fallback>      loading...    </template>  </Suspense></template>Suspenseの詳細はこちらにまとめています。Vue.js 3.0 の新機能を試す。 〜 Suspense 編〜 - Qiitav-modelの仕様変更rfcs/0011-v-model-api-change.md at master · vuejs/rfcsv-modelの機能が拡張され、ひとつの要素に複数のv-modelの設定が可能になります。Vue2系のv-bind.syncで実現していたようなことがv-modelで実現できるようになるイメージですね。この機能によってv-bind.syncは代替されるので利用できなくなります。以下v-modelの複数バインドの例です。v-model:xxxxのxxxのところで明示的にバインドするプロパティを指定しています。<template>  <UserForm   v-model:name="name"   v-model:message="message"  /></template><template>  <form>   <label>name</label>   <input     type="text"    @input="$emit('update:name', $event.target.value)"   >   <label>message</label>   <input     type="text"    @input="$emit('update:message', $event.target.value)"   >  </form></template><script lang="ts">import { defineComponent } from "vue";export default defineComponent({  props: {    name: {      type: String,      default: ''    },    message: {      type: String,      default: ''    }  },  setup() { return {} }})</script>また、modifiersの機能が拡張され、.lazy, .number, trimのデフォルトのmodifiers以外に独自に,modifiersを定義できるようになりました。以下はcapitalizeというmodifiersを設定している例です。v-model:name.capitalize=とすることで入力値にcapitalizeを実行しています。<template>  <form>    <MyName  v-model:name.capitalize="form.name"/>      </form></template><template>  <input    :value="name"    @input="updateName"    type="text"    name="name"  /></template><script>import { defineComponent } from "vue";export default defineComponent({  props: {    name: {      type: String,      default: ''    },    nameModifiers: {      default: () => ({})    }  },  setup (props, { emit }) {    const updateName = event => {      let val = event.target.value      if (props.nameModifiers.capitalize) {        val = val.charAt(0).toUpperCase() + val.slice(1)      }      emit('update:name', val)    }    return {      updateName    }  }}</script>scoped CSSの仕様変更rfcs/0023-scoped-styles-changes.md at master · vuejs/rfcsscoped CSSで使える擬似クラスの仕様変更・機能追加が行われます。まず1つ目が::v-deep()でこれは、今まで/deep/として設定していた、子コンポーネントにスタイルを適用するための擬似クラスです。/deep/の記法がDEPRECATEDとなり、新たに::v-deep()が追加されています。::v-deep(.foo) {}/* コンパイル後 */[v-data-xxxxxxx] .foo {}2つ目が、::v-slotted()で、これはslotで受け取った親コンポーネントの要素にスタイルを適用するためのものです。Vue3からデフォルトではslotで受け取った要素は、子コンポーネントのスタイルが適用されなくなるため、こちらが追加されました。::v-slotted(.foo) {}/* コンパイル後 */.foo[v-data-xxxxxxx-s] {}最後が、::v-global()で、これはscoped CSSの中でグローバルなスタイルの定義を可能とするものです。この擬似要素を設定したクラスには[v-data-xxxx]が付与されないため、Scopedではなくグローバルに適用されます。::v-global(.foo) {}.foo {}$attrsの仕様変更rfcs/0031-attr-fallthrough.md at master · vuejs/rfcs$attrsの機能が拡張され、今まで$listenersで参照していたネイティブイベントや別管理であったclass、styleも全て包括して$attrsから取得できるようになりました。<MyButton   @click="handleClick"   @custom="handleCustom"   v-model="value"  type="button"  class="btn"/>// MyButton.vue$attrs: {  class: 'btn'  type: 'button',  onClick: handleClick,  onCustom: handleCustom,  'onUpdate:modelValue': () => { value = payload },}そのため、$listenersはDEPRECATEDとなります。（実行時に警告がでます）$listenersを使って透過的なラッパーコンポーネントを作っていた場合は、$listenersを削除し$attrsへの書き換えが必要です。<input v-bind="$attrs" v-on="$liseners" /><input v-bind="$attrs" />Global APIの仕様変更rfcs/0009-global-api-change.md at master · vuejs/rfcsVueの初期化処理が変わります。createAppでインスタンスを生成し、そのインスタンススコープでuseやmixinなどが適用されるようになります。これによってテストケースでのグローバル設定の汚染を防いだり、同一ファイル内で別設定のVueインスタンスの初期化が容易になります。import { createApp } from 'vue'import App from './App.vue'const app = createApp(App) // インスタンスを生成app.config.isCustomElement = tag => tag.startsWith('app-')app.use(/* ... */) // インスタンススコープで設定されるapp.mixin(/* ... */)app.component(/* ... */)app.directive(/* ... */)app.config.globalProperties.customProperty = () => {}app.mount(App, '#app')filterの廃止rfcs/0015-remove-filters.md at master · vuejs/rfcsfilterは、パイプ演算子|を使って関数適用をlinuxの標準入出力のパイプラインするものですがJavaScriptにはない独自構文で学習コストが増加する、構文解析を複雑にするという理由で削除されます。filterの処理は通常の関数適用で代替できます。<p>{{ msg | uppercase | reverse }}</p><p>{{ reverse(uppercase(msg)) }}</p>他の代替方法についてはrfcs/0015-remove-filters.md#alternativesをご覧ください。Event Emitter系のAPIの廃止rfcs/0020-events-api-change.md at master · vuejs/rfcsEvent Emitter系のAPI（$on, $off, $once）が削除されます。グローバルなイベント管理としてEvent Emitterを仕様している場合は書き換えが必要です。Event管理の代替にはMittなどの別のEvent Emitterライブラリの利用が推奨されています。Functional Componentの廃止rfcs/0007-functional-async-api-change.md at master · vuejs/rfcsFunctional Components | Vue.jsFunctional Componentはdata等の状態を持たない代わりにレンダリングパフォーマンスの大幅な改善が行えるコンポーネントです。Vue3ではFunctional Componentを作る際に使用するfunctional: trueのオプションや、<template functional>が削除されます。Vue3では、通常のコンポーネントとFunctional Componentの性能差は大幅に縮小され、ほとんどのユースケースでは取るに足らないものとなったそうです。SFC上でfunctionalを使用している場合は、functionalの属性を削除し、attrs、listnersの参照方法の修正が必要です。<template functional>  <component    :is="`h${props.level}`"    v-bind="attrs"    v-on="listeners"  /></template><script>export default {  props: ['level']}</script><template>   <component    v-bind:is="`h${props.level}`"    v-bind="$attrs"   /></template><script>export default {  props: ['level']}</script>終わりに以上「正式リリース前に総予習!! Vue3の変更点まとめ」でした。色々ワクワクするような新機能が追加されていてVue3のリリースが待ち通しいですね。他にも諸々細かい点が変わってるのでより詳細な変更はvuejs/rfcをご確認ください。参考Learn Which Exciting Features Vue 3 Brings to The Table - Vue School Vue.js Tutorialsまもなくやってくる Vue.js 3 - Speaker Deckrfcs/active-rfcs at master · vuejs/rfcsIntroduction | Vue.jsLearn Vue.js with our Courses | Vue Mastery

正式リリース前に総予習!! Vue3の変更点まとめ

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=liveSFCで挑戦するFunctional Component （@FruitRiin) スライド: https://speakerdeck.com/fruitriin/functional-component-challenge-at-sfc 動画開始位置： https://youtu.be/hUcQXgUxQVc?t=563 内容メモ：・ Vue Functional Componentの紹介・ 通常のComponentとFunctional Componentのパフォーマンス比較のライブデモ・ Functional Componentの使用上の注意Vueいいぞおねいさん果物リンさんの発表。ちょうど当日Functional Componentを使ったコンポーネントのコードレビューをして「何もわからんw」ってなってたところだったので個人的にめちゃくちゃ勉強になりました。特に、Functional Componentと通常のコンポーネントのパフォーマンス比較のライブデモが秀逸で、明確にパフォーマンス差が出ているので驚きました。Atomic DesignのAtomのような小さいコンポーネントを、大量にレンダリングする際にはとても有効そうですね。あと、全然関係ないんですが登壇中の落ち着きがすごくて「これがLT熟練者か..!!」と終始尊敬の眼差しでした。Fat ComponentにしないためのWebフロントエンド設計（@Philomagi） スライド: https://speakerdeck.com/tooppoo/web-front-end-design-to-avoid-being-a-fat-component 動画開始位置： https://youtu.be/hUcQXgUxQVc?t=1925 内容メモ：・ 実際にあったFat Componentの紹介（2500行のComponent!!!）・ Fat Componentを作らないための設計指針・ OOUIの話とても実用的な話。とりあえず最初の「2500行」のFat Componentの例に度肝を抜かれ、これは絶対防がなくてはならないと強く思いました。確かに、コンポーネントの分割だけでは<script>部分の振る舞いの分割にはならず、コンポーネントは分割されても<script>部分は肥大化するというのはありがちですね。今回のサンプルアプリケーションのようにView, Interaction, Modelに分けて設計し、知識・情報・振る舞いをコンポーネントから独立したものとして定義する例はFat Componentを防ぐ一つの解だと思います。Vueの設計への深い示唆を得ることが出来るプレゼンで何度もハッとするポイントがありました。私は設計が大の苦手なので、あと一時間くらい講義して欲しい気持ちでしたね。また折をみてスライド見返したいです。Ref vs Reactive Vue3 Composition APIのリアクティブ関数の探究（@KawamataRyo) スライド: https://speakerdeck.com/kawamataryo/ref-vs-reactive-vue-composition-api-deep-in 動画開始位置： https://youtu.be/hUcQXgUxQVc?t=3806 内容メモ：・ Vue3 Composition API, リアクティブの説明・ refとreactiveの使い分けの指針。内部実装はどうなているのか。リアクティブの消失はどう防ぐのか。・ 他のリアクティブ関数の紹介。はい。私ですw。自分で自分のレポート書くのも恥ずかしいのですが簡単に。Vue Composition APIのリアクティブ関数refとreactiveに着目して使い分けの話をしました。ref, reactiveの内部実装や、reactive関数で誰もが詰まるリアクティブの消失などなど。Vue Composition APIを使い始めてreactiveとrefの使い分けに迷ってる人などに参考になる内容かと思います。..で後はただの感想なのですが、配信アーカイブを見返したら自分だけ緊張してとても早口になっているのが個人的にアレでした😇。ちゃんと発表内容伝わっていたのかな？？次回の発表では改善していきたいです。今回話した内容のリアクティブの諸々を自分で試したいと思ったら、「さくっとVue3をWebブラウザで試したい時に使えるTips」で紹介した方法でChrome devtoolsのconsoleからサクッと試せるので是非やってみてください。その他、今回発表出来ずおまけとして掲載した他のリアクティブ関数については「Vue Composition APIで使えるリアクティブ関連のAPI一覧にまとめています。おわりに以上「Functional Componentから、Fat Componentを防ぐ設計、Vue3のリアクティブまで!! Remote.vue 参加（登壇）レポート」でした。雑感として、LAPRASの@nasumさんがいつ話をふられても、きれいに答えを返すので本当にすごいと思いました。あと、弊社のテックリードのツイートが取り上げられたのですが、私の方で上手く問題を説明できず最後の方しどろもどろに。。色々理解不足が露見したのでコード見返したいです。他、Vuexの話題でかなり盛り上がり、やはり皆色々な意味でVuex大好きなんだなぁと思いました。運営のnagasakoさん、@nasumさん、他の登壇者の方含めとても良い雰囲気で終始ざっくばらんに話せたので面白かったです。これは登壇しないと出来ない経験なので本当に参加して良かったなと思いました。次回の開催も期待!!!また登壇挑戦したいです。

Functional Componentから、Fat Componentを防ぐ設計、Vue3のリアクティブまで!! Remote.vue#2 参加（登壇）レポート

Vue3がRCになっていよいよリリース間近ですね。環境構築不要でさくっとVue3の動き確認したいなーって時に使えるTipsを紹介します。script要素を追加し、CDNからVue3のスクリプトを読み込む適当なサイトを開き、以下コードをWebブラウザのdevtoolsのconsole上で実行してください。srcにvue-nextのCDNのアドレスを設定したscript要素を作成し、body直下に追加しています。document.body.appendChild(  (() => {    const s = document.createElement("script");    s.src = "https://unpkg.com/vue@next";    return s;  })());これでvue-nextのCDNが読み込めたので、console上でVueが使えます。あとはやりたい放題使えばOKです。動作確認コードの一例参考までに、自分で動かしてみたコードを紹介します。Vueコンポーネントの動作確認DOMを追加して、そこにVue.createApp()でVueをマウントしコンポーネントを表示しています。templateとsetup()内を調整すればほとんどの動作を確認できます。// マウント用のDOMの追加document.body.insertBefore((() => {  const d = document.createElement("div");  d.id = 'vue-app';  return d;})(), document.body.firstChild);// DOM要素へのVueコンポーネントのマウントconst app = Vue.createApp({  template: `<my-component />`})app.component('my-component', {  template: `    <h1>Hello Vue3</h1>    <input type="text" v-model="message"/>    <div>{{ upperCase }}</div>  `,  setup() {    const message = Vue.ref('')    const upperCase = Vue.computed(() => message.value.toUpperCase())    return {      message,      upperCase    }  }})app.mount('#vue-app')yahoo! JAPANで実行してみた例リアクティブの動作確認Vue3のComposition APIのリアクティブAPIの動作確認です。refでもreactiveでも同様にリアクティブに処理を再実行してますね。const reactiveObj = Vue.reactive({ count: 1 });const refObj = Vue.ref(1);const sumVal = Vue.computed(() => reactiveObj.count + refObj.value);console.log(sumVal.value); // 2refObj.value = 3;console.log(sumVal.value); // 4reactiveObj.count = 10;console.log(sumVal.value); // 13リアクティブの消失の動作確認Vue Composition APIを使う上で注意が必要なリアクティブの消失について動作確認です。リアクティブな値から分割代入でプリミティブな値を取得すると、リアクティブを消失するのが良くわかると思います。const reactiveObj = Vue.reactive({  num: 1,  str: "hoge",  arr: [1, 2, 3],  obj: { foo: "foo", bar: "bar" },});const { num, str, arr, obj } = reactiveObj;console.log(Vue.isReactive(num)); // falseconsole.log(Vue.isReactive(str)); // falseconsole.log(Vue.isReactive(arr)); // trueconsole.log(Vue.isReactive(obj)); // true終わりにとても簡単ですが「さくっとVue3をWebブラウザで試したいときに使えるTips」でした。ちょっと動きを確認したいときとかに地味に便利なので使ってみてください〜。

さくっとVue3をWebブラウザで試したい時に使えるTips

エンジニアに転職して早2年半。いまだに再帰関数が苦手です。再帰関数を含むコードレビューがあると「よく分からんけど、動作も良いしテストも書かれてるしヨシ！！approved!!」としてしまったことも...（絶対あかん😇）。さすがにそれはヤバイと、再帰関数を学び直したのでその結果をまとめてみました。再帰関数とは？再帰関数とは、関数内で、自分自身を呼び出す関数です。この時点で謎ですよね。最初にみたときは「無限ループでは？」って思いました。以下再帰関数の例として度々あげられる階乗の計算です。const factorial = (n: number): number => {  if (n < 2) {    return 1;  }  return n * factorial(n - 1);};factorial関数内で、return n * factorial(n - 1)と自分自身を呼び出しています。この関数の結果は以下テストの通りです。test('factorial' => {  expect(factorial(0)).toBe(1);  expect(factorial(1)).toBe(1);  expect(factorial(3)).toBe(6);  expect(factorial(5)).toBe(120);  expect(factorial(8)).toBe(40320);})確かに期待値通り、階乗を計算できていますね。次項以降で再帰関数のコードを読む際のポイント、再帰関数での実装に向いている処理をまとめていきます。再帰関数を読むためのポイントまず、コードリーディングで再帰関数を読み解くときに意識すると良いことをまとめます。基本ケースと再帰ケースで処理を分けて考えてみる再帰関数内の処理は、自分自身を呼び出さない基本ケースと、自分自身を呼び出し再帰的に処理する再帰ケースの2つに分かれています。それを意識しながらコードを読むと、どのタイミングで処理を抜けるのか分かり再帰関数が無限ループにならないことが理解できます。先ほどの階乗の例でみると以下の通りです。const factorial = (n: number): number => {  if (n < 2) {    return 1; // ⭐基本ケース  }  return n * factorial(n - 1); // ⭐再帰ケース};if (n < 2) {}のif文で基本ケースと再帰ケースを分けているのが分かります。再帰ケースにて引数のnは1ずつ減少していくので処理を繰り返せばいずれ、n < 2の条件を満たします。そうすると基本ケースに移動し、実際の値を返します。基本ケースがない、もしくは基本ケースにたどり着かないケースがある再帰関数は処理が終わらずスタックオーバーフローに陥るので、再帰関数を書く際にも基本ケースと再帰ケースを分けて考えると良いと思います。コールスタックをイメージしてみる次に実際にどのように処理されるのかをイメージするポイントです。プログラムでは関数を呼び出すと、関数自身のローカル変数等を保持するフレームが生成されてコールスタックと呼ばれるスタックにpushされます。そして、関数の評価が完了するとコールスタックからpullされます。その流れを再帰関数で考えてみましょう。以下は、factorial(3)のケースのコールスタックを図にしています。まず最初に、factorial(3)がそのままスタックにpushされて、その後factorial(3)を処理すると戻り値はfactorial(2)でまだ計算結果を取得できないので、さらにfactorial(2)スタックにpushされます。同じくfactorial(2)の戻り値にもfactorial(1)が含まれるので、factorial(1)がスタックにpushされます。factorial(1)の処理は、基本ケースで1を返すのでfactorial(1)はpullされて次のfactorial(2)に戻り値である1を渡します。さらに、factorial(2)ではその1を使って計算ができるのでpullされて、戻り値の2をfactorial(3)に渡します。最後に、factorial(3はその戻り値の2を使って計算され6という結果を返します。これでコールスタックがきれいに空になります。基本的にどの再帰関数もコールスタックに関数がどんどん積まれて、基本ケースになったら上から順に解決されていくという流れは同じです。処理が追えなくなったら、一度コールスタックの図を書いてみると腹落ちするかもしれません。評価結果を愚直に書き出してみるコールスタックの図以外にも理解を助けるものとして評価結果を愚直に書き出してみるのもおすすめです。実際にfactorial(4)の時の評価結果を書き出すと以下のようになります。factorial(4)=> 4 * factorial(3) // factorial(4)の時のreturn値=> 4 * (3 * factorial(2)) // factorial(3)の時のreturn値=> 4 * (3 * (2 * factorial(1))) // factorial(2)の時のreturn値=> 4 * (3 * (2 * (1))) // factorial(1)の時のreturn値=> 4 * 3 * 2 * 1 // カッコを外すと階乗の計算になっている!=> 24 // 結果実際に順を追って評価結果を書き出してみると最終的には階乗の計算式になっていることがわかると思います。引数に与える値を基本ケース付近にして評価結果を愚直に書き出すことで処理をイメージしやすくなるはずです。再帰関数が向いている処理は？再帰関数の大体のイメージがついたところで、どのようなときに再帰が有効なのか？というのを考えてみます。漸化式で表せる処理ひとつは漸化式で表せるものです。ここでいう漸化式は以下Wikipediaの定義の通りです。漸化式（ぜんかしき、英: recurrence relation; 再帰関係式）は、各項がそれ以前の項の関数として定まるという意味で数列を再帰的に定める等式である。数列を再帰的に定める等式 と、説明からして再帰関数に関係してそうですね。単純な漸化式で表せるものは、漸化式の数式を割とそのままコードに落とせば再帰関数が出来上がります。よく再帰関数の例であげられるフィボナッチ数列はまさにそれですね。フィボナッチ数列は「前の2つの数を足したものが次の数になるという規則に基づいている数列」です。黄金比やひまわりの種の螺旋構造との関連とかの話が有名です。フィボナッチ数列は以下漸化式で表せます。$F_0 = 0$,$F_1 = 1$,$F_{n+2} = F_n + F_{n+1} (n ≥ 0)$これを変換してn番目のフィボナッチ数を出す公式は以下の通りです。$F_0 = 0$,$F_1 = 1$,$F_n = F_{n-1} + F_{n-2}$これをそのままコードに落とし込むと再帰関数の出来上がりです。const fibonacci = (n: number): number => {  if (n < 2) {    return n;  }  return fibonacci(n - 1) + fibonacci(n - 2);};nが2未満の時は、nの値をそのまま返し（基本ケース）、それ以上の場合は$F_{n-1} + F_{n-2}$を返しています（再帰ケース）。このように漸化式で表せるものは比較的容易に再帰関数として定義できます。そのような要件が出てきたら一度再帰で処理できるか考えてもよいかもしれません。木構造を取り扱う処理次に、木構造（枝分かれしながらデータが伸びていくデータ構造。ネストしているオブジェクト型など）のデータの各要素になんらかの変更を加える処理は再帰関数で有効です。1つの階層に与える処理の中で、さらに階層が見つかったら自分自身を呼びだすという形ですね。割と業務で扱うことが多いオブジェクトのケース変換処理（snake to lowerCamel）を例にみてみます。実装コードは以下の通りです。// スネークケースの文字列のキャメルケースへの変換を行う関数// 再帰ではないので、今回は特に処理内容は見なくて大丈夫ですconst camelize = (str: string) => {  return str.split("_").reduce<string>((acc, cur, i): string => {    if (i === 0) {      return cur.toLowerCase();    }    return acc + cur.charAt(0).toUpperCase() + cur.slice(1).toLowerCase();  }, "");};// オブジェクトを受け取り、key名にcamelizeを適応する関数const camelCaseDeep = (obj: Record<string, any>) => {  const result = {} as Record<string, any>;  Object.keys(obj).forEach((key) => {    if (Object.prototype.toString.call(obj[key]) === "[object Object]") {      obj[key] = camelCaseDeep(obj[key]); //⭐ ここで再帰的に実行している    }    result[camelize(key)] = obj[key];  });  return result;};camelCaseDeepがオブジェクトを受け取り再帰的に全てのキー名をsnakeケースからlowerCamelケースにケース変換しています。ここでのポイントは、今までの例とは逆で基本ケースが、if文の外にあり再帰ケースがif文の中にあるという点です。探索中にオブジェクト型が見つかった場合のみ、さらに自分自身を再帰的に呼び出しています。この関数では何層もネストしたオブジェクトでも全てのキーをケース変換可能です。これを再帰関数ではなく通常のループで書こうと思うとかなり大変です。なので、ネストした木構造のデータを扱う場合は最初から再帰でトライしてみても良いかもです。再起関数を書く際に注意すべきこと最後に再帰関数を実装するうえで注意すべきことをまとめます。計算量の増加再帰関数は簡潔に処理をかけるのですが、往々にして通常のループに比べて計算量が増加しがちです。例えば例にあげたフィボナッチ数を求めるfibonacci関数は1つの数値を出すのに内部で2つのfibonacci関数を実行しているので、計算量は$O(2^n)$となります。これでは入力が増えると指数関数的に計算量が増加してしまいます。実際にChromeでfibonacci(50)を実行するとしばらく結果が帰ってきません。これには対策としてはメモ化があります。メモ化は再帰関数内で重複する呼び出し結果を保存しておいて、計算量の増加を防ぐ方法です。fibonacci数の計算の場合は、以下のように改善できます。const fibonacci = (n: number, memo: number[] = []): number => {  if (n < 2) {    return n;  }  if (memo[n]) {    return memo[n];  }  return memo[n] = fibonacci(n - 1, memo) + fibonacci(n - 2, memo);};fibonacci関数の第2引数にmemoという配列を追加し、デフォルトで空配列を渡しておきます。そして、fibonacciの計算結果をmemoに毎回蓄積していきます。一度呼び出されたfibonacci(n)の結果はmemo[n]に保存されているので、再度スタックに積まれることなく処理可能となり、計算量が$O(n)$まで減ります。実際にChromeで実行した場合、通常のfibonacci関数だとfibonacci(50)で結果がなかなか返ってきませんが、memo化を行った場合fibonacci(1000)でも一瞬で計算できました。実装するときは再帰関数の計算量がどのようになるのか？メモ化は適応できないのか？一度考えた方が良いと思います。スタックオーバーフロー最後に、再帰関数に必ずついて回るのがスタックオーバーフローです。スタックオーバーフローとはコールスタックに処理が積み上がりすぎて、メモリ領域が足りなくなり、プログラムが異常終了することです。再帰はコールスタックをイメージしてみるで説明した通りスタックを使います。再帰が深くなれば深くなるほどスタックが積み上がり最終的にスタックオーバーフローを引き起こすので注意が必要です。例えば例としてあげていた階乗を計算するfactorial関数の場合は、Chromeでfactorial(13000)を実行するとMaximum call stack size exceededとスタック・オーバーフローが発生します。その対策としては、末尾再帰化があります。末尾再帰とは再帰関数のうち、自分自身の呼び出しが末尾呼び出し（return時、最後に評価される処理）となっている再帰関数です。末尾再帰の再帰関数を、末尾再帰最適化を行ってくれる実行環境で実行すると、余計なスタックが積まれず、スタックオーバーフローが発生しなくなります。末尾再帰化したfactorial関数はこちらです。第2引数のaccumに計算結果が蓄積され、基本ケースでaccumを返すように修正されています。const factorialTailCall = (n: number, accum: number = 1): number => {    if (n === 0) {        return accum;    }    return factorialTailCall(n - 1, n * accum);}現状のブラウザが末尾再帰最適化に対応していないため、実行結果の確認は出来ていないのですが、末尾再帰最適化に対応した実行環境だとおそらくスタックオーバーが発生しないはずです。末尾再帰化について、私自身なかなか曖昧な理解なのでより詳しい説明はこちらの記事を参照してください。末尾再帰による最適化 - Qiita終わりに以上、「再帰関数が苦手なエンジニアのための再帰関数入門」でした。正直自分自身まだまだ全然自信はないのですが、記事まとめる段階で少しは理解が進んだので書いて良かったかなと思ってます。自分のように「再帰関数ぅぅ..😭」となっている人の少しでも助けになれば幸いです。また、もし記事中に誤り等あれば、マサカリ🪓 優しさあるコメントで教えてもらえると嬉しいです。参考JavaScriptを使って学ぶ 関数型プログラミングの基礎なっとく！アルゴリズム再帰関数を理解するための最もシンプルな例 - Qiita再帰関数を学ぶと、どんな世界が広がるか - Qiita末尾再帰による最適化 - QiitaJavaScriptの末尾呼び出し最適化（TCO） - 30歳からのプログラミング

再帰関数が苦手なエンジニアのための再帰関数入門

最近発見したGitHubのTemplate Repository機能の紹介です。リンターやらテストライブラリの設定等は、ほぼどの環境でも行いますが毎回設定するのは地味に面倒ですよね。GitHubのTemplate Repository機能を使えばその環境構築が不要で、本質的な開発をすぐに始められるようになります。GitHubのTemplate Repositoryとは？あるリポジトリのコードベースをそっくりそのまま新規のリポジトリ作成で利用できる機能です。「え、それってforkと違うの？」っと思った方もいるかもですが、以下の点でforkとは異なります。1つのリポジトリから複数作成できる（forkだと、同名のリポジトリとなるので1人のユーザー内で複数作成は不可）元となったリポジトリのコミット履歴を継承せず、クリーンな状態でスタートできる使い方以下実際にTemplate Repositoryを作るところから説明します。1. テンプレートとなるリポジトリの作成まず、汎用性のある環境を整備したボイラープレート的なリポジトリを作ります。自分の場合はこちらのリポジトリがそれに当たります。整備している環境は以下の通りです。TypeScriptのビルド環境（TypeScript, ts-node）リンター、コードフォーマッター(ESLint, Prettier)テスト環境（Jest）各npmスクリプト（test, lint, build）Node.js + TypeScriptでちょっとしたCLIツール等を作るときに使えます。2. Template Repositoryとして登録GitHub上でリポジトリにアクセスして、メニューのSettingsからTemplate Repositoryのチェックボックスをチェックしてください。これだけでTemplate Repositoryとして登録されます。3. テンプレートの利用リポジトリのトップページを見ると、新しくUse this templateというボタンが追加されているはずです。このボタンを押すと、いつものリポジトリ作成画面に遷移します。あとは通常通りリポジトリ名、概要を入力し作成するだけです。Initial commitとして元リポジトリのコードベースがコミットされたリポジトリが作成されます。また、forkのようにリポジトリ名下部にgenerated from ...としてテンプレートとなるリポジトリのリンクが記載されます。これでリンター、テスト環境が整備された上で直ぐ開発をスタートできます!便利!🎉※ テンプレートへの依存はあくまで、作成時にInitial commitでテンプレートの内容がコミットされるだけです。Template Repository側のリポジトリをその後変更しても、そこから作成したリポジトリには反映されないので注意です。おすすめのTemplate Repositoryテンプレートとして公開されているおすすめのリポジトリの紹介です。node-typescript-boilerplateNode.js + TypeScriptでプロジェクトをスタートするときに利用するリンターやら、テストパッケージ等が整備されています。electron-react-boilerplateElectronでReactを利用する場合に必要なもののほぼ全てが入っています。laravel-voilerplateAuthorizationや、Bootstrap4ベースのフロントエンド、その他諸々が整備されています。終わりに以上「GitHubのTemplate Repository機能のすゝめ」でした。なかなか便利な機能なので、今後も自分なりのボイラープレートを作って利用していきたいです。参考Generate new repositories with repository templates - The GitHub BlogGitHubでは既存のRepositoryをTemplateとして、新しいRepositoryを作成することができる | Developers.IO

GitHubのTemplate Repository機能のすゝめ

Qiitaの各指標（LGTM数, ストック数, はてブ数..）をGASを使って自動集計し、Notion Chartsで可視化してみました。指標が可視化されると記事執筆のモチベーションも上がるのでオススメです！またQiitaの指標集計に興味がなくとも、Notion Chartsは本当に便利なので、「Notion Chartsで可視化する」の章だけでも読んでもらえると嬉しいです。何を作るの？こちらのNotionページのようにQiitaの各指標のダッシュボードを作ります。チャートの値は日時で更新されます。今回集計する指標は以下の通りです。Qiita 記事数Qiita LGTM数Qiita ストック数Qiita フォロワー数はてなブックマーク数また、今回のclaspのプロジェクトは全て以下リポジトリにあります。もしサンプルコードが動かないなどあればこちらを参照してください。GASで自動集計するGAS(Google Apps Script)でQiita APIとはてなAPIを叩き、各指標をGoogleスプレッドシートに自動集計するまでを書きます。GASをローカルで管理出来る様にするためCLIツールのClaspを利用します。Claspプロジェクトの作成まず、claspコマンドを使えるようにするために、claspをnpmでグローバルにインストールします。$ npm i @google/clasp -g次にclaspに自分のGoogleアカウントを紐づけます。$ clasp loginloginコマンドでプラウザが開き、紐付けたいGoogleアカウントの選択と、権限の許可をしてください。完了後コマンドラインにAuthorization successful.と表示されれば紐付け完了です。最後にcreateコマンドでclaspプロジェクトを作成します。--title qiita-kpiでプロジェクト名を設定し--type sheetsで、Google Spreadsheetが自動で作成されGASと紐づけています。また、--rootDirtで作業ディレクトリを指定しています。# "qiita-kpi" の部分は任意のプロジェクト名を設定してください$ clasp create --title qiita-kpi --type sheets --rootDir ./src完了すると、.clasp.jsonとsrcディレクトリにappscript.jsonが生成されます。.clasp.jsonにはGASスクリプトとの紐付きappscript.jsonにはプロジェクトの設定が保持されています。createの段階だとGASのタイムゾーンがAmerica/New_Yorkとなっているので、Asia/Tokyoに修正しましょう。src/appscript.json{+ "timeZone": "Asia/Tokyo",- "timeZone": "America/New_York",  "dependencies": {  },  "exceptionLogging": "STACKDRIVER",  "runtimeVersion": "V8"}この状態でclasp openコマンドを実行すると、プラウザでGASのエディタ画面が開かれるはずです。これでClaspプロジェクトの環境構築は完了です。TypeScriptの環境構築と最初のスクリプト作成TypeScriptで書きたいのでTypeScriptの環境を構築します。Claspは標準でTypeScriptのトランスパイルに対応しているので、GASで使える関数の型定義をインストールするだけOKです。$ npm init -y$ npm install --save @types/google-apps-script最初のスクリプトを書いてみます。src配下にindex.tsを作成し、以下を記述してみましょう。index.tsfunction main() {  const sheet = SpreadsheetApp.getActiveSheet();  sheet.getRange(1,1).setValue("Hello Gas!");}これをGASにデプロイします。# overrideを確認されるのでforce指定をしています。$ clasp push -fGASのエディタページを更新すると先ほどのコードが反映されているはずです。main関数を選択し、▶️ でスクリプトを実行してみましょう。ここでスプレッドシートへのアクセス権限を聞かれた場合は、以下記事参考に権限を許可してください。https://tonari-it.com/gas-script-approval/実行が完了すると、紐づくスプレッドシートに文字列が入力されているはずです。スプレッドシート一覧から新規に追加されているスプレッドシートを開き内容を確認してください。書き込みが完了しましたね🎉Hello Claspの文字列は次項以降で不要なので削除し、代わりに以下のような表のヘッダー部分を作成してください。次項以降でA2以下に値を埋めていきます。Qiita API、はてなAPIから指標を集計Qiita API、はてなAPIから指標を取得するスクリプトを書きます。APIの型情報があると便利なので最初にダウンロードしておきます。こちらの記事で紹介している方法です。# typesディレクトリの作成$ mkdir src/types# Qiita apiのschema.jsonからschema2typeを使って型情報を生成$ curl https://qiita.com/api/v2/schema | npx json2ts > src/types/qiita-types.d.tsそしてindex.tsを以下のように修正します。コードの内容についてはコメントを記載しているので詳細な説明は割愛します。ざっくりQiita API、はてなAPIから各指標を取得し集計、スプレッドシートの最終行に結果を挿入しています。Qiita記事の総ブックマーク数の取得方法は、技術ブログの師匠@kakakakakkuさんに教えてもらいました。感謝 🙏src/index.tsimport { User, Item } from "./types/qiita-types";const QIITA_ACCESS_TOKEN = PropertiesService.getScriptProperties().getProperty(  "qiitaAccessToken") as string;const QIITA_USERNAME = PropertiesService.getScriptProperties().getProperty(  "qiitaUsername") as string;// -------------------------------------------------------------// メイン処理 各指標のスプレッドシートへの書き込み// -------------------------------------------------------------function main() {  const today = Utilities.formatDate(new Date(), "JST", "yyyy/MM/dd");  // Qiitaの指標取得  const qiitaKpi = new QiitaClient(    QIITA_ACCESS_TOKEN,    QIITA_USERNAME  ).fetchKpi();  // はてなの指標取得  const hatenaKpi = new HatenaClient(QIITA_USERNAME).fetchKpi();  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();  const insertLow = sheet.getLastRow() + 1;  [    today,    qiitaKpi.postCount,    qiitaKpi.lgtmCount,    qiitaKpi.stockCount,    qiitaKpi.followersCount,    hatenaKpi.bookmarkCount  ].forEach((data, i) => {    sheet.getRange(insertLow, i + 1).setValue(data);  });}// -------------------------------------------------------------// Qiita API Client// -------------------------------------------------------------class QiitaClient {  private readonly BASE_URL = "https://qiita.com/api/v2";  private readonly PER_PAGE = 100;  private readonly FETCH_OPTION = {    headers: {      Authorization: `Bearer ${this.accessToken}`,    },    method: "get" as const,  };  constructor(private accessToken: string, private username: string) {}  // Qiita APIから指標取得  fetchKpi() {    const user = this.fetchUser();    const items = this.fetchAllItems(user);    const lgtmCount = this.tallyUpLgtmCount(items);    const stockCount = this.tallyUpStockCount(items);    return {      lgtmCount,      stockCount,      followersCount: user.followers_count,      postCount: user.items_count,    };  }  // ユーザー情報の取得  private fetchUser() {    const response = UrlFetchApp.fetch(      `${this.BASE_URL}/users/${this.username}`,      this.FETCH_OPTION    );    return JSON.parse(response.getContentText()) as User;  }  // 全ての投稿記事の取得  private fetchAllItems(user: User) {    // 最大ページ数    const maxPage = Math.ceil(user.items_count / this.PER_PAGE);    // 投稿一覧の取得    let allItems = [] as Item[];    [...Array(maxPage)].forEach((_, i) => {      const page = i + 1;      const items = this.fetchItems(page, this.PER_PAGE);      allItems = [...allItems, ...items];    });    return allItems;  }  // 投稿記事の取得  private fetchItems(page: number, perPage: number) {    const response = UrlFetchApp.fetch(      `${this.BASE_URL}/authenticated_user/items?page=${page}&per_page=${perPage}`,      this.FETCH_OPTION    );    return JSON.parse(response.getContentText()) as Item[];  }  // 記事をストックしたユーザーの取得  private fetchStockers(itemId: string) {    const response = UrlFetchApp.fetch(      `${this.BASE_URL}/items/${itemId}/stockers`,      this.FETCH_OPTION    );    return JSON.parse(response.getContentText()) as User[];  }  // LGTM数の集計  private tallyUpLgtmCount(items: Item[]) {    const lgtmCount = items.reduce(      (result, item) => result + item.likes_count,      0    );    return lgtmCount;  }  // ストック数の集計  private tallyUpStockCount(items: Item[]) {    const stockCount = items.reduce((result, item) => {      const stockedUser = this.fetchStockers(item.id);      return result + stockedUser.length;    }, 0);    return stockCount;  }}// -------------------------------------------------------------// Hatena API Client// -------------------------------------------------------------class HatenaClient {  private readonly BASE_URL = "http://b.hatena.ne.jp";  constructor(private qiitaUsername: string) {}  // はてな APIから指標取得  fetchKpi() {    const bookmarkCount = this.fetchBookmarkCount();    return {      bookmarkCount,    };  }  // ブックマークカウントの集計  private fetchBookmarkCount() {    const redirectUrl = this.getRedirectUrl(      `${this.BASE_URL}/bc/https://qiita.com/${this.qiitaUsername}`    );    // `https://b.st-hatena.com/images/counter/default/00/00/0000653.gif` の形式で    // ブクマ数が書かれたgif画像のURLを取得できるので、そこからブクマ数だけを抽出する    const bookmarkCount = redirectUrl.match(      /https:\/\/b.st-hatena\.com\/images\/counter\/default\/\d+\/\d+\/(\d+).gif/    )![1];    return Number(bookmarkCount);  }  // リダイレクトURLの取得  private getRedirectUrl(url: string): string {    const response = UrlFetchApp.fetch(url, {      followRedirects: false,      muteHttpExceptions: false,    });    const redirectUrl = (response.getHeaders() as any)["Location"] as string;    if (redirectUrl) {      const nextRedirectUrl = this.getRedirectUrl(redirectUrl);      return nextRedirectUrl;    } else {      return url;    }  }}indext.tsを修正したら、内容をGASに反映します。$ clasp push次に、スクリプト上で参照している環境変数（スクリプトプロパティ）をGAS上で設定します。上部メニューのファイル => プロジェクトのプロパティ => スクリプトのプロパティから以下2つの値を設定してください。プロパティ名値qiitaAccessTokenQiita APIのアクセストークン。こちらを参考に取得してください。アクセストークンのスコープはread_qiitaだけで大丈夫です。qiitaUsernameQiitaのアカウント名。アカウントページのプロフィール画像下部に表示されるIDの＠を除いた部分です。設定できたらmain関数を選択し、▶️ でスクリプトを実行してみましょう。※ ここで再度スプレッドシートへのアクセス権限を聞かれると思うので、再度許可してください。スプレッドシートに各指標の値が出力されていれば成功です🎉定期実行の設定これで集計処理の実装はできたので、あとはこのGASスクリプトを定期実行するようにします。GASは標準で日時のトリガーを設定できるので、そちらを利用します。まず、GASエディタ画面で実行ボタン横のタイマーマークを押します。GASのトリガー設定画面に遷移するので、新しいトリガーを作成します。イベントのトリガーソースを「時間主導型」、時間ベースのトリガーのタイプを「日付ベースのトリガー」に設定し、あとは定期実行したい時刻を選択すれば完了です。この例だと、毎日午後11時〜12時にスクリプトが実行され、各指標がスプレッドシートに記録されます。Notion Chartsで可視化する次に、GASで集計した指標をNotion Chartで可視化する手順を書きます。Notionとは？まず最初にNotionの説明を簡単に。Notionは、メモやタスク管理、カレンダー、スプレッドシート、Wikiなど、幅広い機能を備えているドキュメントアプリです。簡単にページを外部公開できるのも特徴で、最近のノーコードの流れでますます注目を集めています。Notion Chartsとは？Notion ChartsとはGoogleスレッドシートをデータソースに使い、Notionページに簡単にチャートを表示するツールです。こちらのデモページのように様々なチャートを表示できます。https://www.notion.so/Digital-Footprint-d4295448c72b4056af9b06fa8ece36d4指標の可視化まずNotion ChartsからGoogleスプレッドシートの情報が読めるように、スプレッドシートの共有設定を一般公開に変更します。次に、Notion Chartsのトップページ下部のConnect your Google Sheetに値を入力します。GOOGLE SHEETS DOCUMENT IDはGoogleスプレッドシートのIDです。シートURLの/d/から/editの間の文字列がIDとなります。SHEET NAMEはそのままシート名です。DATA RANGEはチャート化したい値の範囲です。シートの行追加でチャートデータも更新したいため行範囲は多めに指定しましょう。（例だとA1:B500）他チャートの色や種類なども指定できますが、一旦デフォルトで大丈夫です。下部のMAKE MAGICのボタンを押しましょう。（どうでも良いのですが「MAKE MAGIC」って表現かっこいいですね）URLが表示されるので、ボタンクリックでコピーします。そしてNotionページを開き/embedを入力し、表示されたフォームにコピーした値を貼り付けます。このようにチャートが表示されればOKです。あとは他の指標も同じ手順でチャート化しましょう。そして最後にレイアウト整えれば完成です🎉終わりに以上「Qiitaの指標をGASで集計してNotion Chartsで可視化する」でした。今回は、Qiita周りの指標とはてブ数のみでしたが、コードを追加すれば他にもGoogle Analyticsから週間PV、Twitter APIからフォロワー数なども集計することができます。以下リポジトリではそれらを集計しているので、もし興味あればコード見てみてください。https://github.com/kawamataryo/blog-kpiNotionは情報の一元化が簡単に出来てとても便利ですね。今後も使っていきたいです。

Qiitaの指標をGASで集計してNotion Chartsで可視化する

Vue Composition APIのリファレンスを見たらリアクティブ周りのAPIが大量に追加されていたのでまとめてみました。この記事は以下バージョン時点の情報です。vuejs/composition-api: v1.0.0-beta.1vuejs/vue-next: v3.0.0-beta.17Vue Composition APIのAPI Reference に掲載されているいくつかのAPIは、まだVue2系で使えるComposition APIのプラグイン（vuejs/composition-api）でサポートされていません。そのAPIについては  マークを末尾につけています。サポート対応状況についてはこちらの記載をもとにしています。reactive引数に渡したオブジェクトのリアクティブなプロキシを返します。Vue2系のVue.observable()と同等の機能です。ネストされたオブジェクトもリアクティブな値として保持されます。const obj = reactive({  name: "Foo",  address: {    city: "Bar"  }})obj.address.city = "Huga"console.log(obj.address.city) // Huga型定義function reactive<T extends object>(target: T): UnwrapNestedRefs<T>;refプリミティブな値をrefオブジェクトに変換して返します。refオブジェクトはvalueプロパティでリアクティブな値にアクセスできます。refの値としてオブジェクトが代入されている場合は、reactiveメソッドによってオブジェクトを深くリアクティブにします。const count = ref(0)console.log(count.value) // 0count.value++console.log(count.value) // 1型定義interface Ref<T = any> {    [RefSymbol]: true;    value: T;}function ref<T extends object>(value: T): T extends Ref ? T : Ref<UnwrapRef<T>>;function ref<T>(value: T): Ref<UnwrapRef<T>>;function ref<T = any>(): Ref<T | undefined>;computedコールバック関数を受け取り、戻り値をリアクティブでReadonlyなrefオブジェクトとして返します。refオブジェクトの値は、コールバック関数内にあるリアクティブな値の変化に応じて再計算されます。（getterとsetterを持つオブジェクトを渡して書き込み可能なrefオブジェクトを作ることもできます）const count = ref(1)const plusOne = computed(() => count.value + 1)console.log(plusOne.value) // 2count.value++console.log(plusOne.value) // 3plusOne.value = 4 // Error型定義// read-onlyfunction computed<T>(getter: () => T): Readonly<Ref<Readonly<T>>>// writablefunction computed<T>(options: {  get: () => T  set: (value: T) => void}): Ref<T>readonly ️オブジェクト（ref or reactive or プレーン）を受け取り、読み取り専用のリアクティブなプロキシを返します。軽量な独自storeの周りの実装で使えそうです。※ 2020/07/03現在、vue-composition-apiプラグインではサポートされてません。const original = reactive({ count: 0 })const copy = readonly(original)console.log(copy.count) // 0original.count++console.log(copy.count) // 1console.log(isReactive(copy)) // truecopy.count++ // Error型定義function readonly<T extends object>(target: T): Readonly<UnwrapNestedRefs<T>>;customRef 依存関係の追跡と更新のトリガーを明示的に制御するカスタマイズされたrefオブジェクトを返します。限定された用途でリアクティブな値を使いたい時に良さそうです。※ 2020/07/03現在、vue-composition-apiプラグインではサポートされてません。// 代入と参照時に必ずconsole.log()を実行するrefconst useLoggerRef = (value: string) => {  return customRef((track, trigger) => ({    get() {      console.log(value)      track()      return value    },    set(newValue: string) {      console.log(newValue)      value = newValue      trigger()    }  }))}const foo = useLoggerRef("")foo.value = "Hoge" // console.log("Hoge")が実行されるfoo.value = "Bar" // console.log("Bar")が実行されるconst bar = foo.value // console.log("Bar")が実行される型定義function customRef<T>(factory: CustomRefFactory<T>): Ref<T>type CustomRefFactory<T> = (  track: () => void,  trigger: () => void) => {  get: () => T  set: (value: T) => void}markRawリアクティブ化されない（プロキシされない）オブジェクトを返します。適宜markRawを使いプロキシ変換をスキップすることで、不変のデータソースを持つ大規模なリストのレンダリングなどでパフォーマンスを向上させることができます。const foo = markRaw({  baz: "baz"})const bar = reactive(foo)isReactive(bar) // false reactive関数を実行してもリアクティブにならない型定義function markRaw<T extends object>(value: T): TshallowReactive浅いリアクティブなオブジェクトを返します。ネストされたオブジェクトはリアクティブ化されません。const state = shallowReactive({  foo: 1,  nested: {    bar: 2  }})isReactive(state) // trueisReactive(state.nested) // false型定義function shallowReactive<T extends object>(target: T): T;shallowRef浅いリアクティブなrefオブジェクトを返します。ネストされたオブジェクトはリアクティブ化されません。const foo = ref({})const bar = shallowRef({})isReactive(foo.value) // trueisReactive(bar.value) // false型定義function shallowRef<T>(value: T): T extends Ref ? T : Ref<T>;shallowReadonly 浅いreadonlyなオブジェクトを返します。ネストされたオブジェクトはreadonlyになりません。※ 2020/07/03現在、vue-composition-apiプラグインではサポートされてません。const state = shallowReadonly({  foo: 1,  nested: {    bar: 2  }})// mutating state's own properties will failstate.foo++// ...but works on nested objectsisReadonly(state.nested) // falsestate.nested.bar++ // works型定義function shallowReadonly<T extends object>(target: T): Readonly<{    [K in keyof T]: UnwrapNestedRefs<T[K]>;}>;toRawプロキシされたリアクティブなオブジェクトの生データを返します。const foo = {}const reactiveFoo = reactive(foo)isReactive(toRaw(reactiveFoo)) // falsetoRaw(reactiveFoo) === foo // true型定義function toRaw<T>(observed: T): T;unref引数がrefの場合はref.valueの値を、それ以外だったら引数自体を返します。val = isRef(val) ? val.value : val  の糖衣構文です。const foo = ref(1)const bar = 1unref(foo) // 1unref(bar) // 1型定義function unref<T>(ref: T): T extends Ref<infer V> ? V : T;toRefreactiveなオブジェクトの指定のプロパティをrefオブジェクトに変換して返します。propsの値をリアクティブを切らず、setup関数外のコンポーザブルな関数に渡すときなどに使えます。const state = reactive({  foo: 1,  bar: 2})const fooRef = toRef(state, 'foo')isRef(fooRef) // true型定義function toRef<T extends object, K extends keyof T>(object: T, key: K): Ref<T[K]>;toRefsreactiveなオブジェクトの全てのプロパティをrefオブジェクトに変換したオブジェクトを返します。const state = reactive({  foo: 1,  bar: 2})const stateAsRefs = toRefs(state)isRef(stateAsRefs.foo) // trueisRef(stateAsRefs.bar) // true型定義type ToRefs<T = any> = {    [K in keyof T]: Ref<T[K]>;};function toRefs<T extends object>(object: T): ToRefs<T>;isRefrefオブジェクトでラップされているかどうかを判定します。const foo = ref("foo");const bar = reactive({  bar: "bar"});isRef(foo) // trueisRef(bar) // false型定義isRef<T>(value: any): value is Ref<T>;isReactivereactiveかどうか判定します。reactiveで作られたオブジェクトをラップしたreadonlyなオブジェクトの場合にもtrueを返します。const foo = ref("foo");const bar = reactive({  bar: "bar"});const baz = readonly(bar);const hoge = readonly(foo)isReactive(foo) // falseisReactive(bar) // trueisReactive(baz) // trueisReactive(hoge) // false型定義function isReactive(value: unknown): boolean;isReadonly オブジェクトがreadonlyかどうか判定します。※ 2020/07/03現在、vue-composition-apiプラグインではサポートされてません。const foo = ref("foo");const bar = reactive({  bar: "bar"});const baz = readonly(bar);isReadonly(foo) // falseisReadonly(bar) // falseisReadonly(baz) // true型定義function isReadonly(value: unknown): boolean;isProxy オブジェクトがProxyか判定します。reactiveかreadonlyで作成したオブジェクトが該当します。※ 2020/07/03現在、vue-composition-apiプラグインではサポートされてません。const foo = ref("foo");const bar = reactive({  bar: "bar"});const baz = readonly(bar);isProxy(foo) // falseisProxy(bar) // trueisProxy(baz) // true型定義function isProxy(value: unknown): boolean;終わりに以上「Vue Composition API v1-beta で使えるリアクティブ関連のAPI一覧」でした。思った以上にAPIが多いですね。業務ではref, reactive, toRef, toRefs, isRefくらいしか使ってなかったです。今後はどんどん活用していきたいです。参考https://composition-api.vuejs.org/api.htmlhttps://github.com/vuejs/composition-api

Vue Composition APIで使えるリアクティブ関連のAPI一覧

2020年6月26日18:00より開催された Firebase Realtime Meetup に参加したので参加レポートを書きました。勉強会自体のアーカイブ動画  は以下に掲載されています。https://www.youtube.com/watch?v=4iS8EySYU14FJUGの紹介 @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を使っている方はとりあえず入っておいて損はないかと。FJUG App についてもFirebaseの最新情報を一元管理出来そうなアプリでとても良さそうでした。こちらのGoogle Form からテスターを募集中とのことです（早速申し込みました!!）。TypeScriptから使いやすいFirestore-simpleを紹介します（2020年版） @Kesin11 スライド: https://speakerdeck.com/kesin11/typescriptkarashi-iyasuifirestore-simplewoshao-jie-simasu-2020nian-ban 動画開始位置： https://youtu.be/4iS8EySYU14?t=476 内容メモ：Firestore-simpleの紹介ライブコーディングFirestoreのCollectionをTypeScriptの型で保護するために、独自のWrapperクラスを書く点など、まさに面倒だなと思ってたところだったので「欲しかったやつ!!」と興奮しました。発表では、Firestore-simpleの単純な使い方だけでなく、開発の思想を丁寧に解説していたのが印象的でした。特に「素のFirestoreのAPIから乖離しすぎない」という思想が利用者側視点でとても良いなと共感しました。型補完が強力ですし、batch処理やtrasnsactionのサポートも魅力なので、次の個人開発では是非Firestore-simpleを入れてみようと思います。Build the SNS like Instagram with Firebase @_mogaming スライド: https://speakerdeck.com/mogaming/build-the-sns-like-instagram-with-firebase 動画開始位置： https://youtu.be/4iS8EySYU14?t=2913 内容メモ：FOLLOW ME の紹介サービスの技術スタック・アーキテクチャ・運用状況有料のInstagram風写真共有アプリFOLLOW ME のFirebaseを使った内部実装についてかなり詳細に紹介されています。実際のアプリでどのようにFirebase・GCPのサービスを組み合わせているのか、Firestoreのコレクション構成から構築Tipsなど語られていて、めちゃくちゃ勉強になりました。Topic名に意味を持たせるFirestoreの構成とかまだ一部理解していないので、また見返したいです。あと、最後の方で運用費用の話も出てくるのですが、びっくりするほど安いですね。Firebaseの利点を改めて感じるプレゼンでした。@_mogamingさんはFirebase系 YouTuberもやってるとのことで、そちらも後でみてみようと思います。モバイルアプリ開発者から見たFirebaseの便利機能と活用例 @korodroid スライド: https://speakerdeck.com/korodroid/mobairuapurikai-fa-zhe-karajian-tafirebasefalsebian-li-ji-neng-tohuo-yong-li 動画開始位置： https://youtu.be/4iS8EySYU14?t=4993 内容メモ：モバイルアプリで使うFirebaseの各機能の紹介Firebase × Flutterで開発した自作ToDoアプリの技術スタックモバイルアプリで使うFirebaseの機能をひとつひとつ丁寧に紹介されていたので分かりやすかったです。「Firebase始めたばかりです」という方にも分かりやすいプレゼンだと思いました。Firebase自体がモバイル想定のmBaasなのでモバイル向けの機能がとても豊富ですね。私はモバイルアプリの開発経験はないので、そういう面でも勉強になりました。終わりに以上「Firebase Realtime Meetup 参加レポート」 でした。いやー本当に良い勉強会でした。運営の方ありがとうございました。正直開催時間の18:00は夕食と被り間に合わず、アーカイブ動画を見ていたのですが、こういう見方もできるのがオンライン勉強会の強みですね。今後の開催も楽しみです。

Firebase Realtime Meetup 参加レポート

fish shell + anyenvというパターンでのGoの環境構築の記事がなかったので、備忘録としてまとめます。実行バージョン- fish 3.0.2- anyenv 1.1.1anyenvでのgoenvのインストールと設定まずanyenvでGoのバージョン管理システムのgoenvをインストールします。$ anyenv instal goenvそして、goenv用の環境変数やaliasの設定をfish shellの設定ファイル~/.config/fish/config.fishに追記します。この部分がzshやbashとは違うので注意です。set -x GOENV_ROOT "$HOME/.anyenv/envs/goenv"set -x PATH $PATH "$GOENV_ROOT/bin"set -gx PATH "$GOENV_ROOT/shims" $PATHset -gx GOENV_SHELL fishsource "$GOENV_ROOT/libexec/../completions/goenv.fish"command goenv rehash 2>/dev/nullfunction goenv  set command $argv[1]  set -e argv[1]  switch "$command"  case rehash shell    source (goenv "sh-$command" $argv|psub)  case '*'    command goenv "$command" $argv  endendこれで準備は出来たのでfish shellを再起動して、goの指定バージョンをインストールしましょう。# インストール可能なバージョンを取得$ goenv install --list# 指定バージョンのインストール$ goenv install 1.14.3# デフォルト利用バージョンを指定$ goenv global 1.14.3一応go envで環境変数を出力して各種設定が正しく出来ていることを確認しましょう。$ go env無事出力されれば完了です。VSCodeでの設定VSCodeでのGoを開発する場合は以下エクステンションをインストールします。Go with Visual Studio Codeanyenv利用の場合は環境変数が通常と異なり、このままでは動作しないのでVSCodeのsetting.jsonに以下を追記します。go.gopathはgo env | grep GOPATHの値、go.gorootはgo env | grep GOPATHの値です。"go.gopath": "/Users/<ユーザー名>/go/<Goバージョン名>","go.goroot": "/Users/<ユーザー名>/.anyenv/envs/goenv/versions/<Goバージョン名>"最後go関連の各種ツールをインストールします。補完やデバッグ関連に必要です。command + shift + pでコントロールパネルを開き、Go: Install/Update toolsを選択します。ダイアログが開くので全てチェックを入れてOKでインストールが始まります。VSCodeでのGo開発環境構築も完了です。参考

fish shell + anyenvでのGo開発環境構築

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で諦めていませんか？」から同意しかなかったです。テストコード関係なく、型定義の読み方をとても丁寧に解説して頂けたので勉強になりました。テストコードにどこまで型を書くかは型費用対効果で考えるべきだと思うのですが、テストコードでもanyで逃げずサッと型をかけるようにはなりたいです。Async Function and Runtime Error Tracking @laco2net スライド: http://bit.ly/3fahTar 動画開始位置： https://youtu.be/b6WpRCC5GoM?t=2092 内容メモ：TypeScriptの中でのAsync functionの解説、型定義、ES5でのトランスパイルtslib/importHelpersでのバンドルサイズ圧縮async/awaitでエラーハンドリング時の注意（catch文でのre-throw）何気なくasync/await使いまくっていたので、tslib/importHeplersは目から鱗でした。早速プロダクションコードにimportHelpers: trueのPRを作ろうと思います。また、catch文でre-throwされた時の動作（__awaiterの中でPromiseのRejectに変わってしまう）というのも勉強になりました。とても実用的な発表で感謝です。Azure Static Web AppsとVisual Studio Codespacesで快適なTypeScript環境を構築する @hoisjp スライド: https://www.slideshare.net/hois/20200616-tsjpazurestaticwebappsvscodespaces 動画開始位置:https://youtu.be/b6WpRCC5GoM?t=3841 内容メモ：Azure Static Web Appsの紹介Visual Studio Codespacesの紹介書籍紹介Azure Static Web Appsは静的ファイルのホスティングとAPIのラムダ公開を簡単にできるもののようです。Visual Studio Codespacesも雰囲気が分かりました。これが進化していくと、もう手元のマシンスペックは不要になりそうですね。あと、Azureの各種機能をサンドボックスで学べる Azure Learn も良いですね。個人的に、諸所の事情で来月からAzureが広く使われている会社に所属するのでやってみようと思いました。フロントとサーバーを大統一してAPI疎通を静的に型検査する話 @m_mithide スライド: - （公開されてたら教えてください  ) 動画開始位置: https://youtu.be/b6WpRCC5GoM?t=5105 内容メモ：フロントとサーバーで型を共有する場合の課題Aspidaの紹介frourioの紹介・ライブコーディングfrourioのライブコーディングは圧倒されました。特にModel側の型定義を変えたときに、フロント側の型定義が自動的に型エラーになるのとても良さそうですね。マイグレーションの動きなどとてもRailsライクだなーと思っていたら「TypeScirpt界のRailsにしたい」というお話があってなるほどとなりました。まだまだ絶賛開発中みたいですが、後で触ってみようと思います。frourioの詳細についてはこちらのQiita記事でも紹介されています。フロントとサーバーのAPI疎通を静的に検査できるTypeScriptフレームワークを作った - Qiita運営からのお知らせ 動画開始位置: https://youtu.be/b6WpRCC5GoM?t=6584 内容メモ：TypeScript Website v2の日本語翻訳が進行中https://github.com/microsoft/TypeScript-Website/issues/220コントリビューション待ってますTypeScriptのwebサイトがこんな進化しているとは知りませんでした。特にtsconfig.jsonの書き方が詳細に説明されているページが良かったです。サイトの日本語化もとても嬉しいですね。動画で話されてますが、翻訳プロジェクトのコントリビューション募集中で、OSS初コントリビューションの人もおすすめとのこと。自分もこちらの記事に書いた通り、初めてのOSSコントリビューションはGatsby.jsのドキュメント翻訳でした。翻訳からOSS活動始めるのはとても良いと思います。終わりに以上「TypeScript Meetup #4 参加レポート」でした。濃い内容の発表ばかりで、総じて勉強になりました。開催時間も丁度良く、妻子持ちの自分としても視聴しやすかったです。また、オンラインの開催は地方に住むエンジニア（自分も）も気軽に参加できるのが嬉しいですね。オンライン配信自体は、今後のリアル開催の時でもやっていただけると 最後に、運営の方々とても良い勉強会をありがとうございました。

TypeScript Meetup #4 参加レポート

OSS活動をはじめて5ヵ月が経過したのでその振り返りと、OSS活動での学びを書きます。「OSS活動ってハードル高そう。。」と躊躇している方に読んで貰えると嬉しいです。自己紹介最初に誤解のないように自分のスペックを。消防士歴6年、エンジニア歴2年半、PC持つよりホース持ってた期間が長いエンジニアです。28歳の年にエンジニアへ転職し、今は茨城県からフルリモートで働いています。※ 消防士からエンジニアへの転職経緯などは以前こちらに書きましたOSSとは？OSSの定義をWikipediaより。オープンソース・ソフトウェア（英: Open Source Software、略称: OSS）とは、利用者の目的を問わずソースコードを使用、調査、再利用、修正、拡張、再配布が可能なソフトウェアの総称であるまた、本文中でのOSS活動はGitHubに公開されているOSSに対してプルリクエストやイシューを送ること。もしくは自らソフトウェアを開発しOSSとして公開する一連の活動を指しています。OSS活動をはじめたきっかけ「OSS活動を通して世界に貢献するんや!!」と高尚な思いではじめたわけでは全くなく、 このツイートをみたのがきっかけでした。Gatsby.jsの翻訳プロジェクトに参加してプルリクエストがマージされると、ボトルが貰えるというやつです。完全に物欲で、ボトル欲しさにOSS活動を始めました。このボトルはgatsbyに出したprがマージされるともらえます日本語と英語に自信があるなら、gatsbyドキュメント翻訳プロジェクトに参加して手に入れるのもひとつの手です✍️https://t.co/ykzkx4r6k4 https://t.co/tcvmsedmkk— u (@uetschy) january 25, 2020 やってきたこと5ヵ月で10プロジェクト、約30件のプルリクエストを作成しました。ほぼ稼働していない月が2ヵ月あるので、実質1ヵ月ごとに10プルリクエスト程。特に注力したものを振り返ってみます。Gatsby.jsのドキュメント和訳OSS活動をはじめるきっかけとなったリポジトリです。TOEIC200点台（大学入学時）の英語力で、無謀にもドキュメント翻訳に挑みました。機械翻訳と言い回しの工夫でなんとかマージまで。翻訳を通して、Gatsby.js自体への理解も深まりました。あと、ノベルティのボトルとパーカーもしっかりもらいました。Gatsby.jsのTypeScript化翻訳プロジェクトでGatsby.jsに興味を持ち、調べいてたときにTypeScript化のイシューを見つけました。「TypeScript化なら業務でやったことあるぞ（Vue.jsだけど）」と挑戦することに。初めての海外コミッターとのやりとりでしたが、修正自体は慣れた作業でスムーズに進み、10プルリクエスト以上出しました。HasuraのTypeScript化 & 細かいエラー対応Gatsby.jsのTypeScript化を通してOSSにも慣れてきて、次は自分の好きなライブラリで何か挑戦してみようと思い、トライしてみたのがHasuraです。イシューから対応できそうなものを探して、プルリクエストを作りました。Hasuraはコントリビューションガイド、CI環境がとても整備されているのでやりやすかったです。その後、HasuraでもTypeScript化のイシューが出ていることを知り、そちらもやってみました。ReactとStyled componentに慣れてなくて苦労したのですが、レビューを通して教えてもらい、とても学び深かったです。その他その他以下リポジトリにプルリクエストを送りました。細かいバグからドキュメント修正まで色々です。ardatan/graphql-toolsremote-jp/remote-in-japanresir014/gatsby-starter-typescript-plussindresorhus/alfyhowtographql/howtographqlvuejs/vue-apollolabs42io/clean-code-typescriptkeroxp/servestOSS活動の詰まり所と対処法OSS活動を通して感じた詰まりポイントと、その対処法をまとめます。どこから貢献したら良い？私はボトル欲しさに翻訳プロジェクトをやろうと決まっていたのですが、そういうものがない場合、いざOSS活動をやろうと思っても「何からやれば？」と迷うと思います。その場合は、まず自分のよく使うOSSのイシューをGitHub上でみることから始めると良いです。イシューがそのOSSへの課題なので、そこから取り組めそうなものを探してみましょう。さらに、コントリビューション環境が整っているリポジトリだとイシューの難易度によってラベル分けされていることもあります。以下は、Hasuraの例ですが、「good first issue」というissueは比較的取り組みやすいものです。私も、Hasuraへの最初のプルリクエストはこの「good first issue」のものからスタートしました。--- 2020/07/04 追記  ---言語別にOSSの「good first issue」を探せるサイトがありました。迷ったらこれで探せば良さそうです。https://goofi.now.shどうOSS自体の開発環境を整える？イシューも見つかり「修正するぞ！!」となって最初につまづくのが、どうOSS自体の実行環境を構築するかです。その時は、リポジトリ上のCONTRIBUTING.mdを探しましょう。CONTRIBUTING.mdには開発環境の構築方法や、コメント、ブランチ名のルールなどが記載されています。基本的にその通りに実行すれば、ローカルに開発環境を構築できます。あとは、イシューの内容を修正するだけです。また、もし開発環境構築で詰まったらCONTRIBUTING.mdに対してイシュー、プルリクエストを投げてみるのもオススメです。プルリクエストの作成と英語でのコメントのやりとりどうする？修正が終わって「プルリクエスト作る!!」となっても、英語でのプルリクエスト戸惑いますよね。自分は英語力がとても弱いので、Google翻訳やDeep-L翻訳など機械翻訳頼みで英文を書いていました。多分見る人がみたらとんちんかんな英文だったと思うのですが、なんとかやりとりできました。なので、英語力に自信がない人も機械翻訳を使えば問題ないと思います。あとは、以下リポジトリにまとめられているリンクがとても助かりました。良い感じのコメントが残せます。OSS活動のマインドOSS活動をするうえで大事だなーと思ったマインドをまとめます。簡単なプロジェクトから始めるいきなり最初に難しいOSS・イシューから入ると何も進まないので、まずはコントリビューション環境が整備されたリポジトリで簡単なイシューから入るのがよいと思いました。私もGatsby.jsの和訳プロジェクトから入ったことで、GitHub上でのプルリクエストのやり取りにも慣れて、その後がとてもスムーズに進みました。また、英語への抵抗が強い場合は、日本語でコメントのやりとりが出来るOSSから入るのもひとつです。最近だと、COVID-19のサイトなどが有名ですね。プルリクエストのハードルを低くする前項とかぶるのですが、OSS貢献というと皆に使ってもらえるOSSを自分で公開するとか、新しい機能を追加したり、根本的なバグ修正することを想像すると思うのですが、私はTypoの修正も立派な貢献だと思っています。ドキュメントをみて「あれ？」って思った瞬間があれば、流さず調べて気軽にプルリクエストを送ってみましょう。もし、間違っていればそのコメントをくれますし、その過程でより理解が含まると思います。OSSも完璧じゃないと理解するOSSにプルリクエストを送る前までは「OSSはさぞかし完璧なもので、修正の余地なんてないのでは？」と思っていました。ただ、実際やってみると全てがそうではないというのがわかりました。人が作るものなのでTypoや、ミスはあります。利用中に少しでも「おや？」と思ったことがあれば、その感覚を無視せずにコードを追ってみるのが良いと思います。OSS活動をやって良かったことOSS活動をやってみて色々と良かったことがあったのでまとめます。OSSへのコンプレックスがなくなったOSS活動を始める前は「OSS = ブラックボックス。使うだけで精一杯で内部で何をやっているかよく分からん。」という感覚だったのですが、今ではどんどんOSSのコードを読んでいこうと思えるようになりました。例えばOSSを使っていて発生したエラーに対して、ただエラーコードでググるのではなく、OSSのコードを覗いてみるというステップが増えました。実際にそれでバグを見つけてプルリクエストを出したこともあります。より良いコードの書き方を学べたプルリクエストに対してのコミッターからのレビューを通して良いコードの書き方を学びました。特に以下プルリクエストではReactのStyped ComponentのTypeScript化の方法について、とても勉強になりました。そのほかにも、OSSのコードを読むこと自体が「良いコードとは何なのか？」「保守しやすいアーキテクチャとは？」を考えるきっかけになっています。技術スコアレーティングサービスのスコアが爆上がりしたFindy、LAPLASなどGitHub上での活動をレーティングする転職サービスにてスコアが爆上がりしました。あくまで機械的に計測された参考値ですが、指標として上がるのはモチベーションが上がりますね。※ 以下FindyとLAPRASのスコア。実力以上にスコアが出ているので「大丈夫か？」と心配になる気もします。。終わりに以上「OSS活動を初めて5ヵ月の振り返りと学んだこと」でした。長くなりましたが、結論、本当にOSS活動に挑戦してみて良かったなと思っています。この記事が過去の自分のようにOSS活動に及び腰の方が一歩を踏み出すきっかけになれば嬉しいです。

OSS活動をはじめて5ヶ月の振り返りと学んだこと

はじめにPNGやGIFの圧縮は、ブログ記事やGitHubのPull Requestの実行画像貼り付けとかで割とあります。自分はTinyPNGやiLoveIMG を利用していましたが、プラウザを開きファイルをアップロード・圧縮しダウンロードという手順が毎回面倒でした。なので、alfred-imagemin というPNG / JPEG / GIFを手軽に圧縮するAlfred Workflowを作ってみました。（GIFでも使えるというのが嬉しいポイントです）この記事ではalfred-imageminの概要と、仕組みを紹介します。※ Alfred WorkflowはAlfredでAlfred Powerpackを導入済みの方のみ使える機能です。便利なWorkflowで作業効率爆上がりなので、未導入の方はぜひこの機会に！インストール以下コマンドでnpmからインストールできます（後述するAlfyで実現しています）。npmインストールするだけでAlfredがWorkflow認識し、すぐに使えるようになります。$ npm i -g alfred-imageminまた、GitHubのリリース から直接imagemin.workflowファイルをダウンロードし、Alfredに取り込むことも可能です。使い方使い方はこちらの通りです。1. 圧縮したい画像をFinderで選択状態にする（複数選択でもOKです）2. Alfredを開いてimageminと入力しEnterキーを押す3. optimized_images フォルダに圧縮済み画像が生成される最初の実行時には以下アクセス権の確認の項目が出るのでOKを押してください。その後もう一度実行すれば使えるようになるはずです。（もしそれで動かなかったらAlfredを再起動してみてください）（Finderからの選択ファイルの取得に使います）圧縮率・アウトプットディレクトリの調整Alfred Workflowの環境変数で、画像ごとの細かい圧縮率の設定やアウトプットするディレクトリ名の変更も可能です。名前デフォルト値説明JPEG_QUALITY70JPEG圧縮時に使うimagemin-mozjpeg の圧縮率の設定。0〜100までの数値PNG_MAX_QUALITY0.6PNG圧縮時に使うimagemin-pngquantのクオリティ（上限）の設定。0〜1までの数値PNG_MIN_QUALITY0.5PNG圧縮時に使うimagemin-pngquantのクオリティ（下限）の設定。0〜1までの数値GIF_OPTIMIZATION_LEVEL3GIF圧縮時に使うimagemin-gifsicleの圧縮レベルの設定。1, 2, 3の3段階OUTPUT_DIRoptimized_images圧縮後のファイルを入れる出力先ディレクトリ名仕組みAlfy というNode.jsベースでAlfred Workflowを作れるツールを使っています。そして画像圧縮自体はnpmのimagemin を利用しています。Alfyを使う利点は以下の通りです。Node.jsでWorkflowを作れるnpmモジュールが使えるnpmに公開し、手軽にinstallできるようになる何より、Bashスクリプト書かなくてよいというのが最高便利です。もし需要あればAlfyの使い方も記事にします。圧縮部分のコードはこんな感じ。本当にimageminにFinderの選択ファイルを渡しているだけです。const path = require("path");const imagemin = require("imagemin");const imageminMozjpeg = require("imagemin-mozjpeg");const imageminPngquant = require("imagemin-pngquant");const imageminGifsicle = require("imagemin-gifsicle");const argv = process.argv[2];const files = argv.split("///");const outDir = path.dirname(files[0]);const jpegQuality = process.env.JPEG_QUALITY  ? Number(process.env.JPEG_QUALITY)  : 70;const pngMaxQuality = process.env.PNG_MAX_QUALITY  ? Number(process.env.PNG_MAX_QUALITY)  : 0.6;const pngMinQuality = process.env.PNG_MIN_QUALITY  ? Number(process.env.PNG_MIN_QUALITY)  : 0.5;const gifOptimizationLevel = process.env.GIF_OPTIMIZATION_LEVEL  ? Number(process.env.GIF_OPTIMIZATION_LEVEL)  : 3;const outputDir = process.env.OUTPUT_DIR  ? process.env.OUTPUT_DIR  : "optimized_images";// minify imagesawait imagemin(files, {  destination: `${outDir.trim()}/${outputDir}`,  plugins: [    imageminMozjpeg({ quality: jpegQuality }),    imageminPngquant({ quality: [pngMinQuality, pngMaxQuality] }),    imageminGifsicle({ optimizationLevel: gifOptimizationLevel }),  ],});console.log("Processing completed successfully.");console.log(`Optimized ${files.length} files.`);終わりに以上「最速で画像を圧縮するAlfred Workflowを作った」でした。不具合などありまたら、気軽にGitHubリポジトリにissueやPull Requestを投げてください。あと、もし使ってみて良かったらリポジトリにstar  を貰えると嬉しいです。泣いて喜びます。参考ツール作った系の記事の書き方として参考にさせていただきました （ツールも毎回便利に使わせてもらっています！）プロセスをあいまい検索してkillするツールをGoで作った - Qiita

最速で画像を圧縮するAlfred Workflowを作った

最近猛烈にスターを集めているビルドツール、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 production.とある通り、まだ絶賛開発中です。プロダクションで使うのは控えた方が良さそうです。何が嬉しいの？SFCでの開発ならVue CLIやWebpackで良いのでは?と思うかもしれません。Viteを使う利点は以下の通りです。開発時はバンドル不要で動作するので、大規模プロジェクトでも初回起動が非常に早いHMR（画面の再描画無しにファイル変更をブラウザに適用してくれる機能）が、モジュールの総数と切り離されているため一貫して高速に動作するざっくり言うと総じて動作が早いです。開発体験が良い。他詳細な説明はREADMEにも記載されているのでそちらもどうぞ。インストールとプロジェクト作成VueとReactのプロジェクト作成を簡単に説明します。Vue以下コマンドでプロジェクトを作成します。$ npm init vite-app example-vueこれだけでOKです。example-vueにVueのプロジェクトが作成されます。あとは依存モジュールをinstallして起動するだけです。$ cd example-vue$ npm i$ npm run devReact--template reactでReactのテンプレートを指定したうえでプロジェクトを作成します。$ npm init vite-app --template react example-reactexample-reactにReactのプロジェクトが作成されます。あとはvueと同じく起動するだけです。$ cd example-react$ npm i$ npm run devビルドViteではRollup.jsを内部的に使ってリソースをバンドルしプロダクションビルドが可能です。buildコマンドでビルドが実行されます。$ npm run builddist配下に成果物が生成されるので、あとはそれを公開するだけです。細かいビルドオプションを設定したい場合は、コマンド引数で指定するか、設定ファイルを作り記述できます。以下成果物のディレクトリをoutディレクトリに変更する例です。プロジェクトルートにvite.config.jsを追加して以下を記述します。vite.config.jsmodule.exports = {  outDir: "out"}あとはそのままビルドすればoutディレクトリに成果物が生成されます。他設定可能なオプションはソースコードをみるのが良さそうです。https://github.com/vitejs/vite/blob/master/src/node/config.tsTypeScriptへの対応TypeScriptへの対応も設定なしで可能です。Vueの場合は.vueで<script lang="ts">を設定するだけ。Reactの場合は、.jsxを.tsxに変更するだけです。.tsファイルもそのままimportできます。App.vue<template>  <img alt="Vue logo" src="./assets/logo.png" />  <HelloWorld msg="Hello Vue + Vite" /></template><script lang="ts">import HelloWorld from './components/HelloWorld.vue'import { defineComponent } from 'vue'// Composition APIなので defineComponent()を利用export default defineComponent({  name: 'App',  components: {    HelloWorld  },  setup() {    return {}  }})</script> 注意点2020/05/31現在、TypeScriptはJSへのトランスパイルのみ対応していて、型チェックは行えません。基本的にエディタ上での型エラーの確認と、tsconfig.jsonを追加しビルド前にtsc --noEmitを利用して型チェックを行ってください。PostCSS、Scssへの対応Viteは、.vueファイルとインポートされた.cssファイルの全てにPostCSSを自動的に適用します。必要なPostCSSのプラグインをnpmでインストールして、あとはpostcss.config.jsをプロジェクトルートに追加するだけです。Autoprefixerの利用例。$ npm i autoprefixer --save-devpostcss.config.jsmodule.exports = {  plugins: [    require('autoprefixer')()  ]}CSS Pre-Processorsのscssも、sassをnpmインストールして、.vueファイルで<style lang="scss">を指定するだけで利用できます。$ npm i sass --save-dev<style lang="scss">/* scss */</style>終わりにとても高速に動作するのでViteかなり良いですね。あと、Vue 3.0のsandbox環境としても最高です。今回紹介した以外にも機能盛り沢山なので、是非READMEを読んで欲しいです。https://github.com/vitejs/vite今後もさらに機能が拡張されるようなので引き続き動向を見ていきたいです。最後に。Evan You氏のVite作成時の投稿がカッコ良すぎる。こんなこといつか言ってみたいです。As I was going to bed, I had an idea about a no-bundler dev setup (using native browser ES imports), but with support for Vue SFCs with hot reload. Now it's almost 6AM and I have PoC working. The hot reload is so fast it's near instant.— Evan You (@youyuxi) April 20, 2020 参考vitejs/vite: An opinionated web dev build tool. It's fast.Getting started with Vite, a no bundler DEV environment for Vue.jsVite⚡ - Vue no-bundler dev setup - DEVViteの動作確認 no bundle devサーバ for Vue 3 | アールエフェクト

【Vite】 Vue3.0もReactも！ノーバンドルなビルドツール「Vite」を試してみる

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 を持つ必要もないです。その他詳細な情報は以下にとても分かりやすく記載されていました。The Deno Handbook: A TypeScript Runtime Tutorial with Code ExamplesDenoとはなにか - 実際につかってみる - QiitaDenoの登場でNode.jsの時代は終わるのか？ - QiitaHello Deno 🦕最初にDenoのインストールから、簡単なスクリプトの実行までを行います。まず、HomebrewでDenoをインストールします。brew install denoこれだけで完了です。早速、実行してみましょう。$ deno run https://deno.land/std/examples/welcome.tsWelcome to Deno 🦕「Welcome to Deno 🦕」 と表示されれば成功です。ちなみにwelcome.tsの中身は、console.log('Welcome to Deno 🦕') だけです。https://deno.land/std/examples/welcome.tsServestでHello World!今回はstdのHttpライブラリではなく、DenoでプログレッシブなHTTPサーバーを構築することができるServestを使います。任意のディレクトリにmain.tsを作りましょう。app/main.tsimport {  createApp,} from "https://servestjs.org/@v1.0.0/mod.ts";const app = createApp();app.handle("/", async (req) => {  await req.respond({    status: 200,    headers: new Headers({      "content-type": "text/plain",    }),    body: "hello World!",  });});app.listen({ port: 8888 });実行してみます。$ deno run --allow-net app/main.tsI[2020-05-23T12:13:59.669Z] servest:router listening on :8888http://localhost:8888 にアクセスすると、hello world と表示されるはずです。コードをみると、createApp()でappを作り、app.handle("/", async ...)でリクエストをハンドリング、req.respond({...}) でレスポンスを返しています。そして、app.listen({ port: 8888 }) でport:8888でリクエストを待っているのが分かります。Node.jsのExpressのような書き味ですね。RESTfulなAPIサーバーの構築簡単なブログ投稿システムをイメージして、RESTfulなAPIサーバーを作ってみます。Modelの作成まずModelを作ります。app/modelsに以下post.tsを作成しましょう。app/model/post.tsimport { v4 } from "https://deno.land/std/uuid/mod.ts";export class Post {  public id: string;  public createdAt: string  constructor(public title: string, public content: string) {    this.id = v4.generate();    this.createdAt = (new Date()).toLocaleDateString()  }  toJson() {    return {      id: this.id,      title: this.title,      content: this.content,      createdAt: this.createdAt    };  }}// DBでの永続化はせずインメモリで管理export const posts = [] as Post[];// postsの初期記事追加export const initializedPosts = () => {  posts.push(new Post('Hello Blog', 'My first post.'))}initializedPosts();記事のモデルとなるPostクラスを定義しています。今回は説明を簡易にするため、インメモリでpostsを保持し、最初のサンプル記事を追加する処理を書いています。Controllerの作成続いて、リクエストごとのハンドリングを行うControllerを作成します。app/controllersにpostController.tsを作成します。app/controllers/postController.tsimport {  ServerRequest,} from "https://servestjs.org/@v1.0.0/mod.ts";import { posts, Post } from "../models/post.ts";type PostPayload = {  id: string;  title: string;  content: string;};export const getAllPosts = async (req: ServerRequest) => {  await req.respond({    status: 200,    headers: new Headers({      "content-type": "application/json",    }),    body: JSON.stringify(posts),  });};export const getPost = async (req: ServerRequest) => {  const [_, id] = req.match;  await req.respond({    status: 200,    headers: new Headers({      "content-type": "application/json",    }),    body: JSON.stringify(posts.find((p) => p.id === id)),  });};export const createPost = async (req: ServerRequest) => {  const bodyJson = (await req.json()) as PostPayload;  const post = new Post(bodyJson.title, bodyJson.content);  posts.push(post);  await req.respond({    status: 200,    headers: new Headers({      "content-type": "application/json",    }),    body: JSON.stringify(post),  });};export const deletePost = async (req: ServerRequest) => {  const [_, id] = req.match;  const index = posts.findIndex((p) => p.id === id);  posts.splice(index, 1);  await req.respond({    status: 204,  });};export const updatePost = async (req: ServerRequest) => {  const [_, id] = req.match;  const bodyJson = (await req.json()) as PostPayload;  const index = posts.findIndex((p) => p.id === id);  posts[index].title = bodyJson.title;  posts[index].content = bodyJson.content;  await req.respond({    status: 200,    headers: new Headers({      "content-type": "application/json",    }),    body: JSON.stringify(posts[index]),  });};先ほど作成したPostモデルから、postsをimportしてそれぞれの関数でpostsを処理しています。関数名の通り、記事のCRUD処理を行っています。updatePostやdeletePostでは、const [_, id] = req.match; でリクエストのURLパラーメータから、idを取得しています。レスポンスは、req.respond()でstatus、headers、bodyを持つオブジェクトを返すだけです。Routerの作成次に、ControllerをURLにマッピングするRouterを作成します。app/router.tsを作成しましょう。app/router.tsimport {  createRouter,  contentTypeFilter,} from "https://servestjs.org/@v1.0.0/mod.ts";import {  getAllPosts,  getPost,  createPost,  deletePost,  updatePost,} from "./controllers/postsController.ts";export const routes = () => {  const router = createRouter();  router.get("posts", getAllPosts);  router.get(new RegExp("^posts/(.+)"), getPost);  router.post("posts", contentTypeFilter("application/json"), createPost);  router.put(    new RegExp("^posts/(.+)"),    contentTypeFilter("application/json"),    updatePost,  );  router.delete(new RegExp("^posts/(.+)"), deletePost);  return router;};createRouter()でrouterのインスタンスを作成して、router.get(..) などでURLと、処理をマッピングしています。処理自体は、先ほど書いたControllerからimportした関数です。routerの関数名が、post, delete, putなどのHTTPリクエストに対応しています。new RegExp("^posts/(.+)") で正規表現でリクエストを絞ることも可能です。ここでは、記事更新のPUTリクエストと、記事削除のDELETEリクエストでURLパラメータを受け取るために利用しています。Appの作成最後に、main.tsでAppのエントリーポイントを作成します。最初のHello worldを以下の用に書き換えましょう。main.tsimport { createApp } from "https://servestjs.org/@v1.0.0/mod.ts";import { routes } from "./router.ts";const app = createApp();app.route("/", routes());app.listen({ port: 8080 });createApp()でAppを作成し、app.route()で先ほど定義したrouterを渡してURLをマッピングしています。これで準備は完了です。実行サーバーを起動してみます。$ deno run --allow-net src/main.ts以下でCRUD処理を試してみてください。記事一覧の取得$ curl --request GET \  --url http://localhost:8080/posts個別記事の取得$ curl --request GET \  --url http://localhost:8080/posts/{POST_ID}記事の投稿$ curl --request POST \  --url http://localhost:8080/posts \  --header 'content-type: application/json' \  --data '{"title": "sample","content": "Laborum mollit duis ad consequat."}'記事のアップデート$ curl --request PUT \  --url http://localhost:8080/posts/{POST_ID} \  --header 'content-type: application/json' \  --data '{"title": "update","content": "Labore minim sit et id aliquip ad voluptate nisi mollit incididunt id irure enim."}'記事の削除$ curl --request DELETE \  --url http://localhost:8080/posts/{POST_ID}無事RESTfulなAPIサーバーが作成できましたね 🎉Cloud Runへのデプロイ最後にここまでで作ったアプリをCloud Runにデプロイします。Cloud Runはサーバーレスでフルマネージドなコンテナ実行環境です。以降の説明は、gcloud cliや、GCPプロジェクトの作成は完了している前提で進めます。まず、ワークスペースにDockerfileを作成します。ベースとなるImageはこちらのリポジトリのものです。FROM hayd/alpine-deno:1.0.1ENV PORT 8080ENV HOST 0.0.0.0WORKDIR /appUSER denoCOPY . .CMD ["run", "--allow-net", "--allow-env", "app/main.ts"]次に、cloud-runの設定ファイルcloud-build.ymlを作成します。cloud-build.ymlsteps:  - name: gcr.io/cloud-builders/docker    args: ['build','-f','Dockerfile','-t','gcr.io/qiita-demo-project/deno-example','.']images: ['gcr.io/qiita-demo-project/deno-example']qiita-demo-project の部分は、GCPのプロジェクト名。deno-exampleの部分は、今回Container Repositoryへ登録するコンテナ名です。あとはgcloud cliを使ってデプロイします。まずワークスペースでプロジェクトの初期化を行います。initで設定するプロジェクトは、先ほどcloud-build.ymlに書いたプロジェクト名を選択してください。$ gcloud auth login$ gcloud initgcloudのプロジェクト設定が終わったらいよいよデプロイ作業です。まず、gcloud buildコマンドで、Docker ImageをContainer Repositoryに登録します。# --projectの部分は適宜変更してください$ gcloud builds submit --project "qiita-demo-project" --config=./cloud-build.yml成功すると、GCPのContainer RepositoryにImageが登録されているはずです。そして、登録したコンテナをCloud Runにデプロイします。# --project, --imageの部分は適宜変更してください$ gcloud beta run deploy qiita-demo \  --region us-central1 --allow-unauthenticated --project \  "qiita-demo-project" --image gcr.io/qiita-demo-project/deno-exampletarget platformの選択肢が出たら [1] Cloud Run (fully managedを選択してください。成功すると最後にURLが出力されるはずです。GCPのCloud Runコンソールも確認してみましょう。無事アクセス出来ましたか？これでCloud Runへのデプロイも完了です 🎉終わりに以上、「Deno🦕でRESTfulなAPIサーバーを立ててCloud Runへデプロイ」でした。本当に触りまでしか使ってませんが、Denoはとても可能性感じますね。今後もちょこちょこ使っていきたいです。Denoで困ったときは、日本のDenoコミュニティのSlackに参加し質問するととても親切に教えてくれるのでこちらもおすすめです。

 Deno🦕でRESTfulなAPIサーバーを立ててCloud Runへデプロイしてみる

TypeScriptの構文で「意味は分かるけど名前は分からん。そして単発記号or単語でググっても見つからん！」というのがあるのでメモとしてまとめます。随時追加予定。as - type Assertion -コンパイラに推論される型を明示的に上書きする。Advanced Types · TypeScriptinterface Foo {  bar?: number;  bas?: string;}let foo = {} as Foo; // {} はFoo型だとコンパイラに伝えているfoo.bar = 123;foo.bas = "hello";in - in operatorJSの in operator と使い方は同じ。オブジェクトのプロパティの判定に使える。TypeScriptの場合はさらに、型の絞り込みとしても機能する。他にもMapped TypeのKeyの生成でも使われる。TypeScript の"is"と"in"を理解する - Qiitaでも解説してます。Advanced Types · TypeScriptinterface Bird {    fly();    layEggs();}interface Fish {    swim();    layEggs();}function move(pet: Fish | Bird) {  // petにswimプロパティがあるかどうか判定する。以降そのプロパティを持つ型として推論される。  if ("swim" in pet) {　　// ここではFish型    return pet.swim();  }  // ここではBird型  return pet.fly();}is - type predicates -真偽値を返す関数の引数の型を絞り込めるようにする。ユーザー定義型のType Guardとして使われることが多い。TypeScript の"is"と"in"を理解する - Qiitaでも解説してます。Advanced Types · TypeScript// この関数がtrueの場合、その空間でisFishの引数の変数は、Fish型として推論されるfunction isFish(pet: Fish | Bird): pet is Fish {  return (pet as Fish).swim !== undefined;}! - non-null assertion operator -コンパイラにこの値はnull,undefinedではなないと伝えるもの。使いすぎ注意。丁寧に書くならtype guardで型を絞り込んだ方が良い。TypeScript 2.0 · TypeScriptfunction processEntity(e?: Entity) {  validateEntity(e);  let s = e!.name; // eはu`ndefined | Entity`ではなくEntityとして推論される}?. - optional Chaining -null, undefinedセーフな呼び出しを可能にする構文。便利。TypeScript 3.7 · TypeScriptlet x = foo?.baz(); // fooがnull, undefの時はundef, それ以外の時はbaz()の戻り値?? - nullish Coalescing -値がnull, undefだった場合、??の右辺の評価値を返す構文。null, undefチェックの三項演算子のシンタックスシュガー。TypeScript 3.7 · TypeScriptlet x = foo ?? bar(); // fooがnull, undefinedだったらbar()を実行, それ以外ならfooを返す参考Documentation · TypeScriptIntroduction - TypeScript Deep Dive 日本語版