Reactで外部ライブラリを使う｜npm installの後にすること

みなさん、Reactで開発していてこんなことを感じたことはありませんか？

「npm installしたのに、なぜかライブラリが使えない」
「import文を書いたらエラーになった」
「公式ドキュメントの通りにやったのに動かない」

外部ライブラリの導入は、React開発を効率的に進めるために欠かせません。でも、npm installした後の設定でつまずいてしまう方が多いんです。

この記事では、Reactで外部ライブラリを確実に使う方法をお教えします。基本的なimport文の書き方から実際の実装例まで、わかりやすく解説していきますね。

npm installって何をしているの？

まずは基本から理解しましょう。 npm installがどんな役割を果たしているのかを知ると、その後の手順がすっきりと理解できますよ。

npm installの基本的な流れ

npm installを実行すると、以下のことが行われます。

# 基本的なインストールコマンド
npm install ライブラリ名

このコマンドを実行すると、こんなことが起こります。

npmレジストリからライブラリをダウンロード
node_modulesフォルダに保存
package.jsonに依存関係を記録

簡単に言うと、「ライブラリをプロジェクトに持ってきて、使えるように準備する」という作業なんです。

よく使うインストールコマンド

実際によく使われるコマンドを見てみましょう。

# 人気のライブラリたち
npm install axios          # API通信用
npm install react-router-dom # ページ遷移用
npm install styled-components # スタイリング用
npm install react-icons    # アイコン用

# 開発時のみ必要なもの
npm install --save-dev @types/react

# バージョンを指定したい場合
npm install axios@1.6.0

# 複数まとめてインストール
npm install axios react-router-dom styled-components

それぞれのライブラリには、特定の役割があります。どれも非常に便利で、Reactアプリの開発を大幅にスピードアップしてくれますよ。

package.jsonで確認してみよう

インストールが完了すると、package.jsonファイルが更新されます。

{
  "name": "my-react-app",
  "version": "0.1.0",
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "axios": "^1.6.0",
    "react-router-dom": "^6.8.0",
    "styled-components": "^5.3.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.0"
  }
}

dependenciesの部分に、インストールしたライブラリが追加されていますね。これで、ライブラリがプロジェクトに正しく追加されたことがわかります。

import文の基本をマスターしよう

npm installの次に必要なのが、正しいimport文を書くことです。これができないと、せっかくインストールしたライブラリが使えません。

デフォルトインポートって何？

まず、最もよく使われる「デフォルトインポート」から見てみましょう。

import axios from 'axios';

function DataFetcher() {
  const fetchData = async () => {
    try {
      const response = await axios.get('/api/users');
      console.log(response.data);
    } catch (error) {
      console.error('エラーが発生しました:', error);
    }
  };

  return (
    <div>
      <button onClick={fetchData}>データを取得</button>
    </div>
  );
}

import axios from 'axios'の部分がデフォルトインポートです。 axiosライブラリ全体をaxiosという名前で使えるようになります。

名前付きインポートの使い方

次に、「名前付きインポート」を見てみましょう。

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">ホーム</Link>
        <Link to="/about">About</Link>
      </nav>
      
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

function Home() {
  return <h1>ホームページです</h1>;
}

function About() {
  return <h1>Aboutページです</h1>;
}

{ }で囲んだ部分が名前付きインポートです。必要な機能だけを選んで取り込むことができます。

複数のものを一度にインポート

アイコンライブラリのように、たくさんの種類から選んで使う場合もあります。

import { FaUser, FaHome, FaSearch } from 'react-icons/fa';
import { MdEmail, MdPhone } from 'react-icons/md';

function IconExample() {
  return (
    <div>
      <FaUser size={24} color="blue" />
      <FaHome size={24} color="green" />
      <FaSearch size={24} color="red" />
      <MdEmail size={24} color="purple" />
      <MdPhone size={24} color="orange" />
    </div>
  );
}

アイコンの種類ごとに異なるパッケージから取得しています。それぞれ必要なものだけを選んで使うことで、アプリのサイズも小さく保てます。

人気ライブラリの実装パターン

実際に使われることの多いライブラリの実装例を見てみましょう。具体的なコードを見ることで、使い方がよくわかりますよ。

Axios（API通信を簡単に）

まずは、API通信でよく使われるAxiosから見てみましょう。

npm install axios

インストールした後の実装例です。

import axios from 'axios';
import { useState, useEffect } from 'react';

