JavaScript関連のことを調べてみた

JavaScriptとJava間違えないで。ダメ。ゼッタイ。

どうもAtsu1209です。

突然ですが…
### 「JavaScriptとJavaは同じです。」
これを見て舌打ちをした方もいるんではないでしょうか。
でもよく間違えられます。

僕も台パンしました。

そこでめちゃくちゃ短くわかりやすく解説します。

# HelloWorld
ではまずは親の顔より見た`HelloWorld`を出力しましょう。

“`javascript:JavaScript
console.log(“HelloWorld”);
“`
簡単です。
続いてJava
“`java:Java
public class Main {
public static void main(String[] args) {

System.out.println(“Hello World”);

}
}
“`
“`console:コンパイル
javac Main.java
“`
“`console:実行
java Main
“`
:::note alert
Javaほとんどわからないので間違ってるかも
:::

こ

特定のキーワードが含まれるQiitaの記事から、タイトルといいね数だけを抽出する

# はじめに
情報が溢れる世の中、なるべく効率的に目的のものを見つけたいという思いは皆さんあるかと思う。そこで、特定のテーマに関連するQiitaの記事から、タイトルといいね数だけを抽出して、効率よく閲覧できる仕組みを構築したいと考えた。

# やってみたいこと
・Qiitaから『顔認証』についての記事を探す
・タイトルといいね数を抽出し、一目で人気の記事が分かるようにしたい

# Node-REDを活用
Node-REDで、Qiitaの顔認証の記事をピックアップしてみることにした。

・HTTPリクエストノード
QiitaのAPIを使用して特定のクエリに基づいてアイテム（記事）を検索する。https://qiita.com/api/v2/items というURLは、パラメーターに検索クエリを設定することで、特定のキーワードを含む記事を取得することが可能である。

・Functionノード
検索クエリに含まれる日本語や特殊文字をURLエンコードする必要がある。そこで、Functionノードを使って、msg.query = encodeURI(“顔認証”); を実行することで、msg.qu

カラーコードの仕組み

# カラーコードってどんな仕組みか、知ってる？

ざっくりその辺の解説について。

# カラーコードや色とは？

基本的に色はRGBの3原色で構成されているというのはご存じかと思います。
赤＋青で紫
赤＋緑で黄
全て合わせると白

みたいな形ですね。

https://tomari.org/main/applets/iro/gen.html

これを16進数(HEX)にしたのがカラーコードとなります。
内訳はこんな感じ。

`#DE5040`は

“`
Red = DE
Green = 50
Blue = 40
“`
といった形で表現されています。
これらを10進数に変換したものがRGBとなります。

HEXをRGBのコードに変換するとしたらこんなコードで変換できます。

“`js
// rgbを分解する。
const [r, g, b] = ‘#de5040’.replace(‘#’, ”).match(/.{2}/g);

// rgbを10進数に変換する。
const red = parseInt(r, 16);
const green = pars

【js/ts】Date型のtoStringでYYYY/MM/DDを取得してみる

## そのままtoString()をすると色々余計な文字がついてくる
※Dateの第二引数(Month)は１月＝０となる。例えば２月なら「1」を設定する。
“`javascript
const d = new Date(2024, 1, 10)
console.log(d.toString())
“`
“`console:結果
Sat Feb 10 2024 00:00:00 GMT+0900 (日本標準時)
“`
## よく見かける方法
“`javascript
const d = new Date(2024, 1, 10)
const s = `${d.getFullYear()}/${d.getMonth() + 1}/${d.getDate()}`
console.log(s)
“`
“`console:結果
2024/2/10
“`
ただ毎回これを書くのは面倒……

## Date.prototype.toStringを上書きしてみる
“`javascript
Date.prototype.toString = function get() {
re

GPT-4o と Node.js の process.loadEnvFile() と OpenAI のライブラリを組み合わせる

リリースされたばかりの GPT-4o を API経由で試すのに、以前、以下の記事で書いた「Node.js の process.loadEnvFile()」を組み合わせてみたという内容です。

●【小ネタ】Node.js v21.7.0 の新機能で環境変数用のファイル読みこみを軽く試す： process.loadEnvFile() – Qiita
　https://qiita.com/youtoy/items/ae838cacd43b3c3e61e1

## GPT-4o について
GPT-4o　については、既にいろいろな方が記事を書いていると思うので、詳細はそれらをご参照ください。

●GPT-4o – Google 検索
　https://www.google.com/search?q=GPT-4o

## OpenAI の Node.js ライブラリ
今回、GPT-4o を API経由で試します。
その処理には、以下の OpenAI の Node.js用ライブラリを使います。

●openai – npm
　https://www.npmjs.com/package/openai

画像にグリッド線を入れるツールをHTMLを作りました

今回HTMLとJavascriptを使用して作成したのは、画像をアップロードすると、自分の好きな幅のグリッド線を追加することができるツールです。

## はじめに
このツールは、学校等の美術で模写をする際に簡単に画像にグリッド線を追加したいという場合等に使用していただけると嬉しいです！

## 作成方法
見た目を自分で作成し、JavaScriptの部分等の動作のコードは、ChatGPTに手伝ってもらいコーディングをしました。いくつか試作品を作成いたしましたので。どこが違うか考えてみてください！

# 試作品１
“`html:test1.html