JavaScript

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

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

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

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

JavaScriptを使ってクロスドメインの埋め込みiframeを更新(リロード)する方法

iframeはブラウザの仕様上、クロスドメイン(呼び出すHTMLが自分のドメイン上に無いこと)の場合にはjQueryでもJavaScriptでも操作が出来ません。ただ、iframeを更新したい時にはちょっぴりイレギュラーな方法でリロードさせ...
JavaScript

jQueryにおけるeach()文とは?基本的なループの使い方と注意点

※JavaScriptのforEach()については『JavaScriptにおけるforEach()とは?基本的なループの使い方と注意点』をご参照ください。配列の内容を関数で処理する際に、jQueryではeach()を、プレーンなJavaS...
JavaScript

JavaScript、jQueryでブラウザのタブがアクティブ(非アクティブ)になったか判別/検知する方法

通常のサイト、いわゆるホームページを作成するときにはあまり意識しないですが、Webアプリケーションやブラウザ駆動のアプリケーションを作る時には意外と知っておく必要があります。まずは、JavaScript(jQuery含む)ではブラウザで現在...
JavaScript

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

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

【JavaScript】イベントにおけるバブリング(bubbling)とは?挙動と、停止する方法

JavaScript中級者ともなると、バブリングという言葉を耳にしたことはあるはずです。文字通り英語では「Bubbling」と書き、泡が水面まで登っていく様子を模したプログラム用語です。悩見坂 楓バブリングってあれか、MJが飼ってたおさるさ...
JavaScript

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

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

JavaScriptでブラウザのsessionに値を格納・抽出(取得)・削除する方法

session操作に関する構文// session 格納window.sessionStorage.setItem(,);// session VALUEの取得window.sessionStorage.getItem();// 指定ses...
JavaScript

【PCゲーム】Screeps: Arenaの遊び方(チュートリアル「Final test」)を日本語に!和訳して解説!(その10)

とうとう最終章です!このチュートリアルではサンプルコード無しで敵のクリープを全滅させるのが目標です。今までのチュートリアルを駆使して自分なりの攻撃方法で挑戦する必要があります。著者はクリープを2個生成して、rangedAttack()でゴリ...
JavaScript

【PCゲーム】Screeps: Arenaの遊び方(チュートリアル「Construction」)を日本語に!和訳して解説!(その9)

Constructionは直訳すると「工事」ですね。一体何を工事するのでしょうか?日本語にしてみましょう。チュートリアル全記事は以下になります。Loop and import(ループとインポート)Simple move(単純な移動)Firs...
JavaScript

【PCゲーム】Screeps: Arenaの遊び方(チュートリアル「Harvest energy」)を日本語に!和訳して解説!(その8)

チュートリアル「Store and transfer」(その5)でエネルギーの貯蔵と転送についての説明がありましたが、今回のチュートリアルではエネルギーの採掘(摂取)についてです。チュートリアルの全記事は以下になります。Loop and i...
JavaScript

【PCゲーム】Screeps: Arenaの遊び方(チュートリアル「Spawn creeps」)を日本語に!和訳して解説!(その7)

チュートリアルもそろそろ終盤に差し掛かってきました。今回はSpawn creepsということでクリープを生産する方法のチュートリアルです。クリープって動詞で「這う」とか「忍び寄る」とかいう意味なんですよね。名詞形だと「這う者」「忍び寄る者」...
JavaScript

【PCゲーム】Screeps: Arenaの遊び方(チュートリアル「Terrain」)を日本語に!和訳して解説!(その6)

今回はTerrainのチュートリアルを紹介します。Terrainは日本語で地形を意味します。地形とクリープの関係はいったいどのようにプログラムすれば良いのでしょうか。各チュートリアルは別途記事にしてありますので、他のチュートリアルは下記を参...
JavaScript

【PCゲーム】Screeps: Arenaの遊び方(チュートリアル「Store and transfer」)を日本語に!和訳して解説!(その5)

ようやくチュートリアルの半分まで来ました……だんだん複雑になってきましたね……過去のチュートリアルは下記にありますので併せてご覧ください。【PCゲーム】Screeps: Arenaの遊び方(チュートリアル「Loop and import」)...