function UserList() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchUsers = async () => {
      try {
        setLoading(true);
        const response = await axios.get('https://jsonplaceholder.typicode.com/users');
        setUsers(response.data);
      } catch (err) {
        setError('ユーザーの取得に失敗しました');
        console.error('エラー:', err);
      } finally {
        setLoading(false);
      }
    };

    fetchUsers();
  }, []);

  const createUser = async (userData) => {
    try {
      const response = await axios.post('https://jsonplaceholder.typicode.com/users', userData);
      setUsers([...users, response.data]);
    } catch (error) {
      console.error('ユーザー作成エラー:', error);
    }
  };

  if (loading) return <div>データを読み込み中...</div>;
  if (error) return <div>エラー: {error}</div>;

  return (
    <div>
      <h2>ユーザー一覧</h2>
      {users.map(user => (
        <div key={user.id} style={{ 
          margin: '10px 0', 
          padding: '10px', 
          border: '1px solid #ddd',
          borderRadius: '5px'
        }}>
          <h3>{user.name}</h3>
          <p>Email: {user.email}</p>
          <p>Phone: {user.phone}</p>
        </div>
      ))}
      <button onClick={() => createUser({ 
        name: '新しいユーザー', 
        email: 'new@example.com' 
      })}>
        ユーザーを追加
      </button>
    </div>
  );
}

この例では、以下のことを行っています。

データ取得: axios.get()でAPIからユーザー一覧を取得
エラーハンドリング: try-catchでエラーを適切に処理
ローディング状態: データ取得中の表示を管理
データ追加: axios.post()で新しいユーザーを作成

Axiosは、従来のfetch APIよりも使いやすく、エラー処理も簡単にできるのが魅力です。

Styled Components（CSS-in-JSの決定版）

次に、スタイリングに使われるStyled Componentsを見てみましょう。

npm install styled-components

実装例をご紹介します。

import styled from 'styled-components';
import { useState } from 'react';

// スタイル付きコンポーネントを作成
const Container = styled.div`
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f8f9fa;
`;

const Button = styled.button`
  background-color: ${props => props.primary ? '#007bff' : '#6c757d'};
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  margin: 5px;
  
  &:hover {
    background-color: ${props => props.primary ? '#0056b3' : '#545b62'};
  }
  
  &:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
  }
`;

const Card = styled.div`
  background: white;
  border-radius: 8px;
  padding: 20px;
  margin: 15px 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  
  h3 {
    color: #333;
    margin-top: 0;
  }
  
  p {
    color: #666;
    line-height: 1.6;
  }
`;

const Input = styled.input`
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
  margin: 10px 0;
  
  &:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0,123,255,0.25);
  }
`;

function StyledExample() {
  const [inputValue, setInputValue] = useState('');
  const [isDisabled, setIsDisabled] = useState(false);

  return (
    <Container>
      <h1>Styled Components の例</h1>
      
      <Card>
        <h3>入力フォーム</h3>
        <Input 
          type="text"
          placeholder="何か入力してください"
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
        />
        <div>
          <Button primary onClick={() => alert(`入力値: ${inputValue}`)}>
            送信
          </Button>
          <Button onClick={() => setInputValue('')}>
            クリア
          </Button>
          <Button 
            disabled={isDisabled}
            onClick={() => setIsDisabled(!isDisabled)}
          >
            切り替え
          </Button>
        </div>
      </Card>
      
      <Card>
        <h3>入力内容</h3>
        <p>{inputValue || '何も入力されていません'}</p>
      </Card>
    </Container>
  );
}

Styled Componentsの特徴を詳しく説明しますね。

CSS-in-JS: JavaScriptの中でCSSを書ける
props対応: コンポーネントのpropsに応じてスタイルを変更
ネストした書き方: SCSSのようにネストしてスタイルを書ける
ホバーなどの疑似クラス: &:hoverのような書き方が可能

この方法だと、コンポーネントとスタイルが一体化して管理しやすくなります。

React Router DOM（ページ遷移の管理）

Webアプリでページ遷移を実現するための定番ライブラリです。

npm install react-router-dom

実装例を見てみましょう。

import { BrowserRouter, Routes, Route, Link, useParams, useNavigate } from 'react-router-dom';
import { useState, useEffect } from 'react';

// ページコンポーネント
function Home() {
  return (
    <div>
      <h1>ホームページ</h1>
      <p>React Router DOM を使用したSPAの例です。</p>
      <p>上のナビゲーションを使って、他のページに移動してみてください。</p>
    </div>
  );
}

