効率化

JavaScript

デベロッパーツールのオーバーライドでHTML, CSS, JavaScriptをブラウザ上で効率的に開発する方法

デベロッパーツールでのオーバーライドとは、WebページのHTMLやCSS、JavaScriptをリアルタイムに編集することで、表示上の見た目や動作を変更することができる機能です。 例えば、デザインやレイアウトの微調整や、JavaScript...
JavaScript

コンソール出力はconsole.logだけじゃない!?console.dirの使いどころや便利な場面を考察

エンジニアなら常識的に使っているconsole.log()。デベロッパーツールのコンソール画面に変数の値やオブジェクトの中身などを表示出来る便利な機能です。F12キーでデベロッパーツールを開いてもいいですが、Ctrl + Shift + J...
JavaScript

iPhoneのFirefoxアプリのユーザーエージェントには「Firefox」の文字列がない

JavaScriptでユーザーエージェントを判別してFirefoxだけ除外しようとしたら、PC(Windows)では「firefox」という文字列で判別することができるのに、iPhoneだと除外対象にならなかった。(これMozillaさん、...
JavaScript

JavaScriptのfor文(ループ処理)の使い方:初心者向けチュートリアル

JavaScriptにおけるfor文は、反復処理*を行うための制御構造*の一つです。for文を使用することで、指定した回数の処理を自動化することができます。 *反復処理とは、同じ処理を複数回繰り返し実行することを指します。JavaScrip...
業務効率化

IEモード 開発者ツール(DevTools)でデバッグ作業をより効率的に行う方法とは?

悲しいことに未だにIE対応が必要な企業などのページがあります。一方で既にInternet Explorerは廃止され、WindowsではIEを開くことすら出来ません。 しかし、IEモードという未練がましい機能があり、IEにしか対応していない...
react-native

コマンドプロンプト、PowerShell、ターミナルでディレクトリを移動する一番効率的な方法は何か?

ReactやReact Nativeのビルド、アプリの開始では毎回以下のコマンドを入力する必要があります。 cd (アプリまでのパス)my-app npm start cd (アプリまでのパス)my-app npm run build cd...
JavaScript

プロトタイプ(prototype)の基礎、メリットやサンプルコードによる実装方法を出来るだけ分かりやすく解説【JavaScript】

JavaScriptのプロトタイプを楽器のギターに例えると、あるギターのプロトタイプは「そのギターが持つ特定の機能や特性を定義するような設計図」のようなものです。 具体的にどういうことかと言うと、例えばギターの形状、音色、使用材料などの情報...
JavaScript

Google Chrome拡張機能の作り方 v3 入門編

趣味や仕事でGoogle Chromeの拡張機能を作成する機会が増えてきましたので、手順や必要ファイルなどをまとめておきます。作ってみたいとお考えの方の入り口になれれが嬉しく思います。では、早速必要な手順をフローでまとめてみましょう。 管理...
JavaScript

JavaScriptのオブジェクトのプロパティに変数を指定する方法と取得する方法

Javasciriptのオブジェクトのキー値に変数を指定したい場合が多々あります。キー値に同じ文字列を毎回指定するとメンテナンスが煩雑になったり、手間が増え非効率です。 そこでオブジェクトのキー値を一括で変数にまとめてしまう方法を解説します...
JavaScript

jQuery無しでスムーススクロールをJavaScriptで実装する最も簡単な方法を検証~これでいいんじゃ……

IE(Internet Explorer)が去った今、スムーススクロールってめっちゃ簡単に書いてもいいのでは?と思い検証を兼ねてコードを実装してみます。 スムーススクロールをするにはちょっと文章量が多くないといけないので大変ですね。特に書く...
SEO

Google検索にチョイ足しクエリで仕事が捗る【URL付与パラメーターの一覧】

Webライティングをやっていると、専門技術に関しては日本語サイトはかなり遅れていると皆さんお考えではないでしょうか。海外の先端情報をどうやって集めるか、という問題が出てきますが、とりあえずGoogleで英語検索するのが定石ですね。 プログラ...
JavaScript

JavaScriptの三項演算子が分かりにくくて発狂するかたへ~三項演算子とはなにか、覚え方とメリットは何か

(条件) ? 真/trueの場合 : 偽/falseの場合; プログラムの書き方は最適解は存在するものの絶対正であることはあまりない(構文以外の話)と個人的には考えています。その最たるものが三項演算子を使うか使わないかや、アロー関数にするか...
JavaScript

テスト/本番(複数環境)ドメインのブラウザの比較検証を効率化するChrome拡張機能 『The Switcher』 – テスト環境・本番環境の切り替えにお使いください

2024/04/20 Sat. 1,500ユーザーの皆様ありがとうございますm(__)m 2024/03/21 Thu. ユーザーが1,000を超えました!ありがとうございます! ドメインのスイッチや切り替え表示はそのままやると非効率 コー...
JavaScript

来年(2025年)まであと何日?何時間?何分?何秒?【カウントダウンタイマーJavascript】

今年(2024年)もカウントダウンタイマーをつくりましたのでご査収ください。※2023/10/27 追記:すみません、JSにエラーがあり表示されない状態でした。修正しておきました。 2025年01月01日00:00まであと、 let now...
JavaScript

Youtube iFrame Player APIの使い方。無料で使えるの?メリットは?自動再生の方法は?【2022, 2023年JavaScript】

WebページにYoutubeを埋め込む場合に、埋め込み用iframeのソースを張り付けるのが一般的です。特段にAPIを使う必要が無い場合にはYoutubeページにある埋め込み用iframeを張り付ければOKですね。例えばこんな感じのソースに...