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

kintoneカスタマイズでtry/catchを使おう

## はじめに
皆さんこんにちは。サイボウズ株式会社テクニカルトレーナーのTeruです。
今回はkintoneカスタマイズにおけるtry/catchの使い方を考えていきましょう！

## try/catchの基本
そもそも、try/catchは例外が発生した場合に例外を処理するために使用します。
“`JavaScript
try {
実行する処理
} catch(e) {
try文で例外が発生した場合に実行される処理
}
“`

例外とは、kintoneカスタマイズにおいては多くの場合 REST API の実行に失敗した場合のことです。

### サンプル
例えば、`アプリ番号:１ レコード番号:１`のレコードを取得する場合は下記のようにtry/catchを使用します。

“`JavaScript
try {
// レコード取得処理
await kintone.api(‘/k/v1/record’, ‘GET’, { app: 1, id: 1 });
} catch (e) {
// レコード取得に失敗した場合の処理
console.error(e);
}

Reactで学習記録アプリ作ってみた

# はじめに
僕は現在1ヵ月本気で技術力向上を目指していて、今日はその2日目です。JISOUというサービスのもとコーチングを受けています。

udemyの講座をひとつ完了させたので、今回は簡易的な学習記録アプリを作ってみたので、備忘録のような感じでまとめていきたいと思います。

初投稿の記事
よかったらぜひ読んでみてください！

https://qiita.com/shunii/items/c5ed2e55e05621f86795

# アプリの機能紹介
初期画面

学習記録の追加後
![スクリーンショット 2024-02-16 120601.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3554025/cd48c9

plunkerで liquidfun その4

# 概要
plunkerで liquidfunやってみた。
エンジン、やってみた。

# 写真


# サンプルコード

“`