function About() {
  const navigate = useNavigate();
  
  return (
    <div>
      <h1>Aboutページ</h1>
      <p>このアプリについて説明するページです。</p>
      <button onClick={() => navigate('/')}>
        ホームに戻る
      </button>
    </div>
  );
}

function UserProfile() {
  const { userId } = useParams();
  const [user, setUser] = useState(null);
  
  // サンプルデータ（実際はAPIから取得）
  const users = {
    '1': { id: 1, name: 'Alice', email: 'alice@example.com' },
    '2': { id: 2, name: 'Bob', email: 'bob@example.com' },
    '3': { id: 3, name: 'Charlie', email: 'charlie@example.com' }
  };
  
  useEffect(() => {
    if (userId && users[userId]) {
      setUser(users[userId]);
    }
  }, [userId]);

  if (!user) {
    return <div>ユーザーが見つかりません</div>;
  }

  return (
    <div>
      <h1>ユーザープロフィール</h1>
      <h2>{user.name}</h2>
      <p>Email: {user.email}</p>
      <p>User ID: {user.id}</p>
      <Link to="/users">ユーザー一覧に戻る</Link>
    </div>
  );
}

function Users() {
  const users = [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' },
    { id: 3, name: 'Charlie' }
  ];

  return (
    <div>
      <h1>ユーザー一覧</h1>
      {users.map(user => (
        <div key={user.id} style={{ margin: '10px 0' }}>
          <Link to={`/users/${user.id}`}>
            {user.name} のプロフィールを見る
          </Link>
        </div>
      ))}
    </div>
  );
}

function NotFound() {
  return (
    <div>
      <h1>404 - ページが見つかりません</h1>
      <p>お探しのページは存在しません。</p>
      <Link to="/">ホームに戻る</Link>
    </div>
  );
}

// メインアプリコンポーネント
function App() {
  return (
    <BrowserRouter>
      <nav style={{ 
        padding: '20px', 
        backgroundColor: '#f8f9fa',
        borderBottom: '1px solid #ddd'
      }}>
        <Link to="/" style={{ margin: '0 10px', textDecoration: 'none' }}>ホーム</Link>
        <Link to="/about" style={{ margin: '0 10px', textDecoration: 'none' }}>About</Link>
        <Link to="/users" style={{ margin: '0 10px', textDecoration: 'none' }}>ユーザー一覧</Link>
      </nav>
      
      <main style={{ padding: '20px' }}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/users" element={<Users />} />
          <Route path="/users/:userId" element={<UserProfile />} />
          <Route path="*" element={<NotFound />} />
        </Routes>
      </main>
    </BrowserRouter>
  );
}

React Router DOMの主要な機能を説明しますね。

BrowserRouter: アプリ全体をルーティング対応にする
Routes & Route: URLとコンポーネントを紐付ける
Link: ページ遷移用のリンクを作る
useParams: URLパラメータを取得する
useNavigate: プログラムでページ遷移を行う

これで、ページの再読み込みなしでスムーズなページ遷移が実現できます。

React Icons（豊富なアイコンライブラリ）

アイコンを簡単に使えるライブラリも見てみましょう。

npm install react-icons

実装例をご紹介します。

import { 
  FaUser, 
  FaHome, 
  FaSearch, 
  FaHeart, 
  FaStar,
  FaShoppingCart,
  FaPhone,
  FaEnvelope 
} from 'react-icons/fa';
import { 
  MdSettings, 
  MdNotifications, 
  MdDashboard,
  MdFavorite 
} from 'react-icons/md';
import { 
  AiOutlineLogin, 
  AiOutlineLogout,
  AiOutlinePlus 
} from 'react-icons/ai';
import { useState } from 'react';

