はてなブックマーク

先日初めて真面目に自分のコードを OSS として公開する機会があり、色々試行錯誤したのでまとめます。 何を公開した? Vue Word Highlighter という Vue.js のコンポーネントライブラリを公開しました。 機能はとても単純で、文字列と検索クエリを渡すと検索クエリに合致した文字をハイライトする(<mark>タグ又は任意のタグ囲む)というものです。 自分なりに良い感じに使えるコンポーネントが出来たので、せっかくならば多くの人に使ってもらいたいと思い以下で記載する諸々をやってみました。 公開までにやってみたこと 🗒 READMEをちゃんと書く OSS の顔と言ったら README なので、ひと目でちゃんとしてそうな OSS 感を出すために README は整備しました。 ロゴを作る Google Font で良さそうな書体を探し一部をハイライトしただけの単純なものですが、ラ

Docker で立てた MySQL に外部から接続しようとした際に、エラーが発生して詰まったので備忘録として書きます。 事象 Docker で立てた MySQL サーバーの MySQL に、ホスト側で起動したアプリケーションからアクセスしようとした際に、以下エラーが発生しました。 ポート番号やユーザー名、パスワードに間違いはなく、コンテナに入り MySQL へアクセスすると正常に起動しています。なぜ🤔 原因 指定したユーザーに、外部からのアクセス権がなかったのことが原因でした。 実際にコンテナ上の MySQL にて以下を実行すると指定ユーザー(sample_user)の host が localhost のみになっています。 これだと MySQL サーバーのコンテナ内からしかアクセスができません。 mysql> select user, host from mysql.user; +--

GAS を書くたびに開発環境構築を調べている気がするので、GAS 開発用の Template リポジトリを作ってみました。 Templateリポジトリ 機能はこちらです。 claspによる App Script へのデプロイ TypeScript 対応 Webpack5 でのビルド※(注記) ESLint / prettier でのコード整形 husky / lint-stage でのプレコミットフック 使い方 GitHub Template として公開しているので、リポジトリのUse this templateボタンをクリックすれば、コミット履歴が削除された自分のリポジトリとして作成できます。 作成したリポジトリをローカルに clone したら、.clasp.jsonのscriptIdを自身の AppScript の ID で書き換えてください。 ※(注記) AppScript の ID は AppSc

フロントエンドの開発時に仮の API を使いたいってシチュエーションはわりとあると思います。 そんな時に、Mock Service Worker を使うと便利だったのでまとめます。 Mock Service Worker とは? Mock Service Worker は、ネットワークレベルで API リクエストをインターセプトして mock のデータを返すためのライブラリです。API リクエストを含む処理のテストや、開発時の mock サーバーの代替として利用出来ます。 テストでの利用については以前こちらの記事でまとめました。 今回は開発時のモック API としての利用について書きます。 開発用の API というと、JSON Serverが有名ですが、Mock Service Worker では Service Worker を使ってリクエストを返すため、別プロセスでローカルサーバーを立

Next.js に Apollo Server を立てるまでの備忘録です。 npx create-next-appで Next.js を作成して TypeScript の設定まで完了している前提で書きます。 依存モジュールの追加 Apollo Server の micro(Vercel が開発している非同期 HTTP サーバー)インテグレーションであるapollo-server-microを依存に追加します。

マークダウン形式のスライド作成ツール Slidev を試したら、とても良かったので紹介です。 Slidevとは? Slidev はVue UseやType Challengesの作者であり、Vue.js のコアチームメンバーでもあるAnthony Fuが開発しているマークダウン形式でのスライド作成ツールです。 Vite、Vue3、WindiCSSを用いて開発されています。 まだ Public Beta ですが、リリースからわずか数日で 7,000 を超える GitHub スターを集めています。 実際にどのようなスライドが作成可能なのかは、Slidev のデモや、作者の Anthony が Slidev を用いてプレゼンした VueDay2021 の資料が分かりやすいです。 デモ動画 VueDay2021 でのプレゼン 使い方 任意のディレクトリで以下コマンドを実行するだけで環境は整います。

Svelte と WebSocket の勉強のため簡単なチャットアプリを作ったので備忘録としてまとめます。 基本 Svelte とは? Svelte は React や Vue.js のように宣言的 UI で Web アプリケーションを作れるツールです。Vue.js の SFC のように、.svelteファイルで HTML、JavaScript、CSS を単一コンポーネントとして管理し、それを組み合わせてアプリケーションを構築していきます。 React や Vue.js との大きな違いは、事前にアプリケーションコードを純粋な JavaScript ファイルとしてコンパイルすることで、クライアントではネイティブの DOM スクリプトとして実行される点です。仮想 DOM を使用しないため、ビルド後のコードには専用のランタイムライブラリが含まれず軽量です。 WebSocket とは? WebSo

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

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

