- 1. フロントエンドエンジニアを目指してJavaScriptを基礎か学び直す[分割代入]
- 2. React + FastAPI で画像のアップロード&保存機能を実装
- 3. [図解!]JavaScriptにおける変数の”参照とコピー”[実は超重要]
- 4. AWS SDK for JavaScript: DynamoDB batchGet/batchWriteのサンプル
- 5. #プログラミング #Javascript #nodejs # #twitter の #推しNHKドラマを3つ貼る見た人もやる を集計
- 6. 僕が勘違いしてた仮想DOMのメリット
- 7. 【javascript】特定の要素が含まれているか検索する | includes()
- 8. GASでスプシにアラート出してみた
- 9. JavaScriptのgeneratorについて part2
- 10. 人事のおじさんプログラミングを学ぶ Day4「確認ダイアログボックスの表示～変数・定数・条件分岐」
- 11. [基礎]コピペしてすぐ使える! 生のJsでモーダルを自作してみた
- 12. 元プログラマーが、脳の記憶力低下にがっかりしている
- 13. 【React初心者】APIや配列に格納された、何がしかを一つずつ取り出し表示できるmapという便利関数
- 14. JavaScriptのgeneratorについて part1
- 15. 新卒未経験、４ヵ月間で勉強してきたこと。
- 16. コッホ曲線とか雪片を SliP と JavaScript で描く
- 17. ズンドコキヨシ with Vue2 コンポーネント活用の練習
- 18. テストフレームワークをJestからVitest に移管した手順と得た知見
- 19. Video.jsでビデオコンテンツを自分好みにカスタマイズしてみる
- 20. html & css & javascript で かっこいいサイト を 作る[アニメーション][デザイン]
フロントエンドエンジニアを目指してJavaScriptを基礎か学び直す[分割代入]
これまで真剣に向き合ってこなくてもなんとかやってこれたのですが、
「ちゃんとフロントエンドエンジニアになろう」と決心して奮闘している1児の父です！フロントエンドエンジニアを目指したい人の役に立てれば嬉しいです！
## clean-code-javascript
キレイなコードが書けるようにと思って見ていたら、コードの解説でわからない箇所が出てくる始末…。https://github.com/mitsuruog/clean-code-javascript
非常に勉強になったのでオススメです！
これまで書いたコードを思い出して懺悔しながら読んでおりました…## 本題の分割代入について
clean-code-javascriptの中の例としてあったコードに下記のようなものがありました。
“`JavaScript
1 const address = ‘One Infinite, Loop Cupertino 95014’;
2 const cityZipCodeRegex = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/;
3 const [,
React + FastAPI で画像のアップロード&保存機能を実装
## はじめに
Reactの初学者です。画像のアップロードと保存機能を実装する際に結構詰まったので、備忘録として残しておきます。
フロントエンドはReact、バックエンドはFastAPIで実装します。コードは初心者っぽいところが多いと思われます。ご了承ください。
## React
まずは全体のコード。
formタグ内で画像を選択した後、Submitボタンを押すとAPIリクエストが送信されます。“`my-app/src/components/SubmitImage.jsx
import React from ‘react’
import { useState } from ‘react’
import ‘bulma/css/bulma.min.css’ // cssexport const SubmitImage = () => {
const [image, setImage] = useState()
const [errorMessage, setErrorMessage] = useState(”)
const URL = ‘htt
[図解!]JavaScriptにおける変数の”参照とコピー”[実は超重要]
# はじめに
本記事は __Udemy著者『 _CodeMafia_ 』様の「【JS】ガチで学びたい人のためのJavaScriptメカニズム」__ の内容を参考にしています。
JavaScriptの基礎的な文法から応用的な使用例まで備忘録・復習を兼ねて記事にしていこうと思います。
特にUdemy __「【JS】ガチで学びたい人のためのJavaScriptメカニズム」__ の質問内容に目を通しています。Jsの学習を共に解決していけたら幸いです。
__その他のQuiitaの記事やMDNの構文は積極的に引用しようと思います。__## 対象読者様
+ Js入門者の方
+ Jsの参照とコピーがこんがらがって自信がない方
+ 関数の引数がうまく操れない方
+ 引数がうまく操れない方
+ Javascriptの参照の基本的な特訓をしたい方
+ …etc### ウォーミングアップ(プリミティブ値)
:::note info
四角い箱はメモリ空間x番地のようなものです。
:::;async function batchPut(tableName, items) {
const docClient = new AWS.DynamoDB.DocumentClient({ region: “ap-northeast-1” });
let unprocessedItems = items.slice();
while (unprocessedItems.length > 0) {
let limit = 25;
let batchItems = unprocessedItems.splice(0, limit);
let params = {
RequestItems: {
[tableName]: batchItems
#プログラミング #Javascript #nodejs # #twitter の #推しNHKドラマを3つ貼る見た人もやる を集計
本内容を利用した場合の一切の責任を私は負いません。
# 概要
7月末にNHKが下記のtweetをしたのでAPIを使って集計してみた。NHKスクエアが
こんな企画をご用意しました✨
「#推しNHKドラマを3つ貼る見た人もやる」画像を参考に、
引用ツイートで
「好きなNHKドラマ」の作品名を3つ呟いて投稿してください！もちろん、同じ作品3つでも良いですよ…！ pic.twitter.com/4q9aXmAHOX
— NHK スクエア【公式】 (@NHK_DVD) July 30, 2022
# バージョン
・node-v10.16.0-win-x64
・needle@3.1.0
・columns Version: 2.2.2# 集計ルール
・NHKのtweetの日以前に作成されたユーザーのtweetが対象
(=新しいユーザーは除外。)
・1アカウントの最新のタグ有りtweetのみ対象
(=複数の場合は最新のみ。)
・タグの直前直後の空行を除く3行を、1行当たり20文字分
直前直後は直前が優先で、直前が無いか空行のみの場合のみ直後を採用する。
・#等記号と空白を無視
#等記号は
僕が勘違いしてた仮想DOMのメリット
# 経緯
DOMについて調べてた時に気づいたので、備忘録として。
（この備忘録ではReactベースで書いてます）# 結論
仮想DOMの真のメリットは「パフォーマンスが良いこと」ではなく、「宣言的UIの実現と現実的なパフォーマンスを両立できること」にある。# 命令的UIと宣言的UIってなんだろう…
### 命令的UI
「イベント・変更が発生するたびに、どのように処理を実行し、状態を反映するのか」を記述する必要がある
“`javascript
const checkbox = document.querySelector(“.checkbox”);const button = document.querySelector(“.button”);
checkbox.addEventListener(“click”, () => {
if (checkbox.checked === true) {
button.disabled = true;
} else {
button.disabled = false;
【javascript】特定の要素が含まれているか検索する | includes()
# はじめに
ある変数が、複数の値のどれかに存在するかどうかを判定したい時、何も知らず今までずっと以下のように記載していた。
“`js
if(testStr == “a” || testStr == “b” || testStr == “c” || … ){
…
}
“`
条件が数えられるほどの数ならこれでもよいが、これが10を超えてきたあたりから正直書くのがだるくなってくる。（またはコードが汚くなってくる）
そこで、このような状況下でコンパクトにコードが書ける方法があることを知ったので、メモ。# 内容
`includes()`メソッドを使用する。
“`js:使用例
let okList = [“a”, “b”, “c”, … ];
if(okList.includes(testStr)){
…
}
“`# 詳細
条件として認められる要素を配列にし、それに対して`includes()`で特定の要素が含まれているか検索する。この時、`includes()`に引数として渡すのは**検索対象となる値**であり、**検索対象となる配列**ではない
GASでスプシにアラート出してみた
父の業務を効率化するためにGASを組んだのですが、その際に使ったアラート機能をここに残します?
# 経緯
経緯としては、プログラミングに疎い父のために、GASでUI的にアラートを出してあげよう！というのが始まりです。少しだけ入力させる工程があり、お得意先さんの名前とそのコードを記入しないといけないのですが、そこでおっちょこちょいの父は、片方しか入力しなかったりしてミスる訳です。その時に、プログラミングできない父はログとか読むと思いますか？いや読める訳ないんです笑
そこで、UI的にスプレッドシート側にアラートを出そう！と決めました?# 使い方
アラートの使い方には、主に２種類があると思っています。
1. シンプルにコードで使う
1. 例外処理と組み合わせて使う上記の順で説明します?
## 簡単な使い方
以下の内容が表示するコードです。
至ってシンプル！！！
“`javascript:main.gs
if(clientCode.length === 0) {
SpreadsheetApp.getUi().alert(‘エラー\n得意先コードが未入力です。\n実行で
JavaScriptのgeneratorについて part2
# 初めに
今回は`[Symbol.asyncIterator]`、非同期ジェネレータについてまとめていきたいと思います。参考文章はこちらです。
[Async iteration and generators – javascript.info](https://javascript.info/async-iterators-generators)
[Symbol.asyncIterator – MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/asyncIterator)# [Symbol.asyncIterator]
“`jsx
let range = {
from: 1,
to: 5,[Symbol.asyncIterator]() {
return {
current: this.from,
last: this.to,async next() {
awa
人事のおじさんプログラミングを学ぶ Day4「確認ダイアログボックスの表示～変数・定数・条件分岐」
書籍『確かな力が身につくJavaScript「超」入門 第2版』に沿って、
確認ダイアログボックスの表示～変数・定数・条件分岐（else if）までやってみた。
だんだん文脈が出てきて、面白さが増してきました。
[基礎]コピペしてすぐ使える! 生のJsでモーダルを自作してみた
# はじめに
本記事で記述する内容です。
+ プラグインを使わない生のJsでモーダル作成しました。
+ 簡単なコードなのでコピペしてすぐ使えると思います。
+ なるべくOOP(クラス記法)で書いてます…今後改修予定あり
+ モーダル表示後に簡単な動作を加えてModalを閉じる実装にしました
+ 無駄な記述が多かったので修正しました(2022_8_20)## 環境
+ エディタ: VS Code バージョン: 1.70.2
+ Live Serverv 5.7.5## 対象読者様
+ モーダルをプラグインなしで使い回したいてみたい方
+ JsとDOM操作、CSSに関連する基礎あたりの総復習をしたい方
+ addEventlistener の扱い。イベントリスナー,eの扱いに慣れたい方
+ React行くぞって方(私)### さっそくですがデモ動画はこちら(音量注意、すいません)
モーダルが表示される前のhtmlは
“`html
モーダルの受け入れ元のhtml
元プログラマーが、脳の記憶力低下にがっかりしている
# 概要
退役プログラマーが趣味で[「なつかしの曲(ポータル)」](https://tecoyan.blogspot.com/#btn_cntrl)サイトを構築していますが、特にメンテナンスで特定の修正箇所を思い出すことが困難になってきた。昔であれば、瞬時に思い出すことができたのだが。
記憶の脳内ホルモンの低下が原因か。
情けない。目を閉じて、ソースコードをイメージしてみるが、そのソースコードが浮かんで来なくなった。これから、記憶力復活のトレーニングを検討してみたい。# 事例
開発ツールを開いて、ソースコードを眺めていれば、徐々に特定のコードの箇所を記憶を頼りにたどって行けるのだが、一旦、目を閉じて思い出そうとしても、何も出てこない。これが困る。
元プログラマーとしては、プライドが許さない。
何とか、目を閉じていても、ソースコードがスラスラと目に浮かんでくるようにしたい。
少しづつ、関連付けて行けば、何とか、思い出すことはできる。
あのボタンのイベント処理はどこにあったかとか、あのポップアップのPHPスクリプトはどこへおいたか。あのdbテーブルの更新はどのモジュールで行っていたか。
【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(削除)
