30 Seconds of Codeで、コピペエンジニアを卒業した話

はじめに

結論から言うと、30 Seconds of Codeは「短いコードでこんなことできるのか」という発見の宝庫です。

GitHubで126,000スター以上、8年以上の歴史を持つこのプロジェクト。名前の通り「30秒で理解できるコード」をコンセプトに、JavaScript、CSS、React、Node.jsなど幅広い分野のスニペットを提供しています。

正直なところ、最初は「よくあるコードサンプル集でしょ」くらいに思っていたんですよ。でも実際に使い始めたら、StackOverflowをひたすら検索していた時間が大幅に減りました。30代になって思うのは、車輪の再発明をしている時間がもったいないということ。このリソースはそれを解決してくれます。

30 Seconds of Codeとは

30 Seconds of Codeは、Angelos Chalarisさんが運営するコーディング記事のキュレーションサイトです。

「Coding articles to level up your development skills」がキャッチコピーで、開発スキルを向上させるための短いコード例と解説を提供しています。

現在の最新バージョンはv14.0.0（2025年5月リリース）で、CC-BY-4.0ライセンスのオープンソースとして公開。313人以上のコントリビューターが開発に参加しており、10,000以上のコミットがあります。

特徴・メリット

1. 30秒で理解できるシンプルさ

これ、意外と重要なんですけど、一つ一つのスニペットが「30秒で理解できる」ように設計されています。長々としたチュートリアルを読む時間がない時でも、サッと確認してすぐ使える。

時短になる。これに尽きます。

2. 幅広いカテゴリ

提供されているコレクションは多岐にわたります。

• JavaScript: 配列操作、オブジェクト操作、DOM操作など
• CSS: レイアウト、アニメーション、レスポンシブデザインなど
• JavaScript アルゴリズム: ソート、検索、データ構造など
• React Hooks: カスタムフック、状態管理パターンなど
• Node.js: ファイル操作、HTTP、ユーティリティなど
• Git: コマンド集、ワークフローのベストプラクティスなど
• JavaScript インタビュー問題: 面接対策にも使える

個人的には、アルゴリズム系が特に役立っています。

3. 検索しやすいUI

公式サイトはキーボードショートカットに対応しています。

• Ctrl/Cmd + K: 検索
• Ctrl/Cmd + H: ホームに戻る
• Ctrl/Cmd + J: コレクション一覧

開発者向けに作られているので、この辺のUXが良い。

4. コピペしてすぐ使える

各スニペットはそのままコピペして使えるように設計されています。依存関係なし、外部ライブラリ不要のピュアな実装が多い。

「とりあえず動くコード」がすぐ手に入るのはコスパ的に最高。

5. 解説付きで学習になる

単なるコードの羅列ではなく、なぜそう書くのか、どういう仕組みで動くのかの解説がついています。コピペするだけじゃなく、理解して使えるようになる。

使い方

公式サイトでの閲覧

サイトURL: https://www.30secondsofcode.org/

1. トップページにアクセス
2. 興味のあるカテゴリ（JavaScript、CSSなど）を選択
3. スニペット一覧から必要なものをクリック
4. コード例と解説を確認してコピー

これだけ。シンプル。

GitHubリポジトリ

GitHub: https://github.com/Chalarangelo/30-seconds-of-code

スターを付けておくと、自分のGitHubからすぐアクセスできて便利です。

基本的な使い方（コード例）

実際によく使われるスニペットの例をいくつか紹介します。

配列の重複を削除

const uniqueArray = arr => [...new Set(arr)];

// 使用例
uniqueArray([1, 2, 2, 3, 4, 4, 5]);
// => [1, 2, 3, 4, 5]

Setを使った一行実装。これ、意外と毎回書き方を忘れるんですよね。

配列をシャッフル

const shuffleArray = arr => arr.sort(() => Math.random() - 0.5);

