JavaScript 100日写経のまとめです。
JavaScriptを知りたいよという人の練習ヒントになれば幸いです。
一部のものについては「1冊ですべて身につくJavaScript入門講座」を参考にしました。
※Xをたくさん貼り付けるとスマホでページが開けなくなるので50日づつ分けています。
100日間の履歴（1〜50日目）
JavaScript 100日写経（1日目）
Hello Worldになる前 pic.twitter.com/Nx0C8rZMkE
— FG🐡 (@fuguti) December 9, 2023
いいよね、Hello World。
JavaScript 100日写経（2日目）
こんにちは。 pic.twitter.com/bDgniXnpJn
— FG🐡 (@fuguti) December 10, 2023
JavaScript 100日写経（3日目）
syakyo.jsをつくる。alertを出す。 pic.twitter.com/x2iwpr4vgg
— FG🐡 (@fuguti) December 11, 2023
JavaScript 100日写経（4日目）
ワンクリック詐欺風のalert。
scriptを2つ書くと順番に出る（小並感）。 pic.twitter.com/10xLB7qkq4— FG🐡 (@fuguti) December 12, 2023
JavaScript 100日写経（5日目）
エスケープ表記を使うことで藤原竜也もalertで出せるようになる。 pic.twitter.com/oan5vd3rvC
— FG🐡 (@fuguti) December 13, 2023
JavaScript 100日写経（6日目）
Chromeのコンソールパネルでalert出す。 pic.twitter.com/hCM3PpYang
— FG🐡 (@fuguti) December 14, 2023
JavaScript 100日写経（7日目）
syakyo.jsのconsole.logに忍者を忍ばせる。 pic.twitter.com/2OG95fRwMC
— FG🐡 (@fuguti) December 15, 2023
JavaScript 100日写経（8日目）
藤原alertと忍者logが発動するページのURL検査ライブテスト。
console.logがコンソールメッセージに入っている。 pic.twitter.com/JAR3QgCGVN— FG🐡 (@fuguti) December 16, 2023
JavaScript 100日写経（9日目）
突然カラーピッカーを作成する（本の写経をした）。 pic.twitter.com/hNoER7g2TH
— FG🐡 (@fuguti) December 17, 2023
JavaScript 100日写経（10日目）
Uncaught TypeError: color.addEventListnerの正体😇 pic.twitter.com/QzUEw3RHpW
— FG🐡 (@fuguti) December 18, 2023
JavaScript 100日写経（11日目）
querySelectorを使ってhtmlのテキストを書き換える。 pic.twitter.com/JPqQRFHpON
— FG🐡 (@fuguti) December 19, 2023
JavaScript 100日写経（12日目）
textContent -> innerHTMLでhtml入れた書き換えをする。
これはh1要素。 pic.twitter.com/3WLqiFev5X— FG🐡 (@fuguti) December 20, 2023
JavaScript 100日写経（13日目）
検証ツールでJSをオンオフにしたときの変化 + 検証ツールとview-source。 pic.twitter.com/ks5fzzfXJ1
— FG🐡 (@fuguti) December 21, 2023
JavaScript 100日写経（14日目）
ここまでのソースをGSCのライブテストで見た様子。 pic.twitter.com/jjPUwyQXNr
— FG🐡 (@fuguti) December 22, 2023
JavaScript 100日写経（15日目）
自分のサイトをコンソールから書き換える。 pic.twitter.com/SweqmMjCjZ
— FG🐡 (@fuguti) December 23, 2023
JavaScript 100日写経（16日目）
const pic.twitter.com/1w6HZ7ZfIS
— FG🐡 (@fuguti) December 24, 2023
JavaScript 100日写経（17日目）
定数を使うとエスケープしないですむのでスマート。（そういうことじゃない） pic.twitter.com/edc7RlVpnY
— FG🐡 (@fuguti) December 25, 2023
JavaScript 100日写経（18日目）
よなよなエール pic.twitter.com/Lk1Hya5vbF
— FG🐡 (@fuguti) December 26, 2023
JavaScript 100日写経（19日目）
リンクをクリックしたらアラート表示 pic.twitter.com/AoKymRTaxW
— FG🐡 (@fuguti) December 27, 2023
JavaScript 100日写経（20日目）
戻り値 pic.twitter.com/p8DRHOlAH0
— FG🐡 (@fuguti) December 28, 2023
JavaScript 100日写経（21日目）
1枚目：JSで書き換えたもの。
2枚目：同じものだがJSファイルをrobots.txtでブロックしたもの。
3枚目：ユーザーが見た画面 pic.twitter.com/vVO7j0gZ2C— FG🐡 (@fuguti) December 29, 2023
JavaScript 100日写経（22日目）
CSSとJS（load）の組み合わせでうっすらと消えていく2023の画像。
良いお年を。 pic.twitter.com/kRHG21Qlwq— FG🐡 (@fuguti) December 30, 2023
JavaScript 100日写経（23日目）
あけましておめでとうございます。
ボタンを押すとダークモード・ライトモードが切り替わる。ライトモードになることを願う2024。 pic.twitter.com/qZ32DZoZje
— FG🐡 (@fuguti) December 31, 2023
JavaScript 100日写経（24日目）
昨日の魔改造。
クリックするごとにh1を変更。 pic.twitter.com/t5MgE5QTv3— FG🐡 (@fuguti) January 1, 2024
JavaScript 100日写経（25日目）
toggle()を使ってマギー審司を再現する。 pic.twitter.com/jfhDgLZYfA
— FG🐡 (@fuguti) January 2, 2024
JavaScript 100日写経（26日目）
文字数をカウントして出力を変える適当な診断ツールを作成する。（写経の魔改造） pic.twitter.com/izxWd0MbGA
— FG🐡 (@fuguti) January 3, 2024
JavaScript 100日写経（27日目）
length pic.twitter.com/DLy5UBdRcj
— FG🐡 (@fuguti) January 4, 2024
JavaScript 100日写経（28日目）
titleを引っこ抜く。
むかし見様見真似で作ったブックマークレットもprompt使ってたんだなあとか。 pic.twitter.com/gtKUPrxLZw— FG🐡 (@fuguti) January 5, 2024
JavaScript 100日写経（29日目）
様々な要素を抽出してみる。
body、head、description、h1 pic.twitter.com/G4cbkV2yK4— FG🐡 (@fuguti) January 6, 2024
JavaScript 100日写経（30日目）
ブックマークレット弄ってて思い浮かんだブックマークレット。押すと「バカ毛」というポップアップが出る。
（何の役にも立たない pic.twitter.com/dYCAtPZrlT— FG🐡 (@fuguti) January 7, 2024
JavaScript 100日写経（31日目）
同意しないと送信できないフォーム。 pic.twitter.com/aaDEo1EqQo
— FG🐡 (@fuguti) January 8, 2024
JavaScript 100日写経（32日目）
スクロールすると古畑任三郎風の赤いバーが表示される。（読んだ割合に応じてスクロールバーが表示される） pic.twitter.com/mXfc335qSI
— FG🐡 (@fuguti) January 9, 2024
JavaScript 100日写経（33日目）
昨日のスクロールの割合をconsole.logで見る。スクロールの速さによって数字が変わる。 pic.twitter.com/w5fQU1lF0g
— FG🐡 (@fuguti) January 10, 2024
JavaScript 100日写経（34日目）
window.scrollX
window.scrollY pic.twitter.com/NEb7VbfqLe— FG🐡 (@fuguti) January 11, 2024
JavaScript 100日写経（35日目）
scrollHeightで検索結果ごとのページの高さを見る。
結構違って面白い。 pic.twitter.com/XKuuF4EiUN— FG🐡 (@fuguti) January 12, 2024
JavaScript 100日写経（36日目）
const num =(5 * 10**3);
console.log(`${num}兆円ほしい`); pic.twitter.com/rEyVCw8XdM— FG🐡 (@fuguti) January 13, 2024
JavaScript 100日写経（37日目）
UAを取得して表示させる。 pic.twitter.com/eLaxfocmko
— FG🐡 (@fuguti) January 14, 2024
JavaScript 100日写経（38日目）
SPA簡易体験。 pic.twitter.com/558QxJxSu7
— FG🐡 (@fuguti) January 15, 2024
JavaScript 100日写経（39日目）
ローカルでやろうとするとエラーが出る。
「History API は、セキュリティ上の理由から、ファイルプロトコル（file://）で実行された場合は、pushState メソッドを使用できません。」 pic.twitter.com/QQY4yVwSeA
— FG🐡 (@fuguti) January 16, 2024
JavaScript 100日写経（40日目）
# でページ情報を変更した際のパケット。変化なし。 pic.twitter.com/QciHVWPcWd
— FG🐡 (@fuguti) January 17, 2024
JavaScript 100日写経（41日目）
GTMで#ページの仮想ページビュー。
かつてのトリガーとタグを転用https://t.co/HfDxx2Vmtn pic.twitter.com/KVXwGwMYMI
— FG🐡 (@fuguti) January 18, 2024
JavaScript 100日写経（42日目）
さらに遷移後のtitleも変更。
ただ計測がうまく動いていないかもなので後々の課題としてメモ。… pic.twitter.com/qs9x9ha43T— FG🐡 (@fuguti) January 19, 2024
JavaScript 100日写経（43日目）
コンテンツをJSから生成する。 pic.twitter.com/TwrntVlpbH
— FG🐡 (@fuguti) January 20, 2024
JavaScript 100日写経（44日目）
beforebegin
afterbegin
beforeend
afterendと、GoogleFont pic.twitter.com/8oDuIe6PMl
— FG🐡 (@fuguti) January 22, 2024
JavaScript 100日写経（45日目）
— FG🐡 (@fuguti) January 23, 2024
JavaScript 100日写経（46日目）
配列の指定 pic.twitter.com/rnpObYj5T5
— FG🐡 (@fuguti) January 24, 2024
JavaScript 100日写経（47日目）
JSの中身を変化させると一挙にテキスト表示が切り替わる。面白い。（語彙力） pic.twitter.com/HxmQaMZydc
— FG🐡 (@fuguti) January 25, 2024
JavaScript 100日写経（48日目）
出力すると6回殴られるJavaScript pic.twitter.com/SsXTfWHJ5E
— FG🐡 (@fuguti) January 26, 2024
JavaScript 100日写経（49日目）
魔改造してConsoleで遊んでたら、繰り返しが止まらなくなってブラウザが固まったのでBardに聞いてみた。
矢印箇所の数字が無限に増殖して焦ったｗ#失敗 pic.twitter.com/9RFZGoq7HF
— FG🐡 (@fuguti) January 27, 2024
JavaScript 100日写経（50日目）
for(let takeda = 1; takeda <= 101; takeda++){
console.log(`${takeda}回目のプロポーズ`);
} pic.twitter.com/qeIpppuY6e— FG🐡 (@fuguti) January 28, 2024
続きます。
ブログへのサポートのお願い（アマゾンギフト）
いつも「バカに毛が生えたブログ」をご愛読いただきありがとうございます。
現在、このブログは皆様のおかげで無料・広告なし（※）で運営しております。
※AdSenseはセンシティブ判定されてしまうため、広告を掲載できません。
ブログの継続とさらなる充実のためご支援をお願いします。
支援は一度限りのショット支援として、¥15から可能です。
いただいた支援は、以下のような形で活用させていただきます：
- サーバー費用やサイトの維持
- 新しいコンテンツの作成
- モチベーション
ご希望の方はスパチャ読みをいたしますので、その旨をお知らせください。
ご支援はより良いブログを提供するための力になります。
こちらのメールアドレスを送信先にしてください。
