React.js 【React hooks】useEffectの使い方 – 第二引数の活用例もご紹介！
React hooksの一つであるuseEffectについてご紹介をしてます。主な内容としては、基本的な記述方法(コードの書き方)から依存配列(第二引数)の使い方までサンプルコードを用いて、まとめてます。
React.js 
React.js react has no exported member { hooksの関数名 } と表示された時の対処法
React × TypeScript × Next.jsで開発を行う上で、発生したエラー(react has no exported member { hooksの関数名 })の対処法についてご紹介しています。必要なライブラリを導入することで解決できる可能性が高いです。
JavaScript [ JavaScript 基礎 ] 配列内のオブジェクトを操作する(値の取得/値の更新)
本記事では、JavaScriptで複数オブジェクトが格納されている配列から特定のオブジェクトを取り出す方法、オブジェクトから特定の値のみを取り出す方法、オブジェクトから取り出した特定の値を変更(更新)する方法についてご紹介してます。(mapメソッドとfilterメソッドを使用)
React.js [ @react-google-maps/api ] Google Mapの表示やマーカーの表示/カスタマイズを行う方法
React, Next.jsを用いたプロジェクトでGoogle Map APIを使用したGoogle Mapの表示/カスタマイズを行いたい時に便利なパッケージ(@react-google-maps/api)をご紹介してます。
本記事では、Google Mapの表示からマーカーの配置及びカスタマイズ方法についてまとめています。
React.js [ React ] react-cookieを使用し、cookieでデータの保存/取得/削除を行う方法
今回は、Reactを使用したフロントエンド開発において、データをcookieへ保存するだけでなく、画面上でcookie上に保存したデータを取得したり、cookie上のデータを削除する方法についてサンプルコードを用いて解説しています。また本記事は、react-cookieを使用した方法になります。
JavaScript [ JavaScript 基礎 ] Cookieにデータを保存 / データの取得(参照)
今回は、JavaScriptを用いて、Cookie(クッキー)にデータを保存する方法(document.cookie)と保存したデータを参照する方法についてサンプルコードを用いながら解説しています。デベロッパーツール上でのCookieデータの確認方法も載せてます。
JavaScript [ JavaScript 基礎 ] parseメソッド, stringifyメソッドの使い方
今回は、JSON形式の文字列をJavaScriptのオブジェクト、JavaScriptのオブジェクトをJSON形式の文字列に変換する方法(parseメソッド, stringifyメソッドの使い方)についてサンプルコードを用いながらご紹介してます。
JavaScript [ JavaScript 基礎 ] window.print : 印刷ダイアログを表示&印刷範囲の変更
今回は、JavaScriptでボタンを押した際に印刷画面(印刷ダイアログ)を呼び出せるようにしたいと思います。印刷する範囲を指定する方法(印刷用CSSを記述する方法)と詳細設定の初期値を変更する方法もあわせてご紹介していきます。
Web開発用ツール Postman : 導入～基本的な使い方(APIテスト)
本記事は、Postmanの導入からAPIテスト(エンドポイントが正常に起動しているか確認)をする方法(GET・POST・PUT・DELETE)までを体験できる内容となっております。使用するAPIは、JSONPlaceholderになります。
Next.js Next.js + Tailwind CSS : 導入及び使い方
本記事では、Next.jsの環境でTailwind CSSを導入するまでの手順と基本的な使い方について簡単に解説してます。
代表的なCSSのフレームワークとして、BootstrapやBulma, MUIなどが挙げられますが、Tailwind CSSもその一つです。スタイルの変更をHTML上で完結, 開発速度の向上を目指せるなどのメリットをもつフレームワークになります。
JavaScript [ JavaScript 基礎 ] 配列内のオブジェクトを操作する(値の取得/値の更新)
本記事では、JavaScriptで複数オブジェクトが格納されている配列から特定のオブジェクトを取り出す方法、オブジェクトから特定の値のみを取り出す方法、オブジェクトから取り出した特定の値を変更(更新)する方法についてご紹介してます。(mapメソッドとfilterメソッドを使用)
JavaScript [ JavaScript 基礎 ] Cookieにデータを保存 / データの取得(参照)
今回は、JavaScriptを用いて、Cookie(クッキー)にデータを保存する方法(document.cookie)と保存したデータを参照する方法についてサンプルコードを用いながら解説しています。デベロッパーツール上でのCookieデータの確認方法も載せてます。
JavaScript [ JavaScript 基礎 ] parseメソッド, stringifyメソッドの使い方
今回は、JSON形式の文字列をJavaScriptのオブジェクト、JavaScriptのオブジェクトをJSON形式の文字列に変換する方法(parseメソッド, stringifyメソッドの使い方)についてサンプルコードを用いながらご紹介してます。
JavaScript [ JavaScript 基礎 ] window.print : 印刷ダイアログを表示&印刷範囲の変更
今回は、JavaScriptでボタンを押した際に印刷画面(印刷ダイアログ)を呼び出せるようにしたいと思います。印刷する範囲を指定する方法(印刷用CSSを記述する方法)と詳細設定の初期値を変更する方法もあわせてご紹介していきます。
JavaScript [ JavaScript 基礎 ] スプレッド構文の使い方 & 注意点
本記事では、JavaScript・TypeScriptで配列やオブジェクト内の要素を操作したり、新しい配列を作成する際に便利なスプレッド構文についての使い方と注意点をまとめております。配列の複製から分割代入までスプレッド構文の基本的な扱い方を理解する上での参考になればと思います。
JavaScript [ JavaScript 基礎 ] Null合体演算子の使い方 & 注意点
本記事では、JavaScript・TypeScriptの構文であり、&&(AND)や||(OR)と同じ論理演算子の1種である「Null合体演算子」の使い方や注意点について、ご紹介しております。if文やswitch文など条件分岐に適した他の構文と比較したサンプルコードも載せてますので、参考になればと思います。
JavaScript [ JavaScript : DOM操作 ] マウスオーバーイベントで、HTML要素の値を変化させる方法
本記事では、JavaScriptにおけるDOM操作の一つであるマウスオーバーイベントの活用方法(mousedown, mouseup, mouseenter....)の解説に加えまして、JSコードにて、HTML要素の...
JavaScript [ JavaScript : 基礎学習講座 Ⅲ ] 条件分岐 (if, switch)
本記事では、JavaScriptの構文の一つである条件分岐(if文, switch文)を使用し、条件に応じた処理を行う方法に加えまして、途中で処理を抜ける時などに使用するbreak文の使い方と注意点までサンプルコードを用いてご紹介させて頂きます。
JavaScript [ JavaScript : 基礎習得講座 II ] 変数/定数と四則演算
本記事では、JavaScriptのプログラム上でデータを格納する「変数・定数」の定義方法から四則演算の書き方までをご紹介させて頂きます。
サンプルコードも掲載させて頂いておりますので、学習や使い方の参考にし...
JavaScript [ JavaScript : 基礎習得講座 I ] JSファイルの作成/実行方法
本記事では、JavaScriptとはどのようなプログラミング言語であるか / JavaScriptファイル(.js)の作成からファイルの実行方法, デベロッパーツールの活用までをご紹介させて頂きます。サンプルコードや...
React.js 【React hooks】useEffectの使い方 – 第二引数の活用例もご紹介！
React hooksの一つであるuseEffectについてご紹介をしてます。主な内容としては、基本的な記述方法(コードの書き方)から依存配列(第二引数)の使い方までサンプルコードを用いて、まとめてます。
React.js react has no exported member { hooksの関数名 } と表示された時の対処法
React × TypeScript × Next.jsで開発を行う上で、発生したエラー(react has no exported member { hooksの関数名 })の対処法についてご紹介しています。必要なライブラリを導入することで解決できる可能性が高いです。
React.js [ @react-google-maps/api ] Google Mapの表示やマーカーの表示/カスタマイズを行う方法
React, Next.jsを用いたプロジェクトでGoogle Map APIを使用したGoogle Mapの表示/カスタマイズを行いたい時に便利なパッケージ(@react-google-maps/api)をご紹介してます。
本記事では、Google Mapの表示からマーカーの配置及びカスタマイズ方法についてまとめています。
React.js [ React ] react-cookieを使用し、cookieでデータの保存/取得/削除を行う方法
今回は、Reactを使用したフロントエンド開発において、データをcookieへ保存するだけでなく、画面上でcookie上に保存したデータを取得したり、cookie上のデータを削除する方法についてサンプルコードを用いて解説しています。また本記事は、react-cookieを使用した方法になります。
React.js [ React hooks ] useRefの使い方・サンプルコード (useStateとの違いも解説！)
本記事では、React hooksの一つである「useRef」についての使い方からuseState・useReducerとの違いまで解説しております。また、「カウンター機能」と「ref属性の活用」の2本立てでサンプルコードを掲載しておりますので、学習の参考にしてもらえたらと思います。
React.js [React] Marerial UI – Material Iconsを導入する方法 + 使い方
本記事では、Marerial UIで用意されているMaterial IconsをReactの環境で導入する手順についてご紹介してます。使い方についてもサンプルコードを用いて併せて解説してますので、参考になれば嬉しいです。TypeScriptを使用されている場合でも同様のやり方で導入可能です。
React.js [React] Sass(.scss)を導入する方法 (検証用のサンプルコードあり)
本記事では、Reactの環境へSassを導入する方法についてご紹介してます。
これからReactを学んでいかれる方やReactのバージョンを更新するうえで、Sassを適切に使っていきたい方にオススメの内容になっておりますので参考になれば嬉しいです。
React.js React + JavaScript – 開発環境構築方法(Windows & Mac)
これからReactの学習を始めていかれる方必見！本記事では、WindowsもしくはMacのPC上にReact + JavaScriptの開発環境構築をする方法についてご紹介しております。Node.jsの準備から動作の確認までまとめてますので参考になれば嬉しいです。
React.js 【React hooks】useContextの基礎を習得 – カウンターアプリ
useContextを使うことで異なる階層であってもデータの共有が出来るようになるため、コンポーネント間で同じデータ(State)を共有したい場合や機能や用途に応じてデータの管理をしたい時にとても便利です。また、propsの受け渡しも最小限に抑えることが出来る点に加え、useReducerとあわせて使用されることが多い関数になります。
React.js 【React hooks】useReducerの基礎を習得 – カウンターアプリ
本記事では、React hooksで提供されている関数であるuseReducerの使い方やuseStateの主な違いなどを解説しております。実際にuseStateを用いて作成したカウンターアプリをuseReducerで書き換えますので、処理の流れや具体的なコードの書き方を理解するきっかけになればと思います。
WordPress AddQuickTagでアドセンス広告用のクイックタグを作成する方法
WordPressのプラグインの一つである「 AddQuickTag」を使って、アドセンス広告のタグを作成する手順をご紹介します。タグを作成することで、ワンクリックで配置したい箇所に広告を設定することが可能になります。作業の効率化にも繋がりますので、同じブロガーとしてもオススメです！
WordPress cocoon : タブに関するCSS(背景色・文字色・枠線・文字のフォント)をカスタマイズする方法
WordPressの無料テーマの中でも多くの方に使用されている「cocoon(コクーン)」で、フロントページの表示形式を「タブ一覧」に設定した際のタブの背景色・文字色・枠線・文字のフォントをカスタマイズする方法についてご紹介してます。実際に操作している動画も掲載してますので、参考になればと思います。
WordPress Local by fly wheel インストール & サイト作成〜言語変更方法
WordPressでWeb制作を行っていくためには、PC上で作業を行うためのローカル環境を準備する必要があります。そこで、本記事では、ローカル環境として使用するLocalbyflywheelのインストールとサイトの作成までの手順をご紹介させて頂いております。
WordPress [ WordPress 既存テーマ ] 検証ツールを用いて、CSSを独自でカスタマイズする方法
本記事では、WordPressの既存テーマを用いたコードカスタマイズ(今回は主にCSSデザイン)の際に、ブラウザの検証ツールを用いて現状で要素に割り当てられているCSSを確認/修正していく方法を各種ブラウザ( Safari , Google Chrome ...)における検証ツールの開き方に加えてご紹介させて頂いております。
WordPress wpForms : 「フォームを保存中に問題が発生しました」と表示される際の対処法
本記事では、WordPressのプラグインの一つでフォームの作成などで広く活用されているwpFormsのエラー対策についてご紹介させて頂いております。フォームの保存を行った際に「フォームも保存中に問題が発生しました」とエラーが表示される際の確認事項と実際に解決した例についてまとめておりますので、参考になれば幸いです。
Webサイト制作 SSL化されてない?? このサイトへの接続は保護されていませんと表示される時の対処法
本記事では、レンタルサーバーにアップしたサイトなどをSSL化した状態で、公開した際にURLがhttp://から始まり、「このサイトへの接続は保護されていません」と言われてしまう時の対処法について、ご紹介させて頂いております。 内容としては、編集すべきファイル(.htaccess)と追加記述内容についてになります。
WordPress Welcart Basic : トップページに追加した商品が表示されるようにする方法
本記事では、ECサイト制作にて多く用いられているWelcartの無料テーマ「Welcart Basic」を利用する上でトップページに追加した商品を表示させるための方法について、商品の追加方法 / プラグインのインストールなどもあわせて、ご紹介させて頂いております。
WordPress ブログ記事や固定ページでオシャレなポップアップ表示機能を実装 : Easy Fancy Box
WordPressを用いていく上で、必ず必須ではないものの、様々な機能の実装からSEO対策, エディタの変更まで幅広く活用されているプラグインですが、今回は、その中でも実装するうえで、通常であればJavaScript...
WordPress [ Sydney : 初心者必見 ] 子テーマの作成方法と重要性を理解する！(WordPress)
本記事上で使用するテーマは、Sydneyです。他のテーマでも子テーマの作成についても以下の手順で行って頂くことが可能ですが、カスタマイズ方法については、Sydneyのみに対応しております内容ですので、ご了承して頂ければと思います。
...