neko no ashiato

I started this blog of operation in October 2018 and design and develop mainly front-end using React and NestJS.

ChatGPT (OpenAI) を React チャット上で動かす

#OpenAI#ChatGPT#React

先日「カスタムフックを作ってみよう」と称したハンズオンを開催させていただいたことに伴い、そのチャレンジ企画として ChatGPT の導入方法について簡単に書かせていただきました。なお、その前提として今回は React チャットに対し、ChatGPT を組み込むことを目指しています。

Read More

Props に HTML Standard の型定義を利用する

#React#TypeScript

ComponentProps と HTMLProps の違いについて調べてみたので、その記録をば。

Read More

LINE と共に React Hooks をものにする

#React#TypeScript#FirebaseHosting#LIFF

LINE Developer コミュニティで React hooks × LINE Front-end Framework のハンズオンを企画するにあたって、当ブログではその補足を説明させていただきます。

Read More

LIFF v2.22.0 に更新する

#React#TypeScript#LIFF

先日 LIFF v2.22.0 がリリースされたので、その詳細 (プラガブル SDK) についてかいつまんで書かせていただいています。

Read More

Storybook v7 に更新する

#Storybook

先日 Storybook v7 がリリースされたので、そのマイグレーションについてかいつまんで書かせていただいています。

Read More

ChatGPT (OpenAI) を Flutter チャット上で動かす

#OpenAI#ChatGPT#Flutter

Flutter × Supabase ハンズオンに伴い、その延長戦の企画として簡単に書かせていただきました。

Read More

Vue Fes 2023 ティザーオープンの裏側

#Vue#Vue3#Nuxt#Nuxt3#VueFes

昨年に続いて Vue Fes 2023 Web サイトの技術をリードさせていただいております。先週迎えた初期ローンチに伴い、今回は早めに昨年との違いを触れさせていただきました。

Read More

STOPCOVID19 現況 データ更新終了のお知らせ

#Nuxt#Vue#Vue2#Vercel#COVID19

かれこれ 3 年前よりデータの更新を継続していた STOPCOVID19 現況 ウェブサイトのステータスをメンテナンスモードに格下げさせていただきます。

Read More

おはようエンジニア 金曜日 の取組改善

#Podcast#CMS

Twitter Spaces を利用した Podcast を開始以来初めて、その取組改善に注力しました。そのお気持ち表明と合わせて、今後目指すべきことを言語化させていただきました。

Read More

ChatGPT (OpenAI) を AWS Lambda / Slack 上で動かす

#OpenAI#ChatGPT#AWS#AWSLambda

ChatGPT (OpenAI) の API 利用開始に伴い、その導入方法について簡単に書かせていただきました。なお、その前提として今回は個人 Slack に対し、ChatGPT を組み込むことを目指しています。

Read More

2023年 抱負をば

#COVID19

明けましておめでとうございます、今年もゆるりと進めてまいります。

Read More

Web デベロッパーとして 2022 年に使った技術スタック

#Review

今年も振り返ります。昨年とはうって変わって「三年ぶり」尽くしな一年間を振り返ります。

Read More

Flutter コミュニティの 2022 年

#Review#Flutter#Advent-Calendar

この記事は Flutter Advent Calendar 2022 の 24 日目の記事です。今年の Flutter コミュニティを中心に振り返る。

Read More

Deep Dive into Rev Up 2022

#SvelteKit#RevUp#LINE#Advent-Calendar

今回、初めて Rev Up のウェブサイト製作に参画させていただいた経験と、そのついでに SvelteKit の話題にも触れさせていただきます。

Read More

Deep Dive into Vue Fes 2022

#Vue#Nuxt#NuxtBridge#VueFes#Advent-Calendar

Vue Fes 2022 ウェブサイトのリードを担当させていただいた経験と、そのついでに Nuxt 3 の話題も触れさせていただきます。

Read More

React で CSS-in-JS を書く - Emotion を利用する

#React#CSS-in-JS#Styled-Components#Emotion

プロジェクト内の勉強会でデザインシステムのワークショップ開催にあたって、初学者を対象に CSS-in-JS の基礎について書かせていただいています。

Read More

Nx v15 に更新する

#Monorepo#Nx

先日 Nx v15 がリリースされたので、その詳細についてかいつまんで書かせていただいています。

Read More

モノレポについて語らいました

#Monorepo#Nx#Turborepo

