プログラミング基礎 : 絶対パス・相対パスの書き方(設定例もいくつかご紹介)

プログラミングをする上で、避けては通れない「パスの設定」。今回はそんなパスの設定の仕方についてHTMLを用いて解説していきます。 絶対パスとは?? 「絶対パス」とは、画像や動画・音声ファイルなどの各種ファイルへ参照する際 […]

第1回 Googleスプレッドシートの開き方＆ファイル名の変更方法

Googleスプレッドシートってなんだろう.. ん？どうしたの?? 実は、Excel以外で資料を作成出来るサービスとかを探してて、Googleスプレッドシートっていうのがあることを知ったんだけどあまりよく分からなくて&# […]

【React hooks】useEffectの使い方 – 第二引数の活用例もご紹介！

React hooksの一つであるuseEffectについてご紹介をしてます。主な内容としては、基本的な記述方法(コードの書き方)から依存配列(第二引数)の使い方までサンプルコードを用いて、まとめてます。

【React hooks】useEffectの使い方 – 第二引数の活用例もご紹介！

React hooksの一つであるuseEffectについてご紹介をしてます。主な内容としては、基本的な記述方法(コードの書き方)から依存配列(第二引数)の使い方までサンプルコードを用いて、まとめてます。

react has no exported member { hooksの関数名 } と表示された時の対処法

React × TypeScript × Next.jsで開発を行う上で、発生したエラー(react has no exported member { hooksの関数名 })の対処法についてご紹介しています。必要なライブラリを導入することで解決できる可能性が高いです。

[ JavaScript 基礎 ] 配列内のオブジェクトを操作する(値の取得/値の更新)

本記事では、JavaScriptで複数オブジェクトが格納されている配列から特定のオブジェクトを取り出す方法、オブジェクトから特定の値のみを取り出す方法、オブジェクトから取り出した特定の値を変更(更新)する方法についてご紹介してます。(mapメソッドとfilterメソッドを使用)

[ JavaScript 基礎 ] 配列内のオブジェクトを操作する(値の取得/値の更新)

本記事では、JavaScriptで複数オブジェクトが格納されている配列から特定のオブジェクトを取り出す方法、オブジェクトから特定の値のみを取り出す方法、オブジェクトから取り出した特定の値を変更(更新)する方法についてご紹介してます。(mapメソッドとfilterメソッドを使用)

[ @react-google-maps/api ] Google Mapの表示やマーカーの表示/カスタマイズを行う方法

React, Next.jsを用いたプロジェクトでGoogle Map APIを使用したGoogle Mapの表示/カスタマイズを行いたい時に便利なパッケージ(@react-google-maps/api)をご紹介してます。 本記事では、Google Mapの表示からマーカーの配置及びカスタマイズ方法についてまとめています。

[ React 基礎 ] react-cookieを使用し、cookieでデータの保存/取得/削除を行う方法

今回は、Reactを使用したフロントエンド開発において、データをcookieへ保存するだけでなく、画面上でcookie上に保存したデータを取得したり、cookie上のデータを削除する方法についてサンプルコードを用いて解説しています。また本記事は、react-cookieを使用した方法になります。

[ JavaScript 基礎 ] Cookieにデータを保存 / データの取得(参照)

今回は、JavaScriptを用いて、Cookie(クッキー)にデータを保存する方法(document.cookie)と保存したデータを参照する方法についてサンプルコードを用いながら解説しています。デベロッパーツール上でのCookieデータの確認方法も載せてます。

[ JavaScript 基礎 ] parseメソッド, stringifyメソッドの使い方

今回は、JSON形式の文字列をJavaScriptのオブジェクト、JavaScriptのオブジェクトをJSON形式の文字列に変換する方法(parseメソッド, stringifyメソッドの使い方)についてサンプルコードを用いながらご紹介してます。

[ JavaScript 基礎 ] window.print : 印刷ダイアログを表示&印刷範囲の変更

今回は、印刷画面(印刷ダイアログ)をJavaScriptでボタンを押した際に呼び出せるようにしたいと思います。印刷する範囲を指定する方法(印刷用CSSを記述する方法)と詳細設定の初期値を変更する方法もあわせてご紹介していきます。

Postman : 導入～基本的な使い方(APIテスト)

本記事は、Postmanの導入からAPIテスト(エンドポイントが正常に起動しているか確認)をする方法(GET・POST・PUT・DELETE)までを体験できる内容となっております。使用するAPIは、JSONPlaceholderになります。

Next.js + Tailwind CSS : 導入及び使い方

本記事では、Next.jsの環境でTailwind CSSを導入するまでの手順と基本的な使い方について簡単に解説してます。 代表的なCSSのフレームワークとして、BootstrapやBulma, MUIなどが挙げられますが、Tailwind CSSもその一つです。スタイルの変更をHTML上で完結, 開発速度の向上を目指せるなどのメリットをもつフレームワークになります。

