f@ctor

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

JavaScript関連のことを調べてみた2020年02月04日
目次

WebStormでJestする方法

# 概要
JavaScript開発用のIDE、WebStorm上でJestする方法について書きます

# やりかた

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170905/ae45fc21-a9ce-7efe-caea-ab5552bbfb3c.png)

WebStormを起動して、Jestのテストケースを含むプロジェクトを開く

Jestのサンプルプロジェクトとして以下を使った
https://github.com/riversun/es6_babel7_jest

## プロジェクトを開く

プロジェクトディレクトリを開くとこんな感じ。
/testディレクトリ以下に、Jestをつかったテストケース(hello.test.js)が入ってるのでそれを開く。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170905/c14c2cde-ba68-ff35-952b-ae741ced

元記事を表示

2020年にフロントエンドを勉強する人が作るべきたったひとつのアプリ

最近ではReactやVueを使った**リッチでインターラクティブなUI**がどんどん主流になってきていますし、2020年以降もこの流れは加速し続けるでしょう。

**SPA**（Single Page Application）や**PWA**（Progressive Web Application）の普及によって今までモバイルでしかできなかったことがwebでもどんどんできるようになってきています。

また、**Firebase**を使うことでクラアントサイドだけの高速なサービス開発が可能になってきていて、今後ますます**フロントエンドのニーズは増える**のは確実です。

（サーバーサイドが必要ないという主張がしたいのではありませんが）

# フロントエンドをどのように勉強するのか

## 初心者に立ちはだかる壁

しかし、何か作ってみようと思ってもなかなかほどよいアプリがありません。TODOぐらい簡単なものだと雰囲気を掴むのにはちょうどいいですが、**TODO程度のアプリケーションでは実務レベルに通用する知識は身につきません。**

面接に「TODOアプリを作りました！」と持っていって

元記事を表示

jQuery 基礎文法　1

