- 1. マイクテスト
- 1.0.1. 【Javascript】SQLのwhere的な文字列で真偽判定【構文解析】【改良版】
- 1.0.2. Javascript 追加、編集、削除の機能を持ったToDoリスト
- 1.0.3. JavaScript コールバック関数
- 1.0.4. Gatsbyで構造化マークアップ対応する
- 1.0.5. Deno公式マニュアルのWeb Worker APIからテキストファイルを読むとこでつまづいた
- 1.0.6. サーバーサイドレンダリングとは何なのか。話題になっている文脈を調べた。
- 1.0.7. 【Unity】Unity 2020 WebGL ビルドで jslib でエラーが起きるようになった場合のメモ
- 1.0.8. JavaScriptを基本からまとめてみた【Chromeのデベロッパーツールでデバッグする方法】
- 1.0.9. メモ: fetch async awaitの例
- 1.0.10. 【Javascript】テスト用の関数の自作
- 1.0.11. Next.js + TypeScriptで開発時に型チェックが走らない件
- 1.0.12. 対戦ゲームを作る。 その7
- 1.0.13. JavaScriptとPythonの基礎文法を比較してみた
- 1.0.14. JavaScript 様々なメソッド
インスピレーションが湧かない人へ。今日から作れる挑戦しがいのあるアプリのアイディア5選
本記事は、[Trevor Indrek Lasn](https://trevorlasn.medium.com/)氏による「[Need Inspiration? Here Are 5 Challenging App Ideas You Can Start Building Today](https://betterprogramming.pub/here-are-5-challenging-app-ideas-you-can-start-building-today-jan-2020-78cd4fb45996)」（2020年1月9日公開）の和訳を、著者の許可を得て掲載しているものです。
#インスピレーションが湧かない人へ。今日から作れる挑戦しがいのあるアプリのアイディア5選
>コーディングに挑戦してスキルを磨こう
##はじめに
他のスキルと同様に、コーディングも努力、忍耐、猛勉強によって習得することができます。コーディングは、常に鍛える必要がある筋
pdf.jsを使って画面をpdfにするときのテクニック
どうしてもサーバサイド言語を使わずにpdfにしないといけないというので色々やったメモです。
## 基本お作法
* pdf.js
* canvas2htmlを用意してやり
“`js
let doc = new jsPDF(‘p’,’pt’,’a4′)
let dom = document.body
doc.addHTML(dom, () => {
doc.save(‘html.pdf’)
})
“`これでbody（見えてる画面）がpdfになります。
## 注意するべき点
* 何もしないとクライアントの画面サイズで書き出される
* object-fitのcoverやcontainは効かない### 何もしないとクライアントの画面サイズで書き出される
結構ハマりました。
cssで幅指定したり、canvas2htmlのオプション調べたり・・・
結局`addHTML()`の第4引数(options)で`windowWidth`と`width`という2つの値を調整すればよさそうでした。“`js
let doc = new jsPDF(‘p’,’pt’,’a4
JavaScriptを基本からまとめてみた【よく見るエラーとその対策】【随時更新】
##はじめに
####学習するに至った経緯
2020年より、未経験からエンジニアへの転職を目指し、某プログラミングスクールへ通う。
入学後、『Ruby』を未経験から学ぶ人が多いのと『Ruby』の求人が思っていた以上に少ないので、
卒業後、フロントエンドのエンジニアを目指す事に。
Javascriptの学習した事を言語化し、認識の深化による備忘録として記載。##「Cannot read property ‘プロパティ名’ of undefined」とは
####1：「TypeError」は、タイプミスではない！
エラー文の前半を見ると『TypeError』とあり、何かの入力ミスをしていると思われるかもしれないが、プログラミングの文脈においてTypeは「型」を表す。
型とは文字列型や数値型など、値の種類を表す概念で、『TypeError』というのは型に関係のあるエラーという意味。
『Uncaught TypeError』は、さまざまな種類のエラーの頭に書いてあることが多く、エラー文の本体はその後ろの部分となる。####2：「’プロパティ名’ of undefined」は、「プロ
DynamoDB localを使ってDynamoDBをローカルでデプロイする
## 概要
DynamoDBはウェブサービスとして利用できるほか、別に提供されている**DynamoDB Local**を使えばDynamoDBを**開発用ローカルDBサーバ**としてデプロイすることができます。
DynamoDB Localに関する公式ドキュメントは以下の通り。https://docs.aws.amazon.com/ja_jp/amazondynamodb/latest/developerguide/DynamoDBLocal.html
上記の記述の通り、DynamoDB Localは実行可能な.jarファイルとして提供されているほか、Dockerイメージとしても提供されており、`docker-compose`で簡単にデプロイすることができます。
今回は公式の記述を参考にしつつ、`docker-compose`でDynamoDB Localをデプロイし、Node.js上から読み書きするまでを行ってみたいと思います。
### dynamodb-admin
また、**dynamodb-admin**というDynamoDB Local用のGUIを提供してくれる
JSONでLISPの超循環評価器を定義してみた
すみません，半分くらいタイトル詐欺です．
* コメント文を区別するための記述以外は**文字列の配列構文のみ**を使用しています．ぶっちゃけ[S式](https://ja.wikipedia.org/wiki/S%E5%BC%8F#:~:text=S%E5%BC%8F%EF%BC%88%E3%82%A8%E3%82%B9%E3%81%97%E3%81%8D%E3%80%81%E8%8B%B1,S%E3%81%AFSymbol%E3%81%AB%E7%94%B1%E6%9D%A5%E3%80%82)とほとんど同じです．
* もちろん，JSON記述をパースしただけでは**LISP評価器として動きません**．[他の言語を用いた実装が必要です](https://ja.wikipedia.org/wiki/LISP#LISP%E3%81%AE%E6%AD%B4%E5%8F%B2)．なお，リファレンス実装としてNode.js（JavaScript）で実際に動くようにしています．他の言語でも動くようになったら追記するかも．【追記】`mcelisp.json`からほぼ自動生成した`mcelisp-
ブラウザにマイクテスト機能を付ける
#はじめに
音声を扱うWebアプリを作成する時に、マイクテスト機能が欲しくて作成しました。
getUserMediaメソッドで音声を取得し、[MediaRecorder API](https://developer.mozilla.org/ja/docs/Web/API/MediaStream_Recording_API)を使って録音する方法です。
こちらの[記事](https://qiita.com/massie_g/items/ecfc16018210441051b4)をベースに作成しているので適宜参照して下さい。
#HTMLの設定
“`html:index.html
マイクテスト
マイクテスト
【Javascript】SQLのwhere的な文字列で真偽判定【構文解析】【改良版】
#概要
以下の記事でSQLのwhere的な構文（”type1=でんき and type2=ひこう”など）でobjectの真偽判定をするプログラムを書いたのですが、オブジェクト化を一切せずに書いたので、かなり見にくくなってしまいました。
[SQLのwhere的な条件指定によってテーブルから行を抽出【Javascript】【構文解析】](https://qiita.com/shimajiroxyz/items/3350ed9d95fd2e7d32fe)そこで関数をカプセル化して、コードを簡単にします。
コードとテスト用のファイルは以下に置いてあります。
https://github.com/JiroShimaya/SqlLikeFiltering実装にあたっては以下の記事を大いに参考にさせていただきました。
[JavaScriptでゆるく学ぶ再帰下降構文解析](https://qiita.com/aql/items/84cead7c028f54e089e0)#実装
##トークン管理関数
indexの管理から開放されるためのトークン管理関数を用意します。
`this`の扱いが苦
Javascript 追加、編集、削除の機能を持ったToDoリスト
#こんな感じ
ピュアJSで追加、編集、削除の機能を持ったToDoリスト pic.twitter.com/saHDWKuFo2
— 高卒プログラマーげんと (@gento34165638) July 18, 2021
#HTML/CSS/JavascriptだけのToDoリスト
全てのコードを一気に載せます。##HTML
“`html:index.html
<
JavaScript コールバック関数
#コールバック関数とは
コールバック関数とは引数に渡される関数のことである。
const call = (引数名) => {
処理
};call(関数名）；
これによりcallの引数に関数を代入することができます。“`JavaScript
const name = () => {
console.log(“Tanaka”);
};const call = (callback) => {
console.log(“コールバック関数を呼び出します”)
callback();
};call(name);
“`上記の記述は事前に定義した関数を使用しています。
しかし、引数の中で関数を定義することもできます。“`JavaScript
const call = (callback) => {
console.log(“コールバック関数を呼び出します”);
callback();
};call(() => {
console.log(“Tanaka Yukio”);
});
“`#最後に
初心者ですので、拙い文章や書き方だと思いますが、最後ま
Gatsbyで構造化マークアップ対応する
# はじめに
こんにちは。ホームセンターのカインズホームのネットストアで買って店舗で受け取れるんですが、店舗に在庫ある気づかず、頼んでました、無駄なトラフィックを発生させてしまいすみません :bow: (内部的には店舗の在庫を確保しただけなのかもしれませんが :thinking: )さて、今回はGatsbyで構造化マークアップを適用しようと思います。
記事の公開日時や更新日時などをGoogleさんに伝えていきたい次第です:pray:
# 前提
私はこちらの`gatsby-starter-gcn`を使用しています。https://github.com/ryanwiemer/gatsby-starter-gcn
# Gatsbyで構造化マークアップ対応する
以下を参考に進めていきます。https://www.gatsbyjs.com/plugins/gatsby-plugin-react-helmet/
## 1. プラグインをインストールする
既にインストール済みの方は不要です :pray:
インストール有無は後続のコマンドで確認できます :ok_hand:“
Deno公式マニュアルのWeb Worker APIからテキストファイルを読むとこでつまづいた
# Deno | Manual
ここ
https://deno.land/manual/runtime/workers#using-deno-in-worker
“`js:main.js
const worker = new Worker(new URL(“./worker.js”, import.meta.url).href, {
type: “module”,
deno: {
namespace: true,
},
});
worker.postMessage({ filename: “./log.txt” });
“`“`js:worker.js
self.onmessage = async (e) => {
const { filename } = e.data;
const text = await Deno.readTextFile(filename);
console.log(text);
self.close();
};
“`“`text:log.txt
hello world
“`だけどエラーが出た。
サーバーサイドレンダリングとは何なのか。話題になっている文脈を調べた。
JavaScriptからプログラミングに入り、Reactを使うようになってくると、サーバーサイドレンダリングの話によく出会うようになりましたが、仕組みの理解とそれがなぜ話題なのか、文脈が分かっていなかったせいか、どうも意味がすとんと来なかったので調べてみました。
### 1. そもそも、レンダリングとは
——————–
「レンダリング」という言葉はいろいろな意味で使われ、HTMLのレンダリングというと、二つの意味で使われるようです。１．HTML生成：動的サイトで表示内容がユーザーインプットで変わるので、その度、必要なデータをとってきてHTMLを生成する。
２．HTML, CSS, JavaScriptなどをもとにDOMツリーに変換してメモリー上にロードして、最終的にコンテンツを描画する。「サーバーサイドレンダリング」というときは１の意味。サーバー側でHTML生成が行われるということ。ここを調べるのに一番時間がかかりました。
### 2. JavaScriptを使った場合、レンダリングはどうなっているのか。
——————
【Unity】Unity 2020 WebGL ビルドで jslib でエラーが起きるようになった場合のメモ
# はじめに
Unity では WebGL 向けビルドでブラウザと連携するために JavaScript のプラグインを作成することがあります。
Unity 2019 で **WebGL 上でファイルダイアログを扱う**プロジェクトがあったのですが、
先日 **Unity 2020 にアップデートしてビルドしたところ、ブラウザ（Google Chrome）上で以下のようなエラーが出ました**。
今回はその対処について共有しようと思います。
※JavaScript について詳しくないため、間違いなどあるかもしれませんがご了承ください。
“`
TypeError: Cannot read property ‘addEventListener’ of null at [関数名]
“`# バージョン
Unity 2020.3.13f1
#
JavaScriptを基本からまとめてみた【Chromeのデベロッパーツールでデバッグする方法】
##はじめに
####学習するに至った経緯
2020年より、未経験からエンジニアへの転職を目指し、某プログラミングスクールへ通う。
入学後、『Ruby』を未経験から学ぶ人が多いのと『Ruby』の求人が思っていた以上に少ないので、
卒業後、フロントエンドのエンジニアを目指す事に。
Javascriptの学習した事を言語化し、認識の深化による備忘録として記載。##デバッグとは
『デバッグ』とは、プログラム内の『バグ』を見つけて改修する作業の事。
プログラムの実行を『デバッグ』することで現在の変数の値や、処理がどのように進んでいるのかを確認する。
機能が正常に動かない、あるいは期待する結果が得られない場合には、そこに『バグ』がある。
その『バグ』を見つけ、期待値が返ってくるように改善するのが『デバッグ』。##バグとは
『バグ』とは、プログラムの処理を邪魔するコンピューターに入り込んだ「虫」が由来と言われており、英語で「bug」と書く。
コンピューターを正常に動かすために「虫（バグ）」を取り除く作業を『デバッグ』という。##デベロッパーツールの表示
####(1) Chrome
メモ: fetch async awaitの例
## サンプル1
“`html:sample.html