プログラミングをする上で、避けては通れない「パスの設定」。今回はそんなパスの設定の仕方についてHTMLを用いて解説していきます。 絶対パスとは?? 「絶対パス」とは、画像や動画・音声ファイルなどの各種ファイルへ参照する際 […]
Web技術に関するハウツーブログになります。 運営者が過去4年間で実際に現場で経験した内容から新しくキャッチアップしていく中で気付いたものまで、幅広く記事としてまとめ、公開しております。
東京にて、2018年~2020年 Java・PHP関連のプロジェクトへフロントエンドメインで参画。2020年以降は、地元福島へ戻り、リモートで 侍テラコヤで講師として3年間活動してきた実績を基に、個人でのレッスン対応もしてますので、気軽にお問い合わせください。
|
https://twitter.com/utubou_tech |
---|---|
|
https://www.instagram.com/s_suke55/ |
【React hooks】useReducerの基礎を習得 – カウンターアプリ
※ 本記事は、以下の記事の続きになります。 【React hooks】useState・propsの基礎を習得(カウンターアプリ作成) 【React hooks】useState・propsの基礎を習得 - カウンターア […]
【React hooks】useState・propsの基礎を習得 – カウンターアプリ
本記事内では、React hooksで提供される関数の一つである「useState」とpropsの基礎的な使い方をカウンターアプリを作成しながら解説していきます。 加えて、公式ページの内容にも少し触れていきたいと思います […]
nodebrewでNode.jsのバージョンが確認出来ない際の対処法
nodebrewは、Node.jsのバージョンを管理できるもので、プロジェクトに応じて、Nodeのバージョンの切り替えをコマンドを簡単に行うことができる点は、とても有難いものです。 本記事では、インストール済みであるにも […]
【Mac】Reactの新規アプリ作成時に発生したnpmエラーへの対処方法
昨日までは、いつも通りNode.jsのnpmコマンドを実行できていたのに、、急にnpmコマンドのエラーが発生すると萎えますよね.. 基本的には、Pathがおかしいかnode.jsのバージョンが低いことが原因ではありますが […]
「ブログリーダー」を活用して、ウツボウさんをフォローしませんか?
プログラミングをする上で、避けては通れない「パスの設定」。今回はそんなパスの設定の仕方についてHTMLを用いて解説していきます。 絶対パスとは?? 「絶対パス」とは、画像や動画・音声ファイルなどの各種ファイルへ参照する際 […]
Googleスプレッドシートってなんだろう.. ん?どうしたの?? 実は、Excel以外で資料を作成出来るサービスとかを探してて、Googleスプレッドシートっていうのがあることを知ったんだけどあまりよく分からなくて&# […]
React hooksの一つであるuseEffectについてご紹介をしてます。主な内容としては、基本的な記述方法(コードの書き方)から依存配列(第二引数)の使い方までサンプルコードを用いて、まとめてます。
React hooksの一つであるuseEffectについてご紹介をしてます。主な内容としては、基本的な記述方法(コードの書き方)から依存配列(第二引数)の使い方までサンプルコードを用いて、まとめてます。
React × TypeScript × Next.jsで開発を行う上で、発生したエラー(react has no exported member { hooksの関数名 })の対処法についてご紹介しています。必要なライブラリを導入することで解決できる可能性が高いです。
本記事では、JavaScriptで複数オブジェクトが格納されている配列から特定のオブジェクトを取り出す方法、オブジェクトから特定の値のみを取り出す方法、オブジェクトから取り出した特定の値を変更(更新)する方法についてご紹介してます。(mapメソッドとfilterメソッドを使用)
本記事では、JavaScriptで複数オブジェクトが格納されている配列から特定のオブジェクトを取り出す方法、オブジェクトから特定の値のみを取り出す方法、オブジェクトから取り出した特定の値を変更(更新)する方法についてご紹介してます。(mapメソッドとfilterメソッドを使用)
React, Next.jsを用いたプロジェクトでGoogle Map APIを使用したGoogle Mapの表示/カスタマイズを行いたい時に便利なパッケージ(@react-google-maps/api)をご紹介してます。 本記事では、Google Mapの表示からマーカーの配置及びカスタマイズ方法についてまとめています。
今回は、Reactを使用したフロントエンド開発において、データをcookieへ保存するだけでなく、画面上でcookie上に保存したデータを取得したり、cookie上のデータを削除する方法についてサンプルコードを用いて解説しています。また本記事は、react-cookieを使用した方法になります。
今回は、JavaScriptを用いて、Cookie(クッキー)にデータを保存する方法(document.cookie)と保存したデータを参照する方法についてサンプルコードを用いながら解説しています。デベロッパーツール上でのCookieデータの確認方法も載せてます。
今回は、JSON形式の文字列をJavaScriptのオブジェクト、JavaScriptのオブジェクトをJSON形式の文字列に変換する方法(parseメソッド, stringifyメソッドの使い方)についてサンプルコードを用いながらご紹介してます。
今回は、印刷画面(印刷ダイアログ)をJavaScriptでボタンを押した際に呼び出せるようにしたいと思います。印刷する範囲を指定する方法(印刷用CSSを記述する方法)と詳細設定の初期値を変更する方法もあわせてご紹介していきます。
本記事は、Postmanの導入からAPIテスト(エンドポイントが正常に起動しているか確認)をする方法(GET・POST・PUT・DELETE)までを体験できる内容となっております。使用するAPIは、JSONPlaceholderになります。
本記事では、Next.jsの環境でTailwind CSSを導入するまでの手順と基本的な使い方について簡単に解説してます。 代表的なCSSのフレームワークとして、BootstrapやBulma, MUIなどが挙げられますが、Tailwind CSSもその一つです。スタイルの変更をHTML上で完結, 開発速度の向上を目指せるなどのメリットをもつフレームワークになります。
代表的なCSSのフレームワークとして、BootstrapやBulma, MUIなどが挙げられますが、最近では、Tailwind CSSを導入するプロジェクトも増えている印象を受けます。 そこで、Next.jsの環境へTa […]
本記事では、laravel9.xの環境でバリデーション(エラーメッセージ)を日本語化する方法について、「コマンド」と「手動」の2パターンで行う方法についてご紹介しております。また、エラーメッセージの編集方法やカスタムバリデーション属性名の設定についても説明してますので、参考になればと思います。
本記事では、React.jsのプロジェクト内でTypeScriptでコーディングをする際に、配列・オブジェクトでどのように型定義をすれば良いのか解説してます。サンプルコードも載せておりますので、学習・開発の参考になればと思います。
本記事では、React hooksの一つである「useRef」についての使い方からuseState・useReducerとの違いまで解説しております。また、「カウンター機能」と「ref属性の活用」の2本立てでサンプルコードを掲載しておりますので、学習の参考にしてもらえたらと思います。
配列・オブジェクト内の要素を用いて、様々な操作を行うことが出来る「スプレッド構文」ですが、私自身もJavaScriptやTypeScriptでコードを書く際に使ってましたが、React.jsを使うようになってからすごく頻 […]
本記事では、JavaScriptの構文であり、&&(AND)や (OR)と同じ論理演算子の1種である「Null合体演算子」の使い方や注意点について、ご紹介しております。if文やswitch文など条件分岐に適した他の構文と比較したサンプルコードも載せてますので、参考になればと思います。
代表的なCSSのフレームワークとして、BootstrapやBulma, MUIなどが挙げられますが、最近では、Tailwind CSSを導入するプロジェクトも増えている印象を受けます。 そこで、Next.jsの環境へTa […]
本記事では、Next.jsの環境でTailwind CSSを導入するまでの手順と基本的な使い方について簡単に解説してます。 代表的なCSSのフレームワークとして、BootstrapやBulma, MUIなどが挙げられますが、Tailwind CSSもその一つです。スタイルの変更をHTML上で完結, 開発速度の向上を目指せるなどのメリットをもつフレームワークになります。
本記事では、laravel9.xの環境でバリデーション(エラーメッセージ)を日本語化する方法について、「コマンド」と「手動」の2パターンで行う方法についてご紹介しております。また、エラーメッセージの編集方法やカスタムバリデーション属性名の設定についても説明してますので、参考になればと思います。
本記事では、React.jsのプロジェクト内でTypeScriptでコーディングをする際に、配列・オブジェクトでどのように型定義をすれば良いのか解説してます。サンプルコードも載せておりますので、学習・開発の参考になればと思います。
本記事では、React hooksの一つである「useRef」についての使い方からuseState・useReducerとの違いまで解説しております。また、「カウンター機能」と「ref属性の活用」の2本立てでサンプルコードを掲載しておりますので、学習の参考にしてもらえたらと思います。
配列・オブジェクト内の要素を用いて、様々な操作を行うことが出来る「スプレッド構文」ですが、私自身もJavaScriptやTypeScriptでコードを書く際に使ってましたが、React.jsを使うようになってからすごく頻 […]
本記事では、JavaScriptの構文であり、&&(AND)や (OR)と同じ論理演算子の1種である「Null合体演算子」の使い方や注意点について、ご紹介しております。if文やswitch文など条件分岐に適した他の構文と比較したサンプルコードも載せてますので、参考になればと思います。
Reactの現場でもよく用いられているCSSフレームワークは、BootstrapやBulma…など, UIフレームワークといえば、 Chakra UIやMarerial UIが挙げられます。 今回は、その中で […]
本記事では、Reactの環境へSassを導入する方法についてご紹介してます。 現在のReactのバージョンですと、これまでの方法が非推奨となっているので、これからReactを学んでいかれる方やReactのバージョンを更新するうえで、Sassを適切に使っていきたい方にオススメの内容になっておりますので参考になれば嬉しいです。
JavaScriptのライブラリとして、React.jsが2013年に公開されるようになってから現在まで9年以上が経過しましたが、今や多くの現場で使用されているライブラリとなりました。 しかし、まだ扱える人材がJavaや […]
※ 本記事は、以下の記事の続きになります。 【React hooks】useReducerの基礎を習得 – カウンターアプリ作成 【React hooks】useReducerの基礎を習得 - カウンターアプ […]
※ 本記事は、以下の記事の続きになります。 【React hooks】useState・propsの基礎を習得(カウンターアプリ作成) 【React hooks】useState・propsの基礎を習得 - カウンターア […]
本記事内では、React hooksで提供される関数の一つである「useState」とpropsの基礎的な使い方をカウンターアプリを作成しながら解説していきます。 加えて、公式ページの内容にも少し触れていきたいと思います […]
nodebrewは、Node.jsのバージョンを管理できるもので、プロジェクトに応じて、Nodeのバージョンの切り替えをコマンドを簡単に行うことができる点は、とても有難いものです。 本記事では、インストール済みであるにも […]