var world = null;
var FPS = 1000 / 45;
var STAGE_WIDTH = 456;
var STAGE_HEIGHT = 456;
var SCALE = 10;
var ITEM_TYPE_PARTICLE = “particle”;
var ITEM_TYPE_POLYGON = “polygon”;
var ITEM_TYPE_CIRCLE = “circle”;
var physicsEngine = PhysicsEngine();
var viewer = Viewer({
id: “canvas”
});
function PhysicsEngine() {
v

plunkerで liquidfun その3

# 概要
plunkerで liquidfunやってみた。
揺れる瓶、やってみた。

# 写真


# サンプルコード

“`

var container;
var world = null;
var threeRenderer;
var renderer;
var camera;
var scene;
var objects = [];
var timeStep = 1.0 / 60.0;
var velocityIterations = 8;
var positionIterations = 3;
var test = {};
var projector = new THREE.Projector();
var planeZ = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);
var g_gr

JavaScriptのSymbolとは？

先日、O’Reillyから出版されている「JavaScript 第7版」を読んでいると見慣れぬプロパティを見つけました。

それが **Symbol** です。

文字列ではないプロパティとしてES6から導入されたもののようで、
今まで見たことがありませんでした。

今回はSymbolとは一体何なのか、
どのように使用するのかを調べてまとめてみました。

# Symbolとは
Symbolとは何なのか、まずは「[MDN Web Docs](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Symbol)」を確認してみました。

> JavaScriptでは、シンボルはプリミティブ値です。

> Symbol データ型を持つ値は「シンボル値」として見ることができます。 JavaScript の実行時環境では、シンボル値は Symbol 関数を呼び出すことで生成され、動的に無名の一意の値を生み出します。シンボルはオブジェクトプロパティとして使用されることがあります。

> Symbol

plunkerで liquidfun その2

# 概要
plunkerで liquidfunやってみた。
重力を反転してみた。

# 写真


# サンプルコード

“`

var world = null;
var FPS = 1000 / 60;
var GRAVITY = 20;
var STAGE_WIDTH = 450;
var STAGE_HEIGHT = 450;
var SCALE = 10;
var ITEM_TYPE_PARTICLE = “item_type_particle”;
var ITEM_TYPE_POLYGON = “item_type_polygon”;
var PARTICLE_DENSITY = Number(“3”) || 3;
var PARTICLE_SIZE = Number(“99”) || 100;
var PARTICLE_FLAGS

【npmリリース】約2400種類の仮想通貨の価格情報をターミナルで取得できるnpmを公開しました


# coinrateとは

coinrate は、暗号資産市場全体の市場取引情報や各銘柄の詳細な取引データをターミナル上で簡単に取得できるコマンドラインツールです。ターミナルを通じて、リアルタイムの市場の価格変動、銘柄ごとの価格情報へのアクセスが可能です。

このツールは、迅速かつ効率的な情報収集を可能にします。約 2400 種類の暗号資産銘柄に対応し、
トップに表示されていない銘柄については Ticker で検索が可能です。

# 公開先

https://github.com/hirano-vm4/coinrate

https://www.npmjs.com/package/coinrate

# 作った経緯

私は2022年5月から未経験スタートでプログラミング

【jQuery】カスタムデータ属性とは

# カスタムデータ属性とは
カスタムデータ属性は、HTML要素に追加されたデータを格納するための属性です。これらの属性は`data-`という接頭辞を持ち、その後に任意の属性名が続きます。これにより、HTML要素に関連付けられたカスタムデータを簡単に取得したり設定したりすることができます。

# 使用方法
例えば、以下のようなHTML要素があるとします：
“`html

“`
この`

`要素には、`data-user-id`と`data-user-name`というカスタムデータ属性があります。これらの属性にはそれぞれ`123`と`John`という値が格納されています。

jQueryを使用してこれらのカスタムデータ属性を取得する方法は次の通りです：
“`js
// カスタムデータ属性の値を取得する
const userId = $(‘#myDiv’).data(‘user-id’);
const userName = $(‘#myDiv’).data

【JavaScript】Arrow Functionとは

# Arrow Functionとは
Arrow Function（アロー関数）は、ES6（ECMAScript 2015）で導入された新しい関数定義の構文です。通常の関数定義よりも短く、シンプルな構文を提供します。

**通常の関数定義：**
“`js
function add(a, b) {
return a + b;
}
“`

**アロー関数の構文：**
“`js
const add = (a, b) => {
return a + b;
};
“`

# 特徴
**アロー関数の特徴：**

1\. **短縮構文** : アロー関数は通常の関数定義よりも短い構文を持ちます。引数が1つの場合、引数の括弧`()`を省略することができます。
“`js
const square = x => {
return x * x;
};
“`

2\. **暗黙的なreturn** : アロー関数では、1つの式を返す場合は`return`キーワードと中括弧`{}`を省略することができます。この場合、その式の評価結果が自動的に返されます。
“`js
const squa

【React】mapメソッドとは

# mapメソッドとは
`map`メソッドは、配列の各要素に対して指定された関数を呼び出し、新しい配列を生成します。このメソッドは、Reactコンポーネント内でリストや配列をレンダリングする際に非常に便利です。

# 使用方法
具体的には、`map`メソッドは次のように使われます：
“`jsx
const numbers = [1, 2, 3, 4, 5];

const doubledNumbers = numbers.map((number) => {
return number * 2;
});

console.log(doubledNumbers); // [2, 4, 6, 8, 10]
“`
この例では、`numbers`配列の各要素を2倍にして新しい配列`doubledNumbers`を生成しています。

Reactでは、`map`メソッドを使用して、動的にリストやテーブルなどの要素を生成することができます。例えば、次のようにしてReactのコンポーネント内でリストを生成することができます：
“`jsx
const MyComponent = () => {

【JavaScript】node.jsとは

# node.jsとは
Node.js（ノード・ジェイエス）は、ChromeのV8 JavaScriptエンジンに基づいて構築された、非同期イベント駆動のJavaScriptランタイム環境です。Node.jsは、サーバーサイドでJavaScriptを実行するためのプラットフォームとして広く使用されています。

# 特徴
主な特徴や利点は以下の通りです：

1\. **非同期イベント駆動** : Node.jsは非同期イベント駆動のモデルを採用しており、ノンブロッキングI/O処理を実現しています。これにより、高いスケーラビリティとパフォーマンスを実現します。

2\. **シングルスレッド** : Node.jsはシングルスレッドで動作しますが、非同期イベント駆動のモデルを採用することで、非同期処理を行うことができます。これにより、複数のリクエストを効率的に処理できます。

3\. **JavaScript** : Node.jsはJavaScriptを使用してサーバーサイドのアプリケーションを開発するため、フルスタックのJavaScript開発環境を提供します。これにより、フロントエン

GWT＋Eclipseでサンプルプロジェクトを動かす

# GWTはEclipseプラグインがありプロジェクト作成時にサンプルが提供されます
・メチャ簡単
・サーバ不要
・デプロイしなくても動かして確認できる

JavaScriptで変数に数が入っているか確認したいとき(isNaN関数)

aがnumber型のとき、aに数が入っていたらif文に進むようにしたい。

そんなときは
“`js
if(!isNaN(a)){
//コード
}
“`
とするのが正解である。

**以下はミスの例である。**
“`js
//ミスの例

if(a){
//コード
}
“`

としてしまうと、$a \geqq 1$でしか`true`を返さない。
つまり$a = 0$のときは、数が入っているのにも関わらずelseに進んでしまうのだ。

【JavaScript】fetchでネットワークエラーが発生した場合の処理を記述する方法

`is-netwark-error`というライブラリを使用することでネットワークエラーが発生した場合の処理を記述できます。

https://github.com/sindresorhus/is-network-error

“`shell
npm install is-network-error
“`

“`js
import isNetworkError from ‘is-network-error’;

async function getUnicorns() {
try {
const response = await fetch(‘unicorns.json’);
return await response.json();
} catch (error) {
if (isNetworkError(error)) {
// ネットワークエラーの際の処理
}

throw error;
}
}

console.log(await getUnicorns());
“`

## 参考

https://developer.mozilla.or

【最新ver対応済】モダンJavaScriptの基礎から始める挫折しないためのReact入門 修了日記

# はじめに
以下のudemy講座を本日修了したので、そのメモを投稿しようと思います。

https://www.udemy.com/course/modern_javascipt_react_beginner/

# 受講した感想
1か月ほど前に触れて挫折していたのですが、もう一度いちからやり直すにしても一日ではボリューミーな内容でした。
この講座では、素のJavaScriptでもReactでもTODOアプリを開発することで、Reactがいかに使いやすかという恩恵を感じられるような体験が用意されています。
おそらく初めて取り組んだ方にとっては、どっちも難しい！と思うのが当たり前のことです。僕もそうでした笑

### 特に難しかったところ
– hooks ( useState, useEffectなど )を使った状態管理
– コンポーネントに分割する

状態管理とひとくくりにいっても、さまざまな状態があるのでそこが混乱する要因だったのかなと思います。
*true* と *false* といったbooleanの状態、TODOの内容を管理する配列の状態など。

しかし、大事なのは結局 *

【jQuery】繰り返し処理

# 繰り返し処理
jQueryを使用してDOM要素の集合に対して反復処理を行うためのいくつかの方法があります。

1\. **eachメソッド**
jQueryの`each`メソッドは、セット内の各要素に対して指定された関数を実行します。これは、`for`文のような反復処理を行うための主な方法です。
“`js
$(‘li’).each(function(index, element) {
console.log(index + ‘: ‘ + $(element).text());
});
“`
この例では、`

`要素の集合内の各要素に対して、そのインデックスとテキスト内容をコンソールに出力しています。

2\. **$.each関数**
`$.each`関数は、jQueryオブジェクトや配列などのコレクションに対して反復処理を行います。
“`js
$.each([1, 2, 3], function(index, value) {
console.log(index + ‘: ‘ + value);
});
“`
この例では、配列内の各要素に対して、そのイ

Three.jsで地球作ってみた。

## はじめに

今回はThreeJSを使って地球を作ってみたのでメモしたいと思います。
実際のオブジェクトがこちらです。


これがHTMLとJavaScriptで書かれていて、身近な言語で作れることを知った時は感動しました！

## そもそもThreeJSとは

– WebGLと呼ばれるコンピューターグラフィックで使われる難しい技術を、簡単かつ直感的に使えるようにするために作られたJavascriptのライブラリ。

– ThreeJSを使えば、HTMLのcanvas要素にJavascriptで3D描画を描画することが出来る。

## ThreeJSの開発で、絶対に必要な3要素。
– シーン（scene）
– カメラ（PerspectiveCamer

Flatpickrを使ってカレンダーを作ってみよう！

## はじめに
フォーム作成時に、日付を簡単に入力させたい！

ただ日付を入力するだけだとつまらない。。。

などなど、フォームの日時入力欄を少しリッチに実装したいなんて経験はあるのではないでしょうか？

そんな時は、javascriptのライブラリ「Flatpickr」がおすすめです！
Jqueryの知識がなくても実装する事ができます！

まずは実際にFlatpickrを確認したいと思います。

日時入力欄を押下


カレンダー内の日付押下

![image](https://firebasestorage.googleapis.com/v0/b/ciita-c6ea6.appspot.com/o/user%2Fimages%2FCuVeEu27OLYjm

配列やオブジェクトはconsole.table()で見ると分かりやすい

## コード
– 以下の変数`menuList`は7個のオブジェクトを持った配列
“`js
const menuList = [
{
name: “チーズバーガー”,
price: 500,
category: “food”,
},
{
name: “てりやきバーガー”,
price: 550,
category: “food”,
},
{
name: “月見バーガー”,
price: 600,
category: “food”,
},
{
name: “ベーコンレタスバーガー”,
price: 550,
category: “food”,
},
{
name: “コーヒー”,
price: 200,
category: “drink”,
},
{
name: “オレンジジュース”,
price: 250,
category: “drink”,
},
{
name: “コーラ”,

NextJSでメール機能！（nodemailer）

NextJSでAPIを使ってみたいと思い、メール機能を実装したので備忘録。

## nodemailerとは
node.jsからメール送信をすることができるモジュール。

## 実際の動き

・内容を入力して「メール送信」ボタンを押下する

・Gmailにてメールが送られる

### 使用する技術
・Nextjs:13.4

・r