JavaScript関連のことを調べてみた2020年11月06日

2020.11.06
OTHER

JavaScript関連のことを調べてみた2020年11月06日

目次

- - 0.0.1. 【JavaScript】Todoリストを作成
1. やることリスト

【JavaScript】Todoリストを作成

#プログラミング勉強日記
2020年11月5日
JavaScriptでtodoリスト作成の学習をしたので、まとめます。

#出力結果
最終的に表示させたい結果です。
![スクリーンショット 2020-11-06 10.13.48.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/854121/547bdfa3-55d3-d24b-af44-3356ecbe5e15.jpeg)

#コード
回答コードを掲載します。

“`index.html

やることリスト

“`

“`script.js

‘use strict’;

let todo = [‘デザインカンプ作成’,’データ整理’,’勉強会申し込み’, ‘牛乳買う’];

for(let item of todo ) {
const li = `

${item}

`;
do

元記事を表示

Railsのfile_fieldで画像クリックでアップロードしてプレビューを差し替える

# 前段
`bootstrap_form`を使ってる場合は、下記のステップが必要です。
`bootstrap_form` を使ってると、このGemがよしなにUIを作成してくれるのですが、今回の実装では逆に邪魔になります。

“`erb
<%= f.file_field :image %>
““

![スクリーンショット 2020-11-06 10.34.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37716/7713f9cf-f872-5757-d82d-df0d5b274299.png)

なので、 bootstrapのスタイルが適用されないようにしておきます。

