- 1. 2h未満程度で終わった
- 2. progateを始めてみる
- 2.0.1. 「==」（等価演算子）と「===」（厳密等価演算子）の違いを解説してみた
- 2.0.2. HAMMER.JSでmousedown,mousemove,mouseupとtouchstart,touchmove,touchendを同じように処理する
- 2.0.3. Python,Ruby,PHP,Java,JavaScript,Perlのビット演算の比較
- 2.0.4. pdf.jsを使って日本語ファイルを表示する
- 2.0.5. 【Javascript基礎】制御構文
- 2.0.6. アイコンを使ったわかりやすいビジュアルプログラミング言語を作った
- 2.0.7. import export チートシート
- 2.0.8. 22/10/07 勉強記録
- 2.0.9. 【Node.js】ファイル処理周りで調べたことmemo
- 2.0.10. サイトが今朝いきなり動かなくなった？（AxiosのCDNが関係してるかも）
- 2.0.11. 会議設計サービスに Lexical を利用して同時編集機能を導入する
- 2.0.12. chroma.jsについて
- 2.0.13. 稀に使うコード集
- 2.0.14. TypeScriptでカスタムイベントの型定義をする方法
useStateを調べたら、Reactのレンダリングもついでに分かったよって話
ここ最近Reactに入門してみて、`useState`に遭遇して、「何それ」ってなったので今回はそれを解説してきます。
※タイトルがよくないかもしれませんが、
あくまでこの記事は、`useState`についてまとめた記事であることをご了承ください。## useStateとは何か？
結論から言うと、**useState()は関数コンポーネントでstateを管理するための機能**です。
ただ、これだけだと全くわからないと思うので詳しく解説していきます。`useState`を理解するためには以下の２つのことを理解する必要があります。
1\. `state`とは何か？
2\. `React`におけるレンダリングとは何か？
### 1\. Stateとは何か？
`State`とは値が変わると再レンダリングが発生する変数のことをいいます。
文章だけ見てもよくわからないと思うので例を見ていきます。
`state`を使えるようにするには、まず`useState`をインポートすれば使えるようになります。
使い方は他の記事などを参考にしていただけると幸いです。
“`
import React,
Chromeデベロッパツールがないブラウザでconsole.logを確認する方法
ブラウザのJavascriptでconsole.logでデバッグ出力しているけれども、Chromeデベロッパツールを使えない場合があります。たとえば、
* AndroidやiPhoneのブラウザ上で動作させている場合
* 埋め込みブラウザ(WebViewを使ったCordovaやLIFFなど)上で動作させている場合
* 別の人や別の場所のブラウザで動作させている場合など
その場合に、なんとかconsole.logのデバッグ出力を確認する方法をいくつか挙げておきます。
* まずは普通にChromeデベロッパツールが使える場合(【方法①】)
F12キーを押して表示されるChromeデベロッパツールでデバッグします。
これができれば何も問題ないですが、スマホ上では無理。
* VConsoleを使う場合(【方法②】)
ブラウザのWebページ内で、コンソール出力をダイアログ表示します。(お手軽)
* AndroidのUSB/ワイヤレス デバッグを使う場合(【方法③】)
Androidスマホであれば、USB/ワイヤレス デバッグを使うことで、リモートデバッグできます。(一度
JavaScriptの非同期関数（async function）について part1
# 初めに
もともと`Symbol.iterator`と`Symbol.asyncIterator`の勉強メモをまとめながら調べる資料から`generator`の非同期関数のキーワードが出てきて、それで初めて`Thunk`と`co`を触れました。読めば読むほど`async function`の概念をたどり着く前にまず`callback`⇒`generator`⇒`Thunk`&`co`⇒`async function`の流れでメモをまとめていきたいと思います。結論として、
– `callback`は非同期操作のための関数内関数。
– `generator`は`yield`によりコールバック地獄回避のための手動ジェネレータ。
– `Thunk`はコールバック地獄回避のための自動ジェネレータ。
– `co`は自動ジェネレータでありながら返り値が`Promise`の保証を取り入れた関数。
– `async function`は非同期操作や可読性をさらに向上させるため`async`と`await`が導入され、返り値が`Promise`の保証をする関数です。（ブラウザ`Event Loo
Progate HTML&CSS中級編終わり
2h未満程度で終わった
初級編の続きをしている感じであった。
btn img の概念等よく作られているサイトだとしみじみ感じた。
しかし実際に１からプログラムを書けって言われると、これ終わらせただけでは未だうまくコーディング出来ないんだろうなってのが正直なところ。
次はjavascript！早くアニメーションで動的サイトを作りたい。（簡単なボタンは中級編で作ったが）
recoilを使ってNext.js(SSR)のページ間をまたいだLocalStorage/SessionStorageによるデータの共有を行うメモ
個人用メモ。
また、一部微妙な部分も残っているため注意。なお、執筆時点では
– Next.js: 12.3.1
– SSR
– React: 18.2.0
– recoil: 0.7.5
– TypeScript: 4.8.4で動作確認している。（nodeのバージョンなどは↓のcodesandboxに依るので省略）
また、[recoil-persist](https://github.com/polemius/recoil-persist)というライブラリもあったりするが、今回は使用していない。
Next.jsやrecoil自体の説明もしないのでそこも注意。## 試行結果
せっかくなのでcodesandboxを使ってみた。
https://codesandbox.io/embed/admiring-ritchie-lo8jg4?fontsize=14&hidenavigation=1&theme=dark
[PageA](https://lo8jg4.sse.codesandbox.io/A), [PageB](https://lo8jg4.sse.cod
大学２年後期から３年前期のインターンまでにまともなポートフォリオを作成する軌跡
progateを始めてみる
まずはウェブ開発コースを進めることにする。
HTML&CSS>>Javascript>>Node.js の予定。
～追記～
Reactもとりあえずやるっぽい。
「==」（等価演算子）と「===」（厳密等価演算子）の違いを解説してみた
こんにちは。この記事ではjavaScriptにおける等価演算子（==）と厳密等価演算子（===）の違いについて解説していきます。実際の現場では、等価演算子は非推奨としているところが多い印象です。その理由も以下の解説を読むことで理解できるかと思います。
# 等価演算子（==）と厳密等価演算子（===）の違い
まず初めにMDNを見てみましょう。
MDNには、等価演算子と厳密等価演算子の説明が以下のようにされています。### 等価演算子(==)
> 等価演算子 (==) は、二つのオペランドが等しいことを検査し、論理値で結果を返します。**厳密等価演算子とは異なり、オペランドの型が異なる場合には型の変換を試みてから比較を行います。**### 厳密等価演算子(===)
> 厳密等価演算子 (===) は、二つのオペランドが等しいことを検査し、論理値で結果を返します。**等価演算子とは異なり、厳密等価演算子はオペランドの型が異なる場合、常に異なるものと判断します。**## コンソールで試してみた
実際の挙動を見ることで等価演算子と厳密等価演算子の違いが分かるかと思います。
“`
HAMMER.JSでmousedown,mousemove,mouseupとtouchstart,touchmove,touchendを同じように処理する
# 概要
+ パソコンとスマートフォンでマウス/タッチ処理を1つのjavascriptで書く方法です。
+ addEventListenerでmousedown,touchstartを登録してゼロから作る方法もありますが、今回はスマートフォンのジェスチャー認識ライブラリによって実現する方法を行いました。
+ 使用するjavascriptライブラリは、hammer.jsで、イベントは、panstart,panmove,panendです。# スマートフォンジェスチャー（タップ、スワイプ、長押しとか）認識ライブラリ HAMMER.JS
以下はnpm trendsによるダウンロード数です。他にもいろいろとライブラリがあると思いますけど、ここら辺の情報から記事作成時点（2022年10月8日）でよく使われていると思われるhammer.jsを選びました。
公式ページは、[HAMMER.JS](http://hammerjs.github.io/)です。
最低限．これだけだとCMAPの設定がないので日本語等は表示されない
* [GitHubリポジトリのexamples](https://github.com/mozilla/pdf.js/tree/master/examples)
色々ある? (あまり見てない)# 基本設定
コンソールに `Deprecated API usage: No “GlobalWorkerOptions.workerSrc” specified.` と表示されるときは
“`javascript
【Javascript基礎】制御構文
# 目次
**◆ – if命令 -（条件によって処理を分岐する）****◆ – switch命令 -（式の値によって処理を分岐する）**
**◆ – while/do…while命令 -（条件式によってループを制御する）**
**◆ – for命令 -（指定回数だけループ処理をする）**
**◆ – break/continue命令 -（ループを途中でスキップ/中断する）**
**◆ – Strictモード -（危険な構文を禁止する）**
# ◆ – if命令 -（条件によって処理を分岐する）
if命令は、「もし〜だったら…、 さもなくば…」という構造を表現するためのもの。
与えられた条件式が **true/false** いずれであるかによって、対応する命令（群）を実行する。“`javascript
if(条件式) {
条件式がtrueの場合に実行する命令
} else {
条件式がfalseの場合に実行する命令
}
“`**例）**
“`javascript
let num = 10;if(num >= 5) {
conso
アイコンを使ったわかりやすいビジュアルプログラミング言語を作った
初めまして、[ニカチュウ](https://github.com/nikachu2012)と申します。ポートフォリオ（適当）は[こちら](https://portfolio.nikachu.net/)です。
EmojiCode(えもじこーど)というWebアプリを作りました。https://emojicode-ide.nikachu.net
## EmojiCodeとは?
ビジュアルプログラミング言語しか使ったことない人や、まったくプログラミング言語を使ったことのない人に向けたビジュアルプログラミング言語です。## 利点
– ビジュアルプログラミングができる
– アイコンを使っていてわかりやすい
– でも複雑な命令もできる
– テキストプログラミングもできる
– 内部はJavaScript
– アイコンを使っていて見るだけで分かりやすい
:::note warn
まあ都合のいいアイコンがネットにあるわけないので、テキストの部分も多いです。
:::## 作った理由
– 比較的大きなサービスを作ったことがないので作ってみたかったから。
– 自分自身ビジュアルプログラミング
import export チートシート
# 変数
“`tsx
export const name = “Mike”;
export const age = 23;
“`
または
“`tsx
const name = “Mike”;
const age = 23;export { name, age };
“`“`tsx
import { name, age } from “./sample1”;
console.log(name, age);
//Mike 23
“`# as
変数名を変更できる
“`tsx
const name = “Mike”;
const age = 23;export { name as mike, age };
“`“`tsx
import { mike, age } from “./sample1”;
console.log(mike, age);
//Mike 23
“`
または“`tsx
const name = “Mike”;
const age = 23;
export { name, age };
“`
“`tsx
import { n
22/10/07 勉強記録
22/10/07 勉強記録
・結果
・使用したツール
Eclipes JSP bootstrap javaScripts
【Node.js】ファイル処理周りで調べたことmemo
# はじめに
expressでファイル関連の処理を実装する際に前提知識がなさすぎたので初歩的なことを調べました。
その際にメモしたものをつらつらと書いていきます（雑です## バイナリデータ
– コンピュータが見て分かる/扱えるデータ
– `binary`は「2進法の」という意味
– 具体的には画像、音楽、動画、圧縮されたファイルなど
– 一般的には人間が読めるテキストデータ**以外**のデータを指すことが多い
– バイナリとテキストは対比の意である## バイト
– 1byte = 8bit
– 1か0を並べた数値の1個をbitと言う## Buffer
– Node上でバイナリデータを扱うためのクラス
– 文字列とは全く別ものであるバイナリデータ（バイト列）を扱う
– ちなみに文、字列を扱うクラスは`String`
– ちなみに、C言語ではこの両者を同じ型として扱える
– `new Buffer(128)`のような形で書くと128バイトのバッファを作成できる## ArrayBuffer
– JavaScriptでバ
サイトが今朝いきなり動かなくなった？（AxiosのCDNが関係してるかも）
おはようございます。
お昼に起きたら**至急**と書かれたメールが大量に来てました。自社サイトのうちいくつかが動かないそうで…
調べてみたら、Axiosが読み込めてないようでエラーが出ていました。
~~**何もしてないのに壊れた！僕は悪くない!**~~
# 原因
Axiosは今朝、バージョン“1.1.0“ になりました。
この変更により、書き方が別物レベルで変わっています。（詳しくは[この記事を参照](https://zenn.dev/sa2knight/articles/axios-major-version)）それによって、**CDNでバージョン指定をせずに読み込んだ場合**に最新版が適用されてしまい動かなくなるようです。
# 対処法
CDNをバージョン指定で貼り付けましょう。
https://cdnjs.com/libraries/axios/0.27.1
上のサイトからバージョンごとのCDNを取り出して付け替えると正常に動作するはずです。
“`html:動かない(バージョン指定してない)