青いやつの進捗日記。

べんきょうのしんちょくをかいていきます。

JavaScript

Prototype汚染って何…?

JavaScriptをES5で書かざるを得ない場面があり、でもnodelistに対してforEachを使いたいので if (window.NodeList && !NodeList.prototype.forEach) { NodeList.prototype.forEach = Array.prototype.forEach; } と書いて使っている時がありました。 で、先…

論理演算子はboolean以外も返す const = AA || BB みたいなの

JavaScriptの「&&」「||」について盛大に勘違いをしていた件 - Qiita const _perview = Number($body.getAttribute('data-perview')) || 'auto'; えっなにこれ、って思ってた。 Number($body.getAttribute('data-perview'))がtrueであればNumber($body.getAt…

パフォーマンスのために、遅延読み込み・非同期読み込みについて調べる

qiita.com これを読んで。最適化とか表示早くするのが特に必要なものならここらへんのチューニング必要なのかもしれないなーと思い調べてみようと決意。ちなみにこれ書いてる現状はなにも知らない。 JavaScriptの非同期読み込み qiita.com 全然気にしたこと…

webpack-route-data-mapperのファイル除外指定方法

www.npmjs.com github.com webpack-route-data-mapperというのを案件で使っていた。 まあ良い感じにファイルの指定を出来るようになるプラグインだと理解している。これをpug-loaderに流し込んでいたはず。jsonファイルをpug-loaderに流し込んでその情報に基…

Javascriptの親をたどって探すclosestを関数として作る

IE11で使えないんですよねーclosest。 なので、 getParent($current, cls) { let $target = $current.parentNode; while ($target.tagName !== 'BODY') { if ($target.classList.contains(cls)) { return $target; } $target = $target.parentNode; } } 「現…

cloneNodeでコピーしてappendChildで最後尾に増やす

JavaScriptで特定の要素を複製(コピー)する方法|今村だけがよくわかるブログ Node.cloneNode() 例えばスライダーのページネーションとか。1つだけHTML上に作っておいて、あとは複製するとかできる。 _set() { for (let i = 0; i < this.length - 1; i++) …

SNSのシェア機能の実装

developer.mozilla.org これでURLを取得しエンコード const url = encodeURIComponent(location.href); blog.maromaro.co.jp tsudoi.org getTwitterUrl(url) { return `https://twitter.com/share?${url}`; } みたいな感じ 追記。Pinterestはシェア対象の画…

LodashのforEachを使う

qiita.com Lodashは配列操作とかで便利な関数を提供してくれるライブラリ。 import _ from 'lodash'; として _.forEach のようにして使える。このやり方ならlodashを全部読み込んでいる。 import { forEach } from 'lodash'; この書き方なら、lodashのforEac…

window.openでウィンドウをポップアップさせる

window.open JSでwindow.openとやるとウィンドウをポップアップで出せます。 また、hrefにそのウィンドウのURL入れるとおもうんですけど普通にやるとポップアップも出すのと同時に遷移しちゃうので、その動作自体の無効化が必要です。 aタグの無効化 - preve…

bowserってライブラリでブラウザのuseragentとか色々とってこれるっぽい

知らなかった。会社のチャンネルで投稿されていて知った。言われてみればそりゃこういうのは全部ライブラリあるよね。 Webブラウザの種類やバージョンを判別するJSライブラリ「bowser」 lancedikson/bowser ・ブラウザ名 ・OS ・デバイス(PCかタブレットかS…

addListenerでmatchmediaの切り替えでイベント発生

matchMediaを使うとCSSとほぼ同じような書き味でメディアクエリを書けます。 が、CSSのようにデバイス幅をいつでも取得してるわけじゃない(そう書けばそう書けますが)ので、PCSPの切替時にイベントを起こせません。 と思ったら、matchmediaでaddListerを使…

GatsbyでProps渡してPCSP表示非表示切り替えする

SizedImageというComponentでspOnlyというPropsにtrueを渡す <SizedImage spOnly={true} filename={'about/history/img-logo.png'}></Image> SizedImageのComponentを定義 export default class SizedImage extends React.Component { render() { return( <Container spOnly={this.props.spOnly}> <Image filename={this.props.filename}><…</image></container>

Swiper、おそらくサイト重いとAutoplayが正しく動かないときがある?

原因は確かじゃないのであれなのですが。まあ備忘録として。メモです。 Swiperっていうスライダーを簡単に作れるライブラリ。 あれで自動再生して、サムネイル機能もつけて、ってのを作ったのですが。 たまにSwiperがエラー起こして自動再生が止まってしまう…

JavaScriptのscrollToはIEとかSafariで効かないからPolyfillで対応

これがIEとSafariでは効かない。 window.scrollTo({ top: 100, behavior: 'smooth' }); 正確に言えばbehaviorが効かない。CSSのscroll-behaviorも同じく。 jQueryでanimateさせればよかったかもしれないが、今回はPolyfillで解決。 scroll-behavior-polyfill…

Gatsbyでローカルネットワークで他端末で検証を行いたいとき

gatsby develop -H 0.0.0.0 で、いける。 これで自分のIPアドレスに他端末からアクセスしたら検証出来ます。

console って console.log しかないと思っていました

qiita.com qiita.com とにかくデバッグてきなことしたいときは console.log これでコンソールのログを出す、これしかないと思っていました。 なにかの拍子に、会社のマネージャーに 「console.infoとかでエラー挙動のときはエラー文出すようにしたほうがいい…

よく考えると、クラスの取得をjQueryでしかやっていなかった。JavaScriptでクラスを取得し、そのクラス全部に同じ挙動を適応させるやり方。

github.com これめちゃめちゃ見ます。参考になります。 jQueryでHTMLのクラス取得するなら、普段なら const $tabItem = $('.tabItem') みたいにやりますよね。 で、例えばこのクラス全体に同じ挙動を実行させたい。例えばクリックイベントを起こしたいなら、…

タブ切り替え等で中身のコンテンツの高さが変わる、display:noneで切り替えているときの、その切り替えているコンテンツの下の位置でスクロール位置保持

こんな感じでタブで選んで中身のコンテンツを入れ替えたい。 わかりづらいがこの上がタブで、下がコンテンツ。 しかも、そのタブは上下にあり、どちらでも中身のコンテンツを入れ替えられる。 ↓下 つまり、 こういう感じ。 で、問題なのは、 ・このコンテン…

SlickでAutoplayをtrueにしているのにhoverするとAutoplayが止まる

slick - the last carousel you'll ever need なんと、初期設定で、 pauseOnFocusとpauseOnHoverがtrueになっている。 なので、初期設定ではそのスライダーにフォーカスした時(フォーカスした時ってなんなのですかね、ホバーとなにが違うのか)と、スライダ…

potision:fixed したheaderがページ全体のmin-widthを下回った時にスクロールできなくなってしまう

www.websuccess.jp この記事が参考になる。 .header { position: fixed; top: 0; min-width: 1000px; } みたいに固定されててmin-width指定してあると、min-width下回ると普通のコンテンツは横スクロール出来るが、fixedのコンテンツは出来ない。なので、fix…

エラー時の挙動を書いておく重要性。

当たり前かもしれないけど、上手く動かないときのエラーを見つけるの、明確なエラーとか出てなかったらどうしようもないんですよね。 最近だとjson読み込んでJavaScriptで生成する部分があったのだけど、そこでうまくいっていないのか、その生成をスライダー…

ところで DOM ってなんですか。

新卒フロントエンドエンジニアなのですが、いまだにDOMって何か説明できません。 developer.mozilla.org Document Object Model。いやわからん。 eng-entrance.com あーなるほど?ノードって言葉はなんとなくわかる。 qiita.com なんかWebサイト作る際に使う…

jQueryで遅延実行したいとき、delayしてqueue

github.com $("img.js-top-img:nth-of-type(1), img.js-top-img:nth-of-type(2), img.js-top-img:nth-of-type(3), img.js-top-img:nth-of-type(4), img.js-top-img:nth-of-type(5)").delay(delayNum).queue(function () { // スライド $("img.js-top-img:nth…

JavaScriptでクエリ「init=3」の取得

www.tam-tam.co.jp www.tam-tam.co.jp www-creators.com kigiroku.com qiita.com ここらへんが参考になります。 今回は、URLの末尾に ?init=3と入っていたときに、それを取得する方法について。 jQueryで書いてます。 // クエリ取得 init=3 ?以降(2文字目以…

HTMLとかで同じ画像のパスを直書きで複数箇所に指定する場合は修正漏れが起きる可能性があるのでJavascriptで画像のパスを1箇所で管理しよう

<img class="imgBackgroundSize imgTop js-imgTop" src="./img/img1.jpg"></img> <img class="imgBackgroundSize imgTop js-imgTop" src="./img/img2.jpg"></img> <img class="thumnail imgBackgroundSize" src="./img/img1.jpg"></img> <img class="thumnail imgBackgroundSize" src="./img/img2.jpg"></img> のような感じで、複数箇所…

jQueryの様々な指定の仕方。疑似要素とかidとか

idotdesign.net jQueryで疑似要素(:afterとか)を変えたいとき。でも疑似要素はjQueryから指定できません。そういうときはClassのつけ外しで対応しましょう。 .imgOnGreen::before { background-color: rgba($color: #26c52e, $alpha: 0.5); position: abso…

jQueryで関数呼び出すときにfunctionの中に関数を呼びださないとイベント起きなくてもいきなり関数動き出す。

jQueryで関数を作って、他のところで呼び出すときの注意。 teratail.com この記事に似ています。 function changeImg(imgNum) { } って関数を作ります。 で、この関数をクリックで呼びます。 $(".thumnail").click( changeImg(1); ); でいけると思ってたんで…

jQueryの最初の $(function() { } って何ってところからスタート。

qiita.com techacademy.jp まずつまずいたのはJavaScriptをjQueryで書いてもなぜか動かない。 →これはHTMLでJSの読み込み順序を間違えていて、 jQueryを読み込んでから自分のJSを読み込まないとjQueryを使えない。 $(function() { } ってjQueryで書くのはな…