2019-01-27

JSのreduceについて

reduceについて

配列データに対して、任意のコールバック関数を実行できる

`reduce`のコールバック関数には4つの引数を取れる

const aaa =[1,2,3,4,5];
const bbb = aaa.reduce(function (prev,value,index,array) {
  console.log('前回の値='+prev);
  console.log('現在の値='+value);
  console.log('インデックス='+index);
  console.log('配列='+array);
  return prev+value;
});

console.log('結果='+bbb);

1　prev= 前回の値
1　value = 現在の値
2　index= 配列のindex番号
3　array= 配列そのもの

結果

前回の値=1
今回の値=2
インデックス=1
配列=1,2,3,4,5
前回の値=3
今回の値=3
インデックス=2
配列=1,2,3,4,5
前回の値=6
今回の値=4
インデックス=3
配列=1,2,3,4,5
前回の値=10
今回の値=5
インデックス=4
配列=1,2,3,4,5
結果=15

表示の値が配列の2から始まっている。

初期値を設定できる

array.reduce(function (prev,value,index,array){
　〜
},初期値);

先ほどの配列に初期値「０」を設定してみる

前回の値=0
現在の値=1
インデックス=0
配列=1,2,3,4,5
前回の値=1
現在の値=2
インデックス=1
配列=1,2,3,4,5
前回の値=3
現在の値=3
インデックス=2
配列=1,2,3,4,5
前回の値=6
現在の値=4
インデックス=3
配列=1,2,3,4,5
前回の値=10
現在の値=5
インデックス=4
配列=1,2,3,4,5
結果=15

表示の値が配列の1から始めることができた。

2019-01-26

JSのmapついて

mapについて

配列データに対して、コールバック関数を使って、新しい配列として返す

const aaa = [1, 2, 3];
const bbb = aaa.map(function (ccc) {
    return ccc * 2
})

console.log(aaa);
console.log(bbb);

結果

[1, 2, 3] ←aaa
[2, 4, 6] ←bbb

`map`には`コールバック関数`と`オブジェクト`の2つの引数を取ることができる

配列.map( コールバック関数, オブジェクト );

1.`コールバック関数`には3つの引数がある

const aaa = ['a', 'b', 'c'];
aaa.map(function (value, index, array) {
  ～
})

1　value = 配列の各値
2　index= 配列のindex番号
3　array= 配列そのもの

arryについて

const aaa = ['a', 'b', 'c'];
const bbb = aaa.map(function (value, index, array) {
    return array;
})
console.log(bbb);

とやると

[ ['a', 'b', 'c'],  ['a', 'b', 'c'],  ['a', 'b', 'c'] ]

となる

2.`オブジェクト`には任意のものを指定できる

var itemList = {
    'シャーペン': 300,
    'えんぴつ': 200,
    '消しゴム': 150,
    '定規':400
};

var order = ['えんぴつ','定規'];

var result = order.map(function(value,index){
    return this[value];
} , itemList)

結果

[200,400]

オブジェクトに指定したものを参照して、配列に対して結果を出す。

2018-11-28

今更ながらnpmについて

npmは、Node Package Managerの略

node.jsのパッケージ（javascriptのプラグインやモジュール）を管理するもの

node.jsをダウンロードするとnpmもダウンロードされる

npmの使い方

新しく作ったフォルダの場所でnpm initというコマンドをたたく。
パッケージに関する情報などを格納するファイル「package.json」が生成される
ここでnpm npm install パッケージ名でほしいパッケージをダウンロードする（npm uninstall パッケージ名でアンインストールできる）

`npm install`にはグローバルインストールとローカルインストールがある

ローカルインストール
npm npm install パッケージ名をするとそのフォルダ内の「node_modules」フォルダにインストールされる
グローバルインストール
npm npm install -g パッケージ名のように-gをつけてインストールするとnpmをインストールした場所にインストールされ、そのプロジェクトの場所でなくてもそのパッケージを使えるようになる npm root -gで保存場所を確認できる

