※この記事はQiita(gulp v4 による Pug × SCSS × TypeScript テンプレ)にも投稿されているものです。 (」・ω・)」はじめに gulp v4 がだいぶ前にリリースされたけど、私の開発環境がずっとgulp v3のままだったgulp v4 は新しい機能が増えたり書き方が変わったりとすごい変わってしまわれてる今まで自分の作ったものが化石になるのを恐れたのでgulp v4に適用させたついでにテンプレ作って今後楽しようと思ったどんどん改善していきたいからみんなに使ってもらいたい、ここで宣伝だ(／・ω・)／概要 この記事の概要は以下になります? gulpとpug の説明（すごいざっくり）Pug × SCSS × TypeScript テンプレの紹介このテンプレでできることこのテンプレの使い方このテンプレ内のディレクトリ構成のお話??????????????(」・ω・)

1. はじめに Gulp+Pug+SassでWebサイトの開発環境を作りました。 何度か作っているのですが、毎回忘れてしまうのでまとめです。 ※ gulp自体のインストール(グローバルインストールとローカルインストール)はされている前提です。 ※ npmを使っています。 2. ディレクトリ構造 dest/ ├css/ ├images/ └javascripts/ index.html src/ ├images/ ├javascripts/ ├pages/ ├pug/ └sass/ gulpfile.js package.json

JavaScriptのモダンな書き方 - ES2020のオプショナルチェーン、null合体演算子、動的import、globalThis等を解説 JavaScriptの仕様であるECMAScriptは年次で仕様が更新されています。ECMAScript 2020（ES2020）は2020年6月にリリースとなりました。現行のすべてのブラウザでES2020の機能は利用できますが、フロントエンドエンジニアにとって使いこなしたい記法ばかりです。 本記事ではES2020に焦点をあて、JavaScriptの新しい記述方法のメリットと使いどころを解説します。 オプショナルチェーン Optional Chaining（オプショナルチェーンやオプショナルチェーニングと呼ばれています）とは、?.構文を用いてnullやundefinedになりうる値へ安全にアクセスできる仕組みです。 利用シーン nullやunde

var gulp = require('gulp'); var notify = require("gulp-notify"); var plumber = require("gulp-plumber"); var sass = require('gulp-sass'); var autoprefixer = require('gulp-autoprefixer'); var pug = require('gulp-pug'); var browserSync = require("browser-sync"); //setting : paths var paths = { 'scss': './src/sass/', 'css': './dist/css/', 'pug': './src/pug/', 'html': './dist/', 'js': './dist/js/' } //

