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

お前はもう死んでいる。とか言ってる俺の脳みそが一番死んでいたのかもしれない。～JavaScript 即時関数～

[JavaScriptに苦手意識のない世界を実現したい!!](https://qiita.com/Qiwitaro/items/1612c0cc4bbb8ae10d39#%E5%8D%B3%E6%99%82%E9%96%A2%E6%95%B0)で以下の様に述べたのですが、”終えた”は言い過ぎだったような気がして修正しました。失礼しました。
> 即時関数という仕組みがありましたが、役割を終えた感があります。

先日こんなものを見つけました。[kintone JavaScript APIのイジりかた](https://developer.cybozu.io/hc/ja/articles/201755040-%E7%AC%AC1%E5%9B%9E-kintone-JavaScript-API%E3%81%AE%E3%82%A4%E3%82%B8%E3%82%8A%E3%81%8B%E3%81%9F)というページの説明です。cybozuさんの[kintone](https://kintone.cybozu.co.jp/)というアプリケーションです。
![kintone標準.PNG](https

円グラフを描画したらラベルが被ってムカついた話。

HTML上に円グラフを描画する必要があって、描画してみたらしてみたで偏ったデータでラベルが重なってストレスがたまったのでその記録。

【やりたかったこと】
円グラフを描画する。
とりあえず、chart.jsで円グラフを描画してみる。
(前任者がこれを採用してたのがすべての元凶なのだろうか)
cahrt.js ：https://github.com/chartjs/Chart.js/releases/tag/v2.9.3
Labelのプラグイン：https://github.com/emn178/chartjs-plugin-labels

【実装①】

“`javascript:drowChart.js
var data = {
datasets:[{
data:[90,1,1,1],
backgroundColor: [“#009900″,”#009990″,”#909990″,”#300030”]
}],
labels: [“一人ぼっちは…”,”寂しいもんな”,”いいよ”,”一緒にいてやるよ”],

highlight.js で一部の言語のみに対応して webpack のビルドサイズを減らす方法

こんにちは、フロントエンジニアの ku6ryo です。
コード文字列をハイライトしてくれる [highlight.js](https://highlightjs.org/) を使う機会があったのですが、highlight.js のライブラリ全体のファイルサイズが大きくて webpack ビルドのサイズを大きくしていたので必要な言語のみ対応して、ビルドサイズを**大幅に**削減する方法を紹介します。

まず、highlight.js の大きさは webpack で build した場合、Gzip しないとサイズが 746.69 KB、Gzip すると 246.18 KB のサイズがあります。

いずれにしても、とても大きなサイズなことは代わ

[Angular]ページ遷移にアニメーションをつける

## 概要

– ページ遷移する時にスライドするようなアニメーションを入れてみます
– Angularにアニメーションの機能も搭載されているのでそれを使います

## サンプル

### ベースのアプリ作成

– まずは適当な3つのページを用意します

“`
% tree src/app
src/app
├── animations.ts
├── app-routing.module.ts
├── app.component.ts
├── app.module.ts
├── page1
│   └── page1.component.ts
├── page2
│   └── page2.component.ts
└── page3
└── page3.component.ts
“`

– 各ページは背景色が違うだけでほとんど同じ内容です

“`ts:src/app/page1/page1.component.ts
import { Component } from ‘@angular/core’;

@Component({
selector: ‘app-page1’

jQueryの次にJavaScriptを学びはじめたキミのための記事！

#記事の目的
この記事は、プログラミング初学者の中でも、
HTML → CSS → jQuery と学んできて、次のステップとしてJavaScriptを学び始めた人が、
技術的な話の前に知っておいたほうが助かりそうな事情や背景をまとめた記事です。

JavaScriptをちょっと初めてみたけど、よくわからん！と混乱しているタイミングで、読んでいただけたらと思います。

「そんなことわかってるよ」と言いたくなるような初歩的な説明もあると思うので、読み飛ばしていただければと思います。

執筆者もプログラミング歴１年程度の初心者なので、知識の浅い部分があります。
また、初心者ながらJavaScriptを学んでしばらくたっているので、当事者目線からずれた説明をしてしまう部分もあるかもしれません。
そのため、この記事のコメント欄で、ターゲットとなる当事者の方や、執筆者よりも博識な方などから、
いろいろな意見を頂きながら成長していくコミュニティにしたいと思っていますので、ご協力よろしくおねがいします！

#jQueryの立ち位置
そもそも、HTML、CSS、jQuery、JavaScriptと

Bookmarkletを作ろう（ウェブページのハック手順編）

#この記事は
2年前に書いた「[ブックマークレット準備編](https://qiita.com/kanaxx/items/63debe502aacd73c3cb8)」の記事へのアクセスが、じわじわと増えてきました。ありがとうございます。

さて、**ブックマークレットを作る手順**が分かっても、**上手にブックマークレット**は作れません。先人が作ったウェブアプリケーション（画面）をハックする折れない心が必要です。ブックマークレット自体に制約が多いので、制約の範囲の中でハックする必要があります。

ということで、今回は実用的なものを作るハック手順を紹介しようと思います。私がウェブアプリケーションをハックするときに、見ているポイントや気を付けるポイントを紹介しながら、ブックマークレットに仕上げを仕上げていきます。

#はじめに
##一番大事なのは要件を決めること
いきなりストレートの直球を投げ込みました。別にブックマークレットに限ったことではないですね。プログラムを作る上でとても大事なことです。

ブックマークレットは単独で動くアプリケーションではないです。誰かが作ったウェブアプリケーシ

【比較検証】Next.js の Server Side Rendering (SSR) を理解する。create-react-app と比べてみた。


[Next.jsのサイト](https://nextjs.org/)、かっこいいですよね ?
クールで、パフォーマンスにも優れていてエンジニアを魅了します。
日本では Nuxt.js が人気のようですが、個人的には Next.js を推しています。

さて、先日 [Next.js のチュートリアル](https://nextjs.org/learn/basics/getting-started) を通してサーバサイドレンダリングについて考えさせられる機会がありました。本記事では、そもそもサーバサイドレンダリングのメリットとは？というところから初めて、`create-react-app` によって実装された SPA と、`next`によって実装された SSR ではどのような違いがあるのかを検証してみました。

以下の動画は本記事のサマリーです。

IFRAMEにコンテンツをフィットさせるには

固定サイズのHTMLを、それよりも小さいサイズのIFRAMEに縮小して表示したかったので、その対処方法です。

# 課題

たとえば1440px X 1000pxの大きさのHTMLを幅800pxのIFRAMEに表示します。

# 解決方法

“`index.html





Google OAuth 2.0 認証を使ったGoogle Sign-Inの実装（サーバー編）

#概要

今回はこちらの記事の続きです。
[Google OAuth 2.0 認証を使ったGoogle Sign-Inの実装（JS編）](https://qiita.com/biy0ganba/items/6c3a886759254e0e942c)
クライアントサイドでログインしてバックエンドサーバーで認証といった感じでやります。

前回の記事でユーザー情報などをレスポンスで取得することができました。
ただこれをこのままサーバーサイドに送ったりするのは危険です。
例えば、ユーザーIDをサーバーに送信する際にユーザーを偽装できちゃったりします。。

なので、その代わりに検証可能なIDトークンを使用して、サーバー側でサインインしているユーザー情報を安全に取得します。

さっそく実装していきましょう。
#フロントサイドの実装

まずJSの部分を書きかえます。

“`javascript:JavaScript

function onSignIn(googleUser) {
var id_token = googleUser.getAuthResponse().id_token; //

[Angular]カスタムパイプの作り方

## 概要

– Angularにはtemplate上でフォーマットなど簡易な変換ができるPipeという機能があります
– https://angular.jp/guide/pipes
– フレームワークが提供するPipeもありますが独自に作ることもできるようなのでその手順のメモ

## パイプとは

– Angularではtemplateの中で`{{}}`を使うと変数を埋め込むことができます
– 埋め込んだ変数の後ろに`{{ 変数 | xxx }}`といった形でPipeを適用することでフォーマット変換などができます

“`html

{{ 1234567 | number }}

{{ new Date(2020, 1, 5) | date: ‘yyyy年MM月dd日’ }}

“`

– 上記の例はAngularが用意している`number`と`date`のPipeを使った例です
– 以下のように画面に表示されます

“`
1,234,567
2020年02月05日
“`

## カスタムパイプを作る

– 今

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

100日チャレンジの230日目

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

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

230日目は

おはようございます
230日目
・udemyで、css＋javascript講座
・webサイト部分的模写#早起きチャレンジ【WebAudioAPI】録音した音声をバイナリデータ化、PHPへ受け渡し

#概要
Node.js上で、IBMのWatsonによって人が話した音声データを自動で文字起こしするスクリプトを作成しました。
その中で、結構苦労した
PCのマイクに直接アクセス→録音した音声データをバイナリデータ化、PHPへ受け渡し
の部分をメモがてら貼り付け。
#環境
“`
$php -v
PHP 7.1.23 (cli) (built: Feb 22 2019 22:19:32) ( NTS )
Copyright (c) 1997-2018 The PHP Group
Zend Engine v3.1.0, Copyright (c) 1998-2018 Zend Technologies
“`
#録音部分
“`hogehoge.js
// 音声データのバッファをクリアする
audioData = [];

//様々なブラウザでマイクへのアクセス権を取得する
navigator.mediaDevices = navigator.mediaDevices || navigator.webkitGetUserMedia;

//audioのみtrue

元記事を表示

gulp + webpack + babelをつかってみた

# はじめに
以前作ったこれ([文字列→塩基配列の相互変換ツールをつくってみた(アプリ版)](https://qiita.com/am10/items/3ecac20451c82133e900))の[Web版](https://adventam10.github.io/DNAConverter-web_vue/)でせっかくなんでよく聞くgulp, webpack, babelをつかってみました。色々みながらやりましたがバージョンの違いなどでエラー出まくってなかなか苦労しました。

あんまりwebさわったことないので間違ってたら優しく指摘していただけるとありがたいです。

とりあえず動くものはできました！！

# やりたいこと
* SassをCSSに変換
* CSS圧縮
* 画像圧縮
* js圧縮
* babelでjsをES5で出力
* webpackでjsをまとめる

[ソース](https://github.com/adventam10/DNAConverter-web_vue)

# 環境
* macOS Catalina 10.15.2
* node.js v13.7.0

#

【JavaScript】Pagination.jsでページネーションをさくっと実装

人生には、JavaScriptでページネーションすることもあるでしょう。僕はありました。
というわけで[Pagination.js](https://github.com/superRaytin/paginationjs)を使った例を丁寧めに紹介します。
# HTML, JavaScript
[Pagination.js](https://pagination.js.org/)と[jQuery](https://jquery.com/)を公式から持ってきて下さい。スタイルは次の章で説明します。

“`html