JavaScript関連のことを調べてみた2022年09月15日

DjangoでQuerySetをJSONResponseする

Djangonのモデルから引っ張ってきたQuerySetをそのままJSONで返そうとすると怒られてしまう。
“`python
users = CustomUser.objects.filter(prefecture = ‘yamagata’)
data = {
…
‘users’ : users,
…
}
return JsonResponse(data)

“`

“`terminal
TypeError: Object of type QuerySet is not JSON serializable
“`

## 解決

`.values()`で値を取り出して`list()`でリストに変換。

“`python
users = list(CustomUser.objects.filter(prefecture = ‘yamagata’).values())
data = {
…
‘users’ : users,
…
}
return JsonResponse(data)

“`

`serialize

【エラー】Gatsby.jsをNetlifyへデプロイした時の【npm ERR! code 1】の解決方法【修正】

Gatsby,jsにてコーポレートサイトをローカルで作成し、完成したのでNetlifyへデプロイしようとした所エラーに遭遇。
800行近いエラー分が吐き出されたので最初の部分のみ抜粋。
とりあえずまったくわからないため、最初の部分“`npm ERR! code 1“`で調べてみることにした。

そうするとどうやらnpm(Node.jsのパッケージを管理するシステム)の依存関係が原因でどうやらエラーになってるっぽいので、
まず下記コマンドで依存関係をリストします。
“`bash
npm outdated
“`
そうすると色んなパッケージのリストが表示されます。
それを全て最新にアップデートしていくのですが、公式では1つ1つ“`npm install {package}@latest“`す

Python,Ruby,PHP,Java,JavaScript,Perlの四則演算の比較

Qiita > プログラミング言語の比較

Python,Ruby,PHP,Java,JavaScript,Perlの四則演算の比較

# Python

https://qiita.com/hiroyuki_mrp/items/d7e4c2d75e947ab99caf

# Ruby

https://qiita.com/mat827/items/ee569f6549b83bb954e2

# PHP

https://qiita.com/koala_56/items/7ed631f62cf0f225f5a6

# Java

https://qiita.com/takahirocook/items/748990882f2de7a630a1

# JavaScript

https://qiita.com/_haya_/items/dbe80010a0a8ac9d70b1

# Perl

https://perlzemi.com/blog/

ASP.NET Core WebアプリにJavaScriptを書き込んでも挙動不審、動かない

ASP.NET Core WebアプリケーションにJavaScriptを書き込んでも挙動不審、動かない…。

なぜだ、なぜなんだー？？？

で、ブラウザーに届いているソースを見たら、フレームワークが6つくらいJSを読み込んでいるんだから何かあるんだろうなぁ、と思えてきたので

ごそごそ探したら（何を検索で入れたら出たのか忘れてしまった）

@section scripts { }

でくくるのじゃ、

ということが書いてあった
https://qiita.com/misuzoo/items/2c479060320cdcd67dee
のでやってみた。ら。
動いた function も出てきた。
全部が動くわけでもないのが、書いたコードのバグ入り率を示してもいるが…。

コードは括りましょうって、@{} や @Code{} みたいなものか。

ただ、@Html.Raw() でずらずら書いて動いてしまっていた（のでそれでいいと思っていた）のを @section scripts { } に移してダブルクォーテーションにつけていた￥を外しただけだと、逆に動かなくなっている部分も出た。
.NETは

javascript基本文法

# 文字の連結
“`
console.log(“3″+”5”); //35が出力される
console.log(3+5);　　　　　　　　　　　　　　　　　　//8が出力される
“`

# 変数の定義
“`
let name = “にんじゃわんこ”;
“`

# 定数の定義
“`
const name = “にんじゃわんこ”;
“`

# テンプレートリテラル
“`
const name = “にんじゃわんこ”;
console.log(`こんにちは、${name}さん`);
“`
# 等価演算子
“`
a==b //aとbが等しい
a!=b //aとbが異なる
“`
# 厳密等価演算子
“`
a===b //aとbが厳密に等しい
a!==b //aとbが厳密に異なる
“`
# and / or
“`
&& //かつ
||　 //　または
“`

# if文
“`
const number = 7;