どうもですよ、はやちですよ:D＜わあい 今回はですね、画像の読みこみの管理ができるimagesLoadedをご紹介します:D 導入方法 npmからはこちらからインストール npm install imagesloaded Bowerからはこちらからインストール bower install imagesloaded –save ファイルからのDLはこちらからも可能です。 基本的な使用方法 jQueryからも、Vanilla.jsからも使用することができます。 jQueryからの使用方法 $('#container').imagesLoaded( function() { // 画像が読みこみ終わった時の処理 }); Vanilla.jsからの使用方法 imagesLoaded( document.querySelector('#container'), function( instance

「Chart.js」は、Webサイト上でチャート・グラフを表示するこができるJavaScriptのライブラリ。 そのChart.jsでは基本的にページが読み込まれたタイミングで、チャートの描画アニメーションを行いますが、今回は、そのアニメーションのタイミングを、チャートが表示される位置までスクロールされた際にするjQueryの例となります。 チャートが表示される位置までスクロールされた際に、アニメーションを実行する例例では、jQueryとChart.jsのライブラリはすでに読み込んでいる前提としています。 チャートを表示させるHTML要素を記述以下はチャートを表示させるHTML要素となり、チャートを表示させたい箇所に記述します。 <canvas id="my-chart"></canvas>jQueryのコードを記述以下はjQueryのコードとなり、チャートの設定とチャートが表示される位置

結果はどうなったでしょうか。 自分が今使っているGoogle Chromeだとこうなりました。 結果は{a: 10}というオブジェクトです。まあ、これは当然ですね。3 + 5と入力すれば実行されて8が返ってくるのですから、{a: 10}というオブジェクトリテラルを書けば{a: 10}というオブジェクトが作られるのは当然です。 ……。 ここで、一部の人は「おいふざけんなよ」と思っているかもしれません。というのも、この例は環境によっては違う結果になるのです。具体的には、Chrome以外2のブラウザのREPL（FirefoxやEdgeなど）が該当します。あと、ts-nodeのREPLも該当するらしいです。これらの環境では、結果は{a: 10}ではなく次のようになります。 オブジェクトを作ったはずなのに結果が10とか意味不明ですね。そもそも、こんな簡単なプログラムで結果が全然違うとか、JavaSc

jQueryライブラリ「drawer.js」のスクロールがおかしくなった レスポンシブでドロワーメニューを作るときは、何も考えずに「Drawer」を突っ込んでいました。 今年（2018年）に入ったあたりから、iPhone実機でメニューを出して下の方にスクロールさせたときの挙動がおかしくなっているのに気が付きました。 上にスワイプすると、Drawerメニューが意図せず閉じてしまうのです。 iOSのアップデートの関係でしょうか。わかりませんが。 これをとりあえず直しました。 Drawerのメニューを出すハンバーガーボタンを押したときに、html,body要素にclassを出し入れするようにします。 ハンバーガーボタンを押してDrawerメニューが出ているときのみ、html,bodyにクラスを付与するわけです。 ここでは.fixedとしました。 $(document).on("click", "

Webサイトやスマホアプリのどの部分にでもフォームに入力された値を検証するバリデーションを簡単に実装できる、わずか2.29kBの超軽量ライブラリを紹介します。 バリデーションでよく使用されるルールもデフォルトで30個以上用意されており、ルールをカスタマイズして利用するのも簡単です。 v8n -GitHub v8nの特徴 v8nのドキュメント v8nの使い方 v8nの特徴 v8nの名称は、「validation」の「v」と「n」の間に正確に8文字あるという意味です。 流暢でチェーン化可能なAPI チェーン化可能なAPIを使用して、フォームの検証を簡単に作成できます。 有用な標準検証ルール フォームの検証でよく使用される30個以上のルールが用意されています。 カスタマイズ性 フォームの検証用ルールは、簡単にカスタマイズできます。 非同期検証をサポート バックエンドでの検証のように時間のかかるル

Vue.jsでさまざまなUIコンポーネントやインタラクションを実装するチュートリアルやリソースがまとめられたVue.js Examplesを紹介します。 ページやアプリのレイアウトをはじめ、スクロールコンテンツ、カード型コンポーネント、オーバーレイ、フォームや検索、ナビゲーションやページネーション、Lazy Loadなど、最近見かけるものが揃っています。

これは画像などを除いて、HTML=DOMの読み込みが終わったらfunction()の中の処理(=なにかしらの処理)を実行するという意味です。 jQuery(JavaScript)はHTMLが完全に読み込まれないまま何か処理を実行すると大抵正しく動作しません。なのでこのreadyを使うことになります。 $(function(){ //なにかしらの処理 }); jQuery(document).ready(function() { //なにかしらの処理 }); jQuery(function(){ //なにかしらの処理 });

業務系のシステムでは、扱っているデータが多いため、一覧表が巨大になることがよくあります。WEBベースで開発している場合は、一覧表をHTMLテーブルで作ることが多いかと思いますが、表が巨大だと上下左右にぐりぐりスクロールして閲覧することになり、行や列のヘッダ(見出し)が見えなくなってしまいます。エクセルのウインドウ枠(行列)の固定のように出来ればいいのですが、HTMLではこれが簡単にはできません。そこで今回は、HTMLテーブルのヘッダを行列固定する方法を調べてみました。 jQueryプラグインやCSSでの実装、自前でテーブルを分割して擬似的に行列固定など、色々試してみましたが、巨大な表ではなかなかうまくいかず、最終的に行き着いたのは FixedMidashi でした。現時点(2016年3月17日)でおそらく最強の HTMLテーブルヘッダ固定ツールです。 FixedMidash のサンプル F

Posted: 2011.11.07 / Category: javascript / Tag: jQuery, アニメーション 最近は一ページに内容を詰め込んだ縦長のページが増えてきましたね。 そこでスクロールすると区切り（セクション）ごとに背景が変化したら、面白いのではないのかと思いましたのでやってみました。 html sectionはhtml5ではなくdivにclassでマークアップした昔ながらの形式にしました。 html <div class="section"> <h2>Section0</h2> <p> ここは0番目のコンテンツです。 </p> </div> <div class="section"> <h2>Section1</h2> <p> ここは1番目のコンテンツです。 </p> </div> <div class="section"> <h2>Section2</h2>

opacity指定をCSSとJavaScriptに記述で解決 このサイトではスクロールイベントでtextillate.jsを発火させています。 スクロールしていって、指定した要素が画面内にくるとアニメーションと共に表示される系のよくあるやつですね。 導入時は気が付かなかったのですが、ちょっと気になる動作を見つけたので挙動の調整をしようと思ったら… なぜかハマり（爆）予想以上に修正に時間がかかりました。 具体的には、スクロールイベント発火タイミングが体感的に少し遅れる感じです。 表示されている文字がぱっと消えてフェードインアニメが開始されると。 自分が使おうとしたアニメーションは要素内のテキストを一文字ずつ切り分けて動かす種類（仕組み的には全種類そうなのかも）だったので、色々試す選択肢があるだけにやってるうちにこんがらがってきたのかもしれません。 結果から言うと下記であっさり解決。 アニメー

SmartPhoto.js The most easy to use responsive image viewer especially for mobile devices View on GitHub