🤖
LM Studio(ローカルLLM)で遊んでみた

2025/04/24に公開
 はじめに
 あいさつこんにちは、現在絶賛就活中のもっくんです🖐️

最近ローカルLLMに興味が湧き、とりあえずLM Studioを入れてみて遊んでみました。

 この記事でやっていることLM Studioのインストール
LM Studioの簡単な使い方の説明
APIを叩いてLM Studioを使ってみる
openaiのライブラリを使ってjsでLM Studioを使ってみる
!遊んでみただけなので細かい内容は間違っているかもしれません..

ご了承ください🙏

 LM Studioとは...?簡単に言うと、ローカルLLMをダウンロードしてGUIベースで会話ができたり、言語モデルサーバーとして動いたりするソフトです。

 インストールLM Studioをインストールします。

https://lmstudio.ai/

からダウンロードできます。

 つかってみる
 LM Studioを起動してみる初期起動時におすすめのLLMをダウンロードしろという案内が出てきますが、僕はスキップしました。

 LLMを自分のPCにダウンロードするサイドバーのDiscoverタブ🔍️から、入れたいLLMをダウンロードします。

今回は gemma3 1B QATを入れてみます


 入れたモデルと会話してみるサイドバーのChatタブ💭から Create New Chat を押し、上にある Select a model to load からモデルを選択します。

今回はさきほどDLした Gemma3 1B QAT を選択します

下のテキストボックスから質問を投げます

私は、"より良いコードの書き方を教えて下さい" と質問をしました。

回答内容(全文)より良いコードを書くためには、単に「良い」コードを書くことではなく、より効率的で、保守しやすく、理解しやすいコードを書くことが重要です。
以下に、より良いコードを書くための様々なポイントをまとめました。
1. 基礎となる原則:

可読性 (Readability): コードは、他の人が読んでも、自分自身も理解できるように書くことが最も重要です。
明確な変数名と説明
適切なコメント (必要に応じて)
簡潔で分かりやすいコードの構造


保守性 (Maintainability): コードを修正したり、拡張したりする際に容易に行えるように、設計や実装を工夫します。

テスト可能性 (Testability): コードが単に実行されるだけでなく、様々な状況下で正しく動作するかどうかを確認できるか。
ユニットテストの作成
適切なモジュール化

2. 開発プロセス:

設計 (Design):

概要 (Overview): プロジェクト全体の目的と範囲を明確にします。

アーキテクチャ (Architecture): システム全体の構造や構成を定義します。（例: マイクロサービス、モノリシックなど）

データモデル (Data Model): データの関係性を定義します。

UI/UX設計:  ユーザーインターフェースの設計も重要です。


実装 (Implementation):

コードの整理: コードをモジュール化し、適切な命名規則で記述します。

