- 1. ウェブサーバー作る
- 1.0.1. すぐ分かる Nullish Coalescing と短絡評価の違い
- 1.0.2. imgタグで画像が読み取れなかったときになにも表示しないようにしたい
- 1.0.3. Node-REDのfunctionノードでjsライブラリをrequireする方法(備忘録)
- 1.0.4. Array の sort を越えてゆけ (JavaScript)
- 1.0.5. 【TypeScript / React Hooks】useReducer + useContextで死ぬほど簡単にグローバルなストアを作る
- 1.0.6. JavaScript で日本標準時の Date オブジェクトを生成する
- 1.0.7. Expo+Firebaseのクライアント側テストについて
- 1.0.8. 変数の説明を JSDoc で書く
- 1.0.9. さまざまな動きをするjQueryスライダーを作ってみた
- 1.0.10. Three.jsで学ぶベクトル演算
- 1.0.11. javascriptでセレクトボックスで選択された値ごと条件分技したい
- 2. 検査
初心者によるプログラミング学習ログ 156日目
# 100日チャレンジの156日目
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
156日目は、
おはようございます
156日目progateのjavascript講座改変アウトプット
寝落ちしてもーた。。。#早起きチャレンジNode.js (3)ウェブサーバー連携ウェブサーバー作る
先ずはhttp要求とport設定を書き込む、そして、node.jsのウェブサーバー機能を組み立てる。
“`app.js
var http = require(‘http’);
http.createServer(function (request,response){
//requestとresponseにつてデータ転送文ここに書く
.
.
.
}).listen(8080)“`
テータ転送の基本の概念はブラウザからウェブサーバーにrequest請求を届く、request請求の中身はパケットですから、いろいろな転送データをここに入れる、反対の方向はresponse請求と言われる、response請求はウェブサーバーからブラウザにデータパケットを届いてブラウザの上にデータを表示する。すぐ分かる Nullish Coalescing と短絡評価の違い
# TL;DR
– JavaScript には `null`, `undefined` の他にもいくつか falsy な値がある
– `||` で短絡評価させる場合、 falsy な値なら何でも `[falsyな値] || [default]` で結果が `[default]` になる
– Nullish Coalescing の `??` を使う場合、 `null ?? [default]`, `undefined ?? [default]` においてのみ、結果が `[default value]` になる# falsy な値
JavaScript には、Boolean コンテキストでは false と評価されるような値がいくつかあります。`false`は当然そうですが、他にも**`null, undefined, 0, NaN, “”`**などがあります。
https://developer.mozilla.org/ja/docs/Glossary/Falsy
短絡評価はこの性質を利用したものです。
“`js
null || “Hello World!”imgタグで画像が読み取れなかったときになにも表示しないようにしたい
``タグを使って画像を表示したときに、読み込めないとこんな感じになる。
“`html
“`![スクリーンショット 2019-11-10 9.20.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/4febffe9-ff83-0f72-9a60-c1e159f1a078.png)
読み込めない場合に、こんな感じで、なにも表示しないようにしたかったときの備忘録。
![スクリーンショット 2019-11-10 9.25.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/6b308bea-be92-c356-a8f2-14ffb4f03988.png)
### やり方はこんな感じ。
“`html
Node-REDのfunctionノードでjsライブラリをrequireする方法(備忘録)# 概要
Node-REDのfunctionノードで、jsライブラリ(node-module)を読み込んで使いたい場面が出てきました。functionノードで直接”**require**”できないので苦戦し、なんとか利用できたので備忘録として残します。
# 方法
##1. ターミナルを開き利用したいライブラリをnpmでインストール
このとき、Node-REDのシステムファイルがある「**.node-red**」にインストールします。
“`
cd ~./.node-red
npm install インストールしたいライブラリ名
“`例えば、fs-extraを読み込みたい場合は次のコマンドです。
“`
npm install fs-extra
“`##2. settings.jsを編集
例)fs-extraモジュールを読み込む場合“`javascript:settings.js
functionGlobalContext: {
fs:require(‘fs-extra’), // <--追記 // os:requArray の sort を越えてゆけ (JavaScript)
**ECMAScript 2019 から!**
**ついに!**
**`Array.prototype.sort` が安定ソートになったぞ!**でも全然話題になっていない気がする今日この頃。
せっかくなので `Array.prototype.sort` のおさらいをしつつ、安定ソートならワンチャン自前の不安定ソートのほうが速くね?ってことで追い抜いてみようかと思います。
## Array.prototype.sort のおさらい
`sort` は、JavaScript の Array オブジェクトに生えているメソッドで、
破壊的に配列の要素をソートします。~~~js
console.log([1,2,3,4,5,6,7,8,9,10].sort());
~~~これは当然ながら、こうなります。
~~~
[1, 10, 2, 3, 4, 5, 6, 7, 8, 9]
~~~他の言語から入ってきた人に割と「は?」と言ってもらえるので、話のネタに使えたり。
`sort` メソッドは、引数に比較関数を取りますが、省略した場合「文字列にして辞書順(正確には Unicode
【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”;
“`上のように書くと、以下のように表示される。
## その他
### 関数
関数の説明も同様、かつ引数の説明も表示される。
“`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号 検査
検査
関連する記事
OTHERカテゴリの最新記事
- 2024.09.19
JavaScript関連のことを調べてみた
- 2024.09.19
JAVA関連のことを調べてみた
- 2024.09.19
iOS関連のことを調べてみた
- 2024.09.19
Rails関連のことを調べてみた
- 2024.09.19
Lambda関連のことを調べてみた
- 2024.09.19
Python関連のことを調べてみた