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

「こどもれっどまいん」というテーマを作っています。

## はじめに / これはなに？

「[こどもれっどまいん](https://github.com/akiko-pusu/redmine_theme_kodomo_midori)」という名前で、Redmineの見た目をカスタマイズするテーマを作っています。

昨年から学習を兼ねてちょこちょこ作っていたのですが、5/4の「みどりの日」、5/5の「こどもの日」にかけて、緑ベースのものを作ったので、紹介してみようと思います。

– リポジトリ:

## どんなもの？

いわゆるテーマなので、Redmine本体に機能を追加するものではありません。
CSSを使って見た目をカスタマイズするものになります。

以下、一部を掲載します。

**ログイン画面**

[javascript]初心者が関数・コールバック関数についてをまとめてみた

javascriptで関数の理解が難しいと感じたので、アウトプットします。
僕と同じようなプログラミング初心者の方にお役立ちできれば幸いです。
# 関数とは
関数とは、**「ある値を与えると、別の値を返す機能」**
ある値を「引数（ひきすう）」と呼び、別の値を「戻り値」と呼びます。

言い換えると、**関数は「引数を与えると、戻り値を返す機能」**をさします。
下記の図が参考になります。

> （参考：wikipedia）

実際にコードを書いてきます。
###関数
“`function.js
//関数
const 定数名 = function(){
//まとめたい処理や機能
};
“`
普通の関数式の形

###アロー関数
“`function.js
//アロー関数
const 定数名 = () => {
//まとめたい処理や機能

依存性を減らす～JavaScript界の事情

とあるプロジェクトで`yarn upgrade`を行ったところ、こんなメッセージが出てきました。

“`
warning （略） > chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
“`

## そもそも、Chokidarって何？

Node.jsには、ファイル更新を管理する手法がいくつかありますが、OSなど環境によって挙動が異なってしまいます。

[Chokidar](https://github.com/paulmillr/chokidar)は、それらの手法を一貫して管理できるようなラッパーです。

直接使っている人は多くないかも知れませんが、`sass`コンパイラや`webpack-dev-server`など、ビルドツール系のライブラリでは「ファイル監視」機能があると便利なので、よく使われています。

## 依存性の削減

「Chokidar 3にすると依存パッケージが15分の1になる」という話について、作者が[詳細を書

サクッとfilterでデータの加工（Vue.js)

### はじめに
データの加工をする時にVue.jsで独自のfilterを実装して、使い回すことがあるので、今後のメモとして残します。自分用のメモなので、簡易的に書きます。ご了承くださいませ。

### filterの作成(テンプレ）
“`js:filter.js
export function filterA (value) {
return value; // 独自のfilter処理
}
export function filterB (value) {
return value; // 独自のfilter処理
}
export function filterC (value) {
return value; // 独自のfilter処理
}
“`

### filterの作成(自分が今後使いそうなもの？）
“`js:filter.js
export function filterA (value) {
return Math.floor(value); // 小数点以下を切り捨てる
}
export function filterB (value) {

activerecord-importを使った一括登録について

#はじめに
Qiita初投稿です。

アプリ作る際に一括でデータの登録をしたくて、activerecord-importのgemを導入して使ってみたので、その使い方について書いてみようと思います。間違い等あればご指摘いただけるとありがたいです。

**bulk_insertはRails6では標準サポートされているようです。**

# 開発環境
– Ruby2.5.1
– Rails5.2.4.2
– Haml
– Sass

# 今回実装した機能の概要
CRM（顧客管理）を作ってます。一斉DMを送るなど、複数の顧客に対して一括のデータを登録します。

# モデル
client(顧客)モデルとcontact（顧客に対してのコンタクト）モデルがあり、ネスティングさせています。

“`ruby:c

React文法チートシート

## Reactとは
ReactはUI構築のためのJavaScriptライブラリのこと
[React公式サイト](https://ja.reactjs.org/)

## 基本的な書き方

“`html:HTML

“`
“`jsx:JSX
class App extends React.Component{
render(){
return

Hello World

;
}
}
const ROOT = document.querySelector(‘#app’);
ReactDOM.render(, ROOT);
“`

## コンポーネント
###基本コンポーネント
Reactコンポーネントを作成する

爆速！Vercelとfreenomで独自ドメインのサイトを無料で作成する

無料でWebアプリケーションのホスティングが出来るnow.shが名称変更してVercelになってましたね。

使い勝手などがどうなのか触って試してみました。

結果、ただ触るだけだと簡単すぎて記事にならないので、ついでにfreenomも使って無料で独自ドメイン（カスタムドメイン）も反映させてみます。

※タイトルの爆速！は処理速度ではなく手順の話

## 作るもの

こんな感じの独自ドメインのWebサイトを作成（デプロイ）します。

https://suikousaibai.gq

> 

ちゃんとSSLも対応してます。

## Vercel

読み方はバーセル？ですかね。

https://vercel.com

無料でWebアプリケーションのデプロイが出来ます。

**コマンド一発で出来ます**


### Vercelで爆速デプロイ

Vue.jsを勉強するモチベーション

# 概要
流行や学習コストの低さなどでチヤホヤされる存在となったVue.jsですが、みなさんはVue.jsの学習捗ってますか？
業務で使うから仕方なく覚えるのではあれば、やるでしょう！
でも自分の可能性を広げるための勉強ならどうでしょう？
流行だからと飛び付いたもののやる気がでない…
他にモチベーションの繋がるものはないか？

# アニメは好きかい？
Vue.jsの開発者エヴァン・ヨーさんはどうやら日本アニメが好きらしい
彼はアニメヲタクなのだ！

# ヲタクならわかるだろ？
| ersion | 開発コードネーム | 日本語名称 | アニメ初出年 |
|:–|:–|:–|:–|
| v2.6 | Macross | 超時空要塞マクロス | 1982年 |
| v2.5 | Level E | レベルE | 2011年 |
| v2.4 | Kill la Kill | キルラキル | 2013年 |
| v2.3 | JoJo’s Bizarre Adventure | ジョジョの奇妙な冒険 | 1993年 |
| v2.2 | Initial D | 頭文字D | 1998

初学者がアウトプットするAjaxの話

#Ajaxについてわかりやすくまとめてみた！
初学者ですがまとめてみました。
至らぬ点、間違っている点がございましたらご指摘くださいませ。

##Ajax通信の登場人物
・**クライアントくん**
サーバーくんとは仲良しだけどいつも要求ばかりしている、
サーバーくんと二人きりでお話しすると変な間が入ってちょっと気まずい。

・**サーバーくん**
クライアントくんと仲良し！けど二人きりだと変な間が入る
いつもクライアントくんの言うことばかり聞いてる。
XMLHttpRequestと言う道具を使ってJavascriptくんと文通している。

・**変な間**
クライアントくんがサーバーくんに要求をしてから要求の結果が返ってくるまでの間。
謎の力によってクライアントくんは動けなくなる。

・**JavaScriptくん**
クライアントくんともサーバーくんとも仲良し！！
3人でいると変な間が入らず、めちゃくちゃ会話が弾む。
実はクライアントくんの行動を監視している。

##Ajaxとは
Ajaxとは「Asynchronous JavaScript + XML」の略
Asynchron

特定のapikeyを持つ通信のみFirebase Hostingへのアクセスを許可するようにする

# 概要

Cloud Functions for Firebase を用いることで、ヘッダの値をもとにFirebase hostingへのアクセスを制限してみます。

# 前提

動作環境は、Microsoft Windows 10 Homeです。
Node.jsはインストールしてある前提です。(v12.14.1)

# 準備

## Firebase CLIインストール
`npm install -g firebase-tools` でFirebase CLIをインストールします。

## Firebase hostingプロジェクトを作成
`firebase login` でローカルマシンをFirebaseに接続させます。

`firebase projects:list` でCLI が正しくインストールされていて、アカウントにアクセスしていることをテストします。

“`
C:\Users\nanna>firebase projects:list
√ Preparing the list of your Firebase projects
┌──────────────────

知らないと損！便利なchrome拡張

# 便利なChrome拡張のおすすめ
いろんなChrome拡張を試した中から、良さげなものを紹介します。
無いとダメなものから、ニッチなものまであります。
他にもありましたらコメントで共有して下さると嬉しいです??
ちなみに自分は全部にキーボードショートカットを割り当てています。

## フロント系
### [Vue.js devtools](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)
– vueの開発で使う

### [WPSNIFFER](https://chrome.google.com/webstore/detail/wpsniffe

Expressでcssとjavascriptを読み込む方法

#1. ディレクトリ構成
Expressでプロジェクトを作成するとディレクトリは以下のような構成になります。

詳細は今後に書くとして、cssとjavascriptをテンプレートエンジンへ適用させたい時は以下の手順を行ってください。

#2. css作成
publicフォルダ直下のstylesheetsフォルダにcssファイルを作成してください。

#3. javascript作成
publicフォルダ直下のjavascriptsフォルダにjsファイルを作成してください。
javascriptの場合はAPIの作成だったりルーティングの兼ね合いがありますので、
その点を考慮した実装としておいてください。

#4.適用
viewsフォルダに作成した(

Kinx ライブラリ – DateTime

# DateTime

## はじめに

**「見た目は JavaScript、頭脳(中身)は Ruby、（安定感は AC/DC）」** でお届けしているスクリプト言語 [Kinx](https://github.com/Kray-G/kinx)。言語はライブラリが命。ということでライブラリの使い方編。

今回は DateTime です。Range でも使えるようにしました。

* 参考
* 最初の動機 … [スクリプト言語 KINX（ご紹介）](https://qiita.com/Kray-G/items/ca08b6fb40d15dd0ec76)
* 個別記事へのリンクは全てここに集約してあります。
* リポジトリ … [https://github.com/Kray-G/kinx](https://github.com/Kray-G/kinx)
* Pull Request 等お待ちしております。

## 使い方

### using DateTime

DateTime ライブラリは標準組み込みではないため、using

Wixでjavascript　sessionやarrayを使ってみる

# コードをもうちょっとだけきれいにしてみた。
先週こちらの[記事](https://qiita.com/mokiti58/items/84c7ca1ddde01a68c5f4)を書いたんですけど、もうちょっとコードを使いやすくしたので、公開しておきます。
以前は違う販売日を違うページにしていたのですが、今回、WixのSessionという機能（ユーザーがページを開いている間、そのユーザーのデータを保存する機能）を使って、販売日を記録しておき、希望日の在庫だけを見せる、という仕組みです。コードは汚いのですが、忘備録と、誰かの参考になればと思って、上げておきます。
##やりたいこと
さて、ポストコード販売ページはこんな感じで、ポストコードを打つことでjavascriptが文字の置き換えやボタンの置き換えを行う、というのがやりたかったことです。
KEN_ALL.CSVをEmEditorでゴニョゴニョしてみる

##機能
– KEN_ALL.CSV（日本郵便で公開されている、郵便番号データ）を元に、町域名（半角カタカナ/漢字）部分をスッキリさせる（複数行にわたる括弧部分を削除とか、”以下を除く”等を削除）
– 変換後のファイルを出力する（必要な列のみ出力するようにすることも簡単な修正で可能）

##実行環境
-Windows10
-EmEditor Professional (64-bit)　Version 19.8.5 にて確認
##使い方
1. 日本郵便の郵便番号データダウンロードページで公開されている郵便番号データ（全国一括）を取得し、”KEN_ALL.CSV”ファイルを準備する(*1)
1. EmEditorで”KEN_ALL.CSV”ファイルを開き、下記マクロを実行する。
1. KEN_ALL.CSVと同じディレクトリにKEN_ALL_cnv.txtファイルが作成される
1. (KEN_ALL_LOG.txtファイルも出力される)

(*1)「読み仮名データの促音・拗音を小書きで表記しないもの」と「読み仮名データの促音・拗音を小書きで表記するもの」と２種類になっているが、”・・・小書

【API】郵便番号検索APIを使ってみた

#APIを使用したアプリを作ってみる

#背景
– APIを使用したアプリケーションが増えてきている
– APIを使用する、作るエンジニアの仕事も増えている
– APIを扱う技術の需要が増えそう

#目次
* [0. 環境確認](#0環境確認)
* [1. APIの確認](#1apiの確認)
* [2. プロジェクトの作成](#2プロジェクトの作成)
* [3. サーバーエンドの実装](#3サーバーエンドの実装)
* [4. フロントエンドの実装](#4フロントエンドの実装)
* [5. 動作確認](#5動作確認)
* [6. まとめ](#6まとめ)

#0.環境確認
– ___OS___： Windows10 home
– ___IDE___ : Eclipse(Photon 4.8)
– ___ビルドツール___ : Gradle
– ___サーバーサイド言語___ : Java(1.8)
– ___JavaScript ライブラリ___ : jQuery(3.3.1)
– ___テンプレートエンジン___ : thymeleaf

#1.APIの確

【初級編】JavaScript if文についてその２

前回の記事
https://qiita.com/furukouji/items/8d6bdad9d0c2fce011db

## ? 簡単な条件記入例（サラッと書きます）

“`javascript
const price = 99;

if (price >= 100){ //priceが100以上であるとき実行する
console.log(‘値段は’+price+’円です’);
};

if (price <= 100){ //priceが100以下であるとき console.log('お金が足りません。'); }; if (price != 100){ //！は否定形です。100ではないときコードを実行します。　また!==とすることで型の判定もできるので基本的にはこちらを使いましょう console.log('値段は'+price+'円です'); }; ``` ####AND,OR,三項演算子について AND　＝　条件を両方満たす場合実行する。コード上は　　***&&***　と書くと前述と同義となります OR　 ＝　どちらかの条件を満たす場

DenoはNode.jsとどこが違うのか超ざっくりまとめ?

2020年5月13日、ついにver1.0がリリースされた[Deno](https://deno.land/)。
Node.jsとの違いをざっくりと解説します。

※以下、本記事の内容は[Deno公式マニュアル](https://deno.land/manual)の記述に基づきます

#そもそもDenoって何なの？
DenoはJavaScriptおよびTypeScriptの実行環境です。
V8, Rust, およびTokioによって作られています。

#え、Node.jsがあるじゃん？
Node.jsは2009年に誕生し、すでに10年を超える歴史を有しています。

たとえばNode.jsが生まれたとき、この世にPromiseはありませんでした。
2012年にはTypeScriptが生まれま

JavaScriptにおける配列リテラルとコンストラクターの違いについて[小ネタ]

# 0.はじめに

こんにちは。
エンジニアしている @gkzz です。

JavaScriptのお勉強をしているのですが、[Google JavaScript Style Guide](https://google.github.io/styleguide/jsguide.html#features-arrays-ctor)を読んでいて気になった箇所がありました。

>5.2.2 Do not use the variadic Array constructor
>The constructor is error-prone if arguments are added or removed. >Use a literal instead.
>
>Disallowed:
>
>const a1 = new Array(x1, x2, x3);
>const a2 = new Array(x1, x2);
>const a3 = new Array(x1);
>const a4 = new Array();

そういえば、[]とnew Array()。
違いってあるのだろうか。
気にな

GitHubでindex.jsだけのライブラリーを使った学習法

## はじめに

ある程度プログラミングできるようになったけど、レベルを上げるためにどうやって勉強したらいいのかわからない人向けの勉強法です。

何か困った時、プログラマーならまずライブラリーを探すかと思います。

探したライブラリーのGitHubにコードを見に行った時に⭐️がゼロだったらスルーしてしまうかもしれないですが `それは非常にもったいないです。`

具体的にどういう風にもったいないか説明します。

## ある日のこと

`.svg`なファイルを`require`したらどうなるのかなって思ってreuqireしたらエラーになりました。

“`javascript

$ node
Welcome to Node.js v12.7.0.
Type “.help” for more information.
> var sprites = require(‘./src/assets/svg-sprites.svg’)
Thrown:
/Users/yukihirop/JavaScriptProjects/sample/src/assets/svg-sprites.svg:1