f@ctor

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

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

対応するかっこのインデックスを返す

# 対応するかっこのインデックスを返す

[Brainfuck](https://ja.wikipedia.org/wiki/Brainfuck) のインタプリタを作ろうかと思って。

## これはなに

かっこ (`[` と `]`) の対応を調べる。
対応するかっこがあればそのインデクスを返す。
なければ `-1` を返す。
そもそもかっこでなければ自分のインデクスを返す。

例:

“`javascript
let str = ‘++[>++[>++<-]<-]>>’;
let foo = bracket(str, 2); // 15
let bar = bracket(str, 12); // 6
let baz = bracket(str, 7); // 7
let err = ‘[[[][][]][][]’;
let qux = bracket(err, 0); // -1
“`

“`javascript
function bracket(s, p) {
if (!/\]|\[/.test(s[p])) {
return p;
}
let nest = 1

元記事を表示

タブ上からYoutubeを取り除きバックサウンドとして流せるChrome拡張機能を作った話

YoutubeのURLを入れることで別ウィンドウが開いてバックサウンドとしてYoutubeの曲を流せるChrome拡張機能をつくりました。再生リストも対応。

Mac / Win それぞれ友達にテストとして使ってもらい動くことを確認してもらいました。ありがとう。

※8/21修正:一部タイトルと文章の表現に変更を加えました。

ここからDLできます：Extension Youtube Player

## 成果物
![Aug-19-2020 23-49-07.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/651103/aa07f771-a0c2-c931-336c-d03685237f31.gif)

URLを入力すると、

元記事を表示

JavaScriptからハードウェアを扱えるWebAPIとその安全性について

最近話題に上がったWebAPIとその安全性について、少しお話しようと思います。

# はじめに
私は、他のどの言語よりJavaScriptが好きです。
ウェブブラウザとテキストエディタさえあれば簡単に始められ、スクリプト言語なのに超高速で、日々進化しており、実行環境や用途を選ばないからです。

そして特に、それらを最先端で支えるChromium(Blink/V8)コミュニティの、新しい実装や活動へ積極的に取り組む姿勢は、とても素晴らしいと感じています。
おかげで、昔はインストールしなければ使えなかったアプリケーションも、今では”Web版”の文字を見る機会も増えました。

最近では [WebUSBを使ったAndroidのアップデート](https://source.android.com/setup/contribute/flash) が話題になりましたね。

そこへ “ちょっと待った” がQiitaユーザーの方から出たわけですが、個人的には少し納得のいかない内容だったため、こうして記事にしてみました。

# WebAPI
ここで言うWebAPIとは **ウェブブラウザからハードウェ

元記事を表示

Firebase Authentication 匿名ログイン 成果物URL:https://tokumei.netlify.app

## 成果物
https://tokumei.netlify.app

ワイ 「ログイン後Firebaseから**寿命が1時間のJWTトークン**が取得できる」
ワイ 「現実的な使い方をするなら」
ワイ 「**JWTトークン**を自分が使ってるオリジンサーバに送って改ざんされていないかチェックする」
ワイ 「ライブラリは**firebase-admin**を使う」

## トークンが改ざんされていないかチェックするソース
“`package.json
{
“dependencies”: {
“firebase-admin”: “^9.1.0″
}
}
“`

“`index.js
const admin = require(‘firebase-admin’);

// 各自用意
const firebaseConfig = {
type: ”,
project_id: ”,
private_key_id: ”,
private_key: ”,
client_email: ”,
client_id: ”,
auth_uri:

元記事を表示

即時関数の書き方　初心者向け

## 即時関数とは
関数定義と同時に一度だけ実行される関数。

### 即時じゃない関数
普通の関数

“`js
function a() {
console.log(‘called’);
}

a();
//log >>> called
“`

### 関数宣言での即時関数
関数宣言 ＝「say function!」

“`js
(function(‘仮引数’) {
console.log(‘called’);
})(‘実引数’);
//log >>> called
“`

### 関数式での即時関数
returnで呼び出し元に実行結果が返却される。
下記の場合、変数aに変数bが入る。

“`js
const a = function(‘仮引数’) {
let b = ‘hi!’;
return b;
}(‘実引数’);

//関数式の場合functionの前後に()つけなくても動く、つけても動く

console.log(a);
//log >>> hi!

“`

元記事を表示

クロージャーとは

## クロージャーとは
> レキシカルスコープの変数を関数が使用している状態。

… えっ、なに？(汗
### まず、レキシカルスコープとは
> コードを書く場所によって参照できる変数が変わるスコープのこと。

うむ。｛こういう状態とか｝でスコープが変わることを言っているんだな。きっと。

### 個人的なクロージャーのイメージ
`クロージャーじゃない状態 → { グローバル｛関数A｝ }`
`クロージャーな状態 → { グローバル｛関数B｛関数A｝} }`
「この変数の値を簡単に触られたくない！」という場合、その変数を使う関数Aを関数Bで囲い、その変数を関数Bに置き、関数Aから関数Bの変数を参照できる状態にした上でグローバルからは触れないようにした状態!

勢いで言い切ってみましたが！
ちょっと違うかも…

ま、まぁとりあえず、上記のイメージを踏まえて実際のコードを見ていきたいと思います。自身でイメージを掴み、言語化できることが重要です。

### 呼ぶたびに変数numの値を１ずつ増やしていく処理をつくりたいが変数numは外から触られたくない　→　クロージャーを考える

元記事を表示

様々なJavaScriptの資格を紹介する

# はじめに
JavaScriptは多くの人に愛され、現在も急成長を遂げている言語です。
2020年も更に活躍してくれると期待しています。

今日はそんなJavaScriptの実力を証明できる資格を紹介します。

# JavaScript Certification

[JavaScript Certification](https://www.w3schools.com/cert/cert_javascript.asp)

W3Schoolsという学習プログラミングサービスが提供している
JavaScript開発者向けの認定試験です。
合格するとJavaScript開発者証明書がもらえます。

英語のみの受験となり受験料は95ドルです。

# JAVASCRIPT CERTIFICATION

[JAVASCRIPT CERTIFICATION](https://www.javascriptinstitute.org/javascript-certification/)

International JavaScript Institute、別名IJSIによる認定プログラムです。
前

元記事を表示

Youtube に『ここすき』ボタン入れてみた：時間コメント自動入力

# はじめに
Youtube のコメント欄に `x:xx` のような時間が書かれたコメントを見たことがありますか?
クリックするとその時間まで飛ばしてくれる便利なコメントです。ですが、このコメントはどうやって入力しているのでしょう。手動でしょうか。
手動以外で、入力できないの?
**ということで**
# 作った物





IE では表示されない

元記事を表示

htmlにJavaScriptを埋め込んで動かそう！！

#この記事の対象読者
・**JavaScript**を始めて見たいけど、どうにコードを書いてどうやって実行するか分からない人
・**JavaScript**をhtmlとは別のファイルから読み込める様にしたい人
・ウェブ開発をやった事は無いけど興味がある暇な人
#JavaScriptとは
ざっくり言うと、環境構築がいらずで開発を始められて**ウェブサイト**、**アプリ**、**サーバー**など多岐に渡って色々な事が出来るプログラミング言語だと思っていたら大丈夫だと思います。
※本当はもっと細かく説明した方が良いと思うが今回やる事に関してだったらこれくらいで十分だと思います。詳しく知りたい人は[wiki](https://ja.wikipedia.org/wiki/JavaScript)を見て下さい。
#下準備
ここからはBracketsを使って行きますが、コードを貼り付けますので無くても大丈夫です。もしBracketsを入れたい人は[こちら](https://qiita.com/lot-uni/items/8d621d4f80bc5cf17f15)を参考にしてくれたら嬉しいです。(ちな

元記事を表示

JavaScript（未経験者向け）

# JavaScriptとは
ウェブサイトを操作して表示を変化させたいときや、画面を更新せずにサーバと通信したい時に使用します。
*ex.いいね機能など*

## Javaとは全く違うよ
Javaというプログラミング言語がありますが、JavaScriptは全くの別言語です。名前が似てるだけで全く別物なので注意です！

## 基礎文法

#####●アラートの表示

```script.js
window.alert('こんにちは');
```
テキストはシングルクォート（'）かダブルクオート（"）で囲みます。

**※window.alert()**
ブラウザでアラートを表示させるメソッドです。引数としてアラートに表示させる情報を渡します。

#####●コンソールにテキストを表示させる
ブラウザ上で二本指クリック→「検証」を選択→Consoleを選択でコンソールを開く
↓
index.htmlを開いているブラウザをリロード
↓
コンソールにテキストが表示されたら成功！

**※console.log()**
ブラウザのコンソールにテキストを表示させるメソッドです。引数としてコ

元記事を表示

h:commandButtonでサーバ処理実行後にJavaScriptの処理を実行する方法

- 環境
- CentOS Linux release 7.8.2003 (Core)
- Eclipse IDE for Enterprise Java Developers.Version: 2020-03 (4.15.0)
- openjdk version "11.0.7" 2020-04-14 LTS
- JSF 2.3.9

# やりたいこと
1. ポップアップで開いた子画面を閉じたい
1. 閉じる前にサーバで処理したい

# h:commandButtonでサーバ処理実行後にJavaScriptの処理を実行する方法
1. `h:commandButton`の`action`属性にサーバ処理を書く
2. `h:commandButton`の子要素に`f:ajax`を書く(ボタンのサーバ処理はAjaxで実行する)
3. `f:ajax`の`onevent`属性にJavaScriptの関数名を書く
4. JavaScriptの関数でUI eventをパラメータとして定義する
5. UI eventの`status`が`complete`だったら処

元記事を表示

Firebase CloudFunctionsで関数名に、ハイフン(-)が使えないときの対処

##Firebase CloudFunctionsで - があるエンドポイントを作りたいけど、やり方がわからない
express.jsを使えば特に調べずにできるが、そこまで複雑ではないので、firebaseのみで完結させたい。

頑張って調べてみることにした。

####これだと、当然エラーが出ます

```typescript
exports.hello-world = functions.https.onRequest((request, response) => {
response.json({ name: 'first' })
})
```

####そんなときは、ブラケット記法だと使ってみてlintでは引っかからなかったけど、firebaseにデプロイするときに弾かれる。

```typescript
exports['hello-world'] = functions.https.onRequest((request, response) => {
response.json({ name: 'first' })
})
```
```
Running comman

元記事を表示

GCP: Cloud FunctionsとCloud SQLをVPC経由で接続する方法

この投稿では、Google Cloud Platform(GCP)にて、Cloud FunctionsをCloud SQLに接続する手順をチュートリアル形式で説明します。

構築するインフラ構成は、Cloud FunctionsとCloud SQLをVPCに繋いで、両者が内部ネットワークだけで通信する構成にします:

![cloudfunctions-sql - New frame.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/889/47eba762-3f17-e0ce-2b80-07b7378f27e6.jpeg)

## 想定読者

この投稿では様々な技術スタックを使いますが、それぞれの詳しい説明は割愛します。読者としては次のような方を想定しています。

* なんとなく以下が分かる
* Node.jsでサーバサイドプログラミング
* MySQLへのSQLの発行のしかた
* 2週間くらいGCPに触れているGCP初心者
* VPC、Cloud Functions、Cloud S

元記事を表示

コールバック関数とは何か

今回は私のような初心者にとって恐らく最初の壁で、何が起きているのか理解しにくいコールバック関数についてです。

前回２つの記事はES5で書いてたので、今日からES6で書いていきます。

##コールバック関数とは何か　
関数の引数に渡す関数
※渡される関数は「高階関数」といいます。

なので、高階関数の中で実行される関数のことですね。
「関数」の単語ばかりでややこしいですが...

実はこれは結構色々なところで見かけます。

例えば、addEventListenerやfind、mapメソッド等ですね。
だから理解は必須で、理解することで何が起こってるかわかりやすくなるということです。

早速超絶シンプルな例

```JavaScript:
let red = function() {
console.log('I am red');
}

let blue = function(callback) {
console.log('I am blue');
callback();
}

blue(red);
//結果：
// I am blue
// I am red
`

元記事を表示

生年月日から年齢を計算して表示させる JavaScript PHP

少し前の案件で「会社概要ページの代表者プロフィールに年齢を表記する」ってことがあって、
年齢は毎年変わるから自動で更新させないとなー、と思いつつ面倒くさくてそのまま表記したって事がありました。

その事を思い出して、jsとphpで年齢を計算して表示させるってのを作ってみました。
jsかphpのどちらかで実装できるので、好きな方を使ってください。

##PHPで年齢を計算して表示
"19910402"の部分が生年月日です、年齢を表示させたい人の生年月日に変更してください。
ちなみに1991年4月2日は僕の誕生日です。

```php:php
年齢は歳です。
```

```:実行結果
年齢は29歳です。
```

##JavaScriptで年齢を計算して表示
同じく"19910402"の部分が生年月日です、年齢を表示させたい人の生年月日に変更してください。

```html:html
年齢は歳です。
```
```javascript

元記事を表示

SPA（Single Page Application）とは？普及した理由を歴史から学ぶ

##SPAとは？##
「**S**ingle **P**age **A**pplication」の略であり、単一のWebページでアプリケーションを構成する設計構造の名称になります。
従来ページの遷移させる際に、ページ全体の更新（次ページの情報取得）が必要でした。
これがページ内の部分的な遷移を可能としたのがSPAであり、これによりページの表示速度や応答速度が向上しました。

**SPAを用いた具体例**
・Google Map
・Slack
・Facebook

上記の具体例に上げたGoogle Mapはイメージしやすく、ページ内のマップ部分のみドラッグして動かす事ができます。
これにはAjaxというアプローチ方法が採用されており、一部の情報をサーバーに送信して、それを受け取り反映させる仕組みとなっています。

Ajaxとは「**A**synchronous **Ja**vaScript + **X**ML」の略称で、元々採用されている技術である「DOM」「XML」「JavaScript」等を組み合わせたアプローチ方法です。
その為「**新しくて古い技術**」と呼ばれており、こういった

元記事を表示

【JavaScript関数ドリル】 初級編 join関数の実装

## join関数の課題内容

「課題内容」「解説動画」「解答例」を確認したい場合は、以下リンク先のページを参照。

【初級】join関数の実装

## join関数 に取り組む前の状態

+ 加えていくメソッドかな？と思いました。

## join関数に取り組んだ後の状態

+ joinメソッドは、配列の間ごとに第２引数で指定した数字文字を入れていくメソッドです。

## join関数の実装コード(答えを見る前)

+ joinメソッドの働きを理解して最後まで実装できました。

## join関数の実装コード(答えを見た後)

実装完了しました?

```js

function join(array, separator = ',') {
const copiedArray = [...array];

let joinedString = copiedArray.shift();
for(let i = 0; i < copiedArray.length; i++) { joinedString += separato

元記事を表示

【JavaScript関数ドリル】 初級編 initial関数の実装

## initial関数の課題内容

「課題内容」「解説動画」「解答例」を確認したい場合は、以下リンク先のページを参照。

【初級】initial関数の実装

## initial関数 に取り組む前の状態

+ 頭文字が変わるメソッドかなと思いました。

## initial関数に取り組んだ後の状態

+ initialメソッドは、配列の後ろを出力します。

## initial関数の実装コード(答えを見る前)

+ initialメソッドの働きを理解していましたが、自力で実装できませんでした。

## initial関数の実装コード(答えを見た後)

実装完了しました?

```js
function initial(array) {
const copiedArray = [...array];
copiedArray.pop();

return copiedArray;
}

const numbers = [1, 2, 3];
console.log( initial(numbers) );

console.log('

元記事を表示

OTHERカテゴリの最新記事