JavaScript

AIと共同制作したJavaScriptをConsoleに打ち込んで192件のコンテンツ削除を自動化した

Gemini Notebookの上限が来てしまったので、コンテンツを削除したい。 ノートブック数が上限に達しました。 アップグレードしてください。 しかし、問題がある。 手作業が非効率 194個のノートブックがある。 ブラウザ操作をJSで自動化できるか？ できた。 ソースコード 以下をConsoleに打ち込んだ。（うまくいかない時があった。修正版はこちら） (async () => { const doc = $0?.ownerDocument ?? document; const sleep = ms => new Promise(resolve => setTimeout(resolve, ms)); const isVisibl…

• AI駆動開発
• JavaScript
• 業務自動化

タブ切り替えなどを実現するJavaScript

当サイトのトップブログセクションのタグをクリックするとそのタグの記事のみが表示されます（本記事執筆時点） 例えば技術ブログの「#HTML/CSS」をクリックすると、HTML/CSSというタグを持つ記事のみが表示されます。 こんな感じで何かの要素をクリックしたときに、対象の要素の表示・非表示が切り替わる仕組みをJavaScriptで実現するにはどうすればいいのかについて書いていきます。 まずは要素を取得して変数に入れる トリガー（きっかけ）となる要素と表示・非表示を切り替えたい要素の2つを取得して変数に入れます。 今回の例では前者がタグ、後者が記事となります。 トリガー（きっかけ）となる要素 今回の例では、top-skill-blog__tag-liとい…

• JavaScript

YouTubeのポップアップモーダルを作成する方法

現在取り組んでいるLPコーディングで、YouTubeをポップアップモーダルで表示するという仕様を実現したので、それについて書いていきます。 「modaal」というモーダルウインドウのプラグインを使用しました。 デモサイト デモサイトはこちらです。 デモサイトにある画像をクリックすると、以下のような、YouTubeのポップアップモーダルが表示されます。 https://ki-hi-ro.com/sample/youtube-popup-demo/ 以下の手順で作成しました。 必要なファイルの読み込み HTMLを書く JSを書く https://ki-hi-ro.com/sample/youtube-popup-demo/ 手順1: 必要なファイルの読み込…

• HTML・CSS
• JavaScript

LPコーディングで使用した「jQuery」

先日、クラウドワークスの「XDデータからのLPコーディング案件」に応募したところ、ありがたいことに、ご依頼いただけました。 納品完了したので、今回使用した技術について書いていきます。長くなりそうなので、今回は、jQueryに絞って書いていきます。 ページスクロール ナビゲーションをクリックしたときに、特定のセクションに飛ぶようにしました。 $(function () { $('a[href*="#"]').click(function () { var elmHash = $(this).attr('href'); var pos = $(elmHash).offset().top - 70; $('body,html').animate({…

• HTML・CSS
• JavaScript

TypeScriptとJavaScriprの挙動の違いなど

前回の記事でTypeScriptを学び始めました。今回はその続きをやっていきます。 TypeScriptとJavaScriprの挙動の違い 以下のコードは、数値の配列に対して、文字列に使用するtoUpperCase()を用いています。 const ageList = [30, 40, 50] ageList[0].toUpperCase() TypeScriptの場合、エディタ上で「プロパティ 'toUpperCase' は型 'number' に存在しません。」とエラー内容を教えてくれます。 しかし、JavaScriptの場合は、実行時に初めてエラーが表示されます。また、エラー内容がTypeScriptよりも分かりにくいです。 エラー…

• JavaScript
• TypeScript