JavaScript来年（2027年）まであと何日？何時間？何分？何秒？【カウントダウンタイマーJavascript】
今年（2026年）もカウントダウンタイマーをつくりましたのでご査収ください。※2023/10/27 追記：すみません、JSにエラーがあり表示されない状態でした。修正しておきました。2027年01月01日00:00まであと、let nowTi...
業務効率化
JavaScript
FlutterYoutube Data API APIキー発行手順と有料か無料かを解説・セキュリティ対策も【2022年9月】
今回はYoutubeのAPIの中でも王道となり得る、Youtube Data APIを使う下準備をしていきましょう。YoutubeにはYoutube iFrame Player APIというAPIもありますが、こちらのData APIに限っ...
JavaScriptYoutube iFrame Player APIの使い方。無料で使えるの？メリットは？自動再生の方法は？【2022, 2023年JavaScript】
WebページにYoutubeを埋め込む場合に、埋め込み用iframeのソースを張り付けるのが一般的です。特段にAPIを使う必要が無い場合にはYoutubeページにある埋め込み用iframeを張り付ければOKですね。例えばこんな感じのソースに...
JavaScript【コピペOK】JavaScriptの汎用メソッド「formatDate」全コード掲載！日付フォーマットなんて簡単です
いわゆる「formatDate」はJavaScriptのDateオブジェクトを指定したいフォーマットに変換する際に非常に便利な汎用コードです。JavaScript標準の関数ではなく、自前で宣言し実行する流れとなります。たとえばYYYYMMD...
JavaScript【JavaScript】アロー関数とは！？たった6つのポイントをおさえて、分かりやすく解説！
よく他人のソースコードを見ている時にギョっとなる関数の書き方がありませんか？？それ、大概はアロー関数式でかかれたJavaScriptの関数です。アロー関数がどういうものかを理解できていればキョっとなる必要はほぼ無くなります。普通の関数とさほ...
JavaScript配列内の検索・判定・判別をするJavaScriptのメソッド（find, some, every, includes）を解説～初心者～中級者向け
Arrayオブジェクトのメソッド判定・判別の用途isArray()配列オブジェクトであるか？find()条件を満たす値を取得するsome()条件を満たす要素がひとつでもあるか？every()全要素が条件を満たすか？includes()任意の...
JavaScript【疑似クラス】nth-childとnth-of-typeの違いを徹底検証！
フロントエンドエンジニアやコーダーが結構おざなりにしているnth-childとnth-of-typeの違いを解説します。知人の中にも「必要になったら毎回ググってる」人が多く、あまりきちんと理解しきれてないことがよくあります。今回の目的は、セ...
SEOサーチコンソールで複数のキーワード（クエリ）でフィルターをかける方法。「または（or）」の利用法。
Google Search Console、いわゆる「サチコ」でキーワードを複数でフィルタリングするにはひと手間かける必要があります。単純に「インスタ」という単語を含むだけで良ければ、「次を含むクエリ」ボタンを使ってサクサクできますが、これ...
業務効率化Google Chromeのデベロッパーツール搭載のエレメント検索機能が便利すぎる件～セレクタ検索、xPath検索
Webページ内で複雑なセレクタがどの要素に当たるのかが一発でわかる便利な検索機能のご紹介です。普通に検索窓として「class="nantoka"」や「src="/images」のような文字列を検索するのにも使えるのですが、実はここにはCSS...
業務効率化新常識？ヘッドレスCMS（Headless CMS）とは何か？初心者にも分かりやすく解説
悩見坂 楓最近ヘッドレスCMSってよく耳にするんだけど、いったいどういうものでしょうか？？著者ヘッドレスCMSについて出来るだけ分かりやすく解説してみます！お任せあれ！ヘッドレスCMS（Headless CMS）とはヘッドレスCMS（Hea...
業務効率化Reactのデバック実行をVSCodeのF5キーで爆速完結させる方法
※初回起動時はローカルサーバーを起動する必要があるのでnpm startを実行する必要があります！Reactアプリケーションを作成している時に、皆さんはどのようにブラウザを起動して実行テストを行っているでしょうか。ターミナルからnpm st...
業務効率化Google Chromeでリンク先のテキストをハイライトして中央表示する方法
「リンク先のここに書いてあるよ」と相手に伝えたいときがあります。そんな時にちょっと便利なハック的なことができます。ただ、Google Chrome（PC/モバイル）、Edge限定になってしまいますのでiPhoneのSafariやMacのSa...
業務効率化Chrome拡張機能「類GO!」リリースしました【for Webライター】
悩見坂 楓なんだよ類GOって、オヤジギャグかよwwwwダサwww著者異論は認めませんWordpressでライティングしていたりすると、単語の類語を調べることがよくあります。その際に検索バーで「〇〇 類語」というように「単語△（スペース）類語...
業務効率化HTMLの<form>が1ページ内に複数あった場合にEnterを押すと……
友人から質問があり、回答したのですがちょっと不安になったので実証試験を行いました。質問内容は、「Webページに複数の<form>があって、Enterで送信したいんだけど、どっちの<form>が送信されるの？」というものです。悩見坂 楓あ、こ...
業務効率化VS Codeで定義されている位置（ファイル）に一瞬で飛び確認する方法
関数や変数が定義されている場所を調べるときに役立つショートカットです。React Native、Flutterどちらのアプリケーションのソースでも出来たのでその他の言語でも応用が利くと思います。このクラス、どこで定義されているの？→すぐわか...