Next.js 名詞抽出サンプル

名詞をクライアント側で抽出

npm install kuromoji

• テキストエリアに入力しフォーカスを外す

'use client'
import React, { useState } from 'react';
import kuromoji from 'kuromoji';

// kuromojiの辞書のパスを指定します。publicの場合以下
const DICT_PATH = '../kuromoji/dict';

// 名詞のスタイル
const nounStyle = {
    color: 'red',
};

type Token = {
    surface_form: string;
    pos: string;
};

const NounHighlighter: React.FC = () => {
    const [text, setText] = useState<string>('');
    const [tokens, setTokens] = useState<Token[]>([]);

    const handleAnalyze = () => {
        kuromoji.builder({ dicPath: DICT_PATH }).build((err, tokenizer) => {
            if (err) {
                console.error(err);
                return;
            }
            const tokens = tokenizer.tokenize(text);
            setTokens(tokens);
        });
    };

    return (
        <div>
            <h1>単語抽出 サンプルコード</h1>
      <textarea
          value={text}
          onChange={(e) => setText(e.target.value)}
          onBlur={handleAnalyze}
          placeholder="ここにテキストを入力してください"
          rows={10}
          className="w-full p-2 border"
      />
            <div>
                {tokens.map((token, index) => (
                    <span key={index} style={token.pos === '名詞' ? nounStyle : undefined}>
            {token.surface_form}
          </span>
                ))}
            </div>
        </div>
    );
};

export default NounHighlighter;