f@ctor

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

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

【JavaScript】html要素の基準フォントサイズを取得する

#html要素の基準フォントサイズ取得
WEBサイトのレスポンシブル対応などで、html要素の基準フォントサイズが知りたくなったときにそれを取得することがあったのでメモ。

“`javascript

let root = document.documentElement; //htmlのルート要素を取得
let style = window.getComputedStyle(root).getPropertyValue(‘font-size’); //ルート要素のcssプロパティを全て取得し、その中からフォントサイズを取得
let stFontSize = parseFloat(style); //float型の数値に変換
“`

#window.getComputedStyleでcssプロパティを取得
“`javascript
let style = window.getComputedStyle(root).getPropertyValue(‘font-size’);
“`
この部分がポイントで、 window.getComputedStyle()に引数に入れたeleme

元記事を表示

【1週間】Web ゲームを爆速で開発するために実践したこと?個人開発向け

(内心)
作ったゲームを沢山の人に触ってもらってリアクションが欲しいなぁ～
そうだ、記事投稿して宣伝しよう！

といった**下心で書いた記事です**。すみませんでした 遊んでください?

元記事を表示

【JWT（JSON Web Token）】Node.jsで実際に使ってみた（公開鍵・秘密鍵方式）

# はじめに

以前、JWTをNode.jsで使ってみる記事（[コチラ](https://qiita.com/sa9ra4ma/items/67edf18067eb64a0bf40)）を書きましたが、これは共通鍵暗号化方式を使用したものでした。
今回は公開鍵・秘密鍵暗号化方式を使用した場合のサンプルを作成したので、紹介したいと思います。

JWTとは何かをまだ理解していない方は以下の記事から読んでみてください。

– [【JWT（JSON Web Token）】Node.jsで実際に使ってみた](https://qiita.com/sa9ra4ma/items/67edf18067eb64a0bf40)

# 実際に使ってみた
JWTの説明は以前まとめたので、いきなり使ってみようと思います。

# ソースの説明

ソース全部貼っておきます。

“`javascript
// ➀
const express = require(“express”);
const jwt = require(“jsonwebtoken”);

const PORT = 3000;

const app

元記事を表示

async/await がやっていること

かつてコールバック地獄とか呼ばれていたJSの非同期処理は `Promise` の登場で劇的に改善しました。
さらに `async/await` の構文の登場によってこれらの非同期処理はさらに簡潔に書けるようになりました。

## `async/await` は何をしているのか ?

内部的には `async/await` は `Promise` にある `then()` というメソッドを処理しています。
ここでTypeScriptの `Promise` で定義されている `then()` をみてみます。

“`typescript
interface Promise {
then(onfulfilled?: ((value: T) => TResult1 | PromiseLike) | undefined | null, onrejected?: ((reason: any) => TResult2 | PromiseLike) | undefined | null):

元記事を表示

【javascript】超入門

## javascriptとは
### 成り立ち
javascriptはもともとはNetscap社の開発した**LiveScript**という言語だった！
そのLiveScriptはコンテンツ（画像や文章などの静的コンテンツ）を動的に扱うための[スクリプト言語](https://ja.wikipedia.org/wiki/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%97%E3%83%88%E8%A8%80%E8%AA%9E)。
そして、その後、Netscape社がJavaを開発していたサン・マイクロシステムズと業務提携をして**javascript**と命名されたんだね

## javascriptでできること
ここからは実際にコードを書きながら勉強していこう！
Desktopにjavascipt-practiceっていうフォルダを作って、その中に
index.html、images、stylesheets、stylesheetsの中にindex.cssを作ろう！
スクリーンショット 2020-06-22 16.55.</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>JavaScript</div> <div class='tag-cloud-link'>Hamburger</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/facultyoflaw11/items/3517fe9a6c02137b707f'>元記事を表示</a></div> <h3 id=初めてのJavaScript-備忘録02

# 初めてのJavaScript-備忘録02

今回は基本型であるArrayについて書こうと思う。

## Arrayとは？

配列変数を操作するためのオブジェクトで、配列の要素を削除したり追加できたりする色々便利なやつ。

## どうやって使う？

まず、宣言は↓のように宣言する事ができる。

“`js
let list=[‘hoge’,’who’,’buz’];
//または、
let list=[];
“`

あとコンストラクタを使っての宣言する事もできる。

“`js
let list01 = new Array(‘hoge’,’bus’); //hoge , bus の要素を含んだ配列
let list02 = new Array(); //空配列
let list03 = new Array(10); //要素が10個の配列
“`

で、以下のメンバーを使う事で色々できる。
主に使えそうなのをピックアップ！

| 概要 | メンバー名 |
| ———

元記事を表示

async/awaitを使った非同期処理

##async/awaitとは
Promiseをベースにした非同期のコードを簡単に処理するメソッド

##asyncを使った時、使わない時
asyncを使うと、返り値をPromiseを使って表示させることになる。

・asyncを使わない時

“`javascript
const doWork = () => { }
console.log(doWork())
“`
↓
「undefined」が返ってくる
（まだdoWork関数は何も定義されていないため）

・asyncを使った時

“`javascript
//asyncを用いて実装
const doWork = async() => {}
console.log(doWork())
“`
↓
「Promise{undefined}」が返ってくる

★asyncは常にPromiseを返す！！！
asyncを使うメリット

→「.then()」「.catch()」を用いて、成功時、失敗時の次の処理を記述することができる。

“`javascript
const doWork = async

元記事を表示

GAS(Google Apps Script)でスクレイピングはつらい。htmlをパースする所が。だからパースはFirebase Functionsでする。npmのライブラリ使えるし。

今回はYahooトップニュースをスクレイピングしてスプレッドシートに出力する。
GASでhtml取得、パースはFirebase Functionsで行う。

※ Firebase Functionsでhtmlを取得しない理由
Firebase Functionsは無料(Sparkプラン)だと外部APIを叩けないから。

## 成果物
![無題7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/604197/b853e06b-3cfd-94af-573b-9a763fc11172.png)

## リポジトリ
https://github.com/yuzuru2/gas_firebase_scraping

## 手順

### 1. Node.jsをインスコ
https://nodejs.org/ja/

ポチポチ進めてたらインスコが完了する。

### 2. firebase-toolsをインスコ
“`
$ npm install -g firebase-tools
“`

### 3. CLI

元記事を表示

Reactのレンダリングに関する完全ガイド

この記事は[Complete Guide to React Rendering Behavior](https://blog.isquaredsoftware.com/2020/05/blogged-answers-a-mostly-complete-guide-to-react-rendering-behavior/)の翻訳記事になっています。
[ご本人(Markさん)](https://twitter.com/acemarke)にも許可を頂いて翻訳しております。

こちらの記事がReactのレンダリングを理解する上で今までで一番体系的で一番分かりやすかったので、ぜひ紹介したく翻訳させて頂きました。

翻訳ツールにもたくさん助けてもらいながら行い、意訳が出来ていない部分が多々あるかと思いますので修正依頼を出して頂けると幸いです！

Twitterでも、フロントエンドに関する事や、アメリカでのエンジニア経験に関してツイートしているので、よかったらフォローお願いします。
Twitter: [@hellokenta_ja](https://twitter.com/hellokenta_ja

元記事を表示

【卒業生】DMMWEBCAMPに通おうか迷っている人に伝えたい事

# はじめに
自己紹介をさせてください。4月にプログラミングスクールDMMWEBCAMP(以下、**DWC**)を卒業し、7月より都内の自社サービスを展開している企業で勤務することになりました[yuki](https://twitter.com/yuki82511988)と申します。

元記事を表示

React開発環境構築(MacOS Mojava)

#Homebrewのインストール

[Homebrew](https://brew.sh/index_ja)

“`
＄ /usr/bin/ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)”
“`

###nodebrewのインストール
“`
$ brew install nodebrew

$ nodebrew -v
nodebrew 1.0.1

$ nodebrew ls-remote
#インストール可能なnodeのバージョンが表示される
“`

###nodeのインストール

“`
$ nodebrew install-binary stable
“`

インストールしnodeの有効化

“`
$ nodebrew ls
v12.7.0

current: none

$ nodebrew use v12.7.0
v12.7.0

current: v12.7.0
“`

##環境パスを通す

“`
$ echo ‘export

元記事を表示

React開発環境構築(Ubuntu18.04LTS)

#node.js npmのインストール

node.jsとnpmをインストールする

“`
$ sudo apt install -y nodejs npm
“`

nをインストール

“`
$ sudo npm install n -g

$ sudo n stable
“`

最初に入れた古い nodejs, npm の設定ファイルを消す。そして再ログイン。

“`
$ sudo apt purge -y nodejs npm

$ exec $SHELL -l
“`

node.jsのバージョンを確認する

“`
$ node -v
“`

#create-react-appのインストール

“`
$ sudo npm install -g create-react-app

>/usr/local/bin/create-react-app -> /usr/local/lib/node_modules/create-react-app/index.js
+ create-react-app@3.0.1
added 91 packages from 45 c

元記事を表示

javascript学習(2020/06/22)

###jQuery
jQueryとはjavascriptのプログラミングでよく行われる定型的な処理を書きやすくしてくれるオープンソースのライブラリです。イベントの設定などのDOM操作やAjaxを得意としている。
###jQuery　要素を取得する$()メソッド

“`JavaScript:sample.js
$(‘セレクタ’)
“`
###jQuery 取得した要素にイベントを設定

“`JavaScript:sample.js
$(‘セレクタ’).on(‘イベント名’,function(){
イベントが発生したときの処理
});
“`

###よく使うjQueryメソッド
コア機能

|メソッド|概要|
|:—-|—-:|
|$(‘セレクタ’)|セレクタにマッチする要素をすべて取得|
|$(配列またはオブジェクト)|配列のデータやオブジェクトのプロパティをすべて取得する
|$.ajax()|非同期通信をする|

トラバーサル($()で取得した要素から相対的な位置関係で別の要素を取得すること)

|メソッド|概要|
|:—-|—-:|
|next()|すぐ次

元記事を表示

firebase Storageへのファイル保存

## はじめに
Reactでfirebaseへファイル(画像)を保存してみようと思い、試してみましたので、同じような初心者の方に向けて記事を書いてみました。

コードはこちら
https://github.com/daikidaiki1583/Works/tree/master/work11
(コメントが残ってあったりして見苦しい部分があるかと思いますが目をつぶって頂ければ幸いです)また、ご意見等あれば頂ければと思います！！

では早速…

## putメソッド

“`JavaScript
put(File)
“`
これがストレージにファイルを保存するためのメソッド。
引数にはFileまたはBlobインスタンスを指定する必要がある。(今回Blobは試してないです)
このputメソッドを実施するために必要な知識を以下で説明。

## File()
https://developer.mozilla.org/ja/docs/Web/API/File/File

“`JavaScript
new File(‘①配列’,’②name’,’③option’)
“`

元記事を表示

RPGツクールMVで複数の暗号化画像リソースに強引に対応する

わかりやすさ優先で、Sysytem.jsonにキーを追加します

“`json:System.json
“encryptionKey2″:”<暗号化キー>“,
“`

読めるようにします

“`JavaScript:rpg_core.js

Decrypter._encryptionKey = “”;
Decrypter._encryptionKey2 = “”; // 追加
Decrypter._ignoreList = [
“`

“`JavaScript:rpg_core.js

Decrypter.readEncryptionkey = function(){
this._encryptionKey = $dataSystem.encryptionKey.split(/(.{2})/).filter(Boolean);
this._encryptionKey2 = $dataSystem.encryptionKey2.split(/(.{2})/).filter(Boolean); // 追加
};
“`

既存の関数をコピペしてデコ

元記事を表示

【JavaScript】テキストボックスを含むTableからテキストを取得する

#はじめに
通常のtext要素だけで構成されるtableからテキストを取得する方法の解説記事は多かったが、
inputを含んだtableから取得している記事はあまり見られなかったので、メモついでに。
まあ、やっていることはほぼ変わらないのですが…

#やりたいこと
こんな感じでtdタグの中にinputが入っていて、ユーザーが編集できたりするテーブルですね。
このテーブルからinputの部分も含めて、body部分のテキストを全て抽出します。

![20200622-152056.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/660151/ece5ca77-3d7f-9cb5-7526-47647c7a3ef9.png)

“`html:table.html




PHPでDBから配列を取り出し、jsに渡して、chart.jsでグラフ作成

caledar_tableにあるTUTORというカラムの数をカウントし、グラフにする。

“`PHP
$sql = “SELECT TUTOR,COUNT(TUTOR) AS COUNT FROM CALENDAR_TABLE GROUP BY TUTOR ORDER BY COUNT DESC”;
$stmt = $pdo->prepare($sql);
$status = $stmt->execute();

$res = $pdo->query($sql);
//取得したデータを全てフェッチする
$data = $res->fetchAll();
“`

“`javascript
var data_array = ;
name_array = [];
count_array = [];
for(key in data_array){
name_array.push(data_array[key][0]);
count_array.push(data_array[key][1]);
// alert

React Tutorial memo

# はじめに
PortfolioサイトをReactを使って作成するために、Reactを勉強する。
React Tutorialでのmemoを書き記す
[チュートリアル：React の導入](https://ja.reactjs.org/tutorial/tutorial.html)

# 環境構築
“`
// create app
$> npx create-react-app my-app

// run react app
$> npm start
“`

# データの受け渡し方 prop

親コンポーネント
valueを渡す

“`react

class Board extends React.Component {
renderSquare(i) {
return ;
}
}
“`

子コンポーネント
this.props.value で親コンポーネントからの情報を受け取る

“`react

class Square extends React.Component {
render() {
re

JavaScriptでPOST通信（HTMLのformタグなし）

POST通信と書きつつ多分GET通信もいけるはず。

SpringBootでオブジェクト指向プログラミング中、どうしても通常の送信方法（htmlファイルでformで囲ってsubmitで送信）が取れなかったため、JavaScriptで操作した備忘録。
先に結果を書いておきますが、奮闘したのがなんだかもったいないので試したことも残しておく。
初心者がゴリ押して作ったコードなので参考程度にしてください。

#前提
使用OS-Windows10
使用ツール-Spring Tool Suite 4 4.6.2
テンプレートエンジン-Thymeleaf
フレームワーク-mybatis

+ デモECサイトを作成中。
+ チームで作業しているため、できるだけほかの人のファイルに影響を与えずに「**index.html**でAボタンを押した際に情報（パラメータ）がjavaファイル（**DemoForm.java**）へ渡る」機能を実装したい。
+ Aボタンやパラメータはテーブル内に配置されていて、デザインに変化がないようhtmlでformタグを使いたくない。

※**DemoForm.java**では

【JavaScript】ラジオボタンで表示・非表示の切替

## ラジオボタンを使って表示項目を切替
画像のようなラジオボタンと一覧表があり、選択したラジオボタンのデータを表示する機能です。
画像だけでは、この機能でできることがイメージし辛いですが、ログイン画面で「未登録」「登録済」のラジオボタンを設置して、それぞれのフォームが表示されるなどのページが作成できます！
スクリーンショット 2020-06-21 19.43.41.png

##早速実装しましょう！
#####まずHTMLのラジオボタンコードです。
ここでのポイントは以下3点です。（※この後のJavaScriptで使用します。）
– Formに名前をつけましょう。 `この記事では　

    • OTHERカテゴリの最新記事

    名前