モノレポのチュートリアルについて、チーム勉強会での登壇に合わせ言語化したので、その記録を簡単に書かせていただきました。

Read More

カレンダーアプリで学ぶパッケージ開発

#Flutter

2022 年初めての Flutter ハンズオンとして、Zenn book 「カレンダーアプリで学ぶパッケージ開発」を共同執筆いたしました。

Read More

CloudFront における HTTP/3 有効化メモ

#AWS#AWSCloudFront#AWSS3

S3 と CloudFront 上に運用している各種プロフィールサイトで HTTP/3 を有効化したことをきっかけに、そのメモを簡単に記録させていただきます。

Read More

Google I/O 2022 と WWDC 2022 について語らいました

#GoogleIO#WWDC

PWA Night 40 にて、先日行われた Google I/O 2022 と WWDC 2022 の Recap と称して登壇させていただいた。

Read More

GAAD Japan 2022 Recap

scrap#A11Y

5 月第 3 木曜日の「世界的な」アクセシビリティを考える日を始め、アクセシビリティの祭典や TechFeed Conference など多くの知見が 5 月に発表されたので、その記録をば。

Read More

Nuxt v3 にあげる

#TypeScript#Vue#Nuxt#AWS#AWSAmplify

Nuxt v3 (RC) がリリースされたことに伴い、当時の Web 猫ブログをそれに更新した経験を簡単に書かせていただきました。

Read More

markuplint のルールをカスタマイズする

scrap#A11Y#React#TypeScript

毎週木曜の昼に内々でアクセシビリティ勉強会を開催しています、今回は markuplint ルールのカスタマイズを中心に記録しています。

Read More

LINE と共に React (Next.js) を学ぶ

#React#NextJS#TypeScript#FirebaseHosting#LIFF

React (Vite) × LINE Front-end Framework のハンズオンの延長線上として、当ブログでは Next.js を Vite の代わりに利用した際注意することを補足させていただきます。

Read More

手始めに markuplint を導入する

scrap#A11Y#HTML5#TypeScript#React

毎週木曜の昼に内々でアクセシビリティ勉強会を開催しています、今回は markuplint おさわり会と称して、実際に導入する際気を付けることを簡単に書かせていただいた。

Read More

React 18 へ移行するにあたって

#React#TypeScript

React 18 が正式リリースされたのを受け、簡単に記録させていただきました。

Read More

Axe Con 2022 Recap

scrap#A11Y#React#TypeScript

毎週木曜の昼に内々でアクセシビリティ勉強会を開催しています、今回は最新ニュース (Axe Con 2022) を中心に記録しています。

Read More

LINE と共に React (Vite) を学ぶ

#React#TypeScript#FirebaseHosting#LIFF

LINE Developer コミュニティで React (Vite) × LINE Front-end Framework のハンズオンを企画するにあたって、当ブログではその補足を説明させていただきます。

Read More

useContext の内側を理解する

scrap#React#TypeScript

とあるプロジェクトのエンジニア教育の一環で useContext の内部構造について解説する機会があってこの度、言語化いたしました。

Read More

WAI-ARIA Study Recap

scrap#A11Y

昨夜、開催された WAI-ARIA 勉強会のメモを記録しておきました。いま一度見直しておきたい気持ちです。

Read More

useEffect の内側を理解する

scrap#React#TypeScript

とあるプロジェクトのエンジニア教育の一環で useEffect の内部構造について解説する機会があってこの度、言語化いたしました。

Read More

jsx-a11y 用 ESLint プラグインを導入する

scrap#A11Y#React#TypeScript

eslint-plugin-jsx-a11y を導入する際に気を付けることを簡単に書かせていただいた。

Read More

useState の内側を理解する

scrap#React#TypeScript

とあるプロジェクトのエンジニア教育の一環で useState の内部構造について解説する機会があってこの度、言語化いたしました。

Read More

Web アクセシビリティ メモ

scrap#A11Y

Web アクセシビリティの個人的備忘用にメモに際し、チェックリストの作成なども行っている。

Read More

2022年 抱負をば

#COVID19

明けましておめでとうございます、今年もゆるりと進めてまいります。

Read More

Web デベロッパーとして 2021 年に使った技術スタック

#Review#COVID19

今年も振り返る。昨年に続いて 2021 年の最後に 2 年も続いた「コロナ禍」な 1 年間を振り返る。