if(number>10){
console.log(“numberは10より大きいです”);
}else

【Typescript】スプレッド構文と残余引数（レスト構文）の違い

Typescriptを学習中、スプレッド構文と残余引数（レスト構文）の違いで少し悩んだので、復習も兼ねて投稿します。

## 目次
**■スプレッド構文とは**

**■残余引数(レスト構文)とは**

**■共通点・違い**

**■よく見るスプレッド構文の例と「Typescript」**

## ■スプレッド構文とは
**配列やオブジェクトの中身を展開する。**

同じ配列の中身やオブジェクトの中身を展開して複合するのに便利。

“`javascript
const array: number[] = [1,2,3];

const array2: number[] = […array, 4];
// [1, 2, 3, 4]

const obj = {
name : “sample”,
age : 25,
}

const newObj = {…obj, from: “japan”};
// { “name”: “sample”, “age”: 25, “from”: “japan” }
“`

## ■残余引数(レスト構文)
**複数の要素

【初心者向け】Javascriptで簡単なTodoアプリの作成【addEventListener】

# 本記事の内容
javascriptで簡単なTodoアプリを作ります。
実装手順は以下の通りです。

①Todoを表示・保存
②Todoを削除
③Todoを完了

# 環境
HTML、CSS部分は今回は範囲外とします。
以下の内容は実装済みの前提で記載していきますので、お使いのテキストエディタへのコピペをお願いします。

