コード例集

コード例集

プログラミングコード例集Programming Code Examples

初心者から上級者まで、様々なレベルのプログラマーに役立つコード例を提供しています。
基本的な概念から実践的なテクニックまで、段階的に学習できるリソースをご覧ください。

プログラミング言語

レベル

HTMLレスポンシブナビゲーション

HTML 初級 2026/01/17 
<!-- レスポンシブナビゲーションの例 -->
<nav class="navbar">
  <div class="logo">
    <a href="/">Shard</a>
  </div>
  <ul class="nav-links">
    <li><a href="/">ホーム</a></li>
    <li><a href="/about">概要</a></li>
    <li><a href="/projects">プロジェクト</a></li>
    <li><a href="/contact">お問い合わせ</a></li>
  </ul>
  <div class="burger">
    <div class="line1"></div>
    <div class="line2"></div>
    <div class="line3"></div>
  </div>
</nav>

このコードはレスポンシブなナビゲーションバーを作成します。ロゴ、ナビゲーションリンク、モバイル表示用のハンバーガーメニューアイコンが含まれています。CSSと組み合わせることで、画面サイズに応じて適切に表示を変更できます。

CSSフレックスボックスレイアウト

CSS 中級 2026/01/17 
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
}

.item {
  flex: 1 1 300px;
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
  
  .item {
    flex-basis: 100%;
  }
}

Flexboxを使用したレスポンシブなグリッドレイアウトの例です。containerクラスに対してflexプロパティを設定し、内部のitemがフレックスアイテムとして配置されます。メディアクエリを使って、画面幅が768px以下の場合は列方向に変更します。

JavaScriptフェッチAPI

JavaScript 中級 2026/01/17 
// JSONデータを取得して表示する関数
async function fetchUserData() {
  try {
    // ローディング表示
    document.getElementById('status').textContent = 'データ取得中...';
    
    // APIからデータを非同期で取得
    const response = await fetch('https://api.example.com/users');
    
    // レスポンスが正常でない場合はエラーをスロー
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    
    // JSONとしてレスポンスを解析
    const data = await response.json();
    
    // 結果を表示
    const userList = document.getElementById('user-list');
    userList.innerHTML = '';
    
    data.forEach(user => {
      const userElement = document.createElement('div');
      userElement.className = 'user-card';
      userElement.innerHTML = `
        <h3>${user.name}</h3>
        <p>Email: ${user.email}</p>
        <p>都市: ${user.address.city}</p>
      `;
      userList.appendChild(userElement);
    });
    
    document.getElementById('status').textContent = 'データ取得完了';
  } catch (error) {
    document.getElementById('status').textContent = `エラー: ${error.message}`;
    console.error('データ取得エラー:', error);
  }
}

// ページ読み込み時に実行
document.addEventListener('DOMContentLoaded', fetchUserData);

JavaScript の Fetch API を使用して、外部のREST APIからデータを非同期で取得する例です。async/await構文によりプロミスをより読みやすく扱い、try/catchでエラーハンドリングを行っています。取得したデータはDOM操作によって動的にページに表示されます。

PHPデータベース操作

PHP 上級 2026/01/17 
/**
 * シンプルなデータベース操作クラス
 */
class Database {
    private $host = 'localhost';
    private $db_name = 'my_database';
    private $username = 'db_user';
    private $password = 'db_password';
    private $conn;
    
    /**
     * データベース接続を取得
     */
    public function getConnection() {
        $this->conn = null;
        
        try {
            $this->conn = new PDO(
                "mysql:host={$this->host};dbname={$this->db_name}",
                $this->username,
                $this->password
            );
            $this->conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
            $this->conn->exec("set names utf8");
        } catch(PDOException $e) {
            echo "接続エラー: " . $e->getMessage();
        }
        
        return $this->conn;
    }
}

// 使用例
$database = new Database();
$db = $database->getConnection();

// ユーザー取得クエリ
$query = "SELECT id, name, email FROM users WHERE active = 1 ORDER BY name";
$stmt = $db->prepare($query);
$stmt->execute();

if ($stmt->rowCount() > 0) {
    while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
        echo "ID: {$row['id']}, 名前: {$row['name']}, メール: {$row['email']}<br>";
    }
} else {
    echo "ユーザーが見つかりませんでした。";
}

PHPでPDOを使用してデータベースに接続し、ユーザー情報を取得する例です。PDOを使用することで、SQL文の準備と実行を分離し、SQLインジェクション攻撃のリスクを軽減します。また、例外処理を使用してエラーを適切に処理しています。

Pythonデータ分析

Python 上級 2026/01/17 
import pandas as pd
import matplotlib.pyplot as plt
import seaborn as sns

# サンプルデータの読み込み
df = pd.read_csv('sales_data.csv')

# データの基本統計量を確認
print("データサマリー:")
print(df.describe())

# 欠損値の確認と処理
print("\n欠損値の数:")
print(df.isnull().sum())

# 欠損値を平均値で埋める
df['revenue'].fillna(df['revenue'].mean(), inplace=True)

# 月別売上の集計
monthly_sales = df.groupby('month')['revenue'].sum().reset_index()

# データ可視化 - 月別売上
plt.figure(figsize=(12, 6))
sns.barplot(x='month', y='revenue', data=monthly_sales)
plt.title('月別売上', fontsize=15)
plt.xlabel('月', fontsize=12)
plt.ylabel('売上 (円)', fontsize=12)
plt.xticks(rotation=45)
plt.tight_layout()
plt.savefig('monthly_sales.png')
plt.show()

Pythonを使ったデータ分析と可視化の例です。Pandas、Matplotlib、Seabornライブラリを使用して、売上データの分析と視覚化を行っています。データの読み込み、基本統計量の確認、欠損値の処理、グループ化による集計、そして棒グラフでの可視化までの一連の流れを示しています。

現在、コード例データベースを構築中です。上記はサンプルコードです。
より多くの実用的なコード例を順次追加していきます。

コード例を投稿するContribute Code Examples

あなたのコード例を共有しませんか？

Shardコミュニティでは、メンバーからのコード例の投稿を募集しています。
実用的なスニペット、創造的な解決策、学習リソースとして役立つコードなど、あなたの知識を共有してください。
投稿されたコードは審査後、このページに追加されます。

コード例を投稿する