Read More

Flutter コミュニティの 2021 年

#Review#FlutterKaigi#Flutter#FlutterMeetup#Advent-Calendar#COVID19

この記事は Flutter Advent Calendar 2021 の 25 日目の記事です。昨年以上に飛躍した 2021 年 Flutter コミュニティの活動を中心に振り返る。

Read More

来る React v18 に向けて

#React#NodeJS#Advent-Calendar#Pokemon-API

この記事は React Advent Calendar 2021 の 23 日目の記事です。来たる React v18 に向け 2021 年一年間の更新をまとめた、とりわけ初学者を対象にいま一度ご一読くださいませ!

Read More

Vite (Vue 3) で SG のすゞめ

#Vite#Vue#Vercel#Advent-Calendar

この記事は Vue Advent Calendar 2021 の 21 日目の記事です。平日毎朝 Twitter Spaces で雑談している内容を閲覧できるようにした「みんなで作るブログ」を製作・運用している経験について書かせていただいた。

Read More

Gatsby v3 に更新する

#Gatsby#React#Advent-Calendar

この記事は React Advent Calendar 2021 の 18 日目の記事です。今年春にリリースされた Gatsby v3 について書かせていただいた。

Read More

FlutterKaigi 2021 お疲れさまでした

#Flutter#FirebaseHosting#Hosting#A11Y#Web#Canvas#Advent-Calendar

この記事は Flutter Advent Calendar 2021 の 1 日目の記事です。昨日無事に終えた FlutterKaigi 2021 そのティザーサイトの製作裏話について、また Web アクセシビリティに取り組んだ経験を中心に今回書かせていただいた。

Read More

VSCodeCon JP 2021 サイトの内幕

#React#NextJS#TypeScript#GitHubPages#VSCode#Conference

この度 VS Code Conference JP 2021 ウェブサイト製作を担当、その技術的側面にアプローチして今回は書かせていただいた。

Read More

GitHub issues を CMS として扱う

#Vite#TypeScript#Vue#Vue3#Podcast#CMS

平日の毎朝 Twitter Spaces で雑談している技術情報を GitHub issues に書き留めている。その際 GitHub issues を CMS として扱うことのできるメリットについて書かせていただいた。

Read More

Next.js (SSG) でサブパスの 404 を回避した対応

#NextJS#React#Shell#Hosting#AWS#AWSS3

Next.js (SSG) でサブパスが 404 になった際に取り組んだことを簡単に書かせていただいた。

Read More

家計簿アプリの null-safety 対応

#Flutter#Dart#Riverpod

先週土曜日 (2021/10/02) 開催の Flutter Handson Osaka 9 で製作した家計簿アプリ。その null-safety 対応、また Chart 系ライブラリの変更も行ったので簡単に書かせていただいた。

Read More

Next.js (SSG) でハマったロケール対応

#NextJS#React#TypeScript#GitHubPages#Hosting#SSG

Next.js (SSG) でロケール対応した際に少々ハマった点が存在したので簡単に書かせていただいた。

Read More

SWR v1 リリース - ポケモンと共に React を学ぶ

#React#TypeScript#Pokemon-API

SWR v1 リリースにあたって注意することを簡単に記録しておきました。

Read More

Next.js (SSG) を GitHub Pages で利用する際に注意すること

#NextJS#React#SSG#GithubPages

Next.js の SSG を GitHub Pages でハマる箇所が多々存在するため今回書かせていただいた。

Read More

IDE のエクステンションに何を使っていますか

#IntelliJ#VSCode

VSCode や IntelliJ を始め、日常的に使っているエディタのエクステンション (拡張機能) 皆さまは何を使っていますか。

Read More

TypeScript ベースの VuePress v2 (alpha) に更新する

#Vue#VuePress#TypeScript#YouTube

先日 VuePress v2 (alpha) がリリースされたので、その詳細についてかいつまんで書かせていただいています。

Read More

ポケモンと共に React を学ぶ

#React#TypeScript#Pokemon-API#Vercel#VuePress

チームメンバー並びに社内のエンジニアの力を底上げするため React 教育にあたって、今回作成したドキュメントサイトを補足する内容となっています。

Read More

オレオレ自己署名 SSL 証明書を作る

#SSL#HTTPS#OpenSSL#mkcert

オレオレ自己署名 SSL 証明書を Web ブラウザに信用させるため OpenSSL 並びに mkcert を利用して HTTPS 化を果たす方法を書いた。

