コード例集

コード例集

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

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

プログラミング言語

レベル

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操作によって動的にページに表示されます。

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

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

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

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

コード例を投稿する