#はじめに
[JavaScript記事はこちらです。](https://qiita.com/raigakun/items/4e9a4e6ae4117ecc5917)
JavaScript(以下、JS)を学んでいく上で、今回はjQueryというものに出会ったので、
jQueryについて1つずつ整理していきます。
私はVScodeでコードを書き、ブラウザでHTMLファイルを開いております。
そして、検証（ブラウザ上で右クリック）のconsole項目に反映されているのか確認しております。
もうすでにご存知の方、省略の仕方等ご存知でしたら、ご教授願います。

#jQueryについて
ユーザーから見えるWEBページの見た目部分は、HTML・CSS・JSで作成する流れです。
①　HTMLでWebページの構成(マークアップ)を行う。
②　CSSでスタイルを装飾する。
③　JSでWebページに動きをつけることができる。

そして、そのJSを簡単に作ることができるのがjQueryとなる。

#jQueryのプラグイン

プラグインとは、jQueryの拡張機能であり、パッケージとなっている。
以下、U

元記事を表示

初心者がスクールに通わずVueとFirebaseだけでYouTube同期再生サービスを開発した

# 概要
今回はプログラミング経験がほぼ皆無の私でも1ヶ月程度の勉強で、FirebaseとVueを使ってサービスを公開するところまで行けましたので、開発の動機や意識したところ、苦労したところ、勉強法やモチベーションの上げ方についてもサービスの紹介とともにお教えしたいと思います。

# サービス紹介
まずはサービスの紹介をさせていただきます。

今回私が作成したサービスは、YouTube同期再生プラットフォーム **DJ7** です！

https://www.dj7.io

dj7pc

dj7pcJavascriptのDate.prototype.toString()系まとめ

new Date()からタイムスタンプを作ってファイル名にしたい時、どのフォーマットにするか毎回調べてるのでまとめる

| メソッド　　　　　　　　　　　　　　　 | 出力される文字列　　　　　　　　　　　　　　　　　　　　　| 備考|
|:——————————————————|:———————————————–|:—
| new Date(‘2000-01-01 00:00:00’).toString() | “Sat Jan 01 2000 00:00:00 GMT+0900 (日本標準時)” | |
| new Date(‘2000-01-01 00:00:00’).toISOString() | “1999-12-31T15:00:00.000Z” | |
| new Date(‘2000-01-01 00:00:0

元記事を表示

Nuxt.jsに力技で（パッケージを使わずに）gaを導入する

# はじめに

ある日のできごと・・・

PM「おーい、今回のサービス、お客さんがGA取り入れたいらしいから実装してくれー」

ワイ「（パッケージ※入れれば楽勝なんで）いっすよ」
※https://note.com/koushikagawa/n/n7b8b1b86fab0 参照

PM「あ、ちなみにtoB向けのマルチテナントサービスだから、ドメインごとに違うトラッキングID適用できるようにしといてー」

ワイ「・・・ええええええええええええええええええええええええええええええええええええええええええええええええええええええええ！！！！！！！』

・・・てなわけで、ドメインごとにトラッキングIDを切り替えなければならないため、npmのパッケージを使わずにGAを実装することとなったワイ氏

正直結構苦戦したので、同じように苦しんでる人向けに実装方法を残します・・・

# 参考
Nuxt公式を参考に実装しました。
https://ja.nuxtjs.org/faq/google-analytics/

# やり方
\plugins配下に以下のファイルを作成

“`javascript:g

元記事を表示

Fn Projectを使ってRubyで書いたfunctionをNodeで動かしてみる

# 概要

このエントリでは、OSSのFaaSサーバである「Fn Project」を使い、Rubyの関数を動かすパターンを扱います。

下図のようなRubyによる引き算の関数をFnのサーバにデプロイして動かします。

![vsc_subtract.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65002/9e41f9dd-7349-21b5-2c33-22eb9bccdf35.png)

## 想定読者

– Fn ProjectでのJavaScriptプログラムまだ自分で動かしていない方
– [「Fn Projectを使ってJavaScriptで書いたfunctionをNodeで動かしてみる」](https://qiita.com/hrkt/items/8dd1cd0e0e68e8575b6e)のRuby版に興味がある方

# 準備

Fn Projectを動かすまでのところは、別エントリ[「OCIのMicro InstanceでCentOSにFn Projectのサーバをインストールしてみる」](h

元記事を表示

[Angular]MultipleModule構成でのRouting

## 概要

– Angularアプリでモジュールを区切るとモジュール単位でルーティングの設定ができます
– 複数モジュール作るとそれぞれネームスペースを切って疎結合に開発していくことができます
– どのように設定するか試してみたメモです

## 手順

### アプリの雛形作成

– まずはAngularCLIでアプリの雛形を作ります

“`zsh
ng new ng-multiple-module-routing-sample –routing=true –skip-tests=true –no-interactive=
“`

– `src/app`配下のファイル

“`
% tree src/app
src/app
├── app-routing.module.ts
├── app.component.css
├── app.component.html
├── app.component.ts
├── app.module.ts
“`

– `app.component.html`の余計なコードを消しておきます

“`html:src/app/app.comp

元記事を表示

ゼロからつくる、ES6+Babel7でJestによるフロントエンド用アプリのテストを動かすまでハンズオン

# 概要

– JavaScriptのテストフレームワーク**[Jest](https://jestjs.io/)**をES6+Babel7の環境で使う方法について書きます
– 仕掛けを理解するために、ゼロからnpmプロジェクトを作っていきます

# npmプロジェクトを作る

“`shell
mkdir babel7jest
cd babel7jest
npm init
“`

npm initしたらエンターを10回たたけばOK。以下のようなpackage.jsonができる。

“`json:package.json
{
“name”: “babel7jest”,
“version”: “1.0.0”,
“description”: “”,
“main”: “index.js”,
“scripts”: {
“test”: “echo \”Error: no test specified\” && exit 1″
},
“author”: “”,
“license”: “ISC”,
}
“`

# インストール
関連モジュールのインス

元記事を表示

現場でよく使うJS ES6ループ文まとめ

## この記事の概要
現場でコードレビューをしていると、
ループ文の使い方が適切でない事が多いのでよく使われるループ文をまとめました。

※社内勉強会用資料です。

## アロー関数の省略形

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions

“`
hoge()： void {
const list = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// フル
const newList = list.map((num: number) => {
return this.mapper(num);
});

return newList;
}

mapper(num: number): {id: number, data:number} {
return {
id: num,
data: num * 10
}
}
“`
↓

“`
// 引数の型定義は任意。引数が1つであ

元記事を表示

React.js Buttonを手っ取り早くリンクにする

“`js

“`

元記事を表示

【2020年】Reactで手っ取り早くタブを実現する方法【react-tabs】

#Reactで手っ取り早くタブを実現する方法
多分手っ取り早く作る方法は、他にもあると思いますが、以下の２つかなと思います。

– [react-tabs](https://github.com/reactjs/react-tabs)
– [Material-UI Tabs](https://material-ui.com/components/tabs/)

どっちも試したのですが、**react-tabsはものすごく簡単にタブを作れた**ので紹介したいと思います。

#react-tabs
何度も言いますが、**タブをものすごく簡単に**作れます。
[デモサイト](https://reactcommunity.org/react-tabs/)はこんな感じマリオのキャラクターの説明をタブとパネルで表示してます。
![スクリーンショット 2020-02-03 20.21.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/337592/79a92542-1d20-03b2-9a92-7a84e5

元記事を表示

初心者によるプログラミング学習ログ 228日目

#100日チャレンジの228日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。

100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。

228日目は

JavascriptでCSV出力

# 多次元配列からBOM付きUTF-8で出力

“`javascript
export const downloadCSV = (rows, fileName = ‘download’) => {
const bom = new Uint8Array([0xEF, 0xBB, 0xBF])
const blob = new Blob([ bom, rows.join(‘\r\n’) ], { type : ‘text/csv’ })
const element = document.createElement(‘a’)
const objectUrl = window.URL.createObjectURL(blob)
element.href = objectUrl
element.setAttribute(‘download’, fileName);
document.body.appendChild(element)
element.click()
window.URL.

元記事を表示

jQueryの「配列内に1つでも値があればtrueを返す」でハマった

# 背景
### 「配列を受け取って、1つでも値が設定されていればtrueを返す」
という、
幾度となく書いてきた簡単な関数をjQueryで書いてみたところ、ハマった。
自己解決できたので、備忘録とQiita更新するクセをつけるために書いておく。

# TL;DR
↑毎回TL;DRって書きたいがために更新してる

PHPと同じノリで、配列をeach()で回し、条件に当てはまったら`return ture;`
して即抜けする、という書き方をしていたら、うまくいかなかった。

うまくいかない事象としては、
`trueのルートに入っているのに、関数呼び出し側で待っているとfalseが返ってくる。`

“`js
/**
* 配列を受け取り、1つでも値が入っていればtrueを返す
* 間違い版
*/
“SampleArrayCheck”: function(targetArray) {
$.each(targetArray, function(index, answer){
if(answer){
return true;

元記事を表示

終盤問題ジェネレーター（仮）の開発2：JavaScriptコード圧縮

# 概要
私が開発を進めている終盤問題ジェネレーター（仮、以下ジェネレーターと略）の開発に関する記事です。
最初の記事は[こちら](https://qiita.com/al4_th/items/603afbff8d0d4b8205bf)。
今回はコード圧縮についてです。
例の如く、ITを本職とされている方々からすると気になる部分などあるかもしれませんが、素人の戯言でございますのでご容赦ください。

# 目的
他の言語とWeb開発系の言語（JavaScript, CSS, HTML）で大きく異なる点の一つは、ユーザーが（.exeファイルのようなバイナリではなく）ソースコードを受け取るところにあります。
このため、以下のような問題が生じます。

1. 識別子名の命名法によって、ファイルサイズが大きく変化する。
2. ユーザーに私のヘタクソな書き方のコードがバレてしまう。

こういった理由から、「ファイルサイズを小さくしてトラフィックの負荷を軽減する」「コードを読みにくくする」といったことをする必要が出てきます。
実際、Web系のソースコードは圧縮や難読化といった処理を

元記事を表示

React.js Enterキーでsubmitされるのを阻止する

## 手軽に阻止したい
– とりあえず、イベントだけ消し去りたいメモ
– onKeyDownを書く

“`js
{ if (e.key == ‘Enter’){e.preventDefault()} }} />
“`

元記事を表示

Node.jsでhtmlのlinkタグなどから外部ファイルを読み込めないときの解決法

Node.jsでJavaScript入門書のサンプルコードを実行したが、htmlのlinkタグとscriptタグでcssとJavaScriptが読み込まれなかった。

なお学習目的のため以下の条件を設けている

– Expressなどのフレームワークは使わない
– サンプルのディレクトリ構造は変えない

# サンプルコード

入門書のコードをそのままここに書くわけにはいかないので、自作のサンプルコードを記しておく。

ディレクトリ構成図

“`
.
├── common
│   ├── jquery-3.4.1.min.js
│   └── style.css
└── samples
├── sample1
│   ├── index.html
│   └── script.js
└── sample2
“`

　　
ピンク色の「うんこ」を表示するサンプルコード

“`index.html




元記事を表示

ページを読み込んだ初回にだけ何かしらの処理を実行する方法

#実装方法
javaScriptでページ読み込みをしてクッキー情報を更新する。
１日たったらcookieから指定のデータを消す。

“`javascript
if (!document.cookie.match(/name=modal;/)) {
console.log(“クッキーがないからモーダルの処理をします”);
}

var one_day = 86400; /* 削除時間を一日の秒数にする */
document.cookie = “name=” + encodeURIComponent(‘modal’); + “max-age=” + one_day;
“`

・参考サイト
[JavaScriptでcookie処理（読み・書き・削除）](https://qiita.com/takanorip/items/4e23b803bb1393176636)

元記事を表示

OTHERカテゴリの最新記事