Read More

IE を供養する

#Web#Browsers

Microsoft 公式直々に IE サポート終了のアナウンスがあったことを祈念して簡単に書いた。

Read More

lit-element を使った簡易 PWA アプリ

#LitElement#PWA#TypeScript

これまでと趣向を変えて LitElement の話。手元で現在の日付並びにその週が見てとれる簡易 PWA アプリを製作しました。

Read More

プロフィールサイトのドメインを移管しました

#AWS#AWSCloudFront#AWSS3#AWSRoute53#React#Gatsby#Hosting#HTTPS

当ブログとは別に製作・運用しているプロフィールサイトのドメインを移管した話について書きました。

Read More

Notion をひとつのデータベースとして扱う

#TypeScript#Notion#Podcast#CMS

先日 Public Beta となった Notion API を軽く試したので簡単に記録しています。

Read More

コミュニティハンズオンにおける DevRel のすゝめ

#DevRel#Flutter#Vue#VuePress#YouTube

DevRel/Online 3 にて Flutter Japan User Group (Osaka) のハンズオン企画でやったこと について喋らせていただきました。

Read More

Cloudflare Pages を使ってみる

#Cloudflare#Vercel#Netlify#Hosting#SSG

静的サイト (SSG) のデプロイに Cloudflare Pages を使う機会があったので簡単に書いた。

Read More

Riverpod (Flutter hooks) 要点をまとめました

#Flutter#Dart#Riverpod

Flutter Handson Osaka 8 で Riverpod を扱ったのでこれを使う際の要点を簡単に書いた。

Read More

Nuxt の Full Static Generation とは

#Vue#Nuxt

動的ルーティングを導入したページ遷移の場面でその影響を受けたのを機に Nuxt の Full Static Generation について簡単に書いておく。

Read More

Management API 使ってバックアップを取る

#Contentful#TypeScript#CMS

API ベースの CMS である Contentful において Git でコンテンツを管理する方法を書きました。

Read More

今こそサポートしたい JAWS DAYS 2021

#AWS#COVID19

JAWSUG 主催、JAWSUG 最大のイベント JAWS DAYS 2021 に初めて「個人スポンサーとして」協賛・参加させていただきます。

Read More

wasm-pack を使う

scrap#Rust#Vue#Web-Assembly

Web Assembly の wasm-pack について触れた時の記録をば。

Read More

2021年 抱負をば

#COVID19

明けましておめでとうございます、今年もゆるりと進めてまいります。

Read More

Web デベロッパーとして 2020 年に使った技術スタック

#Review#COVID19

2020 年の最後に、この「コロナ禍」な 1 年間を振り返る。

Read More

Flutter コミュニティの 2020 年

#Review#Flutter#FlutterMeetup#Advent-Calendar#COVID19

コロナ禍だった 2020 年 Flutter Osaka のコミュニティ活動を通して「オンライン開催」について考える。

Read More

Next.js (SSG) を使ったリーディングメディア開発

#React#Advent-Calendar#Google-Apps-Script#Google-Clasp#AWS#AWSCloudFront#AWSS3#GCP#Hosting#Vercel#NextJS#SSG

この記事は JAMStack Advent Calendar 2020 の 24 日目の記事です。Next.js (SSG) を使った JAMStack なメデイアを実現した話について書きました。

Read More

CloudFrontでサブパスを設定する

scrap#AWS#AWSCloudFront

自身のプロフィールサイトを多言語化させた対応に伴い、CloudFrontの更新作業が入ったので簡単に。

Read More

Copilotに触れる前に ecs-cli を復習

scrap#AWS#AWSCopilot#AWSECS

copilot-cliを使い始める前に、ここでecs-cliを復習する

Read More

Flutterで状態管理を始める 2020年版

#Flutter#Advent-Calendar#Dart

この記事は Flutter Advent Calendar 2020 の 1 日目の記事です。初心者向けにFlutterで状態管理 (ChangeNotifier) を始める話を書きました。

Read More

Slackを中心に世界は廻っている

#Slack#Google-Apps-Script#Google-Clasp

VR 勉強会 #3 (#study_in_vr) で登壇させていただきました。YouTube Live上でお話できなかった、GitHub API v4 をどのように使っているかなど、皆さまの参考になればと思います。

Read More

もっと身近にやってたPWA

