- 1. 【JavaScript】演算子
- 2. FirebaseのonChildAddedの動き方(Firebaseウェブバージョン9)
- 3. forEachについて完全に理解した()
- 4. Progate:js 7day 学習日記 メモ
- 5. #WebAssembly #WASM の開発環境作成(サンプル動作含む。 #AssemblyScript ( #TypeScript 風)版。)
- 6. 地球号ダーツの旅?(世界のどこかへ飛ぶブクマ)
- 7. Reactで条件分岐
- 8. 進化についていくのは大変
- 9. 参考にしたいアプリ
- 10. Markdoc入門: Vite + @markdoc/markdocを使って、Markdownで書かれた記事を表示しよう
- 11. javaScriptでの配列コピーのいろいろなパターン
- 12. React で SSG して Vercel で gh-pages ブランチを配信する方法(Puppeteer の Error: Failed to launch chrome! というエラーに対応する)
- 13. Codestepで学ぶHTML、CSSの模写コーディング (上級編:メディアサイト/グリッドレイアウト)
- 14. console.log()だけじゃない consoleオブジェクトの便利なメソッド
- 15. await-to-js で非同期処理(Promise)のエラーハンドリングをGoっぽく書こう
- 16. HTML Canvasのインターフェイスのまとめ #1
- 17. callback関数ってなんだっけ?
- 18. localStorageデータ操作あれこれ(保存、取得、更新、削除など)
- 19. Youtubeの生放送のコメントを自動で翻訳
- 20. CloudFront Function でCookieを読み込み・書き込みする方法
【JavaScript】演算子
# 概要
JavaScriptを学習、理解を深めるため「[JavaScript Primer 迷わないための入門書](https://jsprimer.net/)」を読み、
理解した内容等を記載していく。[JavaScript入門一覧](https://qiita.com/andota05/items/22fae452225b785fd405)に他の記事をまとめています。
※下記「動作環境情報」を参考にし、開発者コンソールで結果を確認してください
動作環境情報はコチラ
**【環境】**
PC:Mac
エディタ:Visual Studio Code
プラグイン:`Live Server`というVisual Studio Codeのプラグインを使用し、サーバ環境を用意。
開発者コンソール:GoogleChrome**【登場ファイル】**
datatype.js:検証用ファイル
index.html:「enzan.js」を使用、および開発者コンソールで確認する際に開くファイル**【★ポイント】**
index.FirebaseのonChildAddedの動き方(Firebaseウェブバージョン9)
この記事では、Firebase Realtime Databaseウェブバージョン9(さらに正確にはバージョン9.8.1)で用いられている”onChildAdded”という関数について説明します。
Firebaseでブラウザで動くチャットアプリを作るサンプル教材を学習した際に出てきて、その際にはあまりonChildAddedの意味をわかっていなかったのですが、どうにかこうにか理解しました。
それにしても、検索エンジンで検索をかけても、Firebaseバージョン8時代の古い情報ばかりがヒットしてしまうのなかなか辛いですね。。。
# 前提情報の整理~作ろうとしていたFirebaseウェブアプリの共有~
まずは前提をそろえるためにどのようなチャットアプリを作ろうとしていたかを共有します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573922/1e8fa9df-02c9-28c1-e7c7-a9725b503003.png)このように、画面に名前と文章を打ち込んだらチャットがで
forEachについて完全に理解した()
javascriptを触ってはや1年ほど経つが、先日callback関数について見直した後に、forEachを見直したら世界が変わった
というか、今までなんとなくのイメージで書いていたことがようやく完全に理解できた()。# 従来のイメージ
今までforEachってなんとなく、配列の要素を1つずつ取り出して、要素を使って処理をするものってイメージだった。
例えば、配列の中身をすべて2倍にするみたい感じ↓
“`sample.js
const arry = [1, 2, 3, 4, 5];arry.forEach((ary) => {
console.log(ary * 2);
});
“`
実行結果
“`
2
4
6
8
10
“`
ここでいうaryの中にarryの要素が順番に入ってくるから、その処理を以降で書いてる。なんでarryの要素が入ってくるのかは魔法。そんなイメージだった。# 現在のイメージ
forEachは引数として、callback関数を取る。
callback関数については[先日の記事](https://qiita.com/TakehiroKATO/Progate:js 7day 学習日記 メモ
**コールバック関数**:引数に渡される関数のこと
![スクリーンショット 2022-05-12 21.37.01.png](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/546211ea-7d7d-4d26-80df-4d1d47eb576c/スクリーンショット_2022-05-12_21.37.01.png)
**コールバック関数の渡し方**
![スクリーンショット 2022-05-12 21.39.13.png](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/ab4f4952-0035-4a71-bf24-a54a76f9cc5d/スクリーンショット_2022-05-12_21.39.13.png)
**関数の呼び出し方と渡し方**:関数は、関数名の後ろに()をつけると呼び出され、()をつけなければ関数そのものを指す!
![スクリーンショット 2022-05-12 21.40.28.png](https://s3-us-we
#WebAssembly #WASM の開発環境作成(サンプル動作含む。 #AssemblyScript ( #TypeScript 風)版。)
本内容を利用した場合の一切の責任を私は負いません。
公式( https://www.assemblyscript.org/getting-started.html#setting-up-a-new-project )にガイドがあるが、自分がアホなのかうまくいかなかった。
開拓したらできたので載せておきます。# バージョン
– OS
OS 名: Microsoft Windows 10 Home
OS バージョン: 10.0.19043 N/A ビルド 19043
システムの種類: x64-based PC
– node.js
node-v16.15.0-win-x64.zip
– AssemblyScript
v0.20.6
– Chrome
バージョン: 101.0.4951.54(Official Build) (64 ビット)# 準備
node.jsをダウンロード・展開し、PATH(node.exeの場所を追加)とNODE_PATH(node.exeの場所の下のnode_modulesのパス地球号ダーツの旅?(世界のどこかへ飛ぶブクマ)
## 動機
– 気軽に心だけ旅をしたい
– ランダムを楽しみたい## 3種類 + ストビュー
1. 地球ダーツ
1. 日本ダーツ
1. 関東・東海ダーツ
1. ストリートビュー表示(相互):::note info
ズームレベルは2z(1目盛:2,000km) から 21z(1目盛:5m)
:::## コード
##### 1. 地球ダーツ
– 南極率が高すぎたので南緯55~85は出ないよう設定
– 緯度85~90の極付近は南北とも提供なし
– PC用にズームアップ分岐を入れたがスマホでは必要なかった
– 陸地に当たる確率は半分以下※約7割が海1a. スマホ用@移動のみ(世界)
“`javascript:
javascript:(()=>{if(!confirm(‘Jump?’))return;const base=10**7;const ido=Math.floor((Math.random()*170-85)*base)/base;const keido=Math.floor((Math.random()*360-180)*base)/base;const uReactで条件分岐
## やること
ボタンをクリック → ローディング画面 → 結果## 前提
以前作成した下記記事の環境からスタートhttps://qiita.com/sh19982580/items/5f71856c7949c494d769
## 必要な材料
① ボタン
app.tsxのreturn内に``を追加する② ローディング画面
以前、作成した下記記事を参考に作成します。https://qiita.com/sh19982580/items/70a6fcdb29826513bea2
③ 結果画面
こちらも以前、作成した下記記事を参考に作成します。https://qiita.com/sh19982580/items/eaa599f8b8c74bb4d87e
## ここまでで確認
必要な材料を全て統合した結果
app.tsximport React, { FC, useEffect, useState } from “react”;
import { Reset } from “styled-reset”;進化についていくのは大変
プログラム言語ってたくさんあって
私がやってきたのはjava、C#、swift、javascriptあたりがメインなんですが
ずーーっと思っているのが『進化しすぎてません?』『
Struts便利だなー
⇒DIっていうのが次来るらしい
⇒seaser便利
⇒えっseaser古いの?世界的にはspringなの?
⇒spring便利
⇒えっspringbootが簡単?
⇒springboot便利
』
こんな感じで、
とにかくいろんな技術が次から次へと出てきては進化が続いてて
java⇒kotlin
javascript⇒typescript
みたいに派生していった言語もあるし。各言語のフレームワークも山盛りあって、
例えば画面周りはいつの間にか
「え?jspでゴリゴリ動的に作る時代終わったの?」
「SPA??react?vue?Angular?javascriptでゴリゴリ書くのが主流なの?」
「え!javascriptじゃない!?typescriptで書くの!?」
「tsをコンパイルしてjsにしてnodeで実行!?」5年前までバリバリコーディングしてたけど昇進し
参考にしたいアプリ
https://acha0203.github.io/Clicker_Empire_Game/
https://github.com/moritanuki/recursion-clicker-empire
https://clicker-empire-game-soysan.vercel.app/main
https://recursionist.io/share/sokahiri/lessoncode/566/htmlRunner3
Markdoc入門: Vite + @markdoc/markdocを使って、Markdownで書かれた記事を表示しよう
Markdocは、Stripeのドキュメントサイトで利用している、マークダウンのオーサリングツールです。
https://markdoc.io/
Today we’re open-sourcing Markdoc, the content-authoring system that powers the Stripe docs.
You can now freely build documentation, static pages, or tooling with the same tools we use: https://t.co/YPrlspQ3Ye. ✍️ pic.twitter.com/JbfflVMaUZ
— Stripe (@stripe) May 11, 2022
この記事では、JavaScriptと`@markwodn/markdoc`ライブラリを利用して、Markdownで書かれたコンテンツをサイトに表示させる方法を紹介します。
## セットアップ
Markdocライブラリは、`npm install`して利用します。
今回はコードのビルドに、Viteを利用します。
https://vitejs.dev/
フレームワークには`vanilla`を選びましょう。
`variant`でTypeScriptも選べますが、今回は使用しません。“`bash
$ npm init vite
✔ Project name: … vite-markdoc
✔ Select a framework: › vanilla
✔ Select a variant: › vanillaScaff
javaScriptでの配列コピーのいろいろなパターン
# はじめに
javaScriptでの配列のコピーのしかたについてまとめましたφ(・ω・ )
理由は自分が多次元配列をコピーしようとしたときに、どうしても参照渡しになってしまったからです(´+ω+`)
「配列 コピー」で調べても、多次元配列のコピーについて言及されているものが出てこなかったので、
「配列 コピー」で調べた人も多次元配列のコピーの方法にたどり着けるように、ここにまとめましたφ(・ω・ )# 目次
1. 参照渡し
1. 値渡し
1. 多次元配列の値渡し
1. まとめ# 1.参照渡し
例えば下記のように配列をコピーするとφ(・ω・ )
“`
const listA = [1,2,3]
const listB = listA
console.log(listA) //[1, 2, 3]
console.log(listB) //[1, 2, 3]
“`
下記を追記するとφ(・ω・ )
“`
listB[0] = 80
console.log(listA) //[80, 2, 3]
console.log(listB) //[80, 2, 3]
“`
このようにlReact で SSG して Vercel で gh-pages ブランチを配信する方法(Puppeteer の Error: Failed to launch chrome! というエラーに対応する)
## 概要
`FRAMEWORK PRESET` を `Other` に、`BUILD COMMAND` と `INSTALL COMMAND` は `:` (何もしないコマンド)にしてプロジェクトを作成し `Production Branch` を `gh-pages` にする。※Vercel 上で Puppeteer を動かす方法ではありません。
## 事の起こり
React で作成したアプリ(SPA)を Vercel で配信しようとしたところ、「Error: Failed to launch chrome!」というエラーが出てしまいました。どうやらサーバー側で yarn build を実行しようとしたところ、chrome が起動できなかったようです。
“`
[05:24:30.478] $ react-snap ; cp -R assets/ dist/
[05:24:30.988] Error: Failed to launch chrome!
[05:24:30.988] [0427/202430.981852:ERROR:zygote_host_impl_linCodestepで学ぶHTML、CSSの模写コーディング (上級編:メディアサイト/グリッドレイアウト)
# 模写サイト
https://code-step.com/media-menu/
Codestepのデモサイト
https://code-step.com/demo/html/media/
[模写したデモサイト](http://abc18717397.php.xdomain.jp/codeStepAdvanced/sample.html)
参考サイト
https://www.webdesignleaves.com/pr/plugins/swiper_js.html
https://www.webdesignleaves.com/pr/jquery/npm_basic.html
http://www.htmq.com/css3/box-shadow.shtml
### 変更点
– jQuery を使わない
– スライダーをslick から swiperへ変更
– レスポンシブデザインはスマホファーストconsole.log()だけじゃない consoleオブジェクトの便利なメソッド
# はじめに
JavaScriptで開発を行っている際にconsole.log()で値を確認することがよくあると思いますが、consoleオブジェクトには便利なオプションがあることを見つけたので備忘録として残します。# 1,console.error()
console.errorのメソッドではメッセージを赤色で強調表示させることが可能です。
コードをテストする際に便利なメソッドです。# 2.console.warn()
console.warn()メソッドでは警告メッセージを黄色で強調表示させることができます。
警告ログを出力させたい場合に用いることができます。
console.logのオプションについて# 3.console.clear()
console.clearメソッドではconsoleをクリアすることができます。
consoleがメッセージ等でいっぱいになった際に便利なメソッドです。# 4.console.time() / console.timeEnd()
この二つのメソッドは併用して用いるメソッドです。
関数の処理時間を知りたいときに用いることで時間を計await-to-js で非同期処理(Promise)のエラーハンドリングをGoっぽく書こう
API 通信などのエラーハンドリングはどうしていますか?
await したものを try/catch で囲む、もしくは Promise の catch を使うなどがありますが、きちんと1つ1つエラーハンドリングしていくとコードが複雑になりがちです。
[await-to-js](https://github.com/scopsy/await-to-js) はそういったエラーハンドリングの辛さを解消する手段の1つとして効果的です。
https://github.com/scopsy/await-to-js
それでは簡単なエラーハンドリングの例を元に説明していきます。
# 非同期処理のエラーハンドリング
例えば「ユーザーを取得してタスクを保存する」というものを考えてみます。
“`js
async function saveUserTask(userId) {
// ユーザー取得
const user = await fetchUser(userId);
if (!user) {
throw new Error(“存在しないユーザー”);HTML Canvasのインターフェイスのまとめ #1
HTMLのCanvasを触れ始めたので備忘録として記事に残しておきます。
# 前置き
フロントエンドとかを専門(生業)としているわけではないので、知識や理解が浅い点などはご容赦ください。
# 本記事で触れること
CanvasのfillやlineToなどの各描画のインターフェイスについて触れていきます。画像処理やアニメーション、テキスト関係などは今回は触れません。また、記事にしていて描画関係だけでもかなり長くなったので全ては触れずに記事を分割したりしようと思います(本記事は1つ目の記事に該当します)。
# HTML Canvasって何?(+Canvasの特徴)
– HTMLとJavaScriptを使って描画処理や画像変換などを行える機能です。
– SVGとかでは描画領域が巨大になっても負荷になりにくい(一方で非常に細かい描画で負荷になりやすい)一方でCanvasは描画の範囲が負荷になり、細かい描画とかでは負荷になりにくい特徴を持ちます。つまり描画サイズはそこまで大きくないものの要素が膨大な場合のグラフ描画とかに(SVGよりも)向いています。
– その他ピクセル単位で描画データcallback関数ってなんだっけ?
# 背景
一度は学んだはずなのにしばらく使ってないとわからなくなることがよくある。callbackもその1つで今まであまり意識して使えていなかったので、メモする# callback関数とは
– 関数の引数として渡す関数のこと
– 渡ってきた関数をその関数内で実行(call)するからcallback関数# 例
例えば、以下のようにcallback関数を受け取って実行するrunCallbackとcallback関数であるplusをそれぞれ定義する。
“`sample.js
const runCallback = (a, b, callback) => {
return callback(a, b);
}
const plus = (a, b) => {
return a + b;
}
runCallback(1, 2, plus);
“`
上記を実行すると
“`
3
“`
となる。
# なぜ、callback関数を使う必要があるのか?
結論、渡すcallback関数によって関数の処理を変更ことができるから
例えば先程の例でも新たにminusというcallbacklocalStorageデータ操作あれこれ(保存、取得、更新、削除など)
# データを保存
“`jsx
localStorage.setItem(“key”, “value”);
“`## 複数データを保存
“`jsx
let user_data = {
gender: “男性”,
win: 0,
lose: 0
}
localStorage.setItem(“key”, JSON.stringify(user_data)); //JSON形式へ変換
“`# データを取得
“`jsx
localStorage.getItem(“key”);
“`## 取得したデータをJSONに変換し出力
“`jsx
JSON.parse(localStorage.getItem(“key”));
“`JSONに変換する理由は、valueに複数の値がセットされている場合に `“.” で繋ぐことにより値を取得`できるため。
“`jsx
//key => user//value
{“name”:”田中”,”password”:”xxxxxxx”,”win”:”0″,”lose”:”0″,}let data = JSO
Youtubeの生放送のコメントを自動で翻訳
# 前置き
## この記事を投稿した経緯
皆さんはVTuberって知ってますか?
詳細な説明はgoogleを検索すればいくらでも出てくるので割愛しますが、最近は生放送が主流になっており、放送中のコメント(ライブチャット)に非常に丁寧に対応されている方も多く見受けられます。そんな中、ある作業配信を見ていた時のこと。
コメント欄に海外の方が外国語でコメントをしました。
配信者さんは外国語に強くないので、普段はコメント欄に出てきた外国語は片っ端から翻訳ツールにかけているそうなのですが、作業中だと手が離せないのでそれも難しいとのこと。そこで思いつきました。
それ、自動化できるんじゃないか、と。そこから先はエンジニアによくある好奇心です。
その人でも別の人でも、使ってくれる人がいれば嬉しいことこの上ないですが、別に誰かのために作るわけじゃなくて、実現方法を考えるのを楽しみたかったという。## 要件
配信したことがないので分かりませんが、配信者さんは主に下記の方法で画面にコメントを表示しているとのこと。
https://vip-jikkyo.net/youtube-live-chaCloudFront Function でCookieを読み込み・書き込みする方法
AWSで使えるCDNのCloudFrontで、Edge側で処理を書くために使える機能がCloudFront Functionsです。
従来から使えるLambda@Edgeに比べて低機能で制約が多いですが、無料利用枠があることやコストが安いので、できればこっちで書いたほうがお得です。[CloudFront Functions の導入 – 任意の規模において低レイテンシーでコードをエッジで実行 \| Amazon Web Services ブログ](https://aws.amazon.com/jp/blogs/news/introducing-cloudfront-functions-run-your-code-at-the-edge-with-low-latency-at-any-scale/)
ということで、実際にCloudFront Functionsでどこまでやれるのかも知りたかったので、Cookieを読み書きすることぐらいならできるだろうと思って調べてみました。
## Cookieを読み込む
“`javascript
function handler(event)関連する記事
OTHERカテゴリの最新記事
-
- 2024.11.14
JAVA関連のことを調べてみた
-
- 2024.11.14
iOS関連のことを調べてみた
-
- 2024.11.14
JavaScript関連のことを調べてみた
-
- 2024.11.14
Rails関連のことを調べてみた
-
- 2024.11.14
Lambda関連のことを調べてみた
-
- 2024.11.14
Python関連のことを調べてみた