JavaScript

JavaScript

【Gatsby】GraphQLのuseStaticQueryって何なのか調べてみた

gatsby-starter-blogでブログを作っていたとき、GraphQLのコード内で「useStaticQuery」というのが出てきて...
JavaScript

【React】関数コンポーネントの引数(props)は分割代入で渡すとわかりやすい

最近React製の静的サイトジェネレーター「Gatsby」でブログを作っていたら、Reactの関数コンポーネントにオブジェクトで引数(pro...
JavaScript

【Gatsby】CSS Modulesのdoes not contain a default exportエラーを解決する

GatsbyでCSS Modulesを使おうとしていたらこんなエラーが出ました。 layout.jsにlayout.module.cs...
JavaScript

【Gatsby】Sass + CSS Modulesな環境を作る

今回はGatsbyでSass + CSS Modulesが使える環境構築のやり方解説します。 GatsbyでSass + CSS ...
JavaScript

Gatsby + Netlifyでデプロイがエラーになる時

今流行り(?)のGatsby + Contentful + Netlify + GitHubという構成でブログサイトを作っていたところ、ne...
JavaScript

Prism.jsの使い方!シンタックスハイライトにおすすめ

今回は軽量シンタックスハイライトライブラリ、Prism.jsの使い方を紹介します。 Prism.jsは数あるWordPressのハイラ...
JavaScript

コードハイライトをhighlight.jsからPrism.jsに乗り換える手順

今までコードのハイライトライブラリはhighlight.jsを使っていましたが、使っていくうちに細かいところが気になるようになり、Prism...
JavaScript

動画再生ライブラリ、Video.jsの使い方

今回はJavaScriptの動画再生ライブラリ、Video.jsの使い方を解説します。 Video.jsとは? 普通に動画再生す...
JavaScript

jQueryでHTMLの要素を特定の場所に移動する方法

「HTMLの構造は変えられないけど、この要素を別の場所に移動したい」ということがあったので、jQueryで実装する方法を紹介します。 ...
JavaScript

jQueryでe.preventDefault()を解除する方法

jQueryを書いていて「クリック時にスマホ表示はイベントを発生させたいけどpcはイベントを解除したい」という時がありました。 要する...
JavaScript

【それ大丈夫?】jQueryのaddClass()でフェードインする際の正しいやり方を解説

jQueryのaddClass()を使ってフェードインするのは難しくないですが、CSSのスタイルは意識しておかないと中途半端におかしな挙動に...
JavaScript

slickのCannot read property ‘unslick’ of undefinedエラーを直す方法

slickを使っていたら「Uncaught TypeError: Cannot read property 'unslick' of und...
JavaScript

jQueryで特定の行数以上のテキストを「続きを読む」で表示する方法

今回はjQueryで特定の行数以上になったらテキストをトリミングし、「続きを読む」をクリックしたら全文表示させる方法を紹介します。 文...
JavaScript

【React】react-routerでリロードするとページが表示されないエラーの対処法

今回はreact-routerの遷移先のURLでリロードするとページが表示されないエラーや、ブラウザの戻る・進むボタンを使うとページが表示さ...
JavaScript

【React】react-routerの使い方を丁寧に解説

今回はReact初心者に向けてreact-routerを使ったルーティング(ページ遷移)のやり方を解説します。 react-rou...
JavaScript

【JavaScript】canvas Cannot read property ‘getContext’ of nullの解決方法

今回はjsの「canvas Cannot read property 'getContext' of null」というエラーの対処法を紹介し...
JavaScript

【jQuery】クリック時にscrollLeftで左右スクロールする方法

今回はjQueryでクリック時に左右にスクロールする方法を解説します。 クリック時に右から左へスクロール 「横スクロールできる領...
JavaScript

Reactでコンポーネントの外側がクリックされたかどうかを判定する方法

今回はReactでコンポーネントの外側がクリックされたかどうかを判定する方法を解説します。モーダルの外側をクリックした時にモーダルを閉じると...
JavaScript

Reactで子コンポーネントから親のステートを操作する方法

今回はReactで子コンポーネントから親コンポーネントのステートを操作する方法を解説します。 サンプルとしてクリックした回数をカウント...
JavaScript

Reactで親から子コンポーネントのメソッドを実行する方法

今回はReactで子コンポーネントに書いたメソッドを親コンポーネントで実行する方法を解説します。 サンプルとして、子コンポーネントでア...