Next.js + Tailwind CSS : 導入及び使い方

代表的なCSSのフレームワークとして、BootstrapやBulma, MUIなどが挙げられますが、最近では、Tailwind CSSを導入するプロジェクトも増えている印象を受けます。 そこで、Next.jsの環境へTa […]

laravel9. : バリデーション(エラーメッセージ)を日本語化する方法

本記事では、laravel9.xの環境でバリデーション(エラーメッセージ)を日本語化する方法について、「コマンド」と「手動」の2パターンで行う方法についてご紹介しております。また、エラーメッセージの編集方法やカスタムバリデーション属性名の設定についても説明してますので、参考になればと思います。

[ Reactで学ぶ ] TypeScript 基礎 : 配列・オブジェクトの型定義方法

本記事では、React.jsのプロジェクト内でTypeScriptでコーディングをする際に、配列・オブジェクトでどのように型定義をすれば良いのか解説してます。サンプルコードも載せておりますので、学習・開発の参考になればと思います。

[ React hooks ] useRefの使い方・サンプルコード (useStateとの違いも解説！)

本記事では、React hooksの一つである「useRef」についての使い方からuseState・useReducerとの違いまで解説しております。また、「カウンター機能」と「ref属性の活用」の2本立てでサンプルコードを掲載しておりますので、学習の参考にしてもらえたらと思います。

[ JavaScript 基礎 ] スプレッド構文(演算子)の使い方・注意点

配列・オブジェクト内の要素を用いて、様々な操作を行うことが出来る「スプレッド構文」ですが、私自身もJavaScriptやTypeScriptでコードを書く際に使ってましたが、React.jsを使うようになってからすごく頻 […]

[ JavaScript 基礎 ] Null合体演算子の使い方 & 注意点

本記事では、JavaScriptの構文であり、&&(AND)や (OR)と同じ論理演算子の1種である「Null合体演算子」の使い方や注意点について、ご紹介しております。if文やswitch文など条件分岐に適した他の構文と比較したサンプルコードも載せてますので、参考になればと思います。

[React] Marerial UI – Material Iconsを導入する方法 + 使い方

Reactの現場でもよく用いられているCSSフレームワークは、BootstrapやBulma…など, UIフレームワークといえば、 Chakra UIやMarerial UIが挙げられます。 今回は、その中で […]

• #React
• #Javascript
• #Material-UI
• #UI
• #HTML&CSS
• #JSX

[React] Sass(.scss)を導入する方法 (検証用のサンプルコードあり)

本記事では、Reactの環境へSassを導入する方法についてご紹介してます。 現在のReactのバージョンですと、これまでの方法が非推奨となっているので、これからReactを学んでいかれる方やReactのバージョンを更新するうえで、Sassを適切に使っていきたい方にオススメの内容になっておりますので参考になれば嬉しいです。

• #React
• #HTML&CSS
• #Javascript
• #JSX
• #scss
• #sass

React + JavaScript – 開発環境構築方法(Windows & Mac)

JavaScriptのライブラリとして、React.jsが2013年に公開されるようになってから現在まで9年以上が経過しましたが、今や多くの現場で使用されているライブラリとなりました。 しかし、まだ扱える人材がJavaや […]

• #React
• #Javascript
• #JSX
• #HTML&CSS
• #環境構築
• #windows
• #Mac

【React hooks】useContextの基礎を習得 – カウンターアプリ

※ 本記事は、以下の記事の続きになります。 【React hooks】useReducerの基礎を習得 – カウンターアプリ作成 【React hooks】useReducerの基礎を習得 - カウンターアプ […]

• #HTML&CSS
• #Javascript
• #JSX
• #React
• #カウンター
• #useContext
• #コンポーネント
• #props

【React hooks】useReducerの基礎を習得 – カウンターアプリ

※ 本記事は、以下の記事の続きになります。 【React hooks】useState・propsの基礎を習得(カウンターアプリ作成) 【React hooks】useState・propsの基礎を習得 - カウンターア […]

• #useReducer
• #HTML&CSS
• #Javascript
• #JSX
• #React
• #カウンター
• #コンポーネント
• #props

【React hooks】useState・propsの基礎を習得 – カウンターアプリ

本記事内では、React hooksで提供される関数の一つである「useState」とpropsの基礎的な使い方をカウンターアプリを作成しながら解説していきます。 加えて、公式ページの内容にも少し触れていきたいと思います […]

• #HTML&CSS
• #Javascript
• #JSX
• #React
• #カウンター
• #コンポーネント
• #useState
• #props

nodebrewでNode.jsのバージョンが確認出来ない際の対処法

nodebrewは、Node.jsのバージョンを管理できるもので、プロジェクトに応じて、Nodeのバージョンの切り替えをコマンドを簡単に行うことができる点は、とても有難いものです。 本記事では、インストール済みであるにも […]

• #HTML&CSS
• #Javascript
• #Node.js
• #nodebrew
• #Mac
• #バージョン確認