`npm install`と`--save`

npm npm install パッケージ名 --saveで「package.json」になんのパッケージのどのバージョンをインストールしたか記録できる
記録することにより、他の人がnpm installした際、「package.json」に書かれているパッケージをダウンロードできるただ npm npm install -g パッケージ名のグローバルインストールには--saveはつけられない

`--save`には主に2種類ある

npm npm install パッケージ名 --save
npm npm install パッケージ名 --save-dev

--saveで「package.json」に記録すると「dependencies」に書かれる --save-devで「package.json」に記録すると「devDependencies」に書かれる

「dependencies」は作ったパッケージを公開した際にインストールされる
「devDependencies」は開発用で、作ったものがnpmパッケージなど公開した際はインストールされない

つまり、「package.json」のあるディレクトリでnpm installした際には開発者の立場になるため、すべてインストールされる。コマンドでnpm install 公開したパッケージの場合は、「devDependencies」のパッケージはインストールされない。

パッケージ実行時に使用しないビルドツールやバンドルツール、タスクランナーなどは--save-devで「devDependencies」に記録するといい

【参考】
ちゃんと使い分けてる? dependenciesいろいろ。 - Qiita

npmの省略コマンド

コマンド	省略
`npm install`	`npm i`
`npm install --save`	`npm i -S`
`npm install --save-dev`	`npm i -D`
`npm install --global`	`npm i -g`

npmを使うメリット

複数の人と一緒に開発する際、npm installでパッケージをダウンロードできるため共有しやすい
使えるパッケージが多い
インストール、アンインストールが簡単
バージョン管理が楽
1つのjsにまとめられる

など

npmとYarn

npmと同じようなパッケージマネージャーとしてYarnがある
インストールが速いなどメリットがあるらしい

【参考】
npmから乗り換えてわかったYarnの4つのメリット - ICS MEDIA

2018-10-17

Promiseの.then()をasync/awaitに書き換えてみた

以前、jsonを使ったVue.jsでの配列表示でjsonのデータを.then()を使ったが、ES2017で追加されたasync/awaitを使った書き方もあると知り、試してみました。

async/awaitとは

.then()メソッドの部分の複雑さを解消し、Promiseによる非同期処理をより簡潔に記述できるものらしい。

【参考】
【JavaScript入門】5分で理解！async / awaitの使い方と非同期処理の書き方 | 侍エンジニア塾ブログ | プログラミング入門者向け学習情報サイト
 ES2017の新機能「async / await」でPromise（非同期処理）をスッキリ書く | maesblog

実際の書き換え

.then()のパターン

var news = new Vue({
    el: '#test',
    data: {
        datalists:[],
    },
    created() {
        axios.get('/assets/json/test.json')
        .then(response => {
            this.datalists = response.data;
        })
        .catch(error => {
              console.log(error);
        });
    },
});

async/awaitのパターン

var news = new Vue({
    el: '#test',
    data: {
        datalists:[],
    },
    methods:{
        async getlist(){
            const response = await axios.get('/assets/json/test.json')
            .catch(error => {
                console.log(error);
            });
            this.datalists = response.data;
        }
    },
    created(){
        this.getlist();
    },
});

async/awaitを深くは理解できませんでしたが、なんとなくは理解できました。 IE11では対応してなく、Babelでコンパイルしただけでは通らないみたいなので、polyfillを使う必要があるみたいです。

2018-10-07

ブラウザの戻るを禁止する方法

制作している際に、戻るを禁止したいと思い、ブラウザで戻るを禁止する方法を勉強しました。

history.pushStateを使う

HTML5で追加された、JSのHistory APIのメソッドhistory.pushStateを使うらしい。

history.pushStateには3つの引数がある。

history.pushState(state, title, url)

state
履歴移動を検知するpopstateというイベントがこのstateを元に処理を実行させるためにあるもの
title
履歴のタイトルを指定できるもの。今のところ、あまり使用されてないみたい
url
履歴にurlを追加するもの

