JavaScript関連のことを調べてみた2021年07月27日

mapやfilterを使用した配列の処理

##map
繰り返し処理を行うメソッド

#####配列を受け取って、新しい配列を作る
“`
const nameArray = [ゆう, 吉田, 佐藤]
const nameArray2 = nameArray.map((name) => {
return name;
})

console.log(nameArray2); // [ゆう, 吉田, 佐藤]
“`
#####配列を順番に表示する
“`
const nameArray = [ゆう、　吉田、　佐藤];

//一行で済む場合はブラケット{}を省略できる。
nameArray.map((name) => console.log(name)); // ゆう, 吉田, 佐藤
“`

#####map関数に順番の概念を持たせる
第二引数を指定することで、インデックス番号を代入できる

“`
nameArray.map((name, index) => console.log(`${index + 1}番目は、${name}です`));

/*1番目は、ゆうです
*2番目は、吉田です
*3番目は、佐藤です*/
“`

javascriptのスプレッド構文

##スプレッド構文とは

配列を展開したり、まとめたりすることができる構文

#####配列を展開する
“`
const array = [1, 2]

console.log(array); // [1, 2]
//スプレッド構文
console.log(…array); // 1, 2

//↑は↓と同じことを行っている
console.log(array[0], array); // 1, 2
“`

#####分割代入の際に配列を部分的にまとめる
“`
const array2 = [1, 2, 3, 4, 5];
const [num1, num2, …array3] = array2
console.log(num1); // 1
console.log(num2); // 2
console.log(…array3); // [3, 4, 5]
“`

#####配列のコピーや結合
“`
const array4 = [10, 20];
const array5 = [30, 40];

const array6 = […array4];
co

初心者のための静的サイト・ジェネレーター・ガイド②

初心者のための静的サイト・ジェネレーター・ガイド①の続きです。①を読んでいない方はそちらから読むことをおすすめします:point_up:

静的サイトの世界は、HTMLやCSS、時にはJSを超えて発展していますが、静的サイトジェネレーターの進歩がこのことに大きく貢献しています。

著者：Thom Krupa@thomkrupa 2020年11月18日
原文：https://bejamas.io/blog/static-site-generators/


##3. Gatsby

最終更新日：2020年10月27日

Gatsbyは、一番人気のあるJavascriptフレームワークのReact.jsの上に構築された、最も人気のある静的サイトジェネレーターです。カイル・マシューズ氏は、後にサム・バグワット氏と一緒に「ウェブサイトを楽しく作る」というミ

命を燃やすために出勤を記録したら部屋をアチアチにする【Nature Remo×kintone】


みなさん、命を燃やして仕事をしていますか？

私は、命を燃やして仕事をしています。

命を燃やすには、部屋がアチアチのほうがいいですよね。

というわけで、kintoneのタイムカードアプリで出勤を記録したら、Nature Remoを操作して部屋をアチアチにする外部連携をやってみます。

## やりたいこと
1. kintoneのタイムカードアプリで出勤を記録
2. Nature RemoをAPIで操作し、エアコンを温度MAXの暖房で始動
3. アチアチの部屋で心を燃やしながらお仕事

やりたいことはただひとつ。命を燃やしたい。それだけです。

## Nature Remo Cloud API トークン生成
次の記事の「Nature Remo Cloud API トークン発行」を参考にして、トークンを発行しておきます。

https://ibu

javascriptの分割代入

分割代入を使用すると

“`
const MyProfile = {
name: “ゆう”,
age: 18,
}

const test1 = `名前は${MyProfile.name}です。年齢は${MyProfile.age}です`
console.log(test1); //名前はゆうです。年齢は18歳です。
“`

これを

“`
const MyProfile = {
name: “ゆう”,
age: 18,
}

const {name, age} = MyProfile