“`erb
<%= f.file_field_without_bootstrap :image %>
“`
![スクリーンショット 2020-11-06 10.34.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37716/0a0e4

元記事を表示

【webpack-dev-server】Cannot find module ‘webpack-cli/bin/config-yargs’【webpack-cli4系】

##記事の対象者

webpack-cli 4.xx.xx系をnpm installして、
Error: Cannot find module ‘webpack-cli/bin/config-yargs’と出力されて、どうしようもない方

#結論

“`
webpack-cli serve –mode development
“`

具体的には、package.json > scriptsにnpm run xxx として使う。
[Error: Cannot find module ‘webpack-cli/bin/config-yargs’#2029](https://github.com/webpack/webpack-dev-server/issues/2029#issuecomment-707034614)

[webpack-cli serve -ライブリロードをリリースすることでwebpackを使用します。](https://github.com/webpack/webpack-cli)

###環境

“`console
node –version
v12.18.

元記事を表示

vue2-google-mapsでロングタップイベントを実装

## ロングタップは`mousedown`と`mouseup`で検知する

参考 https://maps.multisoup.co.jp/blog/294/

## vue2-google-mapsの`GmapMap`コンポーネントで実現できない

以下はclickは動作するがmousedownは動作しない。

“`js

“`
vue2-google-mapsの[Mapクラスイベント一覧](https://github.com/Jeson-gk/vue2-google-maps/blob/master/API.md#events)に`mousedow

元記事を表示

【React】 useEffectの引数について

#概要
Reactの勉強を始めるにあたってつまずいたので書き出してアウトプットすることにしました。

#useEffectとは
useEffectはReact clasのライフサイクルcomponentDidMount,componentDidUpdateとcomponentWillUnmountの３つと同様な処理を行うことができるHookです。

#第一引数

第二引数をからにすると、Render毎に実行される関数を取ります。

“`
useEffect(() => {
console.log(“Render毎に実行”)
})

“`
基本空にしない

#第二引数

・第二引数は、第一引数で指定した関数の実行タイミングを調整する
・空配列で指定した場合[]は初回レンダー時と毎回の更新の際に実行される。

“`
useEffect(() => {
console.log(‘初回レンダー時と毎回の更新の際に実行される’)
}, [])

“`

元記事を表示

bcryptでのhash

#bcryptのhash
非同期でhashを行う。

“` javascript:hash.js
const bcrypt = require(‘bcrypt’); //bcryptの読み込み
const saltRounds = 10; //hashする回数
const pass = XXXXXXXXXXX; //hashしたいパスワード

function passWordHash(pass){
var salt = bcrypt.genSaltSync(saltRounds); //saltを生成している
var passHash = bcrypt.hashSync(pass,salt); //passとsaltを利用してhash
return passHash;
}

console.log(passWordHash(pass)); //hashされたパスワードが出力される
“`

“`console:pass
$2b$10$PXGSNfywWeedDsq10zX8vuPXkJQ6ZjqU9

元記事を表示

震源データ3D展開の改良【地球儀版】

この記事は[気象庁の震源データを3Dで展開](https://qiita.com/UsagiLabo/items/14c503b817791ac722f9)で開発したモデルを仮想の地球儀上に展開するように改修したアプリケーションである。

#はじめに

前回作成したバージョン（以下、平面版という）は球面メルカトル図法で展開された平面地図上で震源を3D表示させていた。投影座標系における表示となるため、緯度が異なると、本来震源の密集度が同じであっても違って見える。また震源と特定位置の距離感も掴みにくかった。今回は仮想的な地球儀内に震源をプロットし、それらの問題を解消することを試みた。

#開発したアプリケーション

![スクリーンショット 2020-11-06 10.01.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/731876/9cd14470-7607-67c0-ae57-c9635c213825.png)

* [気象庁震源データ3Dプロット（地球儀版）](https://kitao.net/

元記事を表示

JavaScript 超基礎処理を外部ファイルに記載する

# 目的

– JavaScriptの処理をHTMLに記載するのではなく別のファイルに記載する方法をまとめる

# 実施条件

– 下記の手順でダイアログボックスを表示するソースが手元にあること。
– [JavaScript 超基礎ダイアログボックスを表示する]()

# 概要

1. 準備
1. JavaScriptの記載場所変更
1. 確認

# 詳細

1. 準備
1. index.htmlが設置してあるディレクトリに移動する。
1. 下記コマンドを実行してJavaScriptのファイルを作成する。

“`terminal
$ touch daialog_box.js
“`
1. index.htmlとdaialog_box.jsが同じディレクトリ内にあることを確認する。
1. JavaScriptの記載場所変更
1. 下記コマンドを実行してhtmlファイルを開く。

“`terminal
$ vi index.html
“`

元記事を表示

【Vue.js】v-model解体新書

# 【Vue.js】v-model解体新書

## 前書き

### こんな人向け
– `v-model`は脳死で使っている。
– 独自コンポーネントで使おうとしたらなんかエラーが出た。
– 数値入力は`v-model.number`で完璧だと信じている。
– `v-model`完全に理解した。

上記は全て著者のことです。「半端な覚悟で`v-model`を語るんじゃねぇぞ！」と思った方は回れ左。（どっち回りでも変わらんよな）
半年くらい`Vue`に触れてきましたが、ずっとなんとなくで使っていました。ですが、最近ようやく重い腰をあげたので、ここにまとめておこうと思います。

## 本編

### 1. そもそもv-modelって何者？
早速、公式先生から引用
> form の input 要素や textarea 要素、 select 要素に双方向 (two-way) データバインディングを作成するには、v-model ディレクティブを使用することができます。

うん？わかったようなわからないような・・・。まぁ、噛み砕いて説明を。

そもそも、`v-model`の役割は「変更とデータ

元記事を表示

JavaScriptでページャーの裏側を作る

ページャーを実装する時にコアになる部分をまとめておきたかったので忘備録。

## 配列で項目を管理する

“`js
const items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
“`

## 配列から、任意の量だけ項目を抽出する

“`js
const index = 0; // 現在のページ
const limit = 3; // 3個ずつ表示

items.slice(index * limit, (index * limit) + limit); // => [1, 2, 3]
“`

“`js
const index = 2; // 現在のページ
const limit = 2; // 2個ずつ表示

items.slice(index * limit, (index * limit) + limit); // => [5, 6]
“`

## 最大何ページあるか調べる

“`js
Math.ceil(items.length / limit); // => 4
“`

## Pagerコンストラクタを作る

“`js
cl

元記事を表示

JavaScript備忘録

##関数宣言
function 関数名(仮引数,仮引数,….){
処理;
処理;
return 返り値;
(return以降の処理は実行されない)
}
###呼び出し
関数名(実引数,実引数,…);

##関数式 ↓無名関数
const 定数名 = function(仮引数,仮引数,….){
処理;
処理;
return 返り値;
(return以降の処理は実行されない)
};

###呼び出し
定数名(実引数,実引数,…);

元記事を表示

monaca(JS)でAndroid版湯婆婆を実装してみる

#はじめに

この記事は[Nemesis](https://qiita.com/Nemesis)さんの[Javaで湯婆婆を実装してみる](https://qiita.com/Nemesis/items/c7192a7c510788d2cba2)をリスペクト(?)して書いた記事になります。

僕も湯婆婆に名前を奪われようと思います。

※私はこれまで湯婆婆を知りませんでした。ラーメンババアは知ってるけど。

#今回使う物

今回は「monaca」というクラウド上でスマホアプリの開発ができるサービスを使用します。

使う言語はみんな大好きJavaScriptです。

#湯婆婆のレギュレーション

湯婆婆の流れは、

「名前を聞かれる」
↓
「名前を褒める」
↓
「名前から１文字ランダムに取得」
↓
「発表」
↓
「バグる時はバグる」（※今回は割愛）
という流れになります。

簡単だね。

#ソースコード

今回は即席で書いたので、汚いです。

“`js:main.js
let playername
let newNames
let newName
function yubaba_send

元記事を表示

非同期処理について・JavaScript

# JavaScriptの非同期処理について
+ 非同期処理とは（同期処理と非同期処理の違い）
+ JavaScriptの言語的な特徴と生じる問題
+ 非同期JavaScript(Asynchronous JavaScript)で解決する

## 非同期処理とは（同期処理と非同期処理の違い）。
タスクの処理方式には、同期処理と非同期処理の2タイプがあります。
**同期処理**は、タスクを順番に一つずつ処理していく方式であり、あるタスクが実行されている時は、他のタスクは実行されません。実行中のタスクの処理が終了してから次のタスクの実行に移ります。
**非同期処理**は、複数のタスクを同時に処理する方式です。同期処理では、前のタスクの実行が終わるまでタスクは実行の順番を待たなければいけませんが、非同期処理では、同時に複数のタスクが実行されるので処理の時間が短縮されます。

## JavaScriptの言語的な特徴と生じる問題
JavaScriptは、同時に複数の処理を行うマルチスレッドではなく、一度に１つの処理しか行えないシングルスレッドのプログラム言語です。複数の処理を同時に行えないシン

元記事を表示

【2020年最新版】カスタマイズしたフォームからJavaScriptでGoogleフォームに回答を送信

# 短くまとめると

短く要点をまとめると

1. 自分で作ったフォームから回答をGoogleフォームに送信する。
2. xhrを使った送信がうまくできない場合は，代わりにiframeのsrcに，URLパラメーターで回答を付けたGoogleフォームのURLをセットする。
3. ページ変遷したくない場合はform要素のtarget属性を使う。

# 経緯

以下の記事を参考にして自分で作ったフォームからGoogleフォームにJavaScriptで回答を送信しようとしていました。

– [Googleフォームを自在にカスタマイズする – Qiita](https://qiita.com/curioussafuta/items/fa077cbf820faca30598)
– [Googleフォームをカスタマイズして導入、Ajax処理を行う – Qiita](https://qiita.com/sugitata/items/182173c01e0470a3a4a8)

しかし，上記の記事ではJavaScriptで回答を送信する際にCORSエラーが出ても実際には送信できるとありますが，Googl

元記事を表示

これから学ぶ言語まとめ

これからプログラミングの学習を始めるにあたり言語の内容や役割を調べてみました。下記にまとめましたのご確認ください。間違い等ありましたご指摘の方よろしくお願いいたします。

HTMLについて
HTML（エイチティーエムエル、HyperText Markup Language）は、ウェブページを作成するために開発された言語であり、現在、インターネット上で公開されてるウェブページのほとんどは、HTMLで作成されている。
ハイパーテキストでは、ウェブページから別のウェブページにリンクをはったり、ウェブページ内に画像・動画・音声などのデータファイルをリンクで埋め込むことができ、 HTMLには、このハイパーリンク機能で関連する情報同士を結びつけて、情報を整理するという特徴がある
身近なHTMLとしてウェブサイト、電子メール（HTML形式）、スマホアプリがあげられる。

CSSについて
CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）とは、ウェブページのスタイルを指定するための言語です。ワープロソフトなどで作成される文書も含めて、文書のスタイルを指定

元記事を表示

[PlayCanvas] スクリプトの動的追加・削除

# 概要
実行中に特定の属性を持つ、もしくは与える為に後からスクリプトを追加したい場合の方法と、既に処理が完了し、残しておく必要が無いスクリプトを削除したい場合の方法。

# 実装例
## 追加
“` javascript:addSample.js
var AddSample = pc.createScript(‘sayHello’);

AddSample.attributes.add(‘name’, {type: string, default: ‘None’});

AddSample.prototype.initialize = function(){
console.log(‘Hello, ‘ + this.name);
};
“`

“` javascript:main.js
var Main = pc.createScript(‘main’);

Main.prototype.initialize = function(){
// Scriptコンポーネントがあるかをチェックする ※今回の場合は本来不要
if( this.entity.scr

元記事を表示

GASでプログラミング入門 Vol.6

# GASでプログラミング入門 Vol.6

社内サークルにてエンジニアから非エンジニアの方向けにプログラミングを教えるという活動を行っています。
今回はその教材第6弾です。
前回の記事は[こちら](https://qiita.com/YoshinagaYuta/items/f2601cffc1aa1498557e)

## 前回の演習問題の解答例

(1). 引数を二つ受け取り、受け取った引数の計算結果を戻り値として戻す、関数 myPow を作成し、下記の表示になるようなプログラムを作成してください。

引数 1 が 2、引数 2 が 3 の時

“`
2の3乗は8です。
“`

引数 1 が 10、引数 2 が 2 の時

“`
10の2乗は100です。
“`

解答例コード

“`js
/*
* 関数名：myFunction
* 概要：myPowを呼び出します
* 引数：ありません
*/
function myFunction() {
let ans;
let num1 = 2;
let num2 = 3;
ans = myPow

元記事を表示

「JSでStrCmpLogicalWみたいなソートがしたい」「　(╬▔皿▔)╯<ｱ”?」ってなった時

## 顧客「自然順にして」
言語やユーザ、OSによって解釈が分かれてくる「自然順」。
正直なコト言うと「JSでは`arr.sort()` が自然順だ！運用回避でよろしく。」とか言いたい。

が、いい感じにソートを行ってくれるやつに遭遇した。

“`js
const natsort = new Intl.Collator(navigator.language, {sensitivity: ‘variant’, numeric:true}).compare;
“`

文字列のリストを

“`text
a2sample
a10sample
b10sample1
b10sample10
b1sample1
b2sample1
b10sample2
b2sample2
b1sample2
b1sample10
b2sample10
a1sample
“`

`arr.sort(natsort)` とかすることで

“`
a1sample
a2sample
a10sample
b1sample1
b1sample2
b1sample10
b2sample1
b2sample2
b2sam

元記事を表示

【JS】アロー関数の波カッコ有無の違い

アロー関数を書いていて、矢印の後に波カッコ`{ }`をつける場合と付けない場合で出力が変わってくる。

“`js:波カッコなしの例
arr = [1,2,3,4,5]
arr1 = arr.map((x)=> x*2)

//出力　[2, 4, 6, 8, 10]
“`

“`js:波カッコありの例
arr = [1,2,3,4,5]
arr1 = arr.map((x)=> {x*2})

//出力 [undefined, undefined, undefined, undefined, undefined]
“`

##波カッコを使うメリットと注意点

波カッコを使うメリットは、**複数の式を記述できる**こと。

波カッコを使う場合は必ず`return`が必要になる。

“`js:波カッコありの例
arr = [1,2,3,4,5]
arr1 = arr.map((x)=> {return x*2})

//出力　[2, 4, 6, 8, 10]
“`

##波カッコを使った例

下記のように、複数の式を記述できるようになる。

元記事を表示

gasのwebアプリがgsuite配下では開けない問題

##問題点
gasで作成したwebアプリを公開してもgsuite配下では見ることができない問題

##詳細
まず通常gasでwebアプリを公開した場合下記のようなurlになります。
（フリーアカウント、ドメインがgmail.comの場合）
https://script.google.com/a/macros/s/”スクリプトid”/exec
こちらのurlはブラウザにログインしているアカウントがフリーアカウントである場合は見ることができますが、それ以外の場合は開きません。

##擬似的な解決策
根本的な解決はできませんが、ブラウザにログインしている特定のgsuiteアカウントに公開する必要がある場合は、その特定のgsuiteアカウントのドメインがわかっている前提ですが、
https://script.google.com/a/macros/”ブラウザにログインしているドメイン名”/s/”スクリプトid”/exec
とすることでその特定のgsuiteアカウントでは見ることができるようになります。

##根本的な解決に向けて試したが死んでしまった施策
1.何度見たか数えきれない下記の画面で

元記事を表示

関連する記事

Go関連のことを調べてみた2020年01月04日 2020.01.04

目次 1. Goのsqlmockを使ってみた2. Go で ipc package を書いてみた3. 【Go】Sqlite3の利用方法4. Ubunt[…]
JAVA関連のことを調べてみた 2024.03.01

目次 1. 抽象クラス2. Hello Worldからの復習～オブジェクト指向編～3. [Google Sheets API] 連続したデータを設定[…]
Ruby関連のことを調べてみた2022年01月26日 2022.01.26

目次 1. [py2rb] 予約語2. S3 Object Lambdaで大量のテキストを並列加工3. [py2rb] キーワード引数と可変長引数の組[…]

OTHERカテゴリの最新記事