吉村 ケンイチ

JavaScript

Pinterest風のグリッドレイアウトをCSSのみで実装?乗り越えられない壁、代替策はないのか?Pinterstレイアウトを考察

Webに携わっている方は必ず一度は「Pintarestっぽく出来ませんか?」的なことを言われると思います。僕個人としてはPintarestのようなグリッドレイアウトはあまり好みではありません、なんせ「めんどくさい!」から。 Pint...
2022.09.14
Flutter

Youtube Data API APIキー発行手順と有料か無料かを解説・セキュリティ対策も【2022年9月】

今回はYoutubeのAPIの中でも王道となり得る、Youtube Data APIを使う下準備をしていきましょう。YoutubeにはYoutube iFrame Player APIというAPIもありますが、こちらのData APIに限...
JavaScript

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

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

JavaScriptで特定の処理の速度計測のやり方3選~処理時間を計測する方法

JavaScriptの処理がどれくらいかかっているのか調査する方法をご紹介します。スクリプトが重い気がする、処理速度を改善したい、などなどJavaScriptの速さを計ってみたい場合などに有用です。 特定のメソッド間で何ミリ秒かかっ...
2022.09.22
JavaScript

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

いわゆる「formatDate」はJavaScriptのDateオブジェクトを指定したいフォーマットに変換する際に非常に便利な汎用コードです。JavaScript標準の関数ではなく、自前で宣言し実行する流れとなります。 たとえばYY...
JavaScript

【JavaScript】アロー関数とは!?たった6つのポイントをおさえて、分かりやすく解説!

よく他人のソースコードを見ている時にギョっとなる関数の書き方がありませんか??それ、大概はアロー関数式でかかれたJavaScriptの関数です。 アロー関数がどういうものかを理解できていればキョっとなる必要はほぼ無くなります。普通の...
2022.07.21
JavaScript

配列内の検索・判定・判別をするJavaScriptのメソッド(find, some, every, includes)を解説~初心者~中級者向け

Arrayオブジェクトのメソッド判定・判別の用途isArray()配列オブジェクトであるか?find()条件を満たす値を取得するsome()条件を満たす要素がひとつでもあるか?every()全要素が条件を満たすか?includes()任意...
2022.07.19
JavaScript

【疑似クラス】nth-childとnth-of-typeの違いを徹底検証!

フロントエンドエンジニアやコーダーが結構おざなりにしているnth-childとnth-of-typeの違いを解説します。知人の中にも「必要になったら毎回ググってる」人が多く、あまりきちんと理解しきれてないことがよくあります。 今回の...
SEO

サーチコンソールで複数のキーワード(クエリ)でフィルターをかける方法。「または(or)」の利用法。

Google Search Console、いわゆる「サチコ」でキーワードを複数でフィルタリングするにはひと手間かける必要があります。 単純に「インスタ」という単語を含むだけで良ければ、「次を含むクエリ」ボタンを使ってサクサクできま...
JavaScript

JavaScriptの予約語一覧

初心者をターゲットとしてこの記事を下記ますが、JavaScriptに慣れてきた、もしくはJavaScriptは空気のような存在だ、というかたも今一度確認しておいた方が良いかもしれません。 予約語とは定数や変数や関数・クラスの名前に利...
効率化

Google Chromeのデベロッパーツール搭載のエレメント検索機能が便利すぎる件~セレクタ検索、xPath検索

Webページ内で複雑なセレクタがどの要素に当たるのかが一発でわかる便利な検索機能のご紹介です。 普通に検索窓として「class="nantoka"」や「src="/images」のような文字列を検索するのにも使えるのですが、...
JavaScript

slick.js(カルーセルスライダー)の要素をスマホでピンチイン・拡大したい場合

slickスライダーを使用しているとスマホでピンチイン(拡大)出来なくて困ることがあります。 以下のサンプルはピンチイン出来ないままの状態です。 jQuery(function($){ $...
JavaScript

【2022年】JavaScript入門ガイド~初心者のためのポイント解説

JavaScriptに興味を持ってこのページをご覧になっている方は、HTMLは理解できたけどJavaScriptが分からない、もしくはデザイナーだけどプログラミングを始めてみたい、といったような初心者さんだと思います。 はじめに言っ...
2022.07.06
JavaScript

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

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

2022年、今さら要素をタイル状に配置するmasonry.jsの使い方・レイアウトサンプル

かなり前にNHK関連のWebサイトが起用して話題になったjQueryプラグインのmasonry.jsですが、最近グリッドレイアウトを利用する必要がありそうな気配なので、おさらいを兼ねてmasonry.jsについてまとめました。 ...
タイトルとURLをコピーしました