戻るを禁止するには

history.pushState(null,null,null);

window.addEventListener("popstate",function(){
    history.pushState(null,null,null);
});

history.pushState(null,null,null);で履歴に今見ているページを追加。

window.addEventListener("popstate",function(){
    history.pushState(null,null,null);
});

によって「戻る」が発生した際に毎回履歴に今見ているページを追加する。

引数のstateが分かりにくかったので、使ってみた。

stateに"戻りました"と追加し、戻るを押した時に、毎回consoleで戻りましたと表示されるようにした。

history.pushState("戻りました。",null,null);

window.addEventListener("popstate",function(){
    history.pushState("戻りました。",null,null);
　console.log(e.state);
});

【参考】
【JavaScript・初心者向け】ブラウザバックを無効化（実質無効化）
Javascriptでブラウザの「戻る」ボタンを押したらイベントを発動する方法を探る
 JavaScriptでURLを操作するメモ

戻るを禁止するためにpushStateやpopstate使用しましたが、調べていると他にもパラメータをつけたりなど色々な使い方ができると知りました。

また、History APIにはpushStateやpopstateの他にもreplaceStateなどがあり、ブラウザによっては使用不可であったり、画面ロード時に、履歴移動を感知するpopstateが発火してしまうブラウザがあったりなど、使用する際、注意も必要でした。

【参考】
【HTML5】HISTORY API「pushState/popState」を使って画面遷移しなくてもURLを変化させて、戻るボタンの挙動をカスタマイズする
 History APIとスマホブラウザでのハマりどころ

2018-10-05

jsonを使ったVue.jsでの配列表示

Vueの単純な配列表示は簡単にできたので、jsonファイルからデータを抽出して配列表示させる勉強をしました。

axiosを使う

Vueでjsonファイルからデータを取得するときはaxiosを使うといいらしい

【参考】
axios を利用した API の使用 — Vue.js

＊js

import Vue from 'vue';
import axios from 'axios';
require('es6-promise').polyfill();

var news = new Vue({
    el: '#test',
    data: {
        datalists:[],
    },
    created() {
        axios.get('/assets/json/test.json')
        .then(response => {
            this.datalists = response.data;
        })
        .catch(error => {
              console.log(error);
        });
    },
});

＊html

<div id="test">
    <ul>
        <li v-for="data in datalists">
             名前：{{data.name}}　年齢：{{data.age}}</p>
        </li>
    </ul>
</div>

＊ブラウザ

名前：たなか　年齢：22
名前：すずき　年齢：40
名前：いとう　年齢：10

公式ではmountedを使っているが、データを設定するだけなので、createdを使用した。

【参考】
Vuejs APIアクセスはcreatedとmountedのどちらで行う？

jsonのデータはresponseというオブジェクトの中のdataプロパティにある。

→オブジェクト・プロパティについて【参考】
JSのオブジェクト、プロパティ、メソッドとか言葉のことなど勉強その①

jsonのデータをVueのdataプロパティで定義したdatalistsにデータを格納。

データの取得に成功した場合の処理は、thenでつなげる。
取得に失敗したときは、catchを使用して呼び出す。

thenやcatchはpromiseオブジェクトに用意されてるメソッド。

axiosは非同期処理でpromiseを返すらしい。

【参照】
JavaScript Promiseの本 Proimise の活用 – chatbox blog

IEは`primise`に対応してない

IEではこのprimiseは対応してなくエラーが出たので、「es6-promise」をnpmで読み込んで解決しました。

require('es6-promise').polyfill();

→ es6-promise - npm

表示数の制限

表示する数を制限するときは算出プロパティのcomputed等を使えばできるみたい。
今回はデータの最新2つを表示する設定にした。

＊js

computed: {
    filterlist: function() {
        return this.datalists.slice(0, 2);
    }
}

＊html

<div id="test">
    <ul>
        <li v-for="data in filterlist">
            名前：{{data.name}}　年齢：{{data.age}}</p>
        </li>
    </ul>