#TypeScript#Vue#AWS#AWSAppSync#PWA

目下 Next.js + AppSync と言うサーバレスアーキテクチャの下で進めるお仕事で Auth0 を採用したりと、これまでのPWAの活動録を登壇させていただきました。

Read More

Transitionを実践的に使う

#Vue#TypeScript#CSS

VueでTransitionを使うにあたって少しハマった場面に遭遇、今年最初の登壇として yumemi.vue #5 で喋らせていただきました。

Read More

2020年はVueをTSXで書く?

#Vue#TypeScript#Advent-Calendar

この記事は Vue Advent Calendar 2019 の 24 日目の記事です。Composition API採用後、VueをTSXで書く選択肢が生まれやすくなるため、簡単にスタートアップできることを書きました。

Read More

Composition API 勘所など

#Vue#TypeScript

来たるVue3に向けじわじわと盛り上がりを見せるComposition API。この導入にあたって気付いたこと、今後に活かしたいことを軽く記録しておきます。

Read More

Web デベロッパーとして 2019 年に使った技術スタック

#Review

自身が主催、参加する年内最後のミートアップ v-kansai #12 の機会に 2019 年の振り返りをさせていただきました。

Read More

アドベントカレンダーを自作する

#Vue#Advent-Calendar#Nuxt#CSS

この度アドベントカレンダーの専用ページを自作。まずは中核の存在であるカレンダーをGridレイアウトを使って作ります。

Read More

Vue-CLI v4 に更新

#Vue#Vue-CLI

Vue-CLI v4 がリリースされたことに伴い、合わせておしごとの場面でそれに上げた経験を簡単に書かせていただいた。

Read More

気にせず MPA + TS として導入しよう

#CakePHP#Vue-CLI#Vue

Vue + MPA で構成されるWebアプリにTSを導入するためにこれだけは最低限守っていることなどを話しました。

Read More

Jest初心者がこれをやった

#Jest#TypeScript#Vue-CLI#Vue

Jestを始めるにあたって Tipsを記録、色々とハマったことも軽く共有します。

Read More

無限スクロールを実現する

#Nuxt#Contentful#TypeScript#Vue

とある管理画面の機能で、ページネーションから無限スクロールを使うような変更があったので軽く書いた。

Read More

MPAとしてVueを導入する

#CakePHP#Vue-CLI#Vue

WebpackベースのVue CLIを今回初めて採用、サーバサイドにVueを組み込む際に必要だったことを軽く記録します

Read More

外部リンクの表現をリッチにする @microlink/vanilla

#Nuxt#Contentful#TypeScript

@microlin/vanillaを使って、外部リンクの表現をリッチにしました。

Read More

dev ドメインに移行しました

#AWS#AWSECS#AWSFargate#Nuxt#Vue#Hosting#Netlify#HTTPS

この度 dev ドメインが解禁されました。機会あって webneko.dev を取得しています。

Read More

Web猫ブログ (Nuxt) を TypeScript 化しました

#Nuxt#TypeScript#Contentful

Nuxt 3 より本格サポート予定の TypeScript を当ブログに導入、今回はその導入編を簡単に書いた。

Read More

プレゼンテーションスライドもVUEで作っちゃう話

#Vue#Advent-Calendar

Vue.js Advent Calendar 2018 21日目の記事です。

Read More

vuex設計やmarkdownのパースについて

#Nuxt#Contentful

Web猫ブログ (Nuxt) の UI/UX を向上させました。検索機能、ページネーション、Markdown 部分のスタイル修正などについて簡単に記録しておきます。

Read More

Web猫ブログ (Nuxt) のインフラ周り

#Vue#Nuxt#AWS#AWSECS#AWSFargate#CMS

当ブログの運用は ECS コンテナに乗せた AWS Fargate を採用している、その経緯と構築方法について記録した。

Read More

NuxtとContentfulで簡単ブログ生活

#Nuxt#Contentful#CMS

Headless CMSの一つであるContentfulを使って、めでたくブログ活動を開始します!

Read More

VuePressをブログとして使う

#Vue#VuePress#CMS

ドキュメント制作を容易に実現する VuePressをブログとして使います。

Read More

初めて登壇に挑戦

#Vue#Parcel

Parcelをモジュールバンドラに使って、さくっとプロフィールサイトを制作。ちなみにご縁があって初登壇させていただきました!

Read More