JavaScript関連のことを調べてみた2019年11月10日

JavaScript関連のことを調べてみた2019年11月10日

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

# 100日チャレンジの156日目

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

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

156日目は、

【TypeScript / React Hooks】useReducer + useContextで死ぬほど簡単にグローバルなストアを作る

“`tsx
import React, {
createContext,
FC,
useContext,
useEffect,
useReducer,
} from ‘react’

type NewStateAction = Partial | ((prevState: S) => Partial)
type ContextValue = {
globalState: S
setGlobalState: (newState: NewStateAction) => void
}

type S = typeof initialState

const initialState = {
count: 0,
}

export const Store = createContext({} as ContextValue)

export const Provider: FC<{}> = ({ children }) => {
const [globalState, setGlobalState] = us

JavaScript で日本標準時の Date オブジェクトを生成する

以下のコードで日本標準時の Date オブジェクトが生成される。

“`js
const date = new Date(“2019-10-30T19:04:22+09:00”);
console.log(date); // Wed Oct 30 2019 19:04:22 GMT+0900 (日本標準時)
“`

## 解説

1. `”2019-10-30T19:04:22+09:00″` は [ISO 8601](https://ja.wikipedia.org/wiki/ISO_8601) の拡張形式
2. `new Date(dateString)` -> [Date – JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date) 参照

ちなみに、ISO 8601 の基本形式で記述すると、

“`js
const date = new Date(“20191030T190422+0900”);
console.log(dat

Expo+Firebaseのクライアント側テストについて

FirebaseのAuthentication, Firestore, Cloud Functionsを使用したExpoアプリにテストを導入する際の手法を模索してみました。ひとまず途中経過として投稿します。
結合テストに関してはDetoxを使用したかったのですが、現在のバージョンのExpoでは使用できないようなので、単体テストのみの記事になります。

テストツールはJestを使用します。
テストの際に実際のDBへのアクセスや認証を行う訳にはいかないので、ひとまずFirebaseのモック化のライブラリである[firebase-mock](https://soumak77.github.io/firebase-mock/)を使ってみます。公式ライブラリではなく個人開発(最終コミットが1年以上前)のものなので、不十分なところが多いというのが正直な所感です。

## firebase-mockのインストール

“`
$ yarn add –dev firebase-mock
“`

ちょっとトリッキーなコードですが[こちら](https://techunderthesun.in/sett

変数の説明を JSDoc で書く

## 概要

JavaScript の変数の説明を JSDoc で書き、VSCode でその変数にカーソルをあてると、ツールチップにコメントが表示される。

## 例

“`js
/** ここにコメントが表示される */
const hoge = “hoge”;
“`

上のように書くと、以下のように表示される。

スクリーンショット 2019-11-09 23.15.08.png

## その他

### 関数

関数の説明も同様、かつ引数の説明も表示される。

“`js
/**
* ここにコメントが表示される
* @param fuga 第1引数のコメント
* @param piyo 第2引数のコメント
*/
function hoge(fuga: string, piyo: string) {

さまざまな動きをするjQueryスライダーを作ってみた

jQueryの勉強のために昔作ったスライダーです。
そのころはまだレスポンシブとかあまりなかったので、デスクトップ表示しかありません。

##スライドのパターン
よく使う配布されているスライダーを見ると画像の動き方が何種類かあるので、今回は6種類作ってみました。

##デモ
[デモ](http://webdrawer.net/sample/js/sliders/index.html)

##HTML
“`html

Three.jsで学ぶベクトル演算

ベクトル演算についてまとめながら、Three.jsのベクトルクラスの実装を見ていきたいと思います。

Three.jsには2次元ベクトルを表す[Vector2](https://threejs.org/docs/#api/en/math/Vector2)クラス、3次元ベクトルを表す[Vector3](https://threejs.org/docs/#api/en/math/Vector3)クラス、4次元ベクトルを表す[Vector4](https://threejs.org/docs/#api/en/math/Vector4)クラスが存在します。それぞれ[Vector2.js](https://github.com/mrdoob/three.js/blob/r110/src/math/Vector2.js)、[Vector3.js](https://github.com/mrdoob/three.js/blob/r110/src/math/Vector3.js)、[Vector4.js](https://github.com/mrdoob/three.js/blob/r110/src

javascriptでセレクトボックスで選択された値ごと条件分技したい

プログラミングを勉強しています。
javasuriptを少し勉強して、現在アウトプットとして、計算プログラムを作っています。
セレクトボックスでつまずいてしまったのですが、質問の回答をいただければ幸いです。

作りたいイメージは、材料とサイズごとの組み合わせで数値を条件分岐して、最小値と平均値が割っていたら数値を赤くするといった物を作ろうとしています。
現在、なんとか入力した数値を計算するプログラムはできたのですが、セレクトボックスで選択肢した要素を取得して条件分岐する方法がわからないと言った感じです。

【HTML】




押出2号 検査

検査

htmlから勉強してNuxt.js×Firebase(Cloud Firestore)で「リンク集共有サービス」をやっと作った話

先日リンク集共有サービス「Linksh」(リンクシュ)をリリースしましたので、
いろいろと備忘録的に残しておきます。

Linksh
リンク集共有サービス Linksh – リンクシュ
https://linksh.info/

## あんた誰?
コンテンツプロバイダー系のベンチャーで5年web制作、ディレクションを、
その後10年ほど某プロバイダーで総合職としていろいろやっておりました。
ただ、数年前に身体を壊して結構長い期間充電しておりました。それはもう長い期間です。
その間に仕事に関することもすっかり忘れてしまいましたが(医者に忘れろと言われたので)、
基本的に何か作ったりするのは大好きなので、プログラミングを気持ち新たに1から学ぼうと思った次第です。
そのアウトプットがコレです。

## どんなサービス?

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

# 100日チャレンジの155日目

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

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

155日目は、

JavaScript/TypeScript でパターンマッチもどき

## やりたいこと

関数型っぽい書き方に慣れてくると、
メソッド生やすんじゃなくてパターンマッチが書きたくなってきたりします。

例えば Scala なら、ケースクラスと match 式で、
こんな感じのものがさくっと書けたりしますね。

~~~scala:Scalaの例(各種形状から面積を求める)
import scala.math

object Main extends App {
sealed trait Shape
case class Circle(r: Double) extends Shape
case class Rectangle(w: Double, h: Double) extends Shape
case class Triangle(a: Double, b: Double, c: Double) extends Shape

def area(shape: Shape) = shape match {
case Circle(r) => r * r * math.Pi
cas

Kotlin JavaScript を試す!

# 更新履歴

* 2019.11.10 – コンパイル時に生成される `{module}.js` についての説明を一部修正しました。

# Kotlin JavaScript とは

KotlinをJVM上で実行できるよう、Javaのクラスファイルにコンパイルできることは有名ですが、JavaScriptへコンパイルすることもできます!現在はECMAScript5.1へコンパイルすることができるみたいですが、将来的にECMAScript2015へもコンパイルできるようになるみたいです。KotlinのJavaScriptコンパイラは以下の3つのことをしてくれます。

* ファイルサイズの最適化
* よみやすいJavaScriptへの変換
* モジュールシステムの利用
* 標準ライブラリの使用

注意してほしいのが使用しているJDKやJava等のすべてのコードがコンパイルされるわけではないというところです。例えばSpringFrameworkを使用しているKotlinのコードをコンパイルしても、SpringFrameworkはJavaScriptへコンパイルされないということだと思います。

JavaScript忘備録:コメントと変数の書き方と演算子の使い方とif文の書き方

#コメントアウト記述方法
 JavaScriptのファイル内にメモを記述できる。
 ①1行のコメント
  //コメント
 ②複数行のコメント
  /*コメント*/

#文字列の出力方法
 ①ブラウザに表示する
  document.write(“出力したい文字列”);
 ②コンソールに表示
  console.log(“出力したい文字列”);

  改行したい場合は、” ”の中に<br>を記述する。
  他にもHTMLのタグを” ”の中に記述できる。

#アラートの表示
 ブラウザのポップアップに表示させるメッセージ機能
  alert(“表示したいメッセージ”);

#確認ダイアログの表示
 アラートと似た機能で、アラートのメッセージに「OK」「キャンセル」を表示させる機能
  confirm(“表示したいメッセージ”);

#データ型
 ①数値 (整数や小数などの数字)
 ②文字列(アルファベットや文字や数字の集まり)
 ③論理値(True、False)

#変数
 あとで何かしらの値が入る領域のこと
 ●変数の前には**var**を記述する
 ●ABC abc Abc等、大文字と

JavaScriptの基本箇所についての復習:寄り道(配列)

#はじめに
jsでも配列を使うことができます。
配列の知識は複雑なコードを書く際に必要なので、
まずは基本から復習していきます。
#注意
本記事は書きかけです。
知らない間に更新されていることがあります。
#実行
配列は次のように書きます。(配列の大陸名です)

“`javascript
var list = [“ユーラシア”,”アフリカ”,”オーストラリア”,”北アメリカ”,”南アメリカ”];
“`
この配列の中から
例えば“`アフリカ“`を出力したい場合は次のようにすれば良いです。

“`javascript
var list = [“ユーラシア”,”アフリカ”,”オーストラリア”,”北アメリカ”,”南アメリカ”];
console.log(list[1]);
“`

アフリカは配列の左から2番目にありますが、
***配列内の番号は0から数える***ので、“`list[1]“`と指定しています。

上の配列には“`南極大陸“`が抜けているので、これを追加します。

“`javascript
var list = [“ユーラシア”,”アフリカ”,”オーストラリア

Javascript備忘録

#1 一般テクニック
##1-1 他のファイルから定数を読み出す(module.exports)

const.jsに定義した定数を呼び出して使う。

ディレクトリ構成
–const.js
–test.js

“`javascript:/const.js
module.exports={
DATLENGTH:200, //描写する対象の日数を設定する
MEIGARA_NAME:”NIKKEI225″, //銘柄名を設定する。
S_PERIOD:10, //移動平均短期
M_PERIOD:20, //移動平均中期
L_PERIOD:50 //移動平均長期
}
“`

“`javascript:/test.js
const consts = require(‘./const’)
console.log(consts.DATELENGTH) //200が表示される
}
“`

##1-2 文字列を指定文字で区切り配列に格納する関数(stringToSplit)

“`javascript:/test.js
//文字列を指定し