Web便利ツール集

ツール一覧 / ITタイピングゲーム

ITエンジニア専用 ターミナル風タイピングゲーム（解説付き）

Git・Linuxコマンドやコードスニペットなど記号だらけのお題で、60秒間のタイピング速度を測定。お題の下に意味が表示されるので、打ちながらコマンドの使い方も学べます。

guest@tools-app: ~/it-typing-game

$ press Space to start

  • # 日本語入力（IME）をOFFにして、半角英数で入力してください
  • # Esc キーでプレイを中断できます
  • # PCなどの物理キーボードでのプレイを推奨します

遊び方

  1. 1. 日本語入力をOFFにする： 半角英数モードにしてから始めます。IMEがONのままだと画面に警告が表示されます。
  2. 2. スペースキーでスタート： 制限時間は60秒。画面中央のお題を左から順に入力します。緑のブロックカーソルが次に打つ文字です。
  3. 3. 解説を読みながら打つ： お題のすぐ下に、そのコマンドやコードの意味が表示されます。1問打ち終えると次のお題に進みます。 ミスタイプすると画面が揺れて知らせますが、正しいキーを押すまで先には進みません。
  4. 4. 結果を確認・シェア： 時間切れになるとスコア・ミスタイプ数・正確率・ランクが表示されます。「Xでシェア」で結果を投稿できます。

ランクの目安

S
シニア級（300打以上）記号まじりのコードもよどみなく打てるレベル。ペアプロで画面共有しても速さが際立ちます。
A
ミドル級（200〜299打）日常のコーディングで困らない速さ。記号の位置を見ずに打てると S が見えてきます。
B
ジュニア級（120〜199打）基本は身についています。よく使う記号（- / " { } など）の運指を固めると伸びます。
C
初心者（119打以下）まずは正確さ優先で。コマンドの意味を読みながら繰り返すと、知識と速さが一緒に身につきます。

収録しているお題（全80問）

Git・Linux・HTML/CSS・JavaScript・DevOps/SQLの実践的なコマンドやコードを収録しています。出題順はランダムで、ページを開いている間は全問を一巡するまで同じお題は出ません。