【Mac】Reactの新規アプリ作成時に発生したnpmエラーへの対処方法

昨日までは、いつも通りNode.jsのnpmコマンドを実行できていたのに、、急にnpmコマンドのエラーが発生すると萎えますよね.. 基本的には、Pathがおかしいかnode.jsのバージョンが低いことが原因ではありますが […]

• #Javascript
• #Node.js
• #npm
• #Mac
• #nodebrew

AddQuickTagでアドセンス広告用のクイックタグを作成する方法

ブログサイトの運営で収益を目指していきたいのであれば、必ず合格をもらっておきたいGoogle AdSense(アドセンス)ですが、自分で好きな位置に広告を置きたいときに、コードを記事に毎回セットするの大変ですよね&#82 […]

cocoon : タブに関するCSS(背景色・文字色・枠線・文字のフォント)をカスタマイズする方法

WordPressの無料テーマの中でも多くの方に使用されている「cocoon(こくーん)」で、フロントページの表示形式を「タブ一覧」に設定した際、背景色や文字(種類、色)・枠線をどうしたら変更出来るのか、CSSのどの部分 […]

• #Cocoon コクーン
• #cocoon
• #カスタマイズ

【WordPress : オリジナルテーマでサイト制作】 第1回 オリジナルテーマ作成

本記事よりWordPress上にオリジナルテーマを作成し、完全オリジナルのWebサイトを制作したいと考えてる方向けにレスポンシブ対応のサイトが出来るまでの流れを複数に分けてご紹介させて頂きます。 第1回では、オリジナルテーマの作成手順になりますので、参考になれば幸いです。

React.js : create-react-appでアプリを作成することが出来ない場合の解決法

本記事では、React.jsにて、create-react-appコマンドを用いて、新規のアプリを作成しようとした際に発生したエラーの解消法について、何故エラーが発生したのかも含めてご紹介させて頂いております。 特に、少し古い記事などを参考に特定のバージョンでReactの環境を作った方が遭遇しやすいエラーになります。

• #React
• #create-react-app
• #環境構築
• #エラー

Local by fly wheel インストール & サイト作成〜言語変更方法

WordPressでWeb制作を行っていくためには、PC上で作業を行うためのローカル環境を準備する必要があります。そこで、本記事では、ローカル環境として使用するLocalbyflywheelのインストールとサイトの作成までの手順をご紹介させて頂いております。

CommandError: ‘アプリ名’ is not a valid app name. エラー対処法

命名規則とは、名前をつける際のルールになりますが、アプリ開発を行う上でも存在します。本記事では、PyhtonのWebフレームワークであるDjangoでアプリを作る際に発生した「CommandError: '○○○' is not a valid app name. 」というエラーの対処法をご紹介させて頂いております。

AWS EC2インスタンスへSSH接続する方法 ( Mac )

示された手順通りに進めても、上手くいかないのは、困りますよね...。 そんな経験も交え、本記事では、AWSにてEC2インスタンス作成を行った際に、PC(Mac)からSSH接続を行う方法をご紹介させて頂いております。

• #AWS
• #SSH
• #EC2インスタンス
• #Mac

[ Django ] コマンドラインからプロジェクトの作成 & サーバーの起動を行う方法

本記事では、PythonのWebフレームワークであるDjangoにおいて、新規のプロジェクトの作成からサーバーの起動を行う手順をご紹介させて頂いております。 Windows , Mac限らず同様の方法で行うことが出来ますので、Djangoで開発を行う際は、覚えるようにしましょう。

[ Django ] TypeError at ✖︎✖︎ : argument 1 must be str, not PosixPath 対処法

本記事では、PythonのWebフレームワークであるDjangoの開発を行う上で、TypeError(argument 1 must be str, not PosixPath)が発生した際の対処法についてご紹介しております。一箇所修正するだけで解消できますので、サクッと修正してしまいましょう。

Djangoの開発環境を準備する手順 (Anaconda未使用)

本記事では、MacでのPyhtonのWebフレームワークであるDjangoの開発環境準備の手順をご紹介させて頂いております。 VScodeの準備及びPyhton3のインストールも併せて、載せておりますので、参考になればと思います。

Mac : Python3のインストール手順 ( VSCodeでバージョン確認含む )

本記事では、MacのPC上で、Pyhton3をインストールする方法についてご紹介させて頂いております。コマンドの入力/確認などについては、VSCode(Visual Studio Code)を使用しております。Macでは標準でPython2は入っておりますが、バージョンを3にあげておきましょう。

• #Python3
• #インストール
• #Mac

シニア層よりも若年層の方がオンライン会議のマナーを意識している傾向が強い!?

スポンサーリンク オンライン会議のマナー ざっくりオンライン会議におけるマナーといえば以下のものが挙げられます。 ここで挙げているものはあくまで最低限なので、上司が話している際にメモを取るなど、とある状況下...