-
- 登録ID
- 2095055
-
- タイトル
なぞてつのブログ
-
- 紹介文
- 関西の鉄道好き（関東在住)です
記事一覧
再読込
-
- プログラミング基礎 : 絶対パス・相対パスの書き方(設定例もいくつかご紹介) ウツボウTECH
- プログラミングをする上で、避けては通れない「パスの設定」。今回はそんなパスの設定の仕方についてHTMLを用いて解説していきます。 絶対パスとは?? 「絶対パス」とは、画像や動画・音声ファイルなどの各種ファイルへ参照する際に、そのファイルがどこに位置しているかをルートディレクトリか…
ウツボウTECH - プログラミング基礎 : 絶対パス・相対パスの書き方(設定例もいくつかご紹介)
-
- Googleスプレッドシートの開き方＆ファイル名の変更方法 ウツボウTECH
- Googleスプレッドシートってなんだろう.. ん？どうしたの?? 実は、Excel以外で資料を作成出来るサービスとかを探してて、Googleスプレッドシートっていうのがあることを知ったんだけどあまりよく分からなくて…汗 あっそうなんだ！ Googleスプレッドシートは、あの有…
ウツボウTECH - Googleスプレッドシートの開き方＆ファイル名の変更方法
-
- 【React hooks】useEffectの使い方 – 第二引数の活用例もご紹介！ ウツボウTECH
- Reactでプログラムを書いていく中で、以下のように思うことがありませんか?? 何かしらの値が更新された際に特定の処理が並行的に行われるようにしたい とある処理をコンポーネントが生成された際に1度だけ呼び出すようにしたい そんな時に役に立つReactのhooksを今回は、ご紹介し…
ウツボウTECH - 【React hooks】useEffectの使い方 – 第二引数の活用例もご紹介！
-
- react has no exported member { hooksの関数名 } と表示された時の対処法 ウツボウTECH
- 今回は、React × Next.js × TypeScriptを用いた開発を行う上で発生したエラーの解決法(対処法)について、ご紹介します。 発生したエラーとその背景 フロントに関する作業用のブランチをローカルにクローンし、作業を始めようとしたら使いたいhooks(関数)が読…
ウツボウTECH - react has no exported member { hooksの関数名 } と表示された時の対処法
-
- [ JavaScript 基礎 ] 配列内のオブジェクトを操作する(値の取得/値の更新) ウツボウTECH
- プログラムを書いていると、次のようなコードを見ることもあるかもしれません。 let data = [ { id : 1, name : "坂東武" , age : 67 }, { id : 2, name : "橋田仁平" , age : 89 }, { id : 3, name…
ウツボウTECH - [ JavaScript 基礎 ] 配列内のオブジェクトを操作する(値の取得/値の更新)
-
- [ JavaScript 基礎 ] 配列内のオブジェクトを操作する(値の取得/値の更新) ウツボウTECH
- プログラムを書いていると、次のようなコードを見ることもあるかもしれません。 let data = [ { id : 1, name : "坂東武" , age : 67 }, { id : 2, name : "橋田仁平" , age : 89 }, { id : 3, name…
ウツボウTECH - [ JavaScript 基礎 ] 配列内のオブジェクトを操作する(値の取得/値の更新)
-
- [ @react-google-maps/api ] Google Mapの表示やマーカーの表示/カスタマイズを行う方法 ウツボウTECH
- Reactを用いたフロントエンド開発において、Google Map APIを活用したGoogle Mapの配置を行うこともあるかと思います。 しかし、Google Map APIのアクセスキーを取得するまでは良いですが、、公式で公開されているようにJavaScriptで記述・何か…
ウツボウTECH - [ @react-google-maps/api ] Google Mapの表示やマーカーの表示/カスタマイズを行う方法
-
- [ React ] react-cookieを使用し、cookieでデータの保存/取得/削除を行う方法 ウツボウTECH
- 今回は、Reactを使用したフロントエンド開発において、データをcookieへ保存するだけでなく、画面上でcookie上に保存したデータを取得したり、cookie上のデータを削除する方法についてサンプルコードを用いて、解説していきます。 React + JavaScriptの環境…
ウツボウTECH - [ React ] react-cookieを使用し、cookieでデータの保存/取得/削除を行う方法
-
- [ JavaScript 基礎 ] Cookieにデータを保存 / データの取得(参照) ウツボウTECH
- ネットサーフィンをよくされる方は、Cookie(クッキー)というワードを聞くことも多いのではないかと思います。 Cookieとは、訪問したWebサイト(Youtubeや会社のホームページなど)から私たちが使用しているブラウザ(Google chromeなど)に保存されるデータのこ…
ウツボウTECH - [ JavaScript 基礎 ] Cookieにデータを保存 / データの取得(参照)
-
- [ JavaScript 基礎 ] parseメソッド, stringifyメソッドの使い方 ウツボウTECH
- フロントエンドの現場では、APIからデータを取得し、データを画面に反映させるような作業があります。取得するデータは、JSON形式であることが殆どで、必要なデータのみを取り出して使用します。 このように単純に取得して、反映させるだけであれば分かりやすいのですが、JSON形式の文字列…
ウツボウTECH - [ JavaScript 基礎 ] parseメソッド, stringifyメソッドの使い方
-
- [ JavaScript 基礎 ] window.print : 印刷ダイアログを表示&印刷範囲の変更 ウツボウTECH
- 以下のような印刷用の画面を見たことはありませんか?? そう、ブラウザ上で表示しているページを印刷したいときによく見る印刷画面ですね！ ※ ブラウザ上で Winodwsなら「Ctrl + p」, Macなら「command + p」を押すことで表示させることが出来ます。 今回は、こ…
ウツボウTECH - [ JavaScript 基礎 ] window.print : 印刷ダイアログを表示&印刷範囲の変更
-
- Postman : 導入～基本的な使い方(APIテスト) ウツボウTECH
- Webアプリケーション・サービス等の開発を行う中で、ソフトウェア同士をつなぐ「API連携」という手法を用いることが多々あります。 メリットとしては、開発の効率化を実現することによるコストの削減やサービスの拡張が広がる点があげられます。 今回は、そんなAPI連携を行う上で、テストツ…
ウツボウTECH - Postman : 導入～基本的な使い方(APIテスト)
-
- Next.js + Tailwind CSS : 導入及び使い方 ウツボウTECH
- 代表的なCSSのフレームワークとして、BootstrapやBulma, MUIなどが挙げられますが、最近では、Tailwind CSSを導入するプロジェクトも増えている印象を受けます。 そこで、Next.jsの環境へTailwind CSSを導入する方法と使い方について、サンプル…
ウツボウTECH - Next.js + Tailwind CSS : 導入及び使い方
-
- Next.js + Tailwind CSS : 導入及び使い方 ウツボウTECH
- 代表的なCSSのフレームワークとして、BootstrapやBulma, MUIなどが挙げられますが、最近では、Tailwind CSSを導入するプロジェクトも増えている印象を受けます。 そこで、Next.jsの環境へTailwind CSSを導入する方法と使い方について、サンプル…
ウツボウTECH - Next.js + Tailwind CSS : 導入及び使い方
-
- laravel9. : バリデーション(エラーメッセージ)を日本語化する方法 ウツボウTECH
- 最近、バックエンドとしてlaravelを使う可能性が出たため、久々にlaravel9の開発環境でCRUDアプリを作成し、テキストの入力箇所にバリデーションの設定及びエラーメッセージの日本語化を行いました。 これまでは、手動で日本語化用のフォルダとファイルを作成し、日本語化を行って…
ウツボウTECH - laravel9. : バリデーション(エラーメッセージ)を日本語化する方法
-
- [ Reactで学ぶ ] TypeScript 基礎 : 配列・オブジェクトの型定義方法 ウツボウTECH
- React.jsを用いたフロントエンド開発に限らず、近頃では様々なプロジェクトで活用されている「TypeScript」ですが、型(type)を定義する際にどのように定義したらいいかわからない時あったりしますよね。。 そこで、今回は、React.jsのプロジェクト内でTypeScr…
ウツボウTECH - [ Reactで学ぶ ] TypeScript 基礎 : 配列・オブジェクトの型定義方法
-
- [ React hooks ] useRefの使い方・サンプルコード (useStateとの違いも解説！) ウツボウTECH
- Reactを活用したフロントエンド開発においてデータを保持する場合、「useState」や「useReducer」を用いる方法が頭に浮かんでくるかと思います。 しかし、方法としてはもう一つありまして、それが今回ご紹介する「useRef」になります。 本記事では、useStateや…
ウツボウTECH - [ React hooks ] useRefの使い方・サンプルコード (useStateとの違いも解説！)
-
- [ JavaScript 基礎 ] スプレッド構文の使い方 & 注意点 ウツボウTECH
- 配列・オブジェクト内の要素を用いて、様々な操作を行うことが出来る「スプレッド構文」ですが、私自身もJavaScriptやTypeScriptでコードを書く際に使ってましたが、React.jsを使うようになってからすごく頻繁に使うようになりました。 理由としては、参照する配列が同じ…
ウツボウTECH - [ JavaScript 基礎 ] スプレッド構文の使い方 & 注意点
-
- [ JavaScript 基礎 ] Null合体演算子の使い方 & 注意点 ウツボウTECH
- JavaScriptやTypeScriptで条件分岐というと、if文やswitch文などが挙げられますが、それらを使わずにより簡潔に条件分岐の処理を書くことも出来ます。 そこで今回は、その中でも「Null合体演算子」と呼ばれる比較演算子を用いて、条件分岐の処理を書く方法についてご…
ウツボウTECH - [ JavaScript 基礎 ] Null合体演算子の使い方 & 注意点
-
- [React] Marerial UI – Material Iconsを導入する方法 + 使い方 ウツボウTECH
- Reactの現場でもよく用いられているCSSフレームワークは、BootstrapやBulma…など, UIフレームワークといえば、 Chakra UIやMarerial UIが挙げられます。 今回は、その中でもMarerial UIで用意されているMaterial IconsをR…
ウツボウTECH - [React] Marerial UI – Material Iconsを導入する方法 + 使い方
-
- [React] Sass(.scss)を導入する方法 (検証用のサンプルコードあり) ウツボウTECH
- Sassは、今では多くの開発の現場で導入されているため、キャッチアップしている方も多いかと思います。ただ、言語や環境ごとに導入方法が異なることもあり、私自身も初めて使う時には、中々書いたスタイルが反映されず、困った経験があります。。。 そういった経験も踏まえて、本記事では、Rea…
ウツボウTECH - [React] Sass(.scss)を導入する方法 (検証用のサンプルコードあり)
-
- React + JavaScript – 開発環境構築方法(Windows & Mac) ウツボウTECH
- JavaScriptのライブラリとして、React.jsが2013年に公開されるようになってから現在まで9年以上が経過しましたが、今や多くの現場で使用されているライブラリとなりました。 しかし、まだ扱える人材がJavaやCなどに比べ、少ないため、これからプログラミングに挑戦する方…
ウツボウTECH - React + JavaScript – 開発環境構築方法(Windows & Mac)
-
- 【React hooks】useContextの基礎を習得 – カウンターアプリ ウツボウTECH
- ※ 本記事は、以下の記事の続きになります。 【React hooks】useReducerの基礎を習得 – カウンターアプリ作成 【React hooks】useReducerの基礎を習得 - カウンターアプリ本記事では、React hooksで提供されている関数であるuseRe…
ウツボウTECH - 【React hooks】useContextの基礎を習得 – カウンターアプリ
-
- 【React hooks】useReducerの基礎を習得 – カウンターアプリ ウツボウTECH
- ※ 本記事は、以下の記事の続きになります。 【React hooks】useState・propsの基礎を習得(カウンターアプリ作成) 【React hooks】useState・propsの基礎を習得 - カウンターアプリ本記事内では、React hooksで提供される関数の一…
ウツボウTECH - 【React hooks】useReducerの基礎を習得 – カウンターアプリ
-
- 【React hooks】useState・propsの基礎を習得 – カウンターアプリ ウツボウTECH
- 本記事内では、React hooksで提供される関数の一つである「useState」とpropsの基礎的な使い方をカウンターアプリを作成しながら解説していきます。 加えて、公式ページの内容にも少し触れていきたいと思いますので、参考になればと思います。 【本記事で作成していくカウン…
ウツボウTECH - 【React hooks】useState・propsの基礎を習得 – カウンターアプリ
-
- nodebrewでNode.jsのバージョンが確認出来ない際の対処法 ウツボウTECH
- nodebrewは、Node.jsのバージョンを管理できるもので、プロジェクトに応じて、Nodeのバージョンの切り替えをコマンドを簡単に行うことができる点は、とても有難いものです。 本記事では、インストール済みであるにも関わらず、nodebrewを通して、Node.jsのバージョ…
ウツボウTECH - nodebrewでNode.jsのバージョンが確認出来ない際の対処法
-
- 【Mac】Reactの新規アプリ作成時に発生したnpmエラーへの対処方法 ウツボウTECH
- 昨日までは、いつも通りNode.jsのnpmコマンドを実行できていたのに、、急にnpmコマンドのエラーが発生すると萎えますよね.. 基本的には、Pathがおかしいかnode.jsのバージョンが低いことが原因ではありますが、いざ指定されたバージョンにアップデートしようと思ってもうま…
ウツボウTECH - 【Mac】Reactの新規アプリ作成時に発生したnpmエラーへの対処方法