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

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

#100日チャレンジの260~262日目
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
260~262日目は、

おはようございます
260日目
・自作ポートフォリオ改造
・cssをsassで書く練習#早起きチャレンジ魔法JS☆あれい 第2話「shiftはとってもunshiftって」

登場人物

丹生（にゅう）あれい
魔法少女「魔法（マジカル）JS（女子小学生）☆あれい」として活動中。

イテレー太
正体不明の魔法生物。

* [第1話「popでpushした、ような……」](https://qiita.com/8amjp/items/e44e707ccc8c95b4a40d)

## shift()

イテレー太「あれい、また説明をキレイさっぱり省略するけど、今戦闘の真っ最中だよ！」
あれい「また楽しやがったなこの駄犬」
イ「そして、話の流れ的に勘付いてるとは思うけど、今回の敵の弱点は『配列の最初の要素』だよ！」
あ「相変わらずマイペースだな。皮剥ぐぞ」
イ「さて、今回僕が魔法世界から召喚したデータは……これだよ！」

“`
items = [‘へしこ’, ‘ソースカツ丼’, ‘焼き鯖寿司’];
“`

あ「今度は福井の名物かよ。福井駅前の居酒屋のメニューか」
イ「さあ、あれいの配列魔法で、敵の弱点である『配列の最初の要素』を`return`して倒してよ！」
あ「面倒くせえなあ……」

“`
return items.shift();
“`

イ「おおっ

元記事を表示

PDF.js にコントリビュートした話

開発に参加している [LaTeX Workshop](https://github.com/James-Yu/LaTeX-Workshop) では [PDF.js](https://github.com/mozilla/pdf.js) をヘビーに使用していて、ちょくちょくやりとりもあるので、恩返しとコードの理解のために PDF.js にコントリビュートしてみました。対象の issue には CJK ユーザー以外は対応しそうにない[縦書きの表示のバグ](https://github.com/mozilla/pdf.js/issues/11526)の修正を選びました。

無事[PRがマージ](https://github.com/mozilla/pdf.js/pull/11540)されて、Firefox へも[マージ](https://bugzilla.mozilla.org/show_bug.cgi?id=1618875)されました。 Firefox 75から有効になるはずです。Firefox Nightly ではすでに有効になっています。[オンラインデモ](https://mozill

Node.jsの非同期処理をPromiseから理解しようとしてみた

# はじめに

今回は、Node.jsの非同期処理について、自分の備忘録も兼ねて記事を作成しました。

私はJavaScriptの言語仕様なんかをあまり知らない状態でNode.jsを触ったせいで、非同期処理に関する部分ではまり、多くの時間を無駄にしてしまいました。

かなり初歩的な内容かもしれませんが、勉強した内容をまとめます。

# 同期処理とは？

**上から順番にプログラムが実行されていくこと**です。

「上から順番に」という言葉が適切かどうか分かりませんが、「一つ一つの処理が、一個前の処理の終了をまって処理されていく」っていう説明よりは個人的に分かりやすい気がします。

コードにすると、下記の通りです。

“`js
console.log(1);
console.log(2);
console.log(3);
console.log(4);
console.log(5);
“`

実行結果は、下記のようになります。

“`js
1
2
3
4
5
“`

# 非同期処理とは？

同期処理ではないものが非同期処理なので、**上から順番にプログラムを実行されないこと**と

React Material-UI Snackbarのカスタマイズに挑戦した

# 前提
React Material-UIのSnackbarコンポーネントアニメーションを自分好みにカスタマイズしてみまました。
React × Material-UIの記事が少ないので、内容コアですが、記事にしてみました。

# Snackbar（スナックバー）とは
スナックバーは、実行プロセスをユーザーに通知するための表現です。

こちらのスライドアニメーションのカスタマイズに挑戦します。

# Snackbarコンポーネントの構造
Material-UIの構造の多くは、atom要素を構成しています。
今回の`Snackbar`も同様に、複数のatom要素でできています。

ReactのChrome拡張ツールなどでコンポーネント構造を見ると

関数の呼び出しと参照

#はじめに？

JavaScriptを使用するにあたり、関数はオブジェクトと考えたほうが良いです。
※オブジェクトについての説明は、下記を参照下さい。
[オブジェクト](https://eng-entrance.com/what-oop)

引数として関数に渡したり、変数に代入したりすることができます。
####注意する点として、
関数の呼び出しと参照を区別しましょう。

#記述例

“`js
実行される例
function sports() {
return “baseball”;
}
console.log(sports()); // baseball

“`

関数名に () を付けると関数の呼び出しになります。
上記では、sports　という、関数をbaseballと定義し、
実行されました。

“`js
実行されない例
function sports() {
return “baseball”;
}
console.log(sports); // function sports()

“`

関数名に () を付けずに関数名だけを書くと、

トップページに戻るボタンをjavascriptで（jQuery無しで）

###はじめに
脱jQueryしていきたいのでだんだんと素のjavascriptで書いていくようにしていると段階です。
備忘録がわりです。復習を兼ねて１つ１つ解説入れていこうと思います。

###対象
駆け出しエンジニアの方や学生,jQueryに頼りっぱなしが嫌な方。

###ソースコード

“`main.js

// トップへ戻るボタン
function scrollTop(el,duration) {
let target = document.getElementById(el); // elと名付けたドキュメント要素を取得し、変数に格納する
target.addEventListener(‘click’, function() {
let currentY = window.pageYOffset;// クリック時の縦方向へのスクロール量を取得
let step = duration/currentY > 1 ? 10 : 100; // 三項演算子で10or100を変数step（１回分のスクロール量）に格納
let timeStep =

Vue.jsプロジェクトのセットアップ

Vue.jsのプロジェクトを最初から作る手順を紹介します。

### 前提条件
– npm、yarnがインストール済みであること

### @vue/cliのインストール
グローバルに@vue/cliをインストールしてvueコマンドを使用できるようにします。

“`bash
$ npm install -g @vue/cli
“`

### vueプロジェクトの作成
“`bash
$ vue create project-name
“`
“`bash
? Please pick a preset: (Use arrow keys)
❯ default (babel, eslint)
Manually select features
“`

### 開発環境の起動
“`bash
$ yarn serve
“`
起動後、ブラウザからhttp://localhost:8080/で表示できます。

### production用build
“`bash
$ yarn build
“`
成功すると、distディレクトリにファイルが作られます。

GTMをタグに戻す

GTMと聞いて別のサービスを思い浮かべるのは私だけでないはず。
そこで正しいサービスに戻してみようと思います。

ここの記事を参考にさせていただきました。
[LGTMを戻す](https://qiita.com/sapi_kawahara/items/4e05845e285ac087feb5)

“`gtm/gtm.js
window.onload = function() {
var img = ‘data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARgAAAC0CAMAAAB4+cOfAAAApVBMVEX///9FhPA5abtYkPE9gPA1Z7pGcr9liMgwZLkoYLiOr/W+y+WIoNE1fO/R4PtBgvAweu+nwPfy9v73+v7s8v1g

【8日目】JavaScript　配列操作のメソッド　コールバック関数

#本日の学び
こんばんは。
今日はホワイトデーでした。
午前中はお菓子を作り、
昼過ぎからプログラミングです。
思ったよりダラダラしてしまった。反省。

本日も学びのアウトプット。

– Progate Javascript 学習コース6
– Progate Javascript 学習コース7

“`js

//pushメソッド
const characters = [“にんじゃわんこ”, “ベイビーわんこ”, “ひつじ仙人”]; //定数3つ
console.log(characters);
characters.push (“とりずきん”);　//定数の追加
console.log(characters);

//forEachメソッド(因数の中身を全部使う) コールバック関数(因数の中の関数)
const characters = [“にんじゃわんこ”, “ベイビーわんこ”, “ひつじ仙人”, “とりずきん”];
characters.forEach((character)=>{　//コールバック関数
console.log(character);
});

//find

reglとReactでWebGLのシェーダを簡単に扱う

# reglとは
WebGLでお絵描きをしたいとき、大きく分けて以下の2つの方向性がある。[^1]

[^1]: three.jsでシェーダを扱う方法もあります

– [three.js](https://threejs.org/)などの高レベルなライブラリを使う
– GLSLでシェーダを記述し、WebGL APIをそのまま扱う

後者のようにGLSLを扱えると自由度が高い一方で、WebGL APIに関連して “おまじない” 的なコードが大量に必要になってしまうという問題があった。

この記事で扱う [regl](https://github.com/regl-project/regl) は、**WebGLのwrapper**に相当する。初見でもWebGL APIと1:1に対応づけられる程度には原型を維持することで自由度を担保しつつ、大量の “おまじない” や煩雑な状態管理を単純化し、コードの可読性を大幅に向上してくれる。

公式GitHubでは`Functional WebGL`と謳っているが、おそらく「変数を入れると（GLSLに基づいて）描画が得られる」ことを指して`Functio

WordPressテーマ作成法

# はじめに

WordPressのテーマ（テンプレート）作成方法について、ざっくりとまとめてみます。
今後、随時追記予定です。

# 最低限必要なファイル（ページ）

WordPressのテーマを作るにあたり、最低限必要となるのは以下のファイルです。

– index.php
– style.css

なお、`style.css`には、以下の情報を記入します。

“`css:style.css
/*
Theme name: テーマの名称
Theme URI: テーマのURI（ダウンロードページなど）
Description: テーマの説明
Version: テーマのバージョン
Author: テーマ作成者の名前
Author URI: テーマ作成者のホームページのURI
*/
“`

# 一般的なファイル構成

上で書いたのは、「最低限」必要なファイルで、一般的には以下のようなファイル構成になることが多いです。

– front-page.php：ブログのトップページ
– single.php：個別の記事ページ
– page.php：固定ページ
– category.php：

魔法JS☆あれい 第1話「popでpushした、ような……」

登場人物

丹生（にゅう）あれい
魔法少女「魔法（マジカル）JS（女子小学生）☆あれい」として活動中。

イテレー太
正体不明の魔法生物。

## pop()

イテレー太「あれい、すべての前置きを端折るけど、今戦闘の真っ最中だよ！」
あれい「楽してんじゃねえよこの駄犬が」
イ「犬じゃなくてイテレータ型魔法生物だよ！　そして敵を倒すにはあれいの配列魔法が必要なんだ！」
あ「人の話を聞けこの雑種」
イ「僕が魔法世界から召喚したデータを、あれいの配列魔法を使って、敵の弱点に合わせた値に変換して`return`する事で、ダメージを与えることができるんだ！」
あ「なら最初からまともなデータを用意しろよポンコツ」
イ「さて、今回僕が召喚したデータは……これだよ！」

“`
items = [‘羽二重餅’, ‘水ようかん’, ‘梅月せんべい’];
“`

あ「……それ、全部福井の銘菓じゃねえか。相変わらず福井県民丸出しだな」
イ「そして、今回の敵の弱点は、『配列の最後の要素』だよ！　さあ、配列の最後の要素を`return`してぶつけるんだ！」
あ「だから最後の要素だけ召喚しろっつってんだろこの

一家に一枚 FF の表

“`
2 3 4 5 6 7 8 9 a b c d e f
1 —————————————-
2| 4 6 8 a c e 10 12 14 16 18 1a 1c 1e
3| 6 9 c f 12 15 18 1b 1e 21 24 27 2a 2d
4| 8 c 10 14 18 1c 20 24 28 2c 30 34 38 3c
5| a f 14 19 1e 23 28 2d 32 37 3c 41 46 4b
6| c 12 18 1e 24 2a 30 36 3c 42 48 4e 54 5a
7| e 15 1c 23 2a 31 38 3f 46 4d 54 5b 62 69
8| 10 18 20 28 30 38 40 48 50 58 60 68 70 78
9| 12 1b 24 2d 36 3f 48 51 5a 63 6c 75 7e 87
a| 14 1e 28 32 3c 46 50 5a 64 6e 78 82 8c 96
b

JavaScript初学者の私がFizzBuzzアプリを自作して学んだこと

# はじめに
私はフロントエンドエンジニアへの就職を目指して、現在4ヶ月程独学でプログラミングを学習している初学者です。
学習内容のアウトプットを行うために、自由に数値を入力することが可能なFizzBuzzアプリを作成しました。

このアプリを作成するに当たって参考にした記事はこちらになります
[【実体験】未経験からフロントエンド開発を目指す！効率良く就活フェーズへ入る為のロードマップ【課題３種付き】
](https://note.com/kouki_iwahara/n/n9ab103fb7e87)
こちらの記事では未経験者がフロントエンドエンジニアに転職するまでのロードマップが課題と共にわかりやすく解説されていますので、ぜひ参考してみて下さい。

学んだことのアウトプット・私と同じようなJS初学者の参考になればと思いこの記事を作成しています。

**この記事で分かること**

– アプリ作成の流れ
– 私が行き詰まった点

# アプリ作成の流れ
1、追加したい機能を書き出す
2、その機能がどのようなコードで実装できるか大まかに予測する
3、実際にコードを書く

まず初めに自分が作りた

Firebase Realtime Database を Cocos Creatorで使う。

##はじめに
初投稿です。こんにちは。
昨今ではクロスプラットフォームのゲームエンジンといえば Unity 一択で、
次点でどうにかUEが出てくる程度じゃないかと思います。
そんな中 cocos creator に手を出したのはいいものの、情報が少なく割と困ったので、備忘録がてら投稿します。

##したいこと
cocos creator で開発中のアプリで Firebase の Realtime Databaseにアクセスする。

##方法
cocos creator は Node.js を利用しているので基本的には npm を利用する。
ただし、この方法ではAndroid上では動作しなかった。(iOSやWeb上では問題ない)
仕方なくAndroid StudioでFirebase Databaseを導入し、それをJavaを通じて呼び出すという手法をとりました。

##npm install –save firebase
Cocos creator のプロジェクトフォルダでターミナル等を使って

“`
npm install –save firebase
“`
を実行する。
こ

Vue.jsの$emitでpromiseしたいでござるの巻

先日書いた記事で、出来るだけtemplateで$emitした方が良いと書きました。

“`vue

“`

>こういう感じにemitは直接templateから指定して、引数からメソッドを呼んで必要に応じて成型した戻り値を親コンポーネントへ送ります。

みたいなことを書いたわけですが、$emit時に返す値がAPIの読み込みなどの非同期な場合に上手くいかない事がありました。

なのでそういう場合は

“`javascript
hoge(e){
axios.get(‘fuga’, e).then(res => {
this.$emit(‘fuga’, res.data)
})
}
“`

みたいな感じに、イベントから呼び出した関数内でemitするパターンになってしまうのです

webサービスを運営してみた(2020/3/14)

# はじめに
アルバイトの勤怠管理を無料でできるサービス[Timestamp](http://time-stamp.net)を個人で運営しています。
アクティブなアカウント数０人の当サービスでまずは売上１円を上げることが目標です?
フルタイムで仕事をしながら個人でサービス運営できるかの実験だったり技術向上が目的だったりしていて
ここでは運営や開発に関する記録を残していきます。

# ユーザー数
googleアナリティクスから過去１ヶ月のユーザ数の推移です。
3月8日にユーザが伸びているのはクラウドワークスに依頼を掲載したからですね。
![スクリーンショット 2020-03-14 16.44.11.png](https://qiita-image-store.s3.ap-northeast-1.ama

Jsの演算子を備忘録

Jsで詰まったところを残しておくメモ。

#その1
この２つの式は同じ。

“`javascript:javascript
var intA = 399;
var B = !(intA % 4);
“`

“`javascript:javascript
var intA = 399;
var B;
if(intA % 4 === 0){
B = true;
}else{
B = false;
}
“`

よく調べたってわけじゃあないが、どうやら、`!( )`とするとtrueかfalseかを返すようになるらしい。
ちなみにここでは、余りが0ならtrue、余りが出たらfalseだった。

#その2
この２つの式は同じ。

“`javascript:javascript
var hensu = a && b && c;
“`

“`javascript:javascript
var hensu;
if(a == false){
hensu = a;
}else if(b == false){
hensu = b;
}else if(c == false){
hen

react-reduxを読む – 更新処理編

# はじめに

[前回](https://qiita.com/junjis0203/items/f25fd033dc56351bb588)はconnect関数が返すConnectFunctionのうち、初めに表示される際の処理について見てきました。今回はReduxのStateが更新される際にどのような動作が行われ、表示が更新されるのかについて見ていきましょう。

# Reduxの更新処理

Reduxについてはご存知という前提ですが簡単に確認しましょう。Reduxには以下の要素があります。

– Store
Stateを保持するオブジェクト。
– Action
Storeに対する変更要求。Storeの`dispatch`メソッドを使って送信する。
– Reducer
現在のStateとActionから次のSTateを作成する関数。この記事ではあまり出てこない。

またStoreには[subscribeメソッド](https://redux.js.org/api/store#subscribelistener)があり、Actionがdispatchされたら呼び出されるコ