Git
git status
作業ツリーとステージングエリアの状態を表示する。変更・追加・未追跡のファイルを確認できる。
git add -A
新規・変更・削除を含むすべての変更をステージング（次のコミット対象に）する。
git commit -m "fix: typo"
-m でコミットメッセージを指定してコミットする。"fix:" は Conventional Commits の書き方。
git checkout -b feature/login
-b で新しいブランチ feature/login を作成し、そのブランチに切り替える。
git log --oneline --graph
コミット履歴を1行ずつ表示し、ブランチの分岐・合流をアスキーアートのグラフで表示する。
git push -u origin main
main をリモート origin へ送信し、-u で追跡先（upstream）を設定する。以後は git push だけで送れる。
git pull --rebase origin main
リモートの main を取り込む際、マージコミットを作らず自分のコミットを最新の上に積み直す。
git reset --soft HEAD~1
直前のコミットを取り消す。--soft なので変更内容はステージされた状態で残る。
git diff --staged
ステージ済み（次にコミットされる）変更と、最新コミットとの差分を表示する。
git stash pop
git stash で一時退避した変更を作業ツリーに戻し、退避リストから削除する。
git branch -d feature/login
マージ済みのローカルブランチ feature/login を削除する。未マージの場合は拒否される（強制削除は -D）。
git merge --no-ff develop
develop を現在のブランチに取り込む。fast-forward できる場合でも必ずマージコミットを作り、履歴に合流点を残す。
git cherry-pick a1b2c3d
指定したコミット a1b2c3d の変更だけを、現在のブランチに新しいコミットとして適用する。
git remote -v
登録されているリモートの名前と、fetch・push に使うURLの一覧を表示する。
git restore --staged index.html
index.html のステージングを取り消す（git add を取り消す）。作業ツリー上の変更はそのまま残る。
git tag -a v1.0.0 -m "release"
注釈付きタグ v1.0.0 をメッセージ付きで作成する。リリースのバージョン管理に使う。
Linux
ls -la /var/log
/var/log の中身を、隠しファイル(-a)も含めて権限・所有者・サイズなどの詳細(-l)付きで一覧表示する。
mkdir -p src/components/ui
-p で途中の親ディレクトリもまとめて作成する。既に存在していてもエラーにならない。
rm -rf ./node_modules
node_modules を中身ごと(-r)確認なしで強制的に(-f)削除する。パスの打ち間違いには要注意。
chmod 755 deploy.sh
所有者は読み書き実行(7)、グループとその他は読み取りと実行(5)を許可する。スクリプトの実行権限付与によく使う。
grep -rn "TODO" ./src
src 以下を再帰的(-r)に検索し、TODO を含む行を行番号(-n)付きで表示する。
tail -f /var/log/nginx/access.log
ログファイルの末尾を表示し、-f で追記されるたびにリアルタイムで出力し続ける。
ps aux | grep node
全プロセスの一覧をパイプ(|)で grep に渡し、node を含むプロセスだけに絞り込む。
find . -name "*.log" -mtime +7 -delete
カレント以下から最終更新が7日より前の .log ファイルを探して削除する。古いログの掃除に使う。
echo $PATH
環境変数 PATH（コマンドを探しに行くディレクトリの一覧）の値を表示する。$ は変数の展開。
export NODE_ENV=production
環境変数 NODE_ENV を production に設定し、このシェルから起動する子プロセスにも引き継ぐ。
ssh -i ~/.ssh/id_ed25519 user@192.168.0.10
-i で秘密鍵ファイルを指定し、192.168.0.10 のサーバーに user としてSSH接続する。
tar -czvf backup.tar.gz ./data
data ディレクトリを gzip 圧縮(-z)したアーカイブを作成(-c)する。-v で処理中のファイルを表示、-f で出力ファイル名を指定。
kill -9 $(lsof -t -i:3000)
ポート3000を使っているプロセスのPIDを lsof で調べ、$( ) で受け取って強制終了(-9)する。
cp -r ./src ./backup
src ディレクトリを中身ごと(-r)コピーして backup を作る。
df -h
ディスクの使用量と空き容量を、GやMなど人が読みやすい単位(-h)で表示する。
du -sh ./*
カレントディレクトリ直下の各ファイル・フォルダの合計サイズ(-s)を読みやすい単位(-h)で表示する。容量を食っている場所探しに使う。
HTML/CSS
<meta name="viewport" content="width=device-width, initial-scale=1">
スマホでページを端末の画面幅に合わせて表示させるための指定。レスポンシブデザインに必須。
<a href="/about" target="_blank" rel="noopener">About</a>
リンクを新しいタブで開く。rel="noopener" で開いた先のページから元のページを操作されるのを防ぐ。
<img src="logo.png" alt="Logo">
画像を表示する。alt は画像が表示できないときやスクリーンリーダーで読み上げられる代替テキスト。
display: flex; justify-content: center;
要素をフレックスボックスにし、子要素を主軸（横並びなら横方向）の中央に配置する。
.card:hover { opacity: 0.8; }
.card クラスの要素にマウスを乗せたとき(:hover)だけ、不透明度を80%にする。
@media (max-width: 768px) { .nav { display: none; } }
画面幅が768px以下のときだけ .nav を非表示にするメディアクエリ。スマホ向けの切り替えに使う。
<!DOCTYPE html>
この文書がHTML5であることを宣言する。先頭に書くことで、ブラウザが互換モードではなく標準モードで描画する。
<link rel="stylesheet" href="style.css">
外部CSSファイル style.css を読み込む。通常は head 内に書く。
<script src="app.js" defer></script>
app.js を読み込む。defer によりHTMLの解析を止めずにダウンロードし、解析完了後に実行する。
<input type="email" required>
メールアドレス入力欄を作る。形式チェックが働き、required で未入力のまま送信できなくなる。
<button type="submit">Send</button>
フォームを送信するボタン。form 内の button は type を省略すると submit 扱いになるため、明示しておくと安全。
margin: 0 auto;
上下の余白を0、左右を auto にして、幅が決まっているブロック要素を水平方向の中央に寄せる。
grid-template-columns: repeat(3, 1fr);
CSSグリッドで、残りの幅を均等に分けた(1fr)列を3つ作る。カード一覧のレイアウトによく使う。
position: absolute; top: 0; left: 0;
最も近い位置指定済み（relative など）の祖先要素を基準に、その左上に要素を配置する。
:root { --main-color: #0ea5e9; }
CSS変数（カスタムプロパティ）を定義する。var(--main-color) でどこからでも参照でき、テーマ色の一元管理に便利。
box-sizing: border-box;
width / height に padding と border を含めて計算させる。レイアウト崩れを防ぐ定番のリセット指定。
JavaScript
const sum = (a, b) => a + b;
2つの引数を足して返すアロー関数を定数 sum に代入する。{ } と return を省略した短い書き方。
const res = await fetch("/api/users");
fetch でAPIにHTTPリクエストを送り、await でレスポンスが返るまで待ってから res に代入する。
arr.filter((x) => x > 0).map((x) => x * 2)
配列から正の数だけを残し(filter)、それぞれを2倍にした新しい配列を作る(map)。メソッドチェーンの例。
console.log(`Hello, ${name}!`);
テンプレートリテラル（バッククォート）の ${ } に変数を埋め込んで文字列を作り、コンソールに出力する。
document.querySelector("#app")
CSSセレクタで要素を検索し、最初に一致した要素を返す。#app は id="app" の要素。
const { id, name } = user;
分割代入。オブジェクト user の id と name プロパティを、同名の定数として取り出す。
try { JSON.parse(str); } catch (e) { console.error(e); }
JSON文字列の解析を試み、形式が不正で例外が発生したら catch でエラー内容を出力する。
export default function App() {}
App 関数をモジュールのデフォルトエクスポートにする。Reactのコンポーネント定義でよく見る形。
import { useState } from "react";
react モジュールから useState を名前付きインポートする。
const [count, setCount] = useState(0);
Reactの状態（state）を初期値0で作成する。count が現在の値、setCount が更新用の関数。
useEffect(() => { fetchData(); }, []);
依存配列を空([])にして、コンポーネントの初回表示時に一度だけ fetchData を実行する。
const copy = { ...obj, name: "new" };
スプレッド構文で obj をコピーしつつ、name だけを上書きした新しいオブジェクトを作る。元の obj は変更されない。
const value = input ?? "default";
input が null か undefined のときだけ "default" を使う（Null合体演算子）。0 や空文字はそのまま採用される点が || と異なる。
const email = user?.profile?.email;
オプショナルチェーン。途中の user や profile が null / undefined でもエラーにならず、undefined を返す。
items.reduce((acc, x) => acc + x.price, 0)
配列の各要素の price を、初期値0から順に足し合わせて合計を求める。
type User = { id: number; name: string };
TypeScriptの型エイリアス。id（数値）と name（文字列）を持つオブジェクトの型に User という名前を付ける。
DevOps/SQL
npm install -D typescript
TypeScript を開発時のみ使う依存関係(-D = devDependencies)としてインストールする。
npx create-next-app@latest my-app
インストールせずに最新版(@latest)の create-next-app を実行し、my-app という Next.js プロジェクトを作成する。
docker run -d -p 8080:80 nginx
nginx コンテナをバックグラウンド(-d)で起動し、ホストの8080番ポートをコンテナの80番に転送(-p)する。
docker compose up -d --build
compose.yaml に定義したサービス群を、イメージを再ビルド(--build)してからバックグラウンドで起動する。
SELECT * FROM users WHERE id = 1;
SQLで users テーブルから id が1の行の全カラム(*)を取得する。
npm run build
package.json の scripts に定義された build コマンドを実行する。
npm ci
package-lock.json の内容どおりに依存関係をクリーンインストールする。CIや本番ビルドで再現性を保つために使う。
docker ps -a
停止中のものも含めて(-a)、すべてのコンテナの一覧を表示する。
docker build -t my-app:latest .
カレントディレクトリ(.)の Dockerfile からイメージをビルドし、my-app:latest という名前とタグ(-t)を付ける。
docker exec -it web /bin/sh
起動中のコンテナ web の中でシェルを対話的(-it)に起動する。コンテナ内の調査に使う。
kubectl get pods -n production
Kubernetes の production 名前空間(-n)にある Pod の一覧と状態を表示する。
terraform plan -out=tfplan
インフラに加わる変更内容を事前に計算して表示し、その計画を tfplan ファイルに保存する（terraform apply tfplan で適用）。
aws s3 sync ./out s3://my-bucket --delete
ローカルの out フォルダを S3 バケットに同期する。--delete でローカルに無いファイルはバケットからも削除する。静的サイトのデプロイに使う。
curl -X POST -d 'id=1' localhost:3000/api
ローカルのAPIに POST リクエストを送り、-d でフォーム形式（id=1）のデータを送信する。
INSERT INTO users (name) VALUES ('Taro');
SQLで users テーブルの name 列に 'Taro' を持つ新しい行を追加する。
UPDATE users SET name = 'Hanako' WHERE id = 1;
SQLで id が1の行の name を 'Hanako' に更新する。WHERE を書き忘れると全行が更新されるので要注意。

記号タイピングが速くなるコツ

セキュリティについて（ブラウザ完結）

本ゲームはお使いのブラウザ上のJavaScriptのみで動作し、入力したキーやスコアが外部のサーバーへ送信・保存されることはありません。 キー入力はゲーム画面の判定にのみ使用し、記録もしていません。Xへのシェアはボタンを押したときにだけ、投稿画面を新しいタブで開きます。

よくある質問

入力したキーやスコアはサーバーに送信されますか？
送信されません。お題の表示・入力判定・スコア計算はすべてブラウザ内で完結しています。Xへのシェアは、ボタンを押したときにだけ結果の文章を入力済みの投稿画面を開くもので、自動で投稿されることはありません。
キーを押しても入力されません。
日本語入力（IME）がONになっていると入力を受け付けません。半角英数に切り替えてください（Windowsは「半角/全角」キー、Macは「英数」キー）。また、本ゲームは物理キーボードでのプレイを想定しているため、スマートフォンのソフトウェアキーボードには対応していません。
スコアとランクはどう計算していますか？
スコアは60秒間に正しく入力できた文字数（正打数）です。ミスタイプは減点しませんが、正確率として結果画面に表示します。ランクはスコアで判定し、300打以上でS（シニア級）、200打以上でA（ミドル級）、120打以上でB（ジュニア級）、それ未満でC（初心者）です。
何度か遊ぶと同じお題が出てきますか？
ページを開いている間は、前回までに出題しなかったお題から順に出題するため、全80問を一巡するまで同じお題は出ません。1回のプレイで出題されるのは、目安としてBランクで約5問、Sランクで約11問です。ページを再読み込みすると出題順はリセットされます。
大文字・小文字やスペースも区別されますか？
はい。お題と1文字ずつ完全に一致したときだけ正打になります。スペースも1文字として数えるため、コマンドとオプションの間の空白も正確に入力してください。

あわせて使いたいツール

高機能JSON整形＆可視化ツール
JSONの整形・圧縮とリアルタイム構文チェック。折りたたみできるツリー表示で構造を把握し、オブジェクトの配列はCSVでダウンロードできます。
パスワード生成ツール
文字数・文字種を指定して、安全なパスワードを最大50個までブラウザ内で一括生成。
QRコード生成＆URLビルダー
UTM計測URL・フリーテキスト・Wi-Fi接続情報からQRコードを生成。PNG/SVGダウンロード対応。
画像圧縮・リサイズ＆プライバシー加工ツール
画像のリサイズ・JPEG/WebP圧縮に加え、クリックした場所をぼかし・モザイクでプライバシー加工。動くGIFもアニメーションを維持したまま処理できます。