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

ネストしたループ処理にラベルを貼り、条件を満たしたら抜ける方法（JavaScript）

## ネストしたループから抜けるには
JSのループ（for）から抜けるにはbreak、処理を終えるにはreturnを使えばいいですが、ネストしたループにおいて、特定の条件を満たしたらその全てから抜けるようにするには、工夫が必要です。
その一つの方法がループにラベルを貼る方法になります。

## ラベル付きループとは？
JavaScriptでは、ラベルを使ってループに名前をつけることができます。これにより、通常のループ構造の外側から内側のループを制御できます。ラベルを使用すると、内側のループを外側のループに関連付けることができます。

ラベル付きループは次のように構文されます。
“`
outerloop: for (var i = 0; i < 5; i++) { innerloop: for (var j = 0; j < 3; j++) { if (i === 2 && j === 1) { break outerloop; } console.log('i = ' + i + ', j = ' + j); } } ``` 上記の例では、

【Javascript】公開したライブラリ・パッケージのCDN作成方法

# はじめに

初めまして。エンジニアのkeita_Maxです。

以前ライブラリをnpmに公開する記事を書いたのですが、それをCDNとして読み込むようにするにはどうしたらいいのだろうと調べた結果を書きます。

# JSDELIVER

https://www.jsdelivr.com/

JSDELIVERというものがあるらしいです。

これはNPMに公開しているものなら何でもCDNとして読み込みことができるようなので、実際にやってみました。

# URLを作ってみる

>// load any project hosted on npm
https://cdn.jsdelivr.net/npm/package@version/file

公式にはこのように書いてありました。

`package@version`ここに自分のパッケージの名前とバージョンを記載し、`file`部分には読み込みたいファイル名を記載します。

実際にやってみます。

`https://www.npmjs.com/package/keitamax-flowing-js`

この間公開したパッケージで試し

Node.js（Express）とRenderでLINEログイン機能を実装する