ビジュアルリグレッションテストのプラットフォーム Percy を使ってみたらなかなか良かったので紹介です。 Percyとは? Percy はビジュアルリグレッションテスト(ページのスクリーンショットをピクセル単位で比較をすることで意図せぬ UI の変更を検知するテスト手法)のプラットフォームです。 Percy を使うことでビジュアルリグレッションテストに必要な画像の保存や、画像変化を検出するページのレンダリング、変更の通知までとても手軽に実現できます。 料金体系 Percy の料金体型はアップロードするスクリーンショットの枚数によって変わります。 月あたり 5,000 枚までは無料で利用できます。それ以降は 25,000 枚で 99$(年払い), 100,000 枚で 399$(年払い)と変わっていきます。 リリース頻度やページ数によりますがリリースブランチのプルリクエストのみを検証対象と

gRPC の Protocol Buffers から TypeScript の型定義を作る方法のメモです。 前提 Protocol Buffers とは? グーグルによって開発されたインターフィス定義言語で、gRPC 利用時に、クライアント/サーバーコードの生成に使われます。 以下のように message と service でインタフェースを定義します。 syntax = "proto3"; package Posts; import "google/protobuf/empty.proto"; message Post { int32 id = 1; string title = 2; string content = 3; } service Posts { rpc GetPosts(google.protobuf.Empty) returns (GetPostsResponse)

今月初めにリリースされた Vuex4 を Composition API + TypeScript で試してみたのでそのメモです。 この記事は以下バージョンにて検証しています。 vuejs/vue 3.0.5 vuejs/vuex 4.0.0 Vuexとは? Vuex は、Vue.js 公式の状態管理ライブラリです。 Vue アプリケーション内に、どの階層のコンポーネントからでもデータを取得・更新できる単一のデータストアを作ることができます。Vuex を使うことで複数のコンポーネントで使う共有データの Props/Emit による過剰なバケツリレーが不要になります。 また、複雑になりがちな状態管理において以下の図のように特定のルールで制約を与えることでデータの流れを一元化して、コードの構造と保守性を向上させることができます。 (What is Vuex?) 使い方 Vue CLI で Vu

dotfiles マネージャの chezmoi についてまとめました。 個人的にかなり便利だと思います。 chezmoiとは? chezmoi は、.vimrc や、.zshrc などの dotfiles の管理を効率的に実現するためのツールです。 シンボリックリンク不要でコマンド 1 つで環境を再現出来る template 構文で変数の展開や処理の分岐を書くことで各環境の差分を 1 ファイルで管理できる 1password などのパスワードマネージャとの併用でセキュアにファイル管理ができる という特徴があります。 特に 2 と 3 は通常のシンボリックリンクでの dotfiles 管理だと Shell Scriptをかなり頑張らないと出来ない部分ですが、chezmoi なら手軽に実現できます。 基本操作 イントール Homebrew でインストール出来ます。 chezmoiプロジェクトの

先日@0317_hiroyaさんの以下ツイートと 00:00STUDIO の配信を見てとても刺激を受けたので、LeetCodeをはじめてみようと思いました。 ただ、LeetCode にアカウントを作りいざ問題にチャレンジしようと思ったら、いきなり詰まりました。 関数・変数名の補完が効かない シンタックスエラーを表示してくれない Vim キーバインドがいつもと微妙に違う もう IDE がないとコードを書けない体になってしまっていた・・😇 解決策としてはローカルの好きなエディタでコードを書いて、完成したら都度ブラウザの LeetCode のエディタに貼り付けて実行となるのでしょうが、まどろっこしいことはしたくありません。 絶対誰か解決してるだろうとググっていたら、最高の VSCode プラグインを見つけたので紹介します。 vscode-leetcodeの使い方 自分の悩みを解決してくれたのは

Python の並行処理についてまとめてみました。 並行処理とは? 並行処理(Concurrent)とは、一定の時間内に複数の処理を同時に進行することを指す用語です。 例えば、コーディング中にアプリのビルドを実行しながら Twitter を見るのもコーディングと Twitter の並行処理です。 並行処理と並列処理の違い 並行処理と類似する処理として、並列処理(Parallel)があります。 2 つの違いを簡単にまとめます。 並行処理(Concurrent) 並行処理は瞬間を切り取ったときには 1 つの処理をしているのですが、ある一定の時間でみると処理を切り替えながら複数の処理をこなしているものを指します。 Python では今から説明するマルチスレッド(ThreadPoolExecutor)とイベントループ(asyncio)がこれに当たります。 並行処理での高速化は複数 API のアクセ

最近調べていた Apollo Federation についてのメモです。 Apollo Federation の概要と、Next.js の API Routes で Apollo Federation を使う例をまとめています。 Apollo Federationとは? 以前 Netflix の GraphQL マイクロサービスアーキテクチャが話題になりました。その構成を支えているのが Apollo Federation です。 Apollo Federation は、複数の GraphQL マイクロサービスをゲートウェイでまとめて、1 つの GraphQL エンドポイントとして提供するものです。 Apollo Federation を使うことで、それぞれのマイクロサービス間で依存する処理を良い感じに統合してくれます。 例えば、投稿情報は Post マイクロサービスにあり、その投稿の投稿者

my-scraping-app ディレクトリ内に serverless framework 関連のファイルが生成されます。 その後 venv の設定や、serverless framework で AWS にデプロイするための credentials の設定をします(本記事では省略)。 以下 credentials 設定の参考ページです。 スクレイピング & slack通知スクリプトの実装 スクレピングは様々な方法があると思うのですが、今回は該当商品の商品ページに出ている「現在品切れ中」というボタンの有無を確認することで、入荷状況を判断することとします。 依存モジュールを追加して、handler.py にスクレピングコードと Slack 通知コードを書いていきます。 import requests import re import os from bs4 import BeautifulS

最近 ER 図を書く機会があって、その際に使ってみた dbdiagram.io がとても良いツールだったので紹介します。 dbdiagram.ioとは? dbdiagram.io は、ブラウザ上で手軽にデータベースの ER 図を作れるツールです。 とても直感的で分かりやすい記法で、テーブルの構成やリレーションを定義できます。 作った ER 図は PDF や PNG、MySQL, PostgreSQL など各種形式でエクスポートが可能です。そのほか、MySQL や PostgreSQL、Rails の schema.rb から ER 図を作成する import 機能もあります。 価格 通常利用は無料です。有料にすると様々な拡張機能が使えます。 ※(注記) この記事は無料版での利用を前提として書いています。 使い方 簡単に使い方を解説します。 テーブルの作成 テーブルはTableオブジェクトを書くこと

この記事は Firebas Advent Calendar 2020 18 日目の記事です。 SSG や SPA サイトを構築する際に迷うのがお問い合わせフォームの実装です。 今回は Firebase Trigger Email を使って手軽に実装する方法を解説します。 何を作る? こんな感じのお問い合わせフォームを作ります。 フォームを入力し送信ボタンを押下すると、管理者とフォーム記載のメールアドレス宛に以下メールが送られます。 (CodeSandbox はサンプルです。送信ボタンを押してもメールは送信されません) 管理者側 お問い合わせ実行ユーザー側 技術スタック及び構成は以下の通りです。 これから解説するコードは全てこちらのリポジトリにあります。 Firebase Trigger Email とは? Firebase Trigger Email は Firebase Extensio

いかに楽に入力できるか、いかに楽に自分の進捗を把握できるかに着目して作りました。 入力については、Slack アカウトごとに前回入力済みの内容を Firestore に保存し、初回以降は入力欄の初期値として入るようにしています。 進捗把握については、初回以降は前回の実行時からの差分を表示するようにしています。なので週 1 回とかコマンドを打てば前週との比較が手軽に出来ます。 構成 どのような構成かざっくり紹介します。 Bolt.js を Cloud Functions for Firebase で動かして Slack とのやりとりをしています。 そして、フォームの入力内容・指標データを Firestore に保存しています。 指標集計部分は自分で各サービスの API クライントを書いて使っています。 Zenn の API クライアント import { ZennArticle, Follo

知っている人には当たり前の知識かもですが、地味に不安だったことなのでメモ。 起こったこと Firebase でアプリを作っていたら、なぜか Storage のリソースが異様に消費されてることに気がつきました。 このプロジェクト自体は Cloud Functions for Firebase をメインに使っていて、Storage 自体にはほぼファイルはありませんでした。 しかし、上記画像の通り異様にアクセスされています。 さらに GCP で Storage をみると見覚えのないファイルが大量に! なぜ...🤔 原因 原因は Cloud Functions for Firebase のデプロイ時に自動保存されるソースコードでした。 Cloud Functions for Firebase のデプロイは以下手順で行われるようです。 関数のソースコードを含むアーカイブを Cloud Storag

Jamstack Advent Calendar 2020 の 1 日目の記事です。 最近 Next.js が凄い勢いで進化していますが、同じ React フレームワークの Gatsby.js も負けず劣らず新しい機能が追加されています。 今回は、先月公開された Gatsby.js の新しい API、 File System Route API について紹介します。 この記事は以下バージョン時点の情報です。 Gatsby.js: 2.25.4 File System Route APIとは? File System Route API は、ブログの個別ページなど同レイアウトでデータが異なるページを作る際に、ファイル名を特定の表記とすることで動的にページを生成する API です。今までは gatsby-node.js で createPages で行ってたことを代替できます。 旧来の方式とF

「Zenn で記事の予約投稿が出来ると便利だなー」と思って調べてたら GitHub Actions を使って実現できたので紹介します。 仕組み 予約投稿の仕組みは記事追加のプルリクエストの日時指定のマージです。 その実現のためにMerge Scheduleという GitHub Action を利用します。 動きとしては以下の通りです。 ブランチを切り、公開したい記事を追加。プルリクエストを作成 GitHub Actions が起動し、Merge Schedule が登録 日時指定でプルリクエストがマージされて master が更新 Zenn で記事が公開 詳細 GitHub Actions の登録 Zenn の記事管理リポジトリに移動して GitHub Actions のディレクトリを作ります。 name: Merge Schedule on: pull_request: types: -

Tailwind CSS はユーティリティファーストでとても使いやすいのですが、無数のクラスが提供されているので、そのままだとビルドサイズがとても巨大ですよね。 それを解消するために、 Tailwind CSS に標準で搭載されている Purge オプションを使ってビルドサイズの縮小を試してみました。 テスト環境の構築 最初に Tailwind CSS の環境を構築します。 まず npm プロジェクトを作成して、Tailwind CSS を依存に追加します。

Go To Eat とてもお得な施策で良いのですが「どのお店が使えるんだろう?」ってなりますよね。そんな時に見る県の Go To Eat キャンペーンサイトが、思いのほか使いづらかったので、Playwright + AppSheet で自分用アプリを作ってみた話です。 なぜ作った? 茨城県の Go To Eat キャンペーンサイトはこちらです。 トップページは良い感じです。 が... 店舗一覧ページに遷移するといきなり古き良き業務システムのような感じになります😇 (もうちょっと頑張ってくれ..) このページだと、 スマホ対応してないのでスマホで見辛い マップ上での検索が出来ないので、現在地周辺の店舗を探すのが面倒 ということでノーコードツールの AppSheet で作り直してみました。 作ってみたもの AppSheet で作ってみたものがこちらです。 スマホに対応し、店舗名や要素での検索や

Raspberry Pi に SSH(公開鍵認証)で接続するまで & VSCode の Remote Development の設定を備忘録としてまとめます。 公開鍵認証とは? 公開鍵認証とは、パスワードの代わりに 公開鍵と秘密鍵のペアを用いる認証方法です。 詳細は以下記事をご覧ください。 SSHの公開鍵認証における良くある誤解の話 - Qiita キーファイルの作成 まずローカルでキーファイルを置くディレクトリを作ります(.ssh 直下に秘密鍵を置いておいても良いのですが、整理しておいたほうが後々楽なので)

GitHub の OGP 画像を生成してくれる GitHub Socialify が凄く良かったので紹介です。 SNS映えするOSS?? 主たる OSS はほぼ設定されているのですが、GitHub の各リポジトリは OGP 画像を設定することが出来ます。 OGP 画像を設定しないと、リポジトリ作者のプロフィール画像がトリミングされて表示されるので、場合によってはとても残念な感じになります。 以下 OGP 画像を設定していないリポジトリのツイート。 (大胸筋しか目立ちません) これが OGP 画像を設定したリポジトリのツイートだと。。 素敵😆!! でも、いい感じの OGP 画像を作るのは、サイズ調整やら何やらなかなか大変ですよね。。 そんな手間を解消して、サクッと良い感じの OGP を生成してくれるサービスがあります。 GitHub Socialifyでの画像生成 それが GitHub 専

GitHub で職務経歴書を公開 & 継続的に改善していく環境を作ったのでその紹介です。 リポジトリはこちらです。 kawamataryo/resume なぜ職務経歴書を? 今のチームがとても好きなので転職の予定はないのですが、「安定しているときこそ職務経歴書をまとめておくべき。本当に職務経歴書が必要なときはメンタルが消耗していて書く余裕はない」という話を最近知り合いから聞き、それは確かにと思い書き初めました。どうせ書くなら何か面白いことをしたいなと GitHub に公開 & CI 環境の構築をやってみました。 機能紹介 🌐 GitHub Pages で Web ページとしての公開 Markdown + GitHub のファイルビューでも良いのですが、より見やすいほうが好ましいですよね。 GitHub の無料ホスティグ GitHub Pages を使って Web ページとして公開していま