はてなブックマーク

はじめに T3 Stack でプログラミングに特化したタイピングゲーム「UnTyping」を作成しました。 この記事では、開発に使用した技術スタックについて触れながら、タイピングゲームのどの部分でどの技術を使ったのか解説していきたいと思います。 「UnTyping - エンジニア向けプログラミングタイピングゲーム　」とは？ 「UnTyping」とは、プログラミングを練習するために特化したタイピングゲームです。エンジニアを主なターゲットにしています。 そもそも、なぜ UnTyping を作ったのかというと、プログラミングのコードベースで遊べるタイピングゲームで「これは面白いな」と思えるものがなかったからです。 タイピングゲームといえば「寿司打」だと思いますが、寿司打ではプログラミングで頻出の記号や数字などが練習できません。そこで、プログラミングのコードベースで練習できるタイピングゲームはない

2.0 のポイント Content Collections: MD と MDX を型安全にするで Hybrid Rendering: SSG にするか SSR にするかをページ毎に選べるようにしたで（Next.js とか SvelteKit にあるやつ） エラーメッセージめっちゃ見やすくしたで HMR 改善したで Vite 4.0 に対応したで 新しいロードマップ公開したで 目玉は Content Collections と Hybrid Rendering 。 今回は Content Collections について書く。 Content Collections API Astro 2.0 は、現代の Web 開発において見落とされがちな問題を取り扱うことを目的としています：Markdown / MDX を扱うことは難しいです。 MD/MDX ってファイル大量になりがちで、管理コスト高い

この記事について この記事では、Next.js プロジェクトを 0 から立ち上げる際の手順を説明しています。 create-next-app で TypeScript の Next.js プロジェクトを作成し、Tailwind CSS を導入していきます。 またこの記事は、株式会社 UnReact のアドベントカレンダー 24 日目の記事です。 前提条件 Next.js に関する基礎的な知識がある Tailwind CSS に関する基礎的な知識がある Volta で Node.js / npm をインストールしている Volta についてはこちらの記事をご覧ください。（絶対に Volta が必要だというわけではありません。） Next.js プロジェクトの立ち上げ まずは、create-next-app でプロジェクトを立ち上げます。 Node.js と npm のバージョン確認 まず、N

Shopify の Tempates ファイルが刷新された 先日の Shopify Unite 2021 で大幅なアップデートがありました。 その目玉アップデートとして、トップページ以外でも動的セクションを使用することができる（通称：Section Everywhere）ようになりました！ この改変に伴い、Shopfiy の Tempates ファイルも刷新されたというわけです。 どう変わったのか では、具体的にどのように変更になったのでしょうか？ これまでのtemplateファイルは、.liquidのように Liquid ファイルで記述されていました。 これが、Section Everywhere の実装に伴い、JSON ファイルに変わりました。 当然、Liquid と JSON ではファイル構造が全く違いますので、書き方も大きく違います。 刷新された JSON ファイルの記述方法につい

概要 みなさんは React のプロジェクトでアイコンが必要な際はどのように実装していますか？ SVG の埋め込み？それとも Font Awesome？ 私は、主に「React Icons」という React 用のライブラリを使用しています。 React Icons は、豊富な種類のアイコンが揃っておりシンプルで使いやすいため、大変重宝しています。 この記事では、React Icons の紹介とその使い方について解説しています。 それでは、早速みていきましょう。 React Icons とは React Icons は、Font Awesome や Material、Codicons（VSCode のアイコン）などのアイコンを簡単に利用することができる React 用のライブラリです。 npm パッケージとして提供されているため、npm installを使用してプロジェクトに導入します。

Volta とは Voltaとは、JavaScript ツールマネージャーです。 タイトルでは Node.js のバージョン管理としていますが、 npm・yarn のバージョン管理も行うことができます。 公式サイトでは、「The Hassle-Free JavaScript Tool Manager（手間のかからない JavaScript ツールマネージャー）」と紹介されています。 チームの Node.js のバージョン管理を Volta に統一したところ非常に DX が上がり、Volta の恩恵を感じています。 この記事では、開発者の Volta 人口を増やすべく Volta の紹介と使用方法について解説していきたいと思います。 なかなか詳しく解説している日本語のソースはないので、公式ドキュメントを読んで適宜和訳しています。 公式ドキュメントを読むのがめんどくさいという人に読んでいただい

キースイッチは一番静かなピンク軸を使った。 キーキャップはJIS配列でカナ無しのものを使う。 とりあえずキーキャップを差し込んで動作確認した状態。 うちに転がってるMicroUSBのケーブルはどれも充電用だったせいで、データ通信できずにうまく動かなかった。 Kindle用のケーブルがMicroUSBかつデータ通信できるやつだったので事なきをえた。 Majestouchのキーキャップだと不足している部分がいくつかある。 CapsキーはControlキーとして使いたい PageUpとPageDownは一列目のキーとして使いたいので少し低めがいい Deleteキーは四列目のキーとして使いたいので少し高めがいい Jisplit89で用意された幅は少し狭いので、Majestouchの左シフトキーは収まらない テンキー用の2Uある0/Insキーは収まる Jisplit89の最下段真ん中の左右二つずつの

概要 この記事では、複数の GitHub アカウントを使い分ける方法について解説しています。 仕事とプライベートで GitHub アカウントを使い分けたいなと思っている方のお役に立てれば幸いです。 この記事の説明は、「すでに GitHub を使用していて新たに 2 つ目の GitHub アカウントを追加したい」というユースケースにおける説明になっています。 それでは頑張っていきましょう！ 動作環境 マシン: M1 Mac mini OS: macOS Big Sur シェル：zsh 5.8 秘密鍵・公開鍵を生成する 新しい GitHub アカウント用に秘密鍵・公開鍵を生成します。 ターミナルを起動し、以下のコマンドを順に実行します。