はてなブックマーク

はじめに 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 の紹介と使用方法について解説していきたいと思います。 なかなか詳しく解説している日本語のソースはないので、公式ドキュメントを読んで適宜和訳しています。 公式ドキュメントを読むのがめんどくさいという人に読んでいただい

Majestouchのキーキャップだと不足している部分がいくつかある。 CapsキーはControlキーとして使いたい PageUpとPageDownは一列目のキーとして使いたいので少し低めがいい Deleteキーは四列目のキーとして使いたいので少し高めがいい Jisplit89で用意された幅は少し狭いので、Majestouchの左シフトキーは収まらない テンキー用の2Uある0/Insキーは収まる Jisplit89の最下段真ん中の左右二つずつのキーはスペースとして使いたい 次のバージョンがあるなら、2.25Uのキーが入るようになるとありがたい これらの課題を解決するためにWASD Keyboardsでキーキャップを購入。 ここなら、キーキャップに刻印する文字や、そのレイアウトをかなり自由に選べる。 WASDの1R 2.5Uはスタビライザーのためにソケットが3つあって、左右の穴にキースイッ

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

このエントリは、日本CTO協会が公開したデジタル庁の創設に向けた提言について私の意見をまとめたものです。 デジタル庁とは何か まずデジタル庁はまだ存在していない組織で、今後作られる予定のものです。 これが、どのようなものであるかは、以下の記事を一通り読むことでおおよそ理解できます。 デジタル庁について 過去の失敗に学ぶ デジタル庁のあるべき姿とは? 提言で主張して欲しいこと もしデジタル庁が発足するとして、デジタル庁が持つべき役割と責任範囲はどんなものになるのでしょうか? 政府や行政の抱えるどのような問題がデジタル庁によって解決し、それによって国民生活はどう改善するのでしょうか? それらを考えるにあたって、どのような理念でその組織は設立されるのでしょうか? CTO協会の皆さまにおかれましては、その理念について整理して欲しいと考えます。 提言に期待する基本的な方向性 DXやデジタル化というも