JavaScript

ウェブ制作

フロントエンド開発者のための一般的な変数命名規則

はるフロントエンジニアが使う言語で変数名を作るときに一般的な命名規則をまとめました。言語と使用時の例JavaScript/TypeScript変数名キャメルケース(camelCase)JavaScriptおよびTypeScriptでは、キャ...
ウェブ制作

教科書には載っていないコーディングする人に知っていて欲しい14のこと

はるフロントエンジニアのはるです。今回は、コーディングをする人で入門者を脱却するために私が思う気をつけて欲しいことを紹介します。プルリクチェックをする機会も多く、コーディングを始めたばかりの人たちにこれは知っていて欲しいなと、思うことを紹介...
ウェブ制作

ScrollMagicをES6で使用する方法・webpack (laravelmix) での使い方メモ

はる普段、フロントエンドのローカル開発環境LaravelMixを使用していて、JavaScriptはBabelを通して記述しています。その際にScrollMagicを使った時、つまづいたのでメモメモ各種モジュールをインストールnpmまたはy...
ウェブ制作

SNSシェアーボタンaタグ用 別ウィンドウでいい感じのサイズで表示する

aタグで自作のシェアーリンクを作るとき、外部リンクで設定すると思います。それを、シェアーするにはちょうどいいサイズの別ウィンドウにする方法を紹介します。普段私はBabelを通してjsを書いてるので、そのソースコードでの説明になります。リンク...
ウェブ制作

最もシンプルなモーダルメニューの作り方【簡単なCSSとJavaScriptで実装】

はる一番簡単で使う場面が多いモーダルの作り方を紹介します。簡単なモーダルであればこの方法を使えば素早く実装できます。モーダル表示されるメニューとして紹介しますが、メニューリストの代わりにYouTube動画を埋め込んで、サムネイル画像用意しク...
ウェブ制作

【JavasScript】モーダルでの枠外をクリックしたら発火させる方法

はる今回は、JavaScriptのよくある『モーダル(ポップアップ表現)を閉じる』時に外枠をクリックしたら閉じる判定方法を紹介します。モーダル(ポップアップ)作成時の外側をクリックするときの判定を紹介注意はIE11は非対応の方法(ポリフィル...