業務効率化Web制作でFlutterやReactのようなホットリロード（もどき？）を実現してコーディング効率を爆上がりさせる方法
Webのコーディングはファイルを編集して、ファイルをアップロードして、ブラウザを更新して初めて修正箇所が分かるのですが、これが非常にめんどくさい。 ファイルを編集&保存（F5押下不要）、でブラウザの表示が変わったら劇的に作業効率爆上がりませ...
JavaScript
業務効率化
JavaScriptCDN Vue.js 3系でVCalendarを動作させられないので諦めた話
const { createApp } = Vue createApp({ data() { return { selectedDate: null, } } }).mount('#app') 公式サイトが完全に正しいと鵜呑みにしないように...
JavaScript【初心者向け】JavaScriptでモーダルウィンドウの作成方法と注意事項、サンプルコード
JavaScriptで書ける基本中の基本のギミックにモーダルウィンドウという効果があります。画像をクリックすると全画面で黒背景に大きな画像が表示され、視認性をよくするためのあれです。 HTMLコーダーにはモーダル、と聞くとアレルギー反応を起...
JavaScript初心者も押さえておくべきWebセキュリティ vol.2 『クロスサイトリクエストフォージェリ（CSRF）』からの保護対策
クロスサイトリクエストフォージェリ（以下、CSRF）は、Webセキュリティの重要な脅威の一つです。攻撃者は、被害者のアカウントを悪用し、不正なリクエストを送信することで、ユーザーの意図しないアクションを実行させることができます。この記事では...
JavaScript初心者も押さえておくべきWebセキュリティ vol.1 JavaScript『クロスサイトスクリプティング（XSS）』 効果的な対策方法と最適な方法
Webアプリケーションのセキュリティは、ユーザーのデータ保護と信頼性の確保にとって不可欠ですね。特に、クロスサイトスクリプティング（以下、XSS）攻撃は、JavaScriptを使用して悪意のあるコードを注入し、ユーザーのブラウザ上で実行する...
業務効率化【インストール不要】サブディスプレイ・モニタにスクリーンセーバーエフェクトを動作させるブラウザアプリ【JavaScript ブラウザアプリ】
先日、使っているノートPCが小さいなぁと感じ、モバイルディスプレイをAmazonのタイムセールで買いました（なんとドイツ製っぽいんですが12,800円也）。 そろそろ使い慣れてきたのですが、ふとサブモニタにスクリーンセーバー欲しいな、って画...
JavaScript【インストール不要！】猫が喜んで遊ぶ（かもしれない）無料ブラウザアプリ「ぬあぴっぴ」（対応：PC, iPad, Androidタブレット）
我が家には猫が2匹かわいい子がいるのですが、PCに上がってきて邪魔ばかりしてきます笑。キーボードは踏むし、画面は見えないわで作業になりません。 そこで、発想を変えてもう遊んでもらっちゃえってことでJavaScriptで猫が好きそうな画面を描...
JavaScript【入門】Vue.jsとは？初心者でも理解できるように現役エンジニアが徹底解説！【JavaScriptフレームワーク】
Reactに多少押されてはいるものの、まだ需要が高いVue.js。今回はVue.jsとはどんなフレームワークで実際どのようにコーディングしていくのかが分かるように概要から具体的な実践内容について解説していきます。 対象となるのはある程度Ja...
JavaScript【JavaScript】スマホの利き手でフローティングボックス（コンバージョンボタンなど）を左右利き手の側へ動的に移動する方法
コンバージョンしたい @media screen and (min-width: 801px){ #floating-box { display: none; } } @media screen and (max-width: 800px)...
JavaScriptChatGPTと対話してJavaScriptで映画マトリックス風のエフェクトText Rainをブラッシュアップした話【レスポンシブ対応】
もうね、エンジニアの存在意義が問われる時代になってしまったのを痛感してます。なかなか再現が難しかった映画マトリックスのあのエフェクト（通称、Matrix text rain）をどうやって表現しているのか気になってChatGPTに効いてみたん...
JavaScriptブラウザの言語設定を変更せずにGoogleで英語検索をする方法【スマホ対応】
プログラマーやエンジニアをしていると日本語のサイトでは情報が不足していて、どうしても海外のサイトを検索していく必要が出てきます。 例えば「fllutter」というキーワードを普通に検索をしてしまうと、日本語のWebページばかり出てきて海外の...
JavaScript文字数カウントWebアプリケーションをSEOライター、ブロガーに便利な機能追加！ライティングの効率化に是非
Webライティングをしていると、作業途中までのコンテンツの文字数を取得したいことが非常に多く、Web上に掲載されている文字数カウントを行ってくれるWebページを使うことが多いです。 WordやWordpressにも文字数の計測の機能が標準で...
JavaScriptデベロッパーツールのオーバーライドでHTML, CSS, JavaScriptをブラウザ上で効率的に開発する方法
デベロッパーツールでのオーバーライドとは、WebページのHTMLやCSS、JavaScriptをリアルタイムに編集することで、表示上の見た目や動作を変更することができる機能です。 例えば、デザインやレイアウトの微調整や、JavaScript...
JavaScriptJavaScript slice: 文字列や配列を切り取る方法と使い方を徹底解説！
本記事では、JavaScriptの slice()メソッドについて詳しく解説します。slice()メソッドは、文字列や配列を切り取るためのメソッドで、JavaScriptの開発において非常に便利な機能です。 slice()メソッドの使い方や...
JavaScriptコンソール出力はconsole.logだけじゃない！？console.dirの使いどころや便利な場面を考察
エンジニアなら常識的に使っているconsole.log()。デベロッパーツールのコンソール画面に変数の値やオブジェクトの中身などを表示出来る便利な機能です。F12キーでデベロッパーツールを開いてもいいですが、Ctrl + Shift + J...