styled-componentsからTailwind CSSに移行

概要

`styled-components`がメンテナンスモードとのことなので、他でも使っていた `Tailwind CSS`に乗り換える。  
https://opencollecti…

styled-componentsからTailwindCSSに移行する際に困ったこと


概要

最近Claudeとたくさんお話しして今更ながら感動している。  
色々試したくなっているので、最近良く聞くMCPについて調べる。

関連リンク

- https://modelcontextprotocol.io/introduction
- Tet…

MCPについて調べてみる


はじめに

最近、開発効率を上げるためのAIツールが次々と登場していますが、その中でも「Cline」というVSCode拡張機能が注目を集めています。  
Clineは、Anthropic社のAIアシスタント「Claude」をVSCode内で直接利用できるよう…

VSCode拡張機能「Cline」を試してみる


はじめに

生成AIが話題だが、どの様なものがあって使われているのかあんまり知らないので調べる。

有名な生成AIのサービス

- ChatGPT
- Claude
- Gemini
- DALL-E
- Midjourney
- Stable Diffus…

生成AIについて調べてみる


はじめに

最近`Next.js`を用いてアプリを作ることが多いのでより良いディレクトリ構成を考える。

TL;DR.

キレイに書けなかったのでgist行き。

ディレクトリ詳細

全体構成

`create-next-app`で吐き出した状態から`pag…

Next.jsでbetterなディレクトリ構成を考える


はじめに

Electron代替を目指すRust製FWのTauriがバージョン1.0になり、正式リリースされたので試してみる。

TL;DR.

今回作ったコード

前提条件

Rustがinstall済みであること。  
install方法は下記参照。  …

Tauriを試してみる


はじめに

linariaを使ってみたかったのでNextjsと一緒に使ってみる。

TL;DR

今回のコード

前提

`create-next-app --ts`でNext.jsのテンプレートが出来上がっている状態。

インストール

必要なライブラリの…

Next.js+linariaを試してみる


はじめに

a11yを意識し始めた今日このごろ。  
なんとなくこうした方が良いと言うのはわかるものの素人目線でしかないため、a11yを検証してくれるツールを導入し改善をできるようにしていきたい。  
そこで今回はどのようなツールがあり、使い勝手はどんなもん…

Reactでa11y検証ツールを試してみる


はじめに

jsで画像を扱おうと思い調べ直したのでまとめる。

TL;DR.

今回書いたコード

準備

Reactで試すのでプロジェクト作るところから。

```bash
$ npx create-react-app image-sample --tem…

JSで画像を扱うときのメモ


はじめに

Recoilが気になっていた今日このごろ。  
気になった時が触りどきなので試してみる回。

TL;DR.

コード

導入

```bash
$ npx create-react-app recoil-tutorial
$ cd recoil-…

Recoilことはじめ


はじめに

Angularがv11.2くらいでTailwindCSSに対応したそうなので試してみる回。  
前にちょろっと試したときは特にTailwindCSSの良さに気づけなかったので改めてちゃんと触る。

TL;DR.

コード

セットアップ

Ang…

Angular+TailwindCSSを試してみる


はじめに

tsで書いたコードのテストにはjestを使っている今日この頃。  
毎回雰囲気で使っていて事ある毎に調べているので改めてまとめておく。

TL;DR.

コード;

導入

yarn + typescriptの前提。  
それぞれの導入方法につい…

Jest再入門


はじめに

Next.jsでブログを作ってた今日このごろ。  
markdownからhtmlを生成するブログでamp対応したかったのだが、  
markdown内画像がimgタグに変換されてしまうのでamp-imgに変換する対応をした話。

TL:DR.

…

markdown内の画像をamp-img対応メモ


はじめに

Next.jsが流行っている今日この頃。  
AngularでもScullyやnxを使えば簡単にSSG+APIの構成が作れるのでは？と思ったので試してみる。

セットアップ

NestJS+Angularの準備

nxを使ってNestJS+Ang…

NestJS+Angular+Scullyを試してみる


はじめに

mdxが気になっていた今日このごろ。  
`Next.js`と一緒に使ってブログとか作れたら面白そうと思ったので、  
Next.jsでmdxを使えるところまで試してみる。

TL;DR.

- ソースコード

mdxとは

> MDX is a…

Next.jsでmdxを使ってみる


はじめに

ずっと触ろうと思って触っていなかったNextを触ってみる。
今回は基本チュートリアルに沿って進めいく。

TL;DR.

ソースコード

テンプレ作成

CLIで作成。

```bash
$ npx create-next-app next-sa…

Next.js事始め


はじめに

vue3.0が出てしばらくたった今日このごろ。  
試してみようみようと思って今まで放置していたので試してみる。  
ただvue3だけ試すのではなく、ついでにvuexとtailwindcssも試してみる。

TL;DR.

ソースコード

セット…

Vue3.0 + Vuex + tailwindcssを試してみる


はじめに

Rustが気になっている今日このごろ。  
最近Rustの基本的なことをやった
＋実践Rustプログラミング入門のWebアプリケーションの開発辺りまで読み終えたので、今回はActixWebを触ってみる。  
公式のチュートリアルを進めつつ、Ang…

ActixWeb+Angularを試してみる


はじめに

巷で話題になっているので気になったRustを触ってみる。  
実践Rustプログラミング入門の最初の方まで読み終わったので、  
Rust by Example 日本語版の序盤の方をを進めていく。  
後半については実際に使ってみたほうが早そうな…

Rust事始め


はじめに

前回Reactで使ってみたので今回はAngularでやってみる。

Firebaseの設定は前回と同じため、今回はプロジェクト作るところから始めていく。  
(Firebaseの設定については前回参照)

TL;DR.

今回作ったコード

実装…

Firebase Realtime DatabaseをAngularで使ってみる


はじめに

前回読み込みについてまとめたので、今回は書き込み周りについてまとめていく。  
基本的なFirebaseの設定については前回行っているので、今回は早速実装 & 必要な設定をしていく。

TL;DR.

コード

実装

FirebaseでGoog…

Firebase Realtime DatabaseをReactで使ってみる〜書き込み編〜


はじめに

Firebase Realtime DatabaseをReact使ってみた今日このごろ。  
備忘録も兼ねて使い方をまとめておく。

まとめていたら思ったより長くなったので、今回は読み込みまでやる。

今回はReact(クライアント側)の設定だけ…

Firebase Realtime DatabaseをReactで使ってみる〜読み込み編〜


はじめに

Electronが気になっていた今日このごろ。  
Angularを久しぶりに触りたいこともあり、Angular + Electronでアプリを作ってみようと思う。  
とりあえずAngular-CLIで作ったテンプレートをElectron使って…

Angular+Electron事始め


はじめに

Hooksを触り始めている今日この頃。  
雰囲気で色々触っていたけど、だんだん辛くなってきたのでちゃんとまとめていこうと思う。  
APIリファレンスを見ながら、簡単に使い方とサンプルをまとめておく。

TL;DR.

コード

useStat…

水無瀬のプログラミング日記

作業履歴の記事一覧

styled-componentsからTailwindCSSに移行する際に困ったこと