f@ctor

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

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

CSS 勉強メモ0620

画面をスマホサイズに合わせたい時はでコンテント属性に以下を記載。

“`html

“`

画面のサイズによってスタイルを変え場合
以下は画面幅が600-800pxの時にに背景色をつける。
@mediaの次に条件を記載

“`
@media(min-width: 600px) and (max-width: 800px){
body{
background: skyblue;
}
}
“`

以下は画面の大きさが0~599px,600~799,800~
で条件を分けて表示しているサンプルコード

“`

/* common */
/* small screen */

body{
margin: 0;
}

.image{
background: pink;
height: 100px;
}

.text{
background: gray;
height: 100px;
}

asi

元記事を表示

Node.jsのCLIツールでURLを既定のブラウザで開く

[open](https://www.npmjs.com/package/open) パッケージを使用すると、クロスプラットフォームでその辺の処理をよしなにやってくれる。
実行したらlocalhost:3000にHTTPサーバを立てたり、実行時にライセンスなどを表示したりするようなCLIツールで便利かもしれない。

## Install

“`sh
yarn add open
“`

## Usage

非常にシンプル。

“`js
const open = require(‘open’);

open(‘https://qiita.com/’);
“`

async/await を使用した実用的な例などは [README](https://www.npmjs.com/package/open) を確認されたい。

なお、従来は[opn](https://www.npmjs.com/package/opn)という名称だったものがrenameされたらしい。

元記事を表示

【備忘録】Javascript : Generatorの基礎・応用に挑戦(2)

## はじめに
この記事は[前回](https://qiita.com/noytdm1021/items/335e224d928eb5ad5f05)の記事の続きです。
前回の記事から読んでいただけると喜びます。よろしくお願いします。

また度々、間違い等が散見されると思いますが、その際はコメント欄でご指摘いただけますと幸いです。
よろしくお願いします。

## ジェネレータをfor~of文で回してみよう。
前回の記事でも用いた`colors`ジェネレータを`for~of`文で回してみました。

“`javascript.js

// colorsジェネレータを用意
function* colors () {
yield ‘red’;
yield ‘blue’;
yield ‘green’;
}

const myColors = []; //空の配列を準備
for (let color of colors()) {
myColors.push(color);
// colorを配列に代入
}
console.log(myColors);
//

元記事を表示

JavaScript関数の書き方 まとめ

備忘録として残します。

“`Javascript
// 関数宣言
function double(x) {
return x * 2;
}

// 関数式
const double = function(x) {
return x * 2;
}

// アロー関数
const double = (x) => {
return x * 2;
}

// 引数が一つの場合（）省略可能
const double = x => {
return x * 2;
}

// 一行の場合は{}も省略可能
const double = x => x * 2;

“`

元記事を表示

ランダムな点のアニメーション（regl + React 利用）

こんにちは。
[regl](https://github.com/regl-project/regl) (Functional WebGL, GitHub) + React を利用しランダムな点のアニメーションを描いてみました[^1]。今回、[use-interval](https://github.com/donavon/use-interval) (GitHub) を用いてみました。

[^1]: ただし、“`fragColor“` など未だに十分理解できていないので変な箇所があるかもしれません。

![regl.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54617/75a59628-7b14-41fd-33e2-ddbc57edf281.jpeg)

“`App.js
import React from ‘react’;
import createRegl from ‘regl’;
import useInterval from ‘use-interval’;

const App =

元記事を表示

fetch template

phpでデータを取ってくる。

変数（parameter)と値（value)をsetDataに渡して、setDataToDB.phpでは例えばPDOでDBにデータをupdate(or insert)する。

setDataToDB.phpがもし戻り値としてデータセットを返す場合には“`then((json)“`の中で処理する。

“`fetchSample.js
function setData(paramater, value) {
var res = fetch(“./setDataToDB.php”, {
method: “POST”,
headers: {
“Content-Type”: “application/json”,
},
body: JSON.stringify({
“value”: value
})
}).then((response) => {
if(response.ok)
re

元記事を表示

現代のフロントエンド開発シリーズ（7）- フロントエンドでもエンジニアリング必要があるのはなぜですか？

> ソフトウェアの品質を改善するために、定量化および標準化された方法でソフトウェアを開発する

では、なぜフロントエンドを体系的にする必要があるのでしょうか。私はいくつかの点があるかと思います：

1. 以前、フロントエンドの複雑さはそれほど高くなく、静的なページを表示するだけで十分でしたが、技術の進歩に伴い、エンジニアリングに役立つツールを導入しないと、多くのアプリケーションがますます複雑になっています（googleドライブ、facebookなど）。エンジニアリングの手法を導入しないと、プログラムの開発は管理しにくくなるでしょう
2. フロントエンドの開発が徐々に成熟しているため、フロントエンドエンジニアリング用のツール（gulp、webpackなど）を開発する余裕があります。

実際、フロントエンドエンジニアリングは、「ああ、エンジニアリングを今すぐやろう」みたいな流行語ではありませんが、開発中は「ああ、できるなら」のように感じられます。

今日は、フロントエンドエンジニアリングを行う際の一般的な概念と構築ツールをいくつか紹介します。

## [Webpack](https://w

元記事を表示

レガシーなウェブシステムのSELECTタグを使いやすくするJavascript(ブックマークレット)

久しぶりにブックマークレット

#困りごと
うちの会社には、スーパーなレガシーシステムがありまして、、、
HTMLで作られているWebシステムなのですが、`

OTHERカテゴリの最新記事