効率化

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ですね。例えばこんな感じのソースに...
JavaScript

【コピペOK】JavaScriptの汎用メソッド「formatDate」全コード掲載!日付フォーマットなんて簡単です

いわゆる「formatDate」はJavaScriptのDateオブジェクトを指定したいフォーマットに変換する際に非常に便利な汎用コードです。JavaScript標準の関数ではなく、自前で宣言し実行する流れとなります。 たとえばYYYYMM...
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、いわゆる「サチコ」でキーワードを複数でフィルタリングするにはひと手間かける必要があります。 単純に「インスタ」という単語を含むだけで良ければ、「次を含むクエリ」ボタンを使ってサクサクできますが、こ...
JavaScript

Swiperの使い方とサンプル!動かない時のチェック項目も!【2022年 JavaScript】

Swiperとは 今最もメジャーなカルーセルスライダーのプラグインモジュールであるSwiper(公式:)について、読み込みから実装、完成形のサンプルをまとめてみました。 カルーセルスライダーといえば、Slick.jsやOwlCarousel...
JavaScript

IE(InternetExplorer)のサポート終了から生まれるメリット5選!~フロントエンドエンジニアの観点からJavaScriptを考える

2022年6月15日、それは「お疲れ様」と同時に「ヨッシャー!」となる不思議な日。かのInternetExplorerが遂にサポート終了となりました。エンジニア、Webデザイナ、コーダー、プログラマの皆さん、Web業界にかかわるすべての皆さ...
JavaScript

【意外と知らない】jQuery.fn.on()の引数にドットを用いて名前空間を表現する方法

廃れそうで廃れないjQueryですが、まだまだ知らないことが多かったりしませんか??今回はjQuery.fn.on()のイベントに名前空間を付けて管理できるという少々上級者向きな内容になります。 悩見坂 楓 名前空間って何よ、ネカフェの店名...
JavaScript

【JavaScript】正規表現の使い方とサンプル一覧

JavaScript初心者がよくつまづく正規表現。中級者以上であっても何となくぼんやりとしか使えないコーダーやフロントエンドエンジニアが多いのではないでしょうか。 2022年現在でもJavaScriptの正規表現は昔から変わらず、一度使える...
業務効率化

Reactのデバック実行をVSCodeのF5キーで爆速完結させる方法

※初回起動時はローカルサーバーを起動する必要があるのでnpm startを実行する必要があります! Reactアプリケーションを作成している時に、皆さんはどのようにブラウザを起動して実行テストを行っているでしょうか。 ターミナルからnpm ...
JavaScript

【2023年】jQuery CDN早見表と使い方入門

この記事の内容は2022/03/05時点での情報です。リンク切れや使用不可のCDNがある場合は、お問い合わせフォームからご連絡ください。Twitterアカウントからでも受け付けています。 CDNとは Content Delivery Net...