// 使用例
shuffleArray([1, 2, 3, 4, 5]);
// => [3, 1, 5, 2, 4] (ランダム)

簡易的なシャッフル。厳密なランダム性が必要な場合はFisher-Yatesアルゴリズムを使うべきですが、大体これで十分。

深いコピー

const deepClone = obj => JSON.parse(JSON.stringify(obj));

// 使用例
const original = { a: 1, b: { c: 2 } };
const cloned = deepClone(original);

構造化クローンが使えない環境での定番。関数やundefinedは消えるので注意が必要ですが、単純なデータなら問題なし。

debounce関数

const debounce = (fn, ms = 300) => {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => fn.apply(this, args), ms);
  };
};

// 使用例
const handleSearch = debounce((query) => {
  console.log('Searching:', query);
}, 500);

検索入力とかスクロールイベントで必須のパターン。lodashを入れるほどでもない時に重宝します。

要素が画面内にあるか判定

const isInViewport = el => {
  const rect = el.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
};

// 使用例
isInViewport(document.querySelector('.target'));

Intersection Observer APIを使う方がモダンですが、シンプルな判定ならこれで十分。

CSSスニペット例：テキストの省略

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

一行テキストの省略。よく使うのに毎回ググってた自分が恥ずかしい。

実践的なユースケース

1. 日常の開発作業

「配列から特定の条件の要素を抽出したい」「日付のフォーマットを変えたい」みたいな、日常的に発生するちょっとした処理。毎回ゼロから書くのは非効率。

30 Seconds of Codeで検索 → コピペ → 必要に応じてカスタマイズ

この流れで開発速度が上がります。

2. コードレビューの参考

チームメンバーのコードをレビューする時、「もっとシンプルに書けるよ」と指摘したいけど、具体的な書き方が思い浮かばない。そんな時にこのサイトで検索すると、ベストプラクティス的な書き方が見つかります。

3. 面接対策

JavaScript インタビュー問題のカテゴリがあるので、転職活動中のコーディングテスト対策にも使えます。

「配列の平坦化を実装してください」みたいな問題、ここで事前に見ておくと安心。

4. 新人教育

「こういう処理はこう書くといいよ」という例を見せる時に、自分で適当なコードを書くより、30 Seconds of Codeのリンクを共有した方が説明も丁寧で良い。

5. 車輪の再発明防止

新しいユーティリティ関数を作ろうとした時、まずここで検索。既にベストプラクティス的な実装があれば、それを参考にするか、そのまま使う。

注意点

現在は新規投稿を受け付けていない

以前はコミュニティからのスニペット投稿を受け付けていましたが、現在は運営者によるキュレーションのみ。バグ報告や改善提案はGitHubのissueで可能です。

そのまま使えない場合もある

環境やユースケースによっては、スニペットをそのまま使えないこともあります。あくまでも「参考実装」として捉えて、必要に応じてカスタマイズしましょう。

モダンな書き方に寄っている

ES6以降のモダンな記法が多いので、古いブラウザをサポートする必要がある場合はトランスパイルが必要かもしれません。

まとめ

30 Seconds of Codeを活用して感じた変化：

• 検索時間: StackOverflowを彷徨う時間が激減
• コード品質: ベストプラクティス的な書き方が身につく
• 学習効率: 短いスニペットなので理解しやすい
• 開発速度: コピペ → カスタマイズで素早く実装

正直なところ、「プログラマーならブックマークしておくべきサイト」の一つだと思います。特にJavaScriptをメインで書いている人には刺さるはず。

126,000スターは伊達じゃない。開発者コミュニティがこれだけ支持しているのには理由があります。

まだブックマークしていない人は、今すぐ公式サイトにアクセスしてみてください。「あ、こういう書き方があったのか」という発見が必ずあります。

参考リンク

• 30 Seconds of Code 公式サイト
• 30 Seconds of Code GitHub
• Best of JS - 30 Seconds of Code