JavaScriptのモジュールを使った効果的なコンポーネント設計方法

// math.js
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

// main.js
import { add, subtract } from './math.js';

console.log(add(2, 3)); // 5
console.log(subtract(5, 3)); // 2

// utils.js
export function multiply(a, b) {
  return a * b;
}

export const PI = 3.14159;

// main.js
import { multiply, PI } from './utils.js';

console.log(multiply(4, 5)); // 20
console.log(PI); // 3.14159

// math.js
function add(a, b) {
  return a + b;
}

function subtract(a, b) {
  return a - b;
}

module.exports = {
  add,
  subtract
};

// main.js
const { add, subtract } = require('./math.js');

console.log(add(3, 4)); // 7
console.log(subtract(10, 6)); // 4

// Button.js
export function Button({ label, onClick }) {
  return <button onClick={onClick}>{label}</button>;
}

// InputField.js
export function InputField({ type, value, onChange }) {
  return <input type={type} value={value} onChange={onChange} />;
}

// validate.js
export function validateInput(value) {
  return value.length > 0;
}

// InputField.js
import { validateInput } from './validate';

export function InputField({ value, onChange }) {
  const isValid = validateInput(value);
  return (
    <input
      className={isValid ? 'valid' : 'invalid'}
      value={value}
      onChange={onChange}
    />
  );
}

// Form.js
import { useState } from 'react';
import { InputField } from './InputField';

export function Form() {
  const [inputValue, setInputValue] = useState('');

  return (
    <form>
      <InputField
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
    </form>
  );
}

// ProfileImage.js
export function ProfileImage({ src }) {
  return <img src={src} alt="Profile" />;
}

// ProfileName.js
export function ProfileName({ name }) {
  return <h1>{name}</h1>;
}

// ProfileDetails.js
export function ProfileDetails({ details }) {
  return <p>{details}</p>;
}

// UserProfile.js
import { ProfileImage } from './ProfileImage';
import { ProfileName } from './ProfileName';
import { ProfileDetails } from './ProfileDetails';

export function UserProfile({ user }) {
  return (
    <div>
      <ProfileImage src={user.image} />
      <ProfileName name={user.name} />
      <ProfileDetails details={user.details} />
    </div>
  );
}

// Button.js
export function Button({ label, onClick, style }) {
  return (
    <button onClick={onClick} style={style}>
      {label}
    </button>
  );
}

// ExampleUsage.js
import { Button } from './Button';

export function ExampleUsage() {
  const handleClick = () => alert('Button clicked!');

  return (
    <div>
      <Button label="Click Me" onClick={handleClick} style={{ margin: '10px' }} />
      <Button label="Submit" onClick={handleClick} style={{ backgroundColor: 'blue', color: 'white' }} />
    </div>
  );
}

// TaskList.js (プレゼンテーションコンポーネント)
export function TaskList({ tasks }) {
  return (
    <ul>
      {tasks.map(task => (
        <li key={task.id}>{task.name}</li>
      ))}
    </ul>
  );
}

// TaskContainer.js (コンテナコンポーネント)
import { useState, useEffect } from 'react';
import { TaskList } from './TaskList';

export function TaskContainer() {
  const [tasks, setTasks] = useState([]);

  useEffect(() => {
    // データを取得して状態を更新するロジック
    fetch('/api/tasks')
      .then(response => response.json())
      .then(data => setTasks(data));
  }, []);

  return <TaskList tasks={tasks} />;
}

# パッケージのインストール
npm install <package-name>

# パッケージのインストールと依存関係の自動更新
npm install

# パッケージのアンインストール
npm uninstall <package-name>

# パッケージのインストール
yarn add <package-name>

# パッケージのインストールと依存関係の自動更新
yarn install

# パッケージのアンインストール
yarn remove <package-name>

# パッケージのインストール
pnpm add <package-name>

# パッケージのインストールと依存関係の自動更新
pnpm install

# パッケージのアンインストール
pnpm remove <package-name>

{
  "name": "my-project",
  "version": "1.0.0",
  "description": "My project description",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "dependencies": {
    "express": "^4.17.1",
    "lodash": "^4.17.20"
  },
  "devDependencies": {
    "jest": "^26.6.0"
  }
}

{
  "name": "example-project",
  "version": "1.0.0",
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "webpack": "^5.44.0",
    "babel-loader": "^8.2.2"
  }
}

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  }
};

// rollup.config.js
import babel from '@rollup/plugin-babel';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'cjs'
  },
  plugins: [babel({ babelHelpers: 'bundled' })]
};

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ]
  }
};

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-react']
          }
        }
      }
    ]
  }
};

// rollup.config.js
import babel from '@rollup/plugin-babel';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'cjs'
  },
  plugins: [
    babel({
      exclude: 'node_modules/**',
      babelHelpers: 'bundled'
    })
  ]
};

// rollup.config.js
import babel from '@rollup/plugin-babel';
import { terser } from 'rollup-plugin-terser';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.min.js',
    format: 'umd',
    name: 'MyLibrary'
  },
  plugins: [
    babel({
      exclude: 'node_modules/**',
      babelHelpers: 'bundled'
    }),
    terser()
  ]
};

# Jestのインストール
npm install --save-dev jest

// math.js
export function add(a, b) {
  return a + b;
}

// math.test.js
import { add } from './math';

test('adds 1 + 2 to equal 3', () => {
  expect(add(1, 2)).toBe(3);
});

# テストの実行
npx jest

# MochaとChaiのインストール
npm install --save-dev mocha chai

// math.js
export function subtract(a, b) {
  return a - b;
}