コードは以下です。
“`html:index.html

[js/ts]取得した文字列が、指定した文字列と前方一致しているかを判別する方法

はじめに
—
「フォームに入力された文字列が〇〇と前方一致している場合のみ処理Aが動く」というような記述がしたく、前方一致しているか判別する方法を調べたので内容を備忘録として残そうと思います。

前方一致かを確認するためには”startsWith()”を使用する
—
“startWith()”というメソッドを使用することにより、前方一致しているか判別することができます。

※厳密に言うと、デフォルトが前方一致で、引数で指定をすれば、判別を開始する位置を変更することができます。

構文
—
下記が構文です。
文字列(str)と指定した文字列(searchStringの箇所で指定)の前方が一致しているかどうかを判別をします。

一致している場合はtrue/一致していない場合はflaseを返します。
~~~ts
str.startsWith(searchString[, position])
~~~

下記が簡単な例になります。

~~~ts
const str = ‘hello world!’;

console.log(str.startsWith(‘hello’));
// tr

#プログラミング #英語 #Javascript #nodejs #glitch # 英単語を覚えたり、思い出すのを早くするツール

本内容を利用した場合の一切の責任を私は負いません。

# 概要
リスニングができるようになるには、英単語の意味を思い出す早さも必要だと思った。
それをトレーニングするツール。
ほんとは見てではなく聞いてで行いたかったが素材が無いため。
一応、英単語を覚えるツールとしても使えると思う。

# バージョン
– OS
OS 名: Microsoft Windows 10 Home
OS バージョン: 10.0.19043 N/A ビルド 19043
システムの種類: x64-based PC
– node.js
node-v10.16.0-win-x64
– linq(node.jsのライブラリ)
3.2.4
– multer(node.jsのライブラリ)
1.4.5-lts.1
– jsonwertoken(node.jsのライブラリ)
8.5.1
– async-lock(node.jsのライブラリ)
1.3.2
– csvjson-csv2json(node.jsのライブラリ)
bc644c4428f551

JavaScript 日付をYYYYMMDD, YYYY/MM/DD など区切り文字指定してフォーマットする関数

# 状況によって区切り文字を変えたい
JavaScriptで日付をフォーマットする際に
– YYYYMMDD (区切り文字なし)
– YYYY/MM/DD (スラッシュ区切り)
– YYYY–MM–DD (ハイフン区切り)
– YYYY.MM.DD (ドット区切り)

など状況に応じて区切り文字を変えたいときがあります。
そこで区切り文字を可変で指定できるフォーマット関数を作成しました。

こちらの記事を参考にさせていただいております。
月、日のゼロ埋め(1 → 01) なども解説頂いております。
[日付をYYYY-MM-DDの書式で返す関数 (JavaScript)](https://qiita.com/toshimin/items/5f13c3b4c28825219231)

# 日付

自作一本ノック

こんにちは。
N予備校でプログラミングをせっせせっせと勉強中のふーちんです。
N予備校プログラミング入門コースの「千本ノック」というものを真似して自分も一つ作ってみたので、「一本ノック」です。

# N予備校プログラミング入門コースの千本ノック

N予備校プログラミング入門コースでは、今年「JavaScript 千本ノック」というのが追加されました。
それは簡単に言うと、JavaScriptの文法の問題集です。
演算子について、文字列について、ループ処理について、配列についてなどや他にもたくさんありますが、
それらを一つ一つできるだけ一言で説明し、それらを使って解くことができる問題を用意してあります。もちろん答えもあります。
流石に1000問もないですが、簡単な問題から、少しずつ工夫が必要になってくるので、ものすごく身に付くと思います。
問題の題名やフクロウのつぶやきが面白いなと思ったりもします。
やりたいと思ったあなた、是非ともN予備校に入学しよう～

https://www.nnn.ed.nico/

# 作った問題

簡単な電卓の関数を作る問題です。もともと、引数の数値を

JSのPromiseの基本について調べてみた

## 背景
Axiosを使おうとした際にAxiosのREADMEに「Promise based HTTP client for the browser and node.js」とあり、
そもそもPromiseってなあに？となったためPromiseの概要についてまとめてみました！

※新卒1年目で知識も浅いため、内容には間違いがある場合があります?

## Promiseの基本
そもそもPromiseとは、日本語に訳すと「約束」です。

JSのPromiseも同じで処理における約束を決めるものになります。
つまり　①約束を守った場合、➁約束を破った場合の処理をそれぞれ記述することができるものです。

#### Promiseのステータス
待機状態　　　　　　　⇒　pending
成功（約束を守った）　⇒　resolved
失敗（約束を破った）　⇒　rejected

#### Promiseのインスタンス化
Promiseをインスタンス化する際には、引数に何を入れるかは決まっています！
***▶第1引数にはresolve（約束を守った場合）のコールバック関数***
***▶第2引数には

実習（ポートフォリオサイト作成）

# 初級編

まずは初級編として以下を作成していきます。

https://code-step.com/demo/html/portfolio1/

## ステップ１
すぐにコーディングせずに一度全体を見て、どの部分にどのタグを使用していくかを考えます。

まず、大きく３つに分けることができます。

– ヘッダー
– メイン
– フッター

また、レスポンシブを考慮して、デスクトップ版、モバイル版両方のレイアウトを作成する必要があります。今回はデスクトップ版のレイアウトを基準にページを作成していきます。
※最近はモバイルファーストという言葉もあり、モバイル版のレイアウトを基準にページを作成していくことが推奨されているそうです。⇦Udemyの某e-ラーニング講師が言っていました。

### ヘッダー

– ヘッダー
– モバイル版ではMy W

8.2 基本構文（変数とは、if文, switch文, for文, while文について）補足

# 基本構文を使用して表示を制御してみよう

## if文、for文

if文やfor文を使用して、ボタンを押下することで表示、非表示の切り替わる文字列を実装していきます。

index.html

“`html

visibilityプロパティを使用して表示を切り替える

あいう

8.2 基本構文（変数とは、if文, switch文, for文, while文について）

## 変数とは
プログラミング言語における「値を入れておく箱」のこと

https://wa3.i-3-i.info/word1603.html

### 変数の宣言について

https://techacademy.jp/magazine/14872

実際にjsで書いてみよう

宣言

“`js
// 宣言
var testV = “var”;
let testL = “let”;
const testC = “const”;
console.log(testV);
console.log(testL);
console.log(testC);
“`