function IconsExample() {
  const [favorites, setFavorites] = useState([]);
  const [cartItems, setCartItems] = useState(0);

  const toggleFavorite = (id) => {
    setFavorites(prev => 
      prev.includes(id) 
        ? prev.filter(item => item !== id)
        : [...prev, id]
    );
  };

  return (
    <div style={{ padding: '20px' }}>
      <h1>React Icons の使用例</h1>
      
      {/* ナビゲーション例 */}
      <nav style={{ 
        display: 'flex', 
        gap: '20px', 
        padding: '15px', 
        backgroundColor: '#f8f9fa',
        borderRadius: '8px',
        marginBottom: '20px'
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
          <FaHome size={20} color="#007bff" />
          <span>ホーム</span>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
          <FaUser size={20} color="#28a745" />
          <span>プロフィール</span>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
          <MdSettings size={20} color="#6c757d" />
          <span>設定</span>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
          <FaShoppingCart size={20} color="#dc3545" />
          <span>カート ({cartItems})</span>
        </div>
      </nav>

      {/* 商品カード例 */}
      <div style={{ 
        display: 'grid', 
        gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', 
        gap: '20px' 
      }}>
        {[1, 2, 3].map(id => (
          <div key={id} style={{
            border: '1px solid #ddd',
            borderRadius: '8px',
            padding: '15px',
            backgroundColor: 'white'
          }}>
            <h3>商品 {id}</h3>
            <p>商品の説明文がここに表示されます。</p>
            <div style={{ 
              display: 'flex', 
              justifyContent: 'space-between', 
              alignItems: 'center' 
            }}>
              <span style={{ fontSize: '18px', fontWeight: 'bold' }}>¥1,000</span>
              <div style={{ display: 'flex', gap: '10px' }}>
                <button 
                  onClick={() => toggleFavorite(id)}
                  style={{ 
                    background: 'none', 
                    border: 'none', 
                    cursor: 'pointer' 
                  }}
                >
                  <FaHeart 
                    size={20} 
                    color={favorites.includes(id) ? '#dc3545' : '#ccc'} 
                  />
                </button>
                <button 
                  onClick={() => setCartItems(prev => prev + 1)}
                  style={{ 
                    display: 'flex', 
                    alignItems: 'center', 
                    gap: '5px',
                    padding: '5px 10px',
                    backgroundColor: '#007bff',
                    color: 'white',
                    border: 'none',
                    borderRadius: '4px',
                    cursor: 'pointer'
                  }}
                >
                  <AiOutlinePlus size={16} />
                  カートに追加
                </button>
              </div>
            </div>
          </div>
        ))}
      </div>

      {/* コントロールボタン例 */}
      <div style={{ 
        marginTop: '30px', 
        padding: '20px', 
        backgroundColor: '#f8f9fa', 
        borderRadius: '8px' 
      }}>
        <h3>各種操作ボタン</h3>
        <div style={{ display: 'flex', gap: '15px', alignItems: 'center' }}>
          <button style={{ 
            display: 'flex', 
            alignItems: 'center', 
            gap: '5px', 
            padding: '8px 15px',
            backgroundColor: 'white',
            border: '1px solid #ddd',
            borderRadius: '4px',
            cursor: 'pointer'
          }}>
            <FaSearch size={16} />
            検索
          </button>
          <button style={{ 
            display: 'flex', 
            alignItems: 'center', 
            gap: '5px', 
            padding: '8px 15px',
            backgroundColor: 'white',
            border: '1px solid #ddd',
            borderRadius: '4px',
            cursor: 'pointer'
          }}>
            <MdNotifications size={16} />
            通知
          </button>
          <button style={{ 
            display: 'flex', 
            alignItems: 'center', 
            gap: '5px', 
            padding: '8px 15px',
            backgroundColor: '#28a745',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer'
          }}>
            <AiOutlineLogin size={16} />
            ログイン
          </button>
        </div>
      </div>

      {/* アイコンサイズの例 */}
      <div style={{ marginTop: '30px' }}>
        <h3>アイコンサイズの例</h3>
        <div style={{ display: 'flex', gap: '20px', alignItems: 'center' }}>
          <FaStar size={16} color="#ffc107" />
          <FaStar size={24} color="#ffc107" />
          <FaStar size={32} color="#ffc107" />
          <FaStar size={48} color="#ffc107" />
        </div>
        <p>左から16px、24px、32px、48pxのサイズです。</p>
      </div>
    </div>
  );
}

React Iconsの特徴をまとめますね。

豊富なアイコン: Font Awesome、Material Design、Ant Designなど多数のアイコンセット
サイズ調整: sizeプロパティで簡単にサイズ変更
色の変更: colorプロパティで色を指定
軽量: 必要なアイコンのみをインポートするため、バンドルサイズが小さくなる

よくあるエラーと解決方法

外部ライブラリを使っていると、いろいろなエラーに遭遇することがあります。よくあるエラーと解決方法をご紹介しますね。

"Module not found" エラー

最もよく見るエラーがこれです。

# よく見るエラーメッセージ
Module not found: Can't resolve 'axios'

これは、ライブラリがちゃんとインストールされていない可能性があります。

解決方法

# 1. インストール状況を確認
npm ls axios

# 2. 再インストールしてみる
npm uninstall axios
npm install axios

# 3. それでもダメなら、node_modulesを一度削除
rm -rf node_modules package-lock.json
npm install

大抵の場合、これで解決します。

import文の間違い

import文の書き方を間違えると、エラーになります。

// ❌ 間違った例
import axios from 'react-router-dom'; // 間違ったライブラリ名
import { axios } from 'axios'; // axiosはデフォルトエクスポート
import BrowserRouter from 'react-router-dom'; // 名前付きインポートが必要

// ✅ 正しい例
import axios from 'axios';
import { BrowserRouter } from 'react-router-dom';
import styled from 'styled-components';

公式ドキュメントでimport文を確認するのが確実です。

TypeScriptを使っている場合

TypeScriptを使っていると、型定義がないというエラーが出ることがあります。

# TypeScriptエラーの例
Could not find a declaration file for module 'some-library'

解決方法

# 型定義パッケージをインストール
npm install --save-dev @types/some-library

# 見つからない場合は、手動で型定義を作成
# types.d.ts ファイルを作成して以下を追加
declare module 'some-library';

多くの人気ライブラリには、型定義パッケージが用意されています。

バージョンの互換性問題

Reactのバージョンとライブラリのバージョンが合わないことがあります。

# よく見る警告
WARN some-library@1.0.0 requires a peer of react@^17.0.0 but react@18.0.0 is installed

解決方法

# 1. 互換性のあるバージョンをインストール
npm install some-library@compatible-version

# 2. 警告を無視する場合（注意が必要）
npm install --legacy-peer-deps

可能な限り、互換性のあるバージョンを使うことをおすすめします。

ライブラリ選びのコツ

たくさんのライブラリがある中で、どれを選べばいいか迷いますよね。良いライブラリを選ぶためのポイントをお教えします。

ドキュメントの充実度

使いやすいライブラリは、ドキュメントがしっかりしています。

公式ドキュメント: わかりやすい説明があるか
サンプルコード: 実際の使用例が豊富か
APIリファレンス: 詳細な仕様が書かれているか
コミュニティ: Stack OverflowやQiitaに情報があるか

バンドルサイズも重要

ライブラリのサイズも考慮しましょう。

# バンドルサイズを確認できるサイト
# bundlephobia.com でライブラリ名を検索

特にモバイル向けアプリでは、バンドルサイズが大きいと読み込みが遅くなります。

まとめ：外部ライブラリを活用しよう！

Reactで外部ライブラリを使う方法について詳しく解説しました。

重要なポイント

npm installは最初のステップ: パッケージをプロジェクトに追加
正しいimport文が必須: デフォルトと名前付きを使い分け
エラーは必ず解決できる: インストール状況やimport文をチェック
ライブラリ選びは慎重に: 人気度、ドキュメント、サイズを確認

実装の流れ

# 1. ライブラリをインストール
npm install ライブラリ名

# 2. 正しいimport文を書く
import Library from 'library-name';

# 3. コンポーネントで使用
function MyComponent() {
  return <Library />;
}

外部ライブラリを活用することで、開発効率が大幅に向上します。車輪の再発明をする必要がなくなり、より早く高品質なアプリを作れます。

今回紹介した方法を参考に、ぜひ外部ライブラリを活用してみてください。きっと、React開発がもっと楽しくなりますよ！

Reactで外部ライブラリを使う｜npm installの後にすること

npm installって何をしているの？

npm installの基本的な流れ

よく使うインストールコマンド

package.jsonで確認してみよう

import文の基本をマスターしよう

デフォルトインポートって何？

名前付きインポートの使い方

複数のものを一度にインポート

人気ライブラリの実装パターン

Axios（API通信を簡単に）

Styled Components（CSS-in-JSの決定版）

React Router DOM（ページ遷移の管理）

React Icons（豊富なアイコンライブラリ）

よくあるエラーと解決方法

"Module not found" エラー

import文の間違い

TypeScriptを使っている場合

バージョンの互換性問題

ライブラリ選びのコツ

人気度と安定性をチェック

ドキュメントの充実度

バンドルサイズも重要

おすすめライブラリ一覧

まとめ：外部ライブラリを活用しよう！

関連記事

Untitled

Untitled

Untitled