</div>

＊ブラウザ

名前：たなか　年齢：22
名前：すずき　年齢：40

【参考】
Vue.js 2.xのフィルタについて調べてみた

以上、普段使える知識が身についたと思いました。

2018-10-04

CGIについて

今日は会社の先輩方がおススメするVue.jsの本を買いました。

その本に、webの歴史が書いてあり、その中でCGIのことが書かれてました。

ちょうど、案件でフォームを作成した際、サーバー側の会社さんからCGIファイルをもらったところで、「CGIってなんだろう？」と思っていたので、今日はCGIについて簡単に勉強しました。

CGI

CGIとは「Common Gateway Interface」の略称。

ウェブサーバ上で動作するプログラムがウェブページを生成できるようにする仕組み

【参考】CGI - Wikibooks

らしい。

チャットや掲示板、アンケートフォームでよく使われるみたい。

流れ

ブラウザがサーバーに次のページなどのデータを要求
サーバーが受け取ったURLを見てCGIを起動
CGIプログラムが結果を要求されたページに出力
そのCGIによって作られたページをブラウザに返す

昔は用意されたファイルしかブラウザで表示できなかったが、 CGIプログラムによってユーザーのアクションを結果として表示できるようにした仕組みみたい。

【参考】

つまり、フォームでいうと

お客さんがフォームに打ち込み、次の確認ページをwebサーバーに要求
Webサーバー上でCGIが起動し、その打ち込まれたデータを使い、確認ページに内容を出力しページを作成、webサーバー返す
webサーバーは新たに作られた確認ページをブラウザに返す
お客さん確認ページを見れる

という解釈で正しいはず。。。

なんとなく理解することができました。 CGIを知って思ったことは、きっとVue.jsならこの辺の処理をスマートに出来るんだろうなと思いました。

webMemo

筋トレ好きな駆け出しフロントエンドエンジニアの勉強メモ

JSのreduceについて

reduceについて

`reduce`のコールバック関数には4つの引数を取れる

初期値を設定できる

JSのmapついて

mapについて

`map`には`コールバック関数`と`オブジェクト`の2つの引数を取ることができる

1.`コールバック関数`には3つの引数がある

2.`オブジェクト`には任意のものを指定できる

今更ながらnpmについて

npmは、Node Package Managerの略

npmの使い方

`npm install`にはグローバルインストールとローカルインストールがある

`npm install`と`--save`

`--save`には主に2種類ある

npmの省略コマンド

npmを使うメリット

npmとYarn

Promiseの.then()をasync/awaitに書き換えてみた

async/awaitとは

実際の書き換え

ブラウザの戻るを禁止する方法

history.pushStateを使う

history.pushState(state, title, url)

戻るを禁止するには

jsonを使ったVue.jsでの配列表示

axiosを使う

IEは`primise`に対応してない

表示数の制限

CGIについて

CGI

流れ

reduceについて

reduceのコールバック関数には4つの引数を取れる

初期値を設定できる

mapについて

mapにはコールバック関数とオブジェクトの2つの引数を取ることができる

1.コールバック関数には3つの引数がある

2.オブジェクトには任意のものを指定できる

npmは、Node Package Managerの略

npmの使い方

npm installにはグローバルインストールとローカルインストールがある

npm installと--save

--saveには主に2種類ある

npmの省略コマンド

npmを使うメリット

npmとYarn

async/awaitとは

実際の書き換え

history.pushStateを使う

history.pushState(state, title, url)

戻るを禁止するには

axiosを使う

IEはprimiseに対応してない

表示数の制限

流れ

`reduce`のコールバック関数には4つの引数を取れる

`map`には`コールバック関数`と`オブジェクト`の2つの引数を取ることができる

1.`コールバック関数`には3つの引数がある

2.`オブジェクト`には任意のものを指定できる

`npm install`にはグローバルインストールとローカルインストールがある

`npm install`と`--save`

`--save`には主に2種類ある

IEは`primise`に対応してない