// math.test.js
import { expect } from 'chai';
import { subtract } from './math';

describe('subtract', () => {
  it('should subtract 2 from 5 to equal 3', () => {
    expect(subtract(5, 2)).to.equal(3);
  });
});

# テストの実行
npx mocha

// calculator.test.js
import { add, subtract } from './calculator';

test('adds 1 + 2 to equal 3', () => {
  expect(add(1, 2)).toBe(3);
});

test('subtracts 2 from 5 to equal 3', () => {
  expect(subtract(5, 2)).toBe(3);
});

// calculator.js
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

// calculator.js
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

// 将来的に他の計算関数を追加するための準備
export function multiply(a, b) {
  return a * b;
}

export function divide(a, b) {
  if (b === 0) throw new Error('Cannot divide by zero');
  return a / b;
}

// App.js
import React, { useState } from 'react';
import { TaskList } from './TaskList';
import { AddTaskForm } from './AddTaskForm';

function App() {
  const [tasks, setTasks] = useState([]);

  const addTask = (task) => {
    setTasks([...tasks, task]);
  };

  const removeTask = (index) => {
    const newTasks = tasks.filter((_, i) => i !== index);
    setTasks(newTasks);
  };

  return (
    <div>
      <h1>Task Manager</h1>
      <AddTaskForm addTask={addTask} />
      <TaskList tasks={tasks} removeTask={removeTask} />
    </div>
  );
}

export default App;

// TaskList.js
import React from 'react';
import { TaskItem } from './TaskItem';

export function TaskList({ tasks, removeTask }) {
  return (
    <ul>
      {tasks.map((task, index) => (
        <TaskItem key={index} task={task} removeTask={() => removeTask(index)} />
      ))}
    </ul>
  );
}

// TaskItem.js
import React from 'react';

export function TaskItem({ task, removeTask }) {
  return (
    <li>
      {task}
      <button onClick={removeTask}>Remove</button>
    </li>
  );
}

// AddTaskForm.js
import React, { useState } from 'react';

export function AddTaskForm({ addTask }) {
  const [task, setTask] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (task.trim()) {
      addTask(task);
      setTask('');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={task}
        onChange={(e) => setTask(e.target.value)}
        placeholder="Add a new task"
      />
      <button type="submit">Add Task</button>
    </form>
  );
}

// App.js
import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <div>
      <h1>My App</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

export default App;

import React from 'react';

const ExpensiveComponent = React.memo(({ data }) => {
  // 高コストの計算や処理
  return <div>{data}</div>;
});

export default ExpensiveComponent;

import React, { useMemo } from 'react';

function Component({ items }) {
  const sortedItems = useMemo(() => {
    return items.sort((a, b) => a - b);
  }, [items]);

  return (
    <ul>
      {sortedItems.map(item => (
        <li key={item}>{item}</li>
      ))}
    </ul>
  );
}

export default Component;

// webpack.config.js
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  mode: 'production',
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
};

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

function useData(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let isCancelled = false;

    async function fetchData() {
      const response = await fetch(url);
      const result = await response.json();
      if (!isCancelled) {
        setData(result);
        setLoading(false);
      }
    }

    fetchData();

    return () => {
      isCancelled = true;
    };
  }, [url]);

  return { data, loading };
}

function DataComponent({ url }) {
  const { data, loading } = useData(url);

  if (loading) {
    return <div>Loading...</div>;
  }

  return <div>{JSON.stringify(data)}</div>;
}

export default DataComponent;

<img src="low-res.jpg" data-src="high-res.jpg" class="lazyload" />
<script>
  document.addEventListener("DOMContentLoaded", function() {
    let lazyImages = [].slice.call(document.querySelectorAll("img.lazyload"));
    if ("IntersectionObserver" in window) {
      let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
        entries.forEach(function(entry) {
          if (entry.isIntersecting) {
            let lazyImage = entry.target;
            lazyImage.src = lazyImage.dataset.src;
            lazyImage.classList.remove("lazyload");
            lazyImageObserver.unobserve(lazyImage);
          }
        });
      });
      lazyImages.forEach(function(lazyImage) {
        lazyImageObserver.observe(lazyImage);
      });
    }
  });
</script>

server {
  gzip on;
  gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css;
  gzip_vary on;
  gzip_min_length 256;
}

function add(a, b) {
  console.log('Adding:', a, b);
  return a + b;
}

const result = add(2, 3);
console.log('Result:', result);

function multiply(a, b) {
  debugger; // ブレークポイントを設定
  return a * b;
}

const result = multiply(4, 5);
console.log('Result:', result);

try {
  // エラーが発生する可能性のあるコード
  throw new Error('An unexpected error occurred');
} catch (error) {
  console.error('Error:', error.message);
}

<!-- Chrome DevToolsの使用例 -->
<button onclick="handleClick()">Click me</button>
<script>
  function handleClick() {
    debugger; // ブレークポイントを設定
    alert('Button clicked');
  }
</script>

// Visual Studio Codeのデバッグ設定
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceFolder}/app.js"
    }
  ]
}

// math.js
export function add(a, b) {
  return a + b;
}

// math.test.js
import { add } from './math';

test('adds 1 + 2 to equal 3', () => {
  expect(add(1, 2)).toBe(3);
});

# テストの実行
npx jest

// calculator.js
export function multiply(a, b) {
  return a * b;
}

// calculator.test.js
import { multiply } from './calculator';

test('multiplies 2 * 3 to equal 6', () => {
  expect(multiply(2, 3)).toBe(6);
});