- 1. 【バージョンマネージャ】asdfが便利すぎる
- 2. yarn、npm、npx の違いについて
- 3. 【React/Tailwind】YouTube動画を埋め込むためのコンポーネントを作ってみる(レスポンシブ)
- 4. Node.jsでexpressとejsを使用しウェブページを作成(参考程度
- 5. node.jsでmariaDBを使用するためのコーディング参考程度
- 6. 法律相談できるLINE bot「LegalAI」をリリースしました
- 7. NestJSについてキャッチアップしてみた
- 8. お名前.com のレンタルサーバーでLaravelを動かすメモ
- 9. Ubuntu 24.04 LTSにすると多分マストドンv4.2ブランチじゃないと上手く動かないんじゃねって話
- 10. DDNSを自分でやる
- 11. SpringBootで包み込むVue.js開発環境 カンタン構築 OpenAPI 編
- 12. paiza.ioでnode.js その3
- 13. paiza.ioでnode.js その2
- 14. paiza.ioでnode.js
- 15. FastAPI で銀行ごっこしよう: Next.js 導入編
- 16. Service Locator と DI の違いを TypeScript を書きながら体験してみる
- 17. Azure OpenAIをWebサイトに組み込む
- 18. Node.jsをMacにインストールした
- 19. 【Node.js】GoogleのOAuth 2.0 APIを使ってクライアントアプリを実装してみた
- 20. Node.jsで普通のJavaScriptをimportする
【バージョンマネージャ】asdfが便利すぎる
## はじめに
**asdf**というバージョンマネージャがめちゃくちゃ便利なので紹介します。https://asdf-vm.com/
**`pyenv`とか`nodenv`とか、言語ごとのバージョンマネージャ入れるの面倒だよ〜〜ん**
って人におすすめです。
asdf単体でさまざまなパッケージのインストール〜バージョン管理が行えます。asdfの使った感じ
“`sh
$ asdf plugin add python
$ asdf install python latest
$ asdf local python latest
$ python -V
Python 3.12.3$ asdf install python 3.9.9
$ asdf local python 3.9.9
$ python -V
Python 3.9.9$ asdf list python
3.12.3
*3.9.9
“`
## 目次
[1. インストール](#1-インストール)
[2. pluginの追加
yarn、npm、npx の違いについて
# yarn、npm、npx の違い
## はじめに
Node.js を学ぶ過程で、”yarn”、”npm”、”npx”という用語にたびたび出逢います。これらは JavaScript の開発において頻繁に使われる重要なツールですが、その機能や役割が初学者には混同しやすいものです。本記事では、これらのツールがどのように異なり、どのように役に立つのかを解説したいと思います。
## yarn
– **タイプ**: パッケージマネージャー(ソフトウェアのパッケージとその依存関係を管理)
– **目的**: Node.js プロジェクトの依存関係の管理
– **特徴**:
– Facebook(meta)によって開発
– キャッシングと並列処理により高速かつ効率的に動作
– `yarn.lock` を使用してインストールされたパッケージのバージョンを固定
– **コマンド集(一部)**:“`sh
yarn init # 新しいプロジェクトの package.json ファイルを作成
yarn install #
【React/Tailwind】YouTube動画を埋め込むためのコンポーネントを作ってみる(レスポンシブ)
## 概要
ReactでYouTube動画を埋め込むためのカスタムコンポーネントを作成してみました。スタイリングには、Tailwind CSSを使用し、レスポンシブに対応させました。## コンポーネントの機能
– YouTube動画の埋め込み
– タイトルの表示
– カスタムスタイリング(Tailwind CSSを採用し、レスポンシブに対応)
– 動画情報のURLまたは動画IDの両方に対応**対応している動画のURL形式について**
“`
https://www.youtube.com/watch?v=VIDEO_ID 標準形式のURL
https://youtu.be/VIDEO_ID 短縮URLhttps://youtube.com/watch?v=VIDEO_ID%E3%80%80%E5%9F%8B%E3%82%81%E8%BE%BC%E3%81%BF%E3%83%97%E3%83%AC%E3%83%BC%E3%83%A4%E3%83%BC%E3%81%AEURL“`
## デモ
https://react-youtube-embed.vercel.app/
## 使用例
### Propsの説明
| プロパティ名 | 説明
Node.jsでexpressとejsを使用しウェブページを作成(参考程度
# 使用したパッケージ
### 1.express
インストールコマンドnpm
“`
npm install express
“`yarn
“`
yarn add express
“`### 2.ejs
インストールコマンド
npm“`
npm install ejs
“`yarn
“`
yarn add ejs
“`
# サイトのファイル構成
– publicフォルダー
cssやimgなどを置くフォルダー
– views
app.jsでアクセスがあったページのejsを置く場所
- app.js
サイトへアクセスがあったページへ移動処理など“`
sample/
┣━ public/
┃ ┣━ css/
┃ ┗━ img/
┣━ views/
┃ ┣━ top.ejs
┃ ┗━ index.ejs
┣━ app.js
etc“`
# ページ表示の処理
app.js ファイルで行う### expressを使用するためapp.js
node.jsでmariaDBを使用するためのコーディング参考程度
## mariadbの導入
mariaDBを使用するためにmariadbをインストールする
#### npmの場合
“`
npm install mariadb
“`#### yarnの場合
“`
yarn add mariadb
“`# javascriptでの記述
## パッケージの読み込み
“`javascript
const mariadb = require(‘mariadb’);
“`## DTBへの接続するための設定処理
“`javascript
const pool = mariadb.createPool({
host: ‘localhost’,
user: ”, //データーベースを操作するユーザー名を記述する
password: ”, //操作するユーザーのパスワードを記述する
database: ”, //操作するデーターベース名を記述
// 同時接続数の制限(任意)をかけるために記述
//connection
法律相談できるLINE bot「LegalAI」をリリースしました
# LegalAIとは
残業やパワハラの問題を抱えているけど、法的な知識がない人が法律相談できるLINE botを開発しました。
友達追加はこちら↓
https://lin.ee/KmWvcGp
![ScreenShot01.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780785/213af21d-98d8-4717-8494-7686caacd55b.jpeg)# 技術
インフラ:firebase
サーバー:Node.js
AI:openai(BaseModel:gpt-3.5)# 開発の流れ
firebase + Node.jsでLINE botを作る記事は山程あるので、割愛。初めてopenaiのfine-tuningと作ったプログラムとの連携を行ったので、そちらをメインで書きます。
## openaiのfine-tuning
最初にBaseModelを選定します。> https://platform.openai.com/docs/guides/fine-tuning
>
NestJSについてキャッチアップしてみた
案件で絶賛対応中になります。
初めて触るため、備忘がてらキャッチアップした内容を書いてみようと思います。# NestJSとは
>Nest(NestJS)は、効率的でスケーラブルなNode.jsサーバーサイドアプリケーションを構築するためのフレームワークです。プログレッシブJavaScriptを使用し、TypeScriptで構築され、TypeScriptを完全にサポートし(それでも開発者は純粋なJavaScriptでコーディングできる)、OOP(オブジェクト指向プログラミング)、FP(関数型プログラミング)、FRP(関数型反応プログラミング)の要素を組み合わせている。https://docs.nestjs.com/
Node.jsのフレームワークということは理解できました。
今度はNode.jsについてサクッと調査します。# Node.jsとは
>Node.js は、オープンソースのクロスプラットフォームの JavaScript ランタイム環境です。ほぼあらゆる種類のプロジェクトで人気のあるツールです。https://nodejs.org/en/learn/getti
お名前.com のレンタルサーバーでLaravelを動かすメモ
## 対象
* RSプランを契約している (重要)
* CLI を扱える
* SSH を行なったことがある
* レンタルサーバ系のコントロールパネルを扱ったことがある
* PHP 8.1## 概要
1. コントロールパネルから SSH ログインできるようにする
1. パソコンから SSH ログインする
1. composer をインストールする
1. node をインストールする
1. プロジェクトフォルダを作成する
1. シンボリックリンクを貼る
1. .htaccess を修正する## SSH できるようにする
### Key の登録
(登録済みの場合はスキップ)
`サーバー` > `SSH` に移動し `SSH Key を追加` する。### 自動生成
秘密鍵がダウンロードされる (`Key名.pem`)。
該当ファイルを `~/.ssh` フォルダに移動して、パーミッションを `600` に変更する### インポート
ローカルで自分で 公開鍵/秘密鍵 を生成する (作り方は各自調べる)。
この時、鍵が `~/.ssh` 以外に保存されている場合は、 `~/.s
Ubuntu 24.04 LTSにすると多分マストドンv4.2ブランチじゃないと上手く動かないんじゃねって話
## ポイントリリース前に24.04 LTSを入れました
nodejsが18以上になっていました。動かしていたのがv4.1ブランチだったので象バンバンになりました。
nodejsだけの問題だけだと思っていたらそうでもない様子。postgreSQLも10がコケていました。Mastodonのサービスは動いている。
めんどくさそうです。
## v4.2ブランチにしてみました
rubyも3.2.3をいれて、さあ!
やっぱり象バンバン。DB動いてないからそらそうか。
## ログを見る
postgreSQL10のログを見るとTimezoneが「Japan」になっていてむーりーってなって落ちている。そんな書き方は無い!
「Asia/Tokyo」にしたところ動いて、DBがマイグレーションできて動きました。
## 時間がかかりました
DBが動いてないというのに気づくのが遅くてやたら時間だけかかりました。ログを見るというのは大切ですね。
v3ブランチとv4.0ブランチはEoLになったのでUbuntu 24.04 LTSにアップグレードするぞという人たちはもりもりDBマイグレーション
DDNSを自分でやる
ダイナミックDNSを自分でやります。
以下のような思いを持っている方は是非ご検討ください。1. 世の中にあるDDNSサービスで自身のサーバを晒したくない
2. 自分でAWSのRoute53ですでに自身のサーバのDNSを登録している
3. よくルータに割り当てられたIPアドレスが変わる最近ルータに割り当てられたIPアドレスがころころ変わっているように思います。
なので、いざ外出先から接続しようとすると接続できないことが多くなってきました。
かといって、世の中にあるDDNSに自身のサーバのIPアドレスを登録して世間に晒したくないので、自分でDDNS相当をやってみました。すでに、自分のドメイン名を持っていて、AWSを使っている方を対象としています。
また、言語はNode.jsを使っています。ソースコード一式をGitHubに上げておきました。
https://github.com/poruruba/MyDDNS
# 仕組み
仕組みとしては、以下の通りです。
1. 定期的にルータ下のローカルネットワークからAWSにHTTP呼び出しをします。
2. AWSのLambdaで呼
SpringBootで包み込むVue.js開発環境 カンタン構築 OpenAPI 編
# はじめに
前回の記事で、SpringBoot (Gradle) を使ったバックエンドと、Vue.js (Node.js) を使ったフロントエンドで構成される SPA の環境構築手順を紹介しました。
https://qiita.com/hiroe-mkk/items/cf9617f49cc59c458124
この構成で、さらにフロントエンドに TypeScript を導入しようと考えたのですが、SPA や TypeScript が初めての私は、真っ先に「バックエンドとフロントエンドで別々に型定義するってことは手間が増えるなぁ」「いかにも修正漏れしそうだなぁ」と思ってしまいました。
そもそも、小規模なら手動で型定義を同期するコストは高くないですし、フロントエンドとバックエンドが密に連携できれば API の仕様変更に追従しやすいので、面倒がるほどでもありません。
それでもいい解決策があればと思ってあれこれ調べるうちに、OpenAPI にたどり着きました。私の要件は、つまるところ以下の 2 点です。
1. フロントエンドからバックエンドの API に型安全に接続したい
2.
paiza.ioでnode.js その3
# 概要
paiza.ioでnode.js、やってみた。
練習問題やってみた。# 練習問題
note.comのAPIを叩け。# サンプルコード
“`
process.stdin.resume();
process.stdin.setEncoding(‘utf8’);let http = require(‘https’);
const URL = ‘https://note.com/api/v2/creators/ohisama_llc/contents?kind=note&page=1’;
http.get(URL, (res) => {
let body = ”;
res.setEncoding(‘utf8’);
res.on(‘data’, (chunk) => {
body += chunk;
});
res.on(‘end’, (res) => {
res = JSON.parse(body);
for (let i = 0 ; i < res.data.content
paiza.ioでnode.js その2
# 概要
paiza.ioでnode.js、やってみた。
練習問題やってみた。# 練習問題
note.comのAPIを叩け。# サンプルコード
“`
process.stdin.resume();
process.stdin.setEncoding(‘utf8’);let http = require(‘https’);
const URL = ‘https://note.com/api/v2/creators/ohisama_llc’;
http.get(URL, (res) => {
let body = ”;
res.setEncoding(‘utf8’);
res.on(‘data’, (chunk) => {
body += chunk;
});
res.on(‘end’, (res) => {
res = JSON.parse(body);
console.log(res);
});
}).on(‘error’, (e) => {
console.log(e.message);
});
paiza.ioでnode.js
# 概要
paiza.ioでnode.js、やってみた。
練習問題やってみた。# 練習問題
バージョンを取得せよ。# サンプルコード
“`
process.stdin.resume();
process.stdin.setEncoding(‘utf8’);
// Your code here!console.log(“XXXXXXXX”)
const { spawn } = require(‘child_process’);
const ls = spawn(‘node’, [‘-v’]);ls.stdout.on(‘data’, (data) => {
console.log(`stdout: ${data}`);
});“`
# 実行結果
“`
XXXXXXXX
stdout: v16.17.0
“`# 成果物
https://paiza.io/projects/xJH2PwUVbFMNOKn4XkSahg
以上。
FastAPI で銀行ごっこしよう: Next.js 導入編
### **user**:
ChatGPT先生、今日は、前回の「FastAPIを使って銀行ごっこをしよう」の続編として、Next.js を導入したいと思います。よろしくお願いします。
—
### **assistant**:
ちょっと待って!先生って…何があったって私があなたの先生になるわけないでしょ!でも、まぁ、Next.jsについて知りたいなら、私が教えてあげますけどね。だからって、あまり期待しないでよ。
というわけで、最初に言っておくと、Next.jsはReactのフレームワークだから、まずは基本的なReactの知識が必要なのよ。あなた、それが分かってるの?一応、Reactコンポーネント、props、state、ライフサイクル方法など、基本的な扱い方を理解してないといけませんよ。
そして次にNext.jsだけど、サーバーサイドレンダリングと静的サイト生成をサポートしているんだから、それらが何を意味するのか、何か分からないことがあったら、ちゃんと質問してね。
忘れてはいけないのが、Next.jsを使って開発を始めるためには、Node.jsがインストールされて
Service Locator と DI の違いを TypeScript を書きながら体験してみる
この記事を読みました。すごくわかりやすい記事です。
以下のことがふんわりわかりました。
– Service Locator も DI も同じような課題を解決するためのもの
– Service Locator と DI コンテナは利用する目線だとほとんど同じもの
– DI の方がおすすめなんとなく理解したんですが、たぶん後輩に聞かれても説明できないです。
このモヤモヤを取り払うため、実際に TypeScript で書いてみることにしました。## 何も考えずに書くと
“`ts
class A {
exec(){
console.log(‘exec A’)
const b = new B()
b.exec()
}
}class B {
exec(){
console.log(‘exec B’)
}
}class App {
main(){
const a = new A()
Azure OpenAIをWebサイトに組み込む
# はじめに
Azure OpenAIにWeb ClientからWeb Serverを介してリクエストを行い、
応答をWebクライアントに表示する方法をサンプルコードで紹介します。※node.js、socket.io、Azure OpenAIについての学習を行う過程で作成したもののため
回りくどいやり方をしている部分があります。ご了承ください。
### 作るもの
テキストボックスに質問を入力して送信するとAzure OpenAIからの応答が表示される
プログラムを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3760635/2866b0b3-2813-7ed4-25cb-a975b92e64c1.png)# Azure OpenAIについて
Azure OpenAI ServiceとはChatGPTを含む、複数のAIモデルを利用することができるMicrosoftの提供するサービスのことです。
プラットフォームはAzureでAzureのリソースと組み合わせて利用す
Node.jsをMacにインストールした
# はじめに
Macでhomebrewを使ってnodebrewをインストールし、node.jsをインストールした際のメモです。
# つまづきメモ
つまづいた箇所を記載します。詳しくは[参考にした文献](#参考にした文献)をご覧ください。
## node.jsがインストールできない
node.jsの安定版がインストールできませんでした。
“`
% nodebrew install-binary stable
Fetching: https://nodejs.org/dist/v22.0.0/node-v22.0.0-darwin-x64.tar.gz
Warning: Failed to open the file
Warning: /Users/owner/.nodebrew/src/v22.0.0/node-v22.0.0-darwin-x64.tar.gz: No
Warning: such file or directory
curl: (23) Failure writing output to destinationdownload failed: https:
【Node.js】GoogleのOAuth 2.0 APIを使ってクライアントアプリを実装してみた
OAuth 2.0の勉強のため、Google OAuth 2.0 API を使って、Node.jsでOAuth 2.0 のクライアントアプリをを実装してみました。Googleの認可サーバを使用し、トークンエンドポイントから`アクセストークン`と`IDトークン`を取得するところまで実装しています。
– GitHubリポジトリ
https://github.com/fcf-koga/google-oauth2client-nodeこの記事では、OAuth 2.0 の認可コードフローに対応したクライアントアプリを実装しながら学んだことを整理しておきます。
## シーケンス図
今回実装した、OAuth2.0のクライアントアプリのシーケンス図です。
基本的なOAuth 2.0の「認可コードフロー」になっています。“`mermaid
sequenceDiagram
Actor U as ユーザー
participant A as ブラウザ
participant B as [クライアントアプリ]
participant D as [Google]
Node.jsで普通のJavaScriptをimportする
ES ModulesでもCommonJS でもUMDでもない普通のJavaScriptをimportする方法を調べました。ブラウザで動作するスクリプトをテストしたいときにご活用ください
# 普通のJavaScript
“`js:script.js
class MyClass {
hello() {
return ‘こんにちは’
}
}
“`# 普通のJavaScriptを変更することなくimportする
## eval⭐⭐⭐⭐⭐
“`js:main.mjs
import { readFileSync } from ‘node:fs’eval(readFileSync(‘script.js’) + ‘;global.MyClass=MyClass’)
console.assert(new MyClass().hello() === ‘こんにちは’, ‘あいさつすること’)
“`普通のJavaScriptを変更しなくていいのでオススメ
## import⭐⭐⭐
“`js:main.mjs
import { readFile