## はじめに
[前回](https://qiita.com/course_k/items/4c7faedf11723af9bb6e)はLINEが用意してくれているデモアプリをつかって、LINEログイン機能を試しました。
今回は、Node.jでの実装を通して、内部でどのような処理をしているのかを確かめます。

### 前提
本記事は以下のことは完了している想定で進めます。
* Node.jsをインストール済であること
* GitHubアカウントをもっていること
* Renderアカウントをもっていること
* LINE関連の設定が終わっていること（設定詳細は[こちら](https://qiita.com/course_k/items/85bf9cfab971cb5b97ee#line%E9%96%A2%E9%80%A3%E3%81%AE%E8%A8%AD%E5%AE%9A)）
* LINEログインチャネルの作成方法がわかっていること（作成方法は[こちら](https://qiita.com/course_k/items/4c7faedf11723af9bb6e#line%E3%83%AD

JavaScript: 圧縮力は大丈夫か?

先日の記事で紹介した[哀れな圧縮力](https://qiita.com/mashuel/items/2353b0b9fe6887c33f41)とやらに多少味付けをして、圧縮力を高めようという企画になります。
手法自体は全く同じです。違いは固定bitから可変bitで符号化する点です。
そのためにRange Coderを使います(桁上がり無しの変形版)。実装は以下のようになります。
“`js
/*
@In: Array/Uint8Array
@m: model size. 0-31
@n: hash size. 0-7
@return: Array
*/
function compress(In,m,n){
// bit encoder
function eBit(P,c,b){
var p=P[c],m=x1+(x2-x1>>>12)*(p>>4);
P[c]+=((b<<16)-p)*15>>9;
// normalize
for(b?x2=m:x1=m+1;!((x1^x2)>>24);x2=x2<<8|255) x1<<=8,Out[o++]=x2>>

【 jQuery】Swiperでスライダーを実装する方法

## はじめに
スライダーを実装するプラグインの中でおすすめのSwiperの使い方について記事にしていきます

## Swiperについて
スライダーを実装できるJavaScriptのプラグインです。jQueryに依存しない高機能スライダーで、動作が軽いのが特徴です。

https://swiperjs.com/

Swiperには、次の3つの導入方法があります。
– ファイルをダウンロードして読み込む
– CDN（Content Delivery Network）を利用して読み込む
– npm（Node Package Manager）を使用して読み込む

この記事では、ファイルをダウンロードして読み込む方法やカスタマイズの方法について書いていきます。

それではやっていましょう！！

## 1.ファイルをダウンロード

### 1. Get Startedをクリック

![スクリーンショット 2024-04-11 18.26.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2459296/ff

JSでAPI作ってみた！

## 初めに
JavaScriptでAPIを作成してみましたので、
備忘録として残しておきます。
(ブログ投稿アプリ作成)

## 概要
ORMとしてprismaを使用。
DBはMySQL。
VScodeを使用して記述。

## 実装
①prismaクライアントを生成して、使用できる状態にする。
“`javascript:api.js
const { PrismaClient } = require(‘@prisma/client’);
const prisma = new PrismaClient();
“`

②新規作成用APIを作成
| 変数 | 内容 |
|:——–:|:———-:|
| title | ブログタイトル |
| content | ブログ内容 |
| createdAt| 投稿日 |
| user | 投稿者 |
“`javascript:api.js
app.post(‘/api/posts’, async (req, res) => {
try {
cons

スプレッド構文について学習してみた

## スプレッド構文の基本
“`ruby:JavaScript

const obj = {
id: ‘0001’,
name: ‘Taro’,
age: ’25’,
from: ‘Japan’,
};

const copyObj = { …obj };

console.log(obj);
console.log(copyObj);

“`

## 結果

## コピー元を更新してみる
“`ruby:JavaScript

const obj = {
id: ‘0001’,
name: ‘Taro’,
age: ’25’,
from: ‘Japan’,
};

const copyObj = { …obj };
obj.id = ‘0002’;

console

function`xxxx` は、タグ付きテンプレートリテラルという名前らしい

私が今まで見かけたものだと、

“`
gql`xxx`; //graphQL
“`
や
“`
escape`xxx`; //mysql
“`
など、
テンプレートリテラル（“で囲う書き方）の先頭に何かが付いている記法を、たまに見かける事がありました。

ずっと何なんだろうと思っていましたが、やっとこの記法は、
**タグ付きテンプレートリテラル** という名前のものだと知れました！

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Template_literals#%E3%82%BF%E3%82%B0%E4%BB%98%E3%81%8D%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88

どうやら、実態は関数で、テンプレートリテラルを修飾する役割みたいです。
知れてスッキリしました💡

createContext を深掘る

今回は[createContext](https://ja.react.dev/reference/react/createContext#createcontext)について学んでいきます。

>createContext は、コンポーネントが提供または読み取りできるコンテクストを作成するための関数です。

コンテクストという単語が出てきました。
ここで言うコンテクストとは、下記の事のようです。[リンク](https://ja.react.dev/learn/passing-data-deeply-with-context)

>コンテクスト (Context) を使用することで、親コンポーネントから props を明示的に渡さずとも、それ以下のツリー内の任意のコンポーネントが情報を受け取れるようにできます。

### createContextの使い方

“`jsx
import { createContext } from ‘react’; // 呼び出し
const ThemeContext = createContext(‘light’); //作成
“`

引数を1つ持

[cybozu]kintoneカスタマイズチュートリアルの詰まったところ

# Cybozu学習：kintoneカスタマイズチュートリアルの補足

Cybozuは、ビジネスソフトウェアの開発と提供を行っている企業であり、彼らの提供するサービスは多くの企業で利用されています。
この記事では、Cybozuの学習プロセスの一環の「[kintoneカスタマイズチュートリアル](https://cybozu.dev/ja/tutorials/getting-started/)」を実施した中で、私が補足すべきと感じた内容を紹介します！

# [step1(始めようJavaScript)](https://cybozu.dev/ja/tutorials/hello-js/)の補足

## 1. 開発ツールの開き方

受講するにあたり、示されたコードを試していくと思います。
以下の手順で開発ツールを開き、実施してください。

1. 以下のような**index.html**ファイルを作成し、開きます。
2. ブラウザのメニューから「その他のツール」→「デベロッパーツール」を選択します。

![スクリーンショット_20240402_085512.png](https://qii

html,css,javascript で、お遊び中「自由配置型script」

ただいま、進化中。。。

@otomachiuna ただいま、進化中。。。 pic.twitter.com/USMHrIgTIn

— Tattyan(Tachan)🇯🇵 (@Tattyan_03) April 10, 2024

総合全スクリプト
html studio.html
“`html