- 1. 元プログラマーが、脳の記憶力低下にがっかりしている
- 2. 【React初心者】APIや配列に格納された、何がしかを一つずつ取り出し表示できるmapという便利関数
- 3. JavaScriptのgeneratorについて part1
- 4. 新卒未経験、４ヵ月間で勉強してきたこと。
- 5. コッホ曲線とか雪片を SliP と JavaScript で描く
- 6. ズンドコキヨシ with Vue2 コンポーネント活用の練習
- 7. テストフレームワークをJestからVitest に移管した手順と得た知見
- 8. Video.jsでビデオコンテンツを自分好みにカスタマイズしてみる
- 9. html & css & javascript で かっこいいサイト を 作る[アニメーション][デザイン]
- 10. [保存版]JavaScriptのOOPをより深く理解するために[prototype基礎]
- 11. 人事のおじさんプログラミングを学ぶ Day3「ダイアログボックスの表示」「HTMLを書き換える」
- 12. discord.js v14を使用した簡単な応答botの作り方
- 13. Python,Ruby,PHP,Java,JavaScript,Perlの文字列処理の比較
- 14. SliP のご紹介
- 15. JSでawait出来るsetTimeoutがたった１行で作れるって話
- 16. JavaScriptのPromiseについて part3
- 17. 役に立つ覚書
- 18. 【js】スマホアドレスバーを除いたvhを取得する
- 19. JavaScript チート・オブジェクトの要素数とオブジェクトの配列の要素数を求める
- 20. Azure Functions (Node.JS) からの http リクエスト (GET|POST) で async/await を適用する
元プログラマーが、脳の記憶力低下にがっかりしている
# 概要
退役プログラマーが趣味で「なつかしの曲(ポータル)」サイトを構築していますが、特にメンテナンスで特定の修正箇所を思い出すことが困難になってきた。昔であれば、瞬時に思い出すことができたのだが。
記憶の脳内ホルモンの低下が原因か。
情けない。目を閉じて、ソースコードをイメージしてみるが、そのソースコードが浮かんで来なくなった。これから、記憶力復活のトレーニングを検討してみたい。# 事例
開発ツールを開いて、ソースコードを眺めていれば、徐々に特定のコードの箇所を記憶を頼りにたどって行けるのだが、一旦、目を閉じて思い出そうとしても、何も出てこない。これが困る。
元プログラマーとしては、プライドが許さない。
何とか、目を閉じていても、ソースコードがスラスラと目に浮かんでくるようにしたい。
少しづつ、関連付けて行けば、何とか、思い出すことはできる。
あのボタンのイベント処理はどこにあったかとか、あのポップアップのPHPスクリプトはどこへおいたか。あのdbテーブルの更新はどのモジュールで行っていたか。こういうことを瞬時に思い出したい。
## (1) 目を閉じたときにソースコードをイメー
【React初心者】APIや配列に格納された、何がしかを一つずつ取り出し表示できるmapという便利関数
## この記事の対象者
・map関数「何それ?地図?」というくらいに、map関数と初対面の方
・なんか先輩に、「とりあえずmap回しとばいけるから回しといて〜」と言われるも、何のことかわからず目が回って困っている方
・for文やwhile文など使わずに、すっきりかつ少ないコードで繰り返し処理を実装したい方Reactの開発やPJで、
「何がしかの配列や、APIで取得した配列情報を、展開してね」
というよくある課題。（逆に使わないことの方が多いくらい？）JavaScriptやReactのPJ経験のある方には当たり前のうちの当たり前です。
しかし、
「JavaScript何にもわからんけど、React始めたよ。」
系の人にとっては、未知との遭遇案件ですよね。なので、めちゃくちゃシンプルバージョンでここに残しておきますね。
僕自身、jQueryやVue、Reactから触り始めたたちなので、初めてJavaScriptのmap関数を扱った時に、ただひたすらに鼻水なのか涙なのかを垂らしながら、取り組んでいた記憶がありますので。
なんか、展開とかいう感じ二文字で表現されると、なんだ
JavaScriptのgeneratorについて part1
# 初めに
今回はジェネレータについてまとめていきたいと思います。今回の参考文章はこちらです。
[Generators – javascript.info](https://javascript.info/generators)
[yield – MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/yield)
[yield* – MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/yield*)# Syntax
`function*`：generator関数の構文。
`yield`：generator関数内から返す値を定義する。
`next()`：generator関数から返却された値を取得する。結果は常にオブジェクト`{value: , done: }`。
“`jsx
function* generateSequence() {
yield 1
y
新卒未経験、４ヵ月間で勉強してきたこと。
初投稿です。
2022年4月に新卒で不動産テックの会社に入社し、4ヵ月が経ちました。
ふと、今までのやってきたことは何だったのかをまとめたくなったのでメモ書きしていきます。
まず、自分は未経験で現在の会社に入社しました。学生時代は触り程度しかプログラミングをしていません。なので、本格的に学習したのは入社してからになります。では、さっそく
1ヵ月目から3ヵ月目まで、吉祥寺にあるWeb制作会社に行き、研修？を受けていました。内容としては主に、HTML,CSS,javascript,AWS,基本情報技術者試験の対策がメインでした。
HTML&CSSは、Progateで道場編も含めて学習。その後、「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」を用いて、ブログサイトの作成。そして、codeStepというサイトを参考に10個くらいコーディング練習をしました。
JavaScriptは、ProgateとYoutubeで基礎学習を行い、TechFULというサイトでコーディング練習をしました。TechFULでは、難易度2までのものをやり、週間ランキングで2位を一度取れまし
コッホ曲線とか雪片を SliP と JavaScript で描く
[コッホ曲線を Wikipedia で引く](https://ja.wikipedia.org/wiki/コッホ曲線)とコンピューターによる生成の部分でアフィン変換を使用する方法が紹介されています。ちょっと大変ですね。
HTML の Canvas エレメントを使うと、API がアフィン変換をやってくれちゃうので自分でアフィン変換しなくてもコッホ曲線を描くことができます。Canvas API を使えちゃうプログラミング電卓 SliP でコッホ曲線を描いちゃいましょう！SliP については以下をご覧ください。
https://qiita.com/Satachito/items/a962c0f2aa436e82b9fb
## コッホ曲線
詳しい説明は Wikipedia に譲るとして、ここでは次のように考えます。
“`
L のコッ
ズンドコキヨシ with Vue2 コンポーネント活用の練習
# [わたし](https://twitter.com/momochanjazz)の勉強日記Vol.2 （実話）
#### 8月15日15:00
先輩：「お前にコンポーネントの課題を与える！」
わたし：「はい！できました！:smiley:」
わたし：「余裕だったんで、コンポーネントを活用したサンプル作っちゃいます〜:smiley:」
先輩：「おお！えらいじゃん」
#### 8月15日16:00
わたし：「あれ…」
#### 8月16日16:00
先輩：「お前大丈夫か…？」
わたし：「ごめんなさい分かりません教えてください」
先輩：「とりまフローチャートを作ってみ！」
わたし：「ふ、ふろーちゃーと…………？」# 作りたいもの
##### これ:point_down:
##### 文章化するとこんな感じ:point_do
テストフレームワークをJestからVitest に移管した手順と得た知見
# はじめに
以前こちらの記事で書いた github actions のパイプラインの高速化の検討について、高速テストフレームワークとして期待されている Vitest についても検証したと述べたのですが、
今回はその Vitest に関する移行検証記事です。– [github actions の job を高速にするために取った対策](https://qiita.com/itouoti/items/37e0420b232a1c694288)
– ※上の記事では vitest の方が遅かった記載をしていますが、今回テストを再実行してみたところ vitest の方が速度が速かったため、裏で何かしら別のプロセスが動いていたかもしれないです。# Vitest とは
– [vitest.dev](https://vitest.dev/)
– Vite 環境のために開発された高速テストフレームワーク
– Jest と互換性がある
– まだメジャーバージョンではない(記事執筆時`v0.22.1`)# 結論
– Vitest への移行結果
Jest に比べて Vitest の
Video.jsでビデオコンテンツを自分好みにカスタマイズしてみる
Video.jsが便利だったので備忘録ついでに書き残しておきます。
# 目標
:::note info
– プレイヤーの各種設定
Video.jsのデフォルト設定から一部変更を行う
:::
:::note info
– ±10秒スキップ機能の追加
Video.jsのデフォルト機能にはスキップ機能は無いので、処理を追加して拡張実装を行う
:::
:::note info
– コントローラの常時表示
CSSでコントローラ部分のレイアウトを変更する
:::
:::note info
– チャプター機能の追加
JavaScriptでチャプターごとにジャンプできるように実装する
:::完成はこんな感じ
# Video.jsとは
Video.jsは、htmlにおける動画コンテンツの実装やスタイリングを簡単に行えるJavaScript製のプラグイン
html & css & javascript で かっこいいサイト を 作る[アニメーション][デザイン]
最近サイトを作りました。
https://caleb7023.hmath.pro/
私のサイトはレンタルサーバーが高いので仕方なくgoogle sitesで作ってあります。
しかし、google sitesは自由度が低すぎるということで最近、
結局レンタルサーバーを借りてhtmlで作ろうと思っています。しかしhtmlには弱点があります。
それは ***「専門知識が必要になる」*** ということです。
サイトの見栄えをよくしないと誰も来てくれません。
そこでサイトの見栄えをよくするアニメーションなどの作り方が書いてある
「[CSSのすごいアイデアが満載！実用的なものからスゴ技までスタイルシートのテクニックのまとめ](https://coliss.com/articles/build-websites/operation/css/awesome-css-techniques-2015-mar.html)」という記事を参考に作っていこうと思います。では、ここから役に立ちそうなアニメーションを紹介していこうと思います。
# 役に立つアニメーション
### delet(削除)
[保存版]JavaScriptのOOPをより深く理解するために[prototype基礎]
# はじめに
本記事は __Udemy著者『 _CodeMafia_ 』様の「【JS】ガチで学びたい人のためのJavaScriptメカニズム」__ の内容を参考にしています。
JavaScriptの基礎的な文法から応用的な使用例まで備忘録・復習を兼ねて記事にしていこうと思います。
特にUdemy「【JS】ガチで学びたい人のためのJavaScriptメカニズム」の質問内容に目を通しています。Jsの学習を共に解決していけたら幸いです。
__その他のQuiitaの記事やMDNの構文は積極的に引用しようと思います。__## この記事の対象読者
+ Javascript入門者
+ Class構文を理解したい
+ prototype という”特別”なオブジェクトについてデバックしながら理解したい。
+ JavaScriptの[参照]について確認したい。### コードから追っていきます
“`javascript
//1.コンストラクター関数を定義します
function Cat(name, age) {
this.name = name;
this.age = age;
人事のおじさんプログラミングを学ぶ Day3「ダイアログボックスの表示」「HTMLを書き換える」
書籍『確かな力が身につくJavaScript「超」入門 第2版』に沿ってやってみた。
繰り返し書かないと確実に忘れてしまうでしょうが、
まずは考え方だけちゃんと理解しておかねば。
discord.js v14を使用した簡単な応答botの作り方
# discord.js v14を使用した簡単な応答botの作り方
## はじめに
どうもはじめまして、だらけ(darakeee)です。
今回はdiscord.js v14を使用して簡易的な返答Botを作っていこうと思います。こちらは、JavaScript と discord.js を利用した Discord Bot 開発のチュートリアル記事を想定して書いております。
もし説明が間違っていたり、分かりづらかったら教えてください。
DeveloperPortalで必要な操作は別の記事を書いたので、こちらをご覧ください。
https://qiita.com/darakeee/items/bb923e1c0cde6c552f9f
## 動作環境
– npm 8.14.0
– node.js 18.4.0
– discord.js 14.1.2
– dotenv 16.0.1※discord.jsは「16.9.0」以前は対応していないので注意。
## ファイル構成
> discordBot/
├ node_module/
├ src/
│ └ index.js
├
Python,Ruby,PHP,Java,JavaScript,Perlの文字列処理の比較
Python,Ruby,PHP,Java,JavaScript,Perlの文字列処理の比較
# Python
https://qiita.com/tomotaka_ito/items/594ee1396cf982ba9887
# Ruby
https://qiita.com/kyohei-horikawa/items/b3308601931c20074c31
# PHP
https://qiita.com/chimayu/items/9b9cb14548aa7dd8da1b
# Java
https://qiita.com/suema0331/items/a3c947076ee1a0c6037a
# JavaScript
https://qiita.com/saka212/items/11ce1f1d6316c1fbf15b
# Perl
https://perlzemi.com/blog/20161003147558.html
SliP のご紹介
こんにちは SliP というコンピュータ言語を細々と作っているものです。最近この言語を使って複数の数式をコピペして一気に計算できる電卓サイトを作ったので紹介させて下さい。もしご意見等いただけたら幸いです。
アドレスは https://slip.828.tokyo になります。
## 基本
まずはSliPの基本的なプログラムがどのような見た目かというと、数式そのものです。
“`
4+2
“`このプログラムを評価すると6が出力されます。
同様に他の四則演算は以下のようになります。“`
4-2
4×2
4÷2
“`この3行は 2,8,2 と評価されて出力されます。
ちなみに掛け算の演算記号は`*`ではなく`×`、割り算のは`/`ではなく`÷`です。上記の例でわかるように、SliP は中置記法で記述する言語です
JSでawait出来るsetTimeoutがたった１行で作れるって話
## コード ?
“`js
await new Promise((resolve) => setTimeout(resolve, 3000));
“`以上！
めちゃくちゃ簡単?:::note warn
awaitを使っているので、これを使う関数にはasyncを付ける必要があるので要注意！
:::## 簡単な解説 ?
:::note info
前提知識として、Promise() をなんとなく理解している必要があります。
:::1行だと少し理解するのが難しいので分解してみます。
“`js
await new Promise((resolve) => {
setTimeout(() => {
resolve();
}, 3000)
});
“`“`:処理の流れ
１．Promise内でsetTimeoutを実行する
２．setTimeoutが指定時間(3000ms)だけ待つ
３．時間が経ったらresolve()を実行して終了！
“``await new Promise()`の組み合わせのおかげで`resolve()`が実行されるまでは処
JavaScriptのPromiseについて part3
# 初めに
今回は`async`と`await`キーワードについてまとめていきたいと思います。参考文章はこちらです。
[Async/await – javascript.info](https://javascript.info/async-await)# `async`/`await`
`async`：関数が解決（resolve）された`Promise`を返すことが約束される。
`await`：`async`関数の中で、指定の`Promise`が完了（settled）状態になるまで待つ。`async function`の中のみ動作する。## `await`
`await`の動きを見ていきたいと思います。
“`jsx
async function fn() {
let promise = new Promise((resolve, reject) => {
setTimeout(() => resolve(‘done!’), 1000)
})let result = await promise
console.log(‘before resu
役に立つ覚書
mapとfilterを使っただぶり削除の処理
“`js
const noDuplicationTimeList = resultEntries
.map((elem) => elem)
?.filter(
(element, index, self) => self.findIndex((e) => e === element) === index
)
“`“`js
const categoryName = resultEntries
?.filter(
(element, index, self) =>
self.findIndex((e) => e === element) ===
index
)
.map((elem) => elem)
“`
【js】スマホアドレスバーを除いたvhを取得する
スマホのアドレスバーが邪魔で要素と重なる、という時に使用できます。
# 画面サイズが変わる毎にvhを取得しcss変数に格納
## js
“`js/**
* 画面サイズが変わるたびvh取得
*/
function setHeight() {
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty(‘–vh’, `${vh}px`);
}
setHeight();
//ブラウザのサイズが変更された時・画面の向きを変えた時にvh再計算
window.addEventListener(‘resize’, setHeight);“`
# css
“`css.fv {
min-height: 100vh; /* カスタムプロパティ未対応ブラウザ用のフォールバック */
min-height: calc(var(–vh, 1vh) * 100);
}“`
参考：
https://web-dev.tech/front-end/javascript
JavaScript チート・オブジェクトの要素数とオブジェクトの配列の要素数を求める
– [あるWebサービスの開発メモ・目次ページに戻る](https://qiita.com/ishi32/items/152a1ecf7eeee7a8fb57)
– [あるWebサービスの開発メモ・JavaScript チートに戻る](https://qiita.com/ishi32/items/aa1db70e2176652dc97f)### オブジェクトの要素数は .length から取得できない
“`
obj1 = {name: “mop”, age:”15″};
console.log(obj1.length);
“`よく書いてしまうコードなのですが undefined がログに出力されます
(連想配列の)オブジェクトには .length というプロパティは無いんですね
### オブジェクトの要素数は “` Object.keys(obj).length “` から取得する
“`
console.log(Object.keys(obj1).length);
“`2 がログに出力されます。
Object.keys() メソッドは、引数に指定された
Azure Functions (Node.JS) からの http リクエスト (GET|POST) で async/await を適用する
# Azure Functions (Node.JS) で fetch が使えない?
Rest API に GET|POST したいので、fetch を使おうとしたら動かない? ということで調べたら、Node.JS(v16) では module として利用できないので NG と．．．。
https://docs.microsoft.com/en-us/answers/questions/740430/can39t-get-node-fetch-to-work-my-first-azure-funct.html
# 公式ドキュメント: Azure Functions の JavaScript 開発者向けガイド を見てみる
公式ドキュメントである [Azure Functions の JavaScript 開発者向けガイド](https://docs.microsoft.com/ja-jp/azure/azure-functions/functions-reference-node?tabs=v2-v3-v4-export%2Cv2-v3-v4-done%2Cv2%2Cv2-log