const test2 = `名前は${name}です。年齢は${age}です`
console.log(test2); //名前はゆうです。年齢は18歳です。
“`

のように書くことができる。

JS React useStateで取得する関数に関数を渡す場合の注意

知っておくべき動作があったのでメモとして残しておきます。

もともとは次の記事に記載されていた挙動を自分でも確認しようと思って
いろいろ試したときに発見しました。

[破壊的メソッドとミュータブル・イミュータブル [React,Javascript] – Qiita]
(https://qiita.com/takeiin/items/448d76ba1cd65dbc585a)

## 動作確認コード

create-react-app で作成したあとに次のように記載します。

“`js:App.js
import logo from ‘./logo.svg’;
import ‘./App.css’;
import { useState } from “react”;

function App() {
const [num, setNum] = useState([0]);

// // 1.正常動作
// const addNum = () => {
// num.push(1);
// setNum([…num])
// };

/

Reactでが動かない時の対処法

``は、Chromium系ブラウザでディレクトリごとファイルを選択するタグですが、Reactで使うのに一工夫必要だったのでメモします。

## 普通にそのまま書いた場合

“`jsx

“`

“`
Type ‘{ type: string; webkitdirectory: true; }’ is not assignable to type ‘DetailedHTMLProps, HTMLInputElement>’.
Property ‘webkitdirectory’ does not exist on type ‘DetailedHTMLProps, HTMLInputElement>’.
“`

`does not exist`って怒られてしまいます。

## 解決策

JavaScriptを基本からまとめてみた【6】【機能】【随時更新】

##はじめに

####学習するに至った経緯

2020年より、未経験からエンジニアへの転職を目指し、某プログラミングスクールへ通う。
入学後、『Ruby』を未経験から学ぶ人が多いのと『Ruby』の求人が思っていた以上に少ないので、
卒業後、フロントエンドのエンジニアを目指す事に。
Javascriptの学習した事を言語化し、認識の深化による備忘録として記載。

##const, let等の変数宣言
#####var
– JavaScript時代ともにバージョンが更新されて、「ES6（ECMAScript6）」が現時点での最新版。
以前までは変数宣言に『var』のみを使用していたが、ES6の環境から『let』と『const』が新たに追加された。『var』はスコープの範囲を広げる自由度の高い変数のため、意図していないエラーが起こり得ることから、使用頻度は低い。

#####let
– 『let』と『var』においては初期値の設定は必須ではない。
– 『let』と『var』の違いは2つで、① 『var』は再宣言可、『let』は再宣言不可と② 『var』は関数スコープ、『let』はブロックス

関数と文字列まとめ

:::note info
こんにちは、にんじゃわんこさん
:::

#JavaScript#

“`JavaScript:JavaScript
const name = “にんじゃわんこ”;
console.log(`こんにちは、${name}さん`);
“`

“`JavaScript:JavaScript
const name = “にんじゃわんこ”;
console.log(“こんにちは、” + name + “さん”);
“`

#Ruby#

“`Ruby:Ruby
name = “にんじゃわんこ”
puts “こんにちは、#{name}さん”
“`

“`Ruby:Ruby
name = “にんじゃわんこ”
puts “こんにちは、” + name + “さん”
“`

:::note alert
連結は文字列同士でしかできないため、基本的に変数展開を使うのが無難
:::

【JavaScript】配列の操作（forEach map filter reduce）の使い方

#初投稿
アウトプットが苦手な自分が練習の一環として記事を書いてみる。

第一回目はJavaScript配列の操作（forEach map filter reduce）の使い方について書いていく。

# forEach

配列の各要素に対して関数を1つずつ実行するメソッド
※後述するmapやfilterと違い新しい配列を作成しない。

“`javascript:forEach
const arr = [10, 20, 30, 40, 50];

arr.forEach(function(elm) {
console.log(elm);
});
// 実行結果
// 10
// 20
// 30
// 40
// 50
“`

# map
配列の各要素に対して関数を1つずつ実行し、戻り値を元に新しい配列を作成するメソッド

“`javascript:map
const arr = [10, 20, 30, 40, 50];

const result = arr.map(function(elm) {
return elm * 2;
});

console.

PHP脳が故にJavaScriptでarray_pad的関数がなくて泣いてる君へ

# はじめに
こんにちは。SBI証券での投信積立にクレカが使用できるようになったので、対象の三井住友カードを申し込みました。
クレカで積立できるとポイントたまるのでお得です！皆様もぜひ！

さて、今回は、JavaScriptでPHPの`array_pad`をしたいときがあり、生み出したコードを共有します。
コピペで使えるので良ければ使ってくださいませ:pray:

# PHPの`array_pad`関数とは
配列が指定長に満たない場合、指定長まで指定の値で埋めることができる関数です。

リファレンスこちら↓

“`console
$ php –rf array_pad

Function [ function array_pad ] {

– Parameters [3] {
Parameter #0 [ array $array ]
Parameter #1 [ int $length ]
Parameter #2 [ mixed $value ]

Anime.jsをプロダクトで使用する4つの理由

この記事では「Anime.jsをプロダクトで使用する3つの理由」と題して、[Anime.js](https://github.com/juliangarnier/anime/)を実際にプロダクトで使用した中で見えてきたポイントについて、以下の順番でまとめたいきたいと思います。

1. **軽量で扱いやすい**（実装したいアニメーションがシンプルなものだったため）
2. **公式ドキュメントが読みやすい**
3. **チームでの開発/運用がしやすい**
4. **変更が容易**（突発的な仕様変更にも耐えうる）

一つずつ、詳細に見ていきます。

### 理由１: 軽量で扱いやすい

Anime.jsは**シンプルながらもパワフルな、JavaScriptアニメーションライブラリ**です。

GitHubスター数は**39,900**（2021年7月現在）と人気で、また、その機能の豊富さ・手軽かさから、[**はてなブログでも一時期話題となりました**](https://b.hatena.ne.jp/entry/anime-js.com/)。

*はてブスター数は996（2021年7月現在）*

過去7日間の投稿をグラフ表示 Chartkick Turbolinks無効化

やりたいこと

過去７日間の投稿数を取得し、折れ線グラフで表示する.
グラフが表示できなかったり、１２日分表示してしまったり・・・ととにかく大変でした。
そもそもJavascriptの知識が浅いため、、難しかったです。


7日間の投稿データ取得

前回作成した記事と同様です。グラフ化が大変だったのでここはサクッと行きます:anchor:

https://qiita.com/ki_87/items/cbfdb803355ba4e4fe55

違う点は、、
コントローラーに記述しなくても、モデルで定義した値をviewで使用できるということです。

７日間の投稿データ取得

“`perl:models

Cloud Functions(Node.js)でberglasのsm://形式の秘密情報を展開する方法

# 本文
Cloud Runでは `sm:///` の形式で環境変数をセットして起動すれば自動的にSecretManagerから秘密情報を取得して展開してくれます。(言語不問)

同様の機能がCloud Functionsにもあったらいいなと思ったんですが、Go言語版のみしかサポートされていなかったので、Node.js版を作成しました。

“`js
const { SecretManagerServiceClient } = require(‘@google-cloud/secret-manager’);

async function resolveSecret(element) {
const client = new SecretManagerServiceClient();
const [, , projectId, secretName] = element.split(‘/’);
const name = `projects/${projectId}/secrets/${secretName}/versions

RailsでJaveScriptが動かないときの原因と対処法

## はじめに
Railsでアプリケーション製作中、jsを思うように動かせず苦労したため、躓いたポイントをまとめました。
初学者のため基礎的な内容かと思いますが、どなたかの参考になると嬉しいです！

## 前提条件
Rails 5.x.x
jQuery 3.x.x
app/assets/javascripts/　以下のファイルにjsを記述していることを前提とします。

## 原因1
####そもそもJavaScript、jQueryが読み込まれていない
まずは基本的なところを確認します。

* ビューにスクリプトを読み込むための記述があるか

“`application.html.erb

〜省略〜
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

“`

* gemが追加されているか

“`ruby:Gemfile
gem ‘jquery-rails’
“`
→ `bundle install`を実行

* applicati

Denoに今後導入される新機能（2021夏ver）

Denoでは、新機能の導入がgithubのissueやdiscussionで議論されています。

最終的にどんな機能が導入されるかについてはコアチームの決定次第ですが、導入されそうなものを選んでまとめてみました。

# 3か月以内に予定されている変更

https://github.com/denoland/deno/issues/11168 に掲載されています。

https://github.com/denoland/deno/issues/11168

### ネイティブHTTPサーバーの導入

従来JS側で実装されていたサーバーがRustで書き直されます。
正確には、Rust製HTTPサーバーである[hyper](https://docs.rs/hyper/0.14.11/hyper/)を使うようになります。

この変更により、**HTTPサーバーの処理速度がNode.jsを上回ります**。

[ベンチマーク](https://deno.land/benchmarks#http-server-throughput)を見てみると、確かにNode.jsのHTTPサーバーのスループッ

【便利】コードネーム(和音)を判定するアプリを作った

構成音をポチポチ選択するだけで、コードネームが判定されるウェブアプリを作りました！
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
https://o-to.khufrudamonotes.com/o-to-modal-interchange


#もう似たようなアプリあるでしょ？
…ぶっちゃけ、音の組み合わせからコードネームを検索するウェブアプリは他にもあります。

しかし、今回僕の作ったやつはひと味違います。
自ら「推しポイント」を語らせてください。
　
　

コードネームだけではなく…

・コードの読み方
・詳細情報
・コードの構成音を含む主なスケール

まで同時に表示してくれます！！

　
　
―――え？「だからどうした？」って？

##コードの読み方が分かるメリット
慣れないうちは、複雑なコードネ

フォームから自動計算をするプログラム

##はじめに
この記事では、
**フォームから自動計算をするプログラム**
について解説していきます。

##実用例
私が作っているレシピサイトで使用している技術です。

##実装
###環境構築

headタグにjQueryのCDNを書きます。

“`html

…省略


“`

###form

formを書きます。
結果は`readonly`で編集できないようにします。

“`html

SEOフレンドリーなリンクを可視化するブックマークレット

SEOのためのリンクチェックを楽にできるブックマークレットを作りました。
このツールを使うことでGoogle botがクロール対象のURLとして認識できる可能性が高いリンクをワンクリックでハイライトできます。

[画像] ブックマークレットの使用によりリンクがハイライトされた様子

> **クロール**とは、新しいページや更新されたページを Google インデックスに登録するため、Googlebot がそれらのページにアクセスするプロセスです。
https://developers.google.com/search/docs/advanced/guidelines/how-search-works?hl=ja

検索エンジンにとってリンクは「新しいページの発見」「各ページの価値や関係性の判断」などを行うための重要な要素ですが、以下の形式で実

htmlファイルのみでPDFを生成できるようなのでドラゴン桜計算プリントを作ってみた

# はじめに

　子供が算数のテストで単純な計算ミスをよくしているようなので、
計算力をつけたいと思い、簡単な四則演算のプリントを印刷するために、
Googleスプレッドシートを使って問題を生成して毎日5分で5人家族全員で解いていました。

　これでも結構使えましたが、知り合いの子供もやりたいという声があり、共有を考えましたが、
閲覧権限だと問題のランダム生成ができないし、編集権限をつけると間違って触って式が壊れるかもしれないので、
シンプルにPDFを出力したほうがいいかと思い実現方法を調べてみました。

するとjavascriptのみでPDFを生成してフォントも埋め込めるライブラリがあったので、
それを使って作ってみた手順をまとめました。

# 必要なもの

パソコン：今回は Windows10 の PC を使いましたが、Mac などでも同じようにできます。
ブラウザ(Chrome最新版, IE11 は pdf-lib が対応です。）：動作確認用
テキストエディタ：html 編集用
埋め込み用フォント：[Rounded Mgen+ (ラウンデッド ムゲンプラス)](http://ji