再代入

“`js
// 再代入
var testVar = “var宣言”;
console.log(testVar);
testVar = “var再代入”; // 再代入可
console.log(testVar);

let testLet = “le

8.1 Javascriptを触ってみよう

# ■JavaScript とは

クライアント側（Web ブラウザ側）で実行されるプログラミング言語です。
動的に Web ページの内容を書き換えたり、入力値をチェックなどを行うことが出来ます。
HTML だけでは動く Web ページはできませんが、JavaScript を使うと Web ページにさまざまな動きを入れることができるようになります。

# ■ブラウザのシェア

ブラウザによるJavaScriptの挙動の違いは、把握してませんし、ここでは説明しませんが、
一応、シェアくらいは確認しておきましょう。
[2021年10月webブラウザシェア](https://shiftasia.com/ja/column/2021%E5%B9%B410%E6%9C%88web%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%82%B7%E3%82%A7%E3%82%A2/)

# ■Web で JavaScript を試す

ウェブサイトで JavaScript を簡単に試すことができる環境があります。
たくさんあります。
まずは、[Codepen]

8.3 関数とは

# 関数とは

複数の処理をひとまとまりにしたものです。メソッドと呼ばれることもあります。
また、前述の通り、JavaScriptにおける基本的な構成要素のひとつであり、Function型のオブジェクトとして扱われます。関数をオブジェクトとして扱うことが出来るのはJavaScript特有の特徴です。

## 定義方法
関数定義の方法として「関数宣言」があります。
記法　`function 関数名(引数) { 処理 }`

“`js
/** 引数で指定した名前に挨拶をする文字列を返す関数 */
function hello1(name) {
var message = “Hello, ” + name
return message
}
“`

宣言の中にある「引数」という言葉についてですが、「引数」とは関数に渡して処理の中でその値を使うことができるものです。

#### アロー関数
上記の方法で関数は定義できますが、別の方法としてアロー関数というものがあります。最近できた記法で（2015年）私は基本こちらを使用しています

記法　`関数名 = (引数) => { 処理 }

Bootstrap

# Bootstrapとは
BootstrapはTwitter社が開発したCSSの「フレームワーク」[^1]です。通常CSSを書く場合、全てのスタイルを自分で作っていく必要がありますが、このフレームワークにはよく使われるスタイルがあらかじめ定義してあるので、ルールに沿って利用するだけで整ったデザインのページを作成できます。

# Bootstrapでできること

– **レスポンシブWebデザインに対応している**
通常、スマートフォンやタブレットなど個別に対応するスタイルを作っていると大変手間がかかります。BootstrapはCSS3のメディアクエリを使用しているので、ブラウザの横幅サイズを判断基準として、レイアウトデザインを柔軟に調整することが可能です。
– **デザイン部品が使える**
[フォーム](https://getbootstrap.jp/docs/4.2/components/forms/)・[ボタン](https://getbootstrap.jp/docs/4.2/components/buttons/)・[ナビゲーション](https://getbootstra

Vue.jsの ディレクティブについて(はじめてのVue.js3入門13-29学習内容)

# ディレクティブ
*ディレクティブとはhtml属性に記述する特別な処理を行うもの
### 例
v-bind
v-if
v-show
v-for
v-on
v-model

## 1.v-bind
### 前提条件
前提として、htmlの属性には,value={{ }}のようなマスタッシュ構文は使えません
### 使い方
＊input要素の中に入れる値を入れる
1.v-bind:属性名 = ‘変数名’
“`html

// ダメ

// OK
　

“`
“`js
const app = Vue.createApp({
data:()=>({
messeage:”メッセージ呼ばれました”,
})
})
app.mount(‘#app

9.1 jQueryとは

## jQueryとは
jQueryはJavaScriptのためのライブラリ[^1]です。jQueryを使用することでシンプルにJavaScriptを記述できるようになり、それまで数十行にわたるコードが必要だった処理もわずか数行で実行できるようになりました。

今回使用するindex.html

“`html