DRY (Don't Repeat Yourself)原則: 同じ処理を何度も繰り返さないように、コードの重複を避けます。

SOLID原則:  SOLID（Single Responsibility, Open/Closed, Liskov Substitution, Interface Segregation, Dependency Inversion）は、設計のルールです。


テスト (Testing):

単体テスト (Unit Testing): 各関数やクラスが正しく動作するかをテストします。

統合テスト (Integration Testing): 複数のモジュールが連携して正常に動作するかをテストします。

3. コードの書き方:

変数名:  変数名は、変数の役割を明確に示すように選びましょう。（例: user_name, product_price）

コメント:  コードの説明や、重要なポイントを示すためにコメントは必要です。ただし、過剰なコメントは逆効果になる場合があるので注意しましょう。

エラー処理 (Error Handling): エラーが発生した場合に適切な対処をするようにします。（例: try-exceptブロック）

デバッグ (Debugging): コードの実行中にエラーが発生した場合、デバッガーを使って原因を特定し修正します。
4. より良いコードを書くためのテクニック:

デザインパターン (Design Patterns):  一般的な問題に対する解決策として、設計パターンを活用することで、コードの再利用性や保守性を向上させることができます。

バージョン管理システム (Version Control System): Gitなどのバージョン管理システムを使って、コードを管理し、変更履歴を追跡します。

コードレビュー (Code Review): 他のエンジニアにコードを見てもらい、改善点や潜在的な問題がないかを確認します。
5. 学習:

書籍を読む:  「Effective Java」「Clean Code」などの書籍は、より良いコードを書くための実践的なヒントを提供しています。

オンラインコース: Udemy、Courseraなどで、プログラミングに関するコースを受講できます。

コミュニティに参加する: Stack OverflowやGitHubなどのコミュニティで質問したり、他のエンジニアと交流したりすることで、知識を深めることができます。
まとめ:
より良いコードを書くためには、基礎原則を理解し、設計プロセスを意識し、コードの品質を高めるためのテクニックを習得することが重要です。  継続的に学習し、実践を通してスキルを向上させることが大切です。
もし、特定の言語や状況で具体的な質問があれば、遠慮なくお尋ねください。どのようなコードを書くことを目指しているか、どのような課題に直面しているかを教えていただけると、より的確なアドバイスができます。

 たのしい思ったより簡単にローカルでLLMを使用できました🎉

 ちょっと応用
 APIを叩いてLLMを使ってみる
 準備そのままの設定だとAPI機能がオフになっているので使えるようにします。

そんなに難しくないです。

サイドバーのDeveloperタブ🖥️を選択し、画面上から使用するモデルを選択します。



左上の方にあるステータスのトグルをONにします。

これでサーバーがlocalhost:1234で起動し、準備完了です🎉

(1234番ポートで起動しますが、は右の⚙️Settingから変更ができます。今回はそのまま)

 APIを使ってみる今回はPostmanを使用してAPIを叩きます。

現時点(2025年4月)で使用できるAPI一覧はこちらになります
GET  /v1/models
POST /v1/chat/completions
POST /v1/embeddings
POST /v1/completions
https://lmstudio.ai/docs/app/api/endpoints/openai

公式リファレンスにopenai api 互換と書いてあるようにopenai apiに似ているらしいです(使ったこと無いんで知らない)

 GET localhost:1234/v1/modelsを叩く{
    "data": [
        {
            "id": "gemma-3-1b-it-qat",
            "object": "model",
            "owned_by": "organization_owner"
        },
        {
            "id": "gemma-3-12b-it-qat",
            "object": "model",
            "owned_by": "organization_owner"
        },
        {
            "id": "gemma-3-4b-it-qat",
            "object": "model",
            "owned_by": "organization_owner"
        },
        {
            "id": "text-embedding-nomic-embed-text-v1.5",
            "object": "model",
            "owned_by": "organization_owner"
        }
    ],
    "object": "list"
}
現在ロードされているモデルを一覧で表示するリクエストらしいです

僕はいくつか入れているので上のような表示になります。

 POST localhost:1234/v1/chat/completions を叩くモデル一覧とかはどうでもいいので、実際にチャットしてみましょう!!!🔥

bodyに使用するモデル名とメッセージを渡せば回答が返ってきます!

とりあえず 美味しいカレーの作り方を3行で教えて と聞いてみます
request body 全文{
    "model": "gemma-3-1b-it-qat",
    "messages": [
        {"role": "system", "content": "Always answer in 日本語"},
        {"role": "user", "content": "美味しいカレーの作り方を3行で教えて"}
    ]
}
返ってきた内容はこちら(回答だけ抜き出しています)

見づらかったので改行だけこちらでしています
はい、美味しいカレーの作り方を3行で説明します。
牛肉または豚肉を炒め、玉ねぎ、ニンニクと一緒に煮込む。
トマトやスパイスを加えて煮込むと、甘くて濃厚な味わいになる。
仕上げに牛乳やバターを加えると、よりコクが増し、至福のカレー完成！
(美味しいカレーの作り方を3行で説明します。)
response 全文{
    "id": "chatcmpl-c5r9kh9ol4kfxr0ie7gt",
    "object": "chat.completion",
    "created": 1745427266,
    "model": "gemma-3-1b-it-qat",
    "choices": [
        {
            "index": 0,
            "logprobs": null,
            "finish_reason": "stop",
            "message": {
                "role": "assistant",
                "content": "はい、美味しいカレーの作り方を3行で説明します。\n\n1.  牛肉または豚肉を炒め、玉ねぎ、ニンニクと一緒に煮込む。\n2.  トマトやスパイスを加えて煮込むと、甘くて濃厚な味わいになる。\n3.  仕上げに牛乳やバターを加えると、よりコクが増し、至福のカレー完成！\n\n(美味しいカレーの作り方を3行で説明します。)"
            }
        }
    ],
    "usage": {
        "prompt_tokens": 24,
        "completion_tokens": 94,
        "total_tokens": 118
    },
    "stats": {},
    "system_fingerprint": "gemma-3-1b-it-qat"
}
おー！ちゃんと返ってきました👍️👍️👍️

わかっていても感動しますね!!

 ネットワーク上の他のデバイスからでもアクセスできるようにする⚙️Setting > Serve on Local Network をオンにすると、他のPCからでもAPIを叩けるようになります!!



ぼやき💭: これでつよつよPCでずっとLM Studioを起動しておいて、他のPCから使うことで無料chat gptみたいなことができそう

 openaiのライブラリを使ってjsでLM Studioを使ってみるOpenAi clientを使えば、jsでも簡単に使えるみたいなので軽く触ってみます

 環境構築作業ディレクトリに移動して、以下を実行
npm i -y
npm i --save openai
main.jsファイルを作成し、以下を貼り付け
main.js
import OpenAI from "openai";

const client = new OpenAI({
  baseURL: "http://localhost:1234/v1", // 左のようにする
  apiKey: "lm-studio", // lm-studioにする
});

const model = "gemma-3-4b-it-qat"; // 使うモデル
const message = "日本の首都は?";

const response = await client.chat.completions.create({
  model,
  messages: [
    {
      role: "user",
      content: message,
    },
  ],
});

console.log(response.choices[0].message.content);
⚠️package.jsonに"type": "module"を追加しておかないとimportのところで怒られます
実行します
node main.js
返事がコンソールに表示されました🎉

ちなみに response の中身はこうなっています
クリックで展開{
  id: 'chatcmpl-xe3v7toqqednbpxiaahst8',
  object: 'chat.completion',
  created: 1745428676,
  model: 'gemma-3-4b-it-qat',
  choices: [
    {
      index: 0,
      logprobs: null,
      finish_reason: 'stop',
      message: { role: 'assistant', content: '日本の首都は**東京**です。' }
    }
  ],
  usage: { prompt_tokens: 13, completion_tokens: 8, total_tokens: 21 },
  stats: {},
  system_fingerprint: 'gemma-3-4b-it-qat'
}

 最後にローカルLLM君めちゃくちゃおもろい

この記事も使ってすぐにノリと勢いで書いてますw

うまくこれを使ってなんか面白いwebアプリを作ってみたいのですが、なかなかいいアイデアが浮かばない...
それはさておき、

こんな記事を最後まで見てくれてありがとうございます!!!

今後も技術記事を投稿していこうと思っているので、フォローお願いします🙏

いいねもモチベの維持にもなるのでお願いします🙏🙏🙏
それでは、またどこかで会いましょう👋
はじめに

あいさつ

この記事でやっていること

LM Studioとは...?

インストール

つかってみる

LM Studioを起動してみる

LLMを自分のPCにダウンロードする

入れたモデルと会話してみる

たのしい

ちょっと応用

APIを叩いてLLMを使ってみる

準備

APIを使ってみる

GET localhost:1234/v1/modelsを叩く

POST localhost:1234/v1/chat/completions を叩く

ネットワーク上の他のデバイスからでもアクセスできるようにする

openaiのライブラリを使ってjsでLM Studioを使ってみる

環境構築

最後に

Discussion
