React CRAで簡単に設定できる！初心者向けTailwind CSSのスタイリング方法 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
Tailwind CSSとはなんですか？ 事前準備 TailwindCSSの導入・インストール Tailwind拡張機能 最後に 前回の記事で、Reactでのスタイリング方法についていくつか紹介しました。 dev-k.hatenablog.com 本日は、初心者向けにReactのCRAで「Tailwind CSS」を設定し、スタイリングする方法についてチュートリアルを提供します。 Tailwind CSSは、Reactでのスタイリングに非常に便利なツールであり、この記事ではその設定方法について詳しく解説します。 Tailwind CSSとはなんですか？ Tailwind CSSは、ユーティリティファーストのCSSフレームワークであり、コンポーネントのスタイリングを容易にし、再利用可能なコンポーネントの作成に集中できるように設計されています。 簡単に言えば、Tailwind CSSは、独自の
JavaScript関数の基礎構文と種類の使い方解説 | 初心者向けJavaScript学習ガイド - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
この記事では、初心者向けにJavaScriptの関数・関数式およびアロー関数の基礎構文について学習します。 JavaScriptで利用できる関数にはさまざまな種類があります。 全てをここで紹介は難しいですが、ほとんどの関数動作を学んでいきましょう。 関数の利点 関数の宣言と呼び出し 関数リターン(戻り値) 関数式(無名関数) ES6 アロー関数 関数オブジェクト 即時関数 関数配列 最後に 関数は、特定のタスクを実行するコードのブロックとなります。 何かしらの図などの機能を作成して色を付けたりするプログラムを作成する必要があるとします。 まず問題を解決するために2つの関数を作成できます。 図を描く関数と図に色を付ける関数 １つの複雑な問題を小さな機能によって分割すると、プログラムが理解しやすくなり、再利用しやすくなります。 メイン機能プログラムとは別に保持および保守できます。 関数はより移
プログラミング 初心者に必要なものをまとめました！ メダカ皇帝 こんにちは！メダカ皇帝（ @medakakoutei ）です！ブログの毎日更新を400日達成しました。読者のみなさまへ有益な情報提供を心がけていますヽ(=´▽`=)ﾉ プログラミング学習を始めて2週間ほど経過しました。HTML&CSSから始めて、いまはPHPもやっています。難しいことばかりで頭がとても疲れますが、新しいスキルを身につける勉強は有益ですよね。 今日はそんなプログラミング初心者の私が、プログラミング学習に必要だなと感じたものをまとめました！初心者だからこそわかる、プログラミング初心者のための記事です！ 本記事はこんな方におすすめ これからプログラミング学習を始めたい方 プログラミング学習を始めたいが何が必要かわからない方 プログラミング学習を始めたばかりの方 目次 [非表示] 1 目標の確立（そもそもなぜプログラミ
初心者でも簡単に！Next.jsプロジェクトをVercelにデプロイする方法 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
事前準備 Vercelとは Git Hubと連携 Vercel アカウントの作成 まとめと機能 今回は、Next.jsプロジェクトをデプロイする方法について解説します。 デプロイ先には多くの選択肢がありますが、代表的なものに「Cloudflare Pages」や「Netlify」があります。 この記事では、「Vercel」と「GitHub」を組み合わせてサイトを公開する方法を紹介します。 GitHubはコードのホスティングに使用されます。 一方、ビルドやサイトの公開にはVercelが活用されます。 幸いにも、この方法は複雑な操作を必要としませんので、安心して取り組むことができます。 事前準備 ・ Next.jsプロジェクト ・ Git Hubアカウント ・ VS Code(Visual Studio Code) デプロイするにあたり、Git HubアカウントとVS Code(Visual
Next.js 入門 状態管理をする簡単な方法 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
Next.jsでReact Contextを使用する コンテキストの使用 最後に Reactアプリケーションで状態を管理するには、常にReduxが必要なわけではありません。 Reduxは、アプリケーションが複雑になり、状態管理が複雑になる場合に使用することが推奨される状態管理ライブラリの一つです。 Next.jsを使用してアプリケーション全体で状態を管理する場合、Reactライブラリの一部である「ReactContext」を使用することが最も簡単な方法です。 ただし、グローバル状態オブジェクトを使用することがすべての種類のプロジェクトで便利であるとは限りません。 アプリケーションの規模や性質に合わせて最適な状態管理方法を選択することが重要です。 React Contextについては、当ブログで詳しく解説しておりますので下記を参照下さい。 dev-k.hatenablog.com Next.
React.jsに関連する 用語のまとめ - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
React.js 関連用語 仮想DOM Reactノード 要素 JSX トランスパイル module bundler コンポーネント 制御されたコンポーネントと非制御コンポーネント ライフサイクル Props(小道具) props.children State(状態) React Hooks パフォーマンス SPA(シングルページアプリケーション) SSR(Server Side Rendering) SSG(Static Site Generator) 本日の記事ではReact.jsに関連するいくつかの一般的な用語をできるだけざっくりと簡単に定義していきます。 全ての関連用語をまとめるとあまりにも多いので記事を分割させて頂きます。 気になった箇所を選び飛んで読んで下さい。 React.js 関連用語 仮想DOM 『仮想』という表現がメモリに保持されReactDOMのライブラリによって
Next.jsでローカルのJSONファイルからデータの取得と表示 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
本日はNext.jsでローカルのJSONファイルからデータを読み取って表示する方法を示します。 Next.jsの事前レンダリング ページ制限 セットアップ JSONデータの作成 データの取得 getStaticPropsを使用せずに静的JSONデータをローカルで取得 最後に サーバー側のレンダリングや静的Webサイトの生成などの追加機能に関して、Next.jsは非常に興味深いものです。 これは、バックエンドをコーディングしたり、データベースのセットアップや接続に時間を費やしたりすることなく、小さなWebアプリをすばやく構築したい場合に非常に役立ちます。 Next.jsの事前レンダリング Next.jsはいくつかの異なるデータ取得戦略を提供しています。 それらは下記の通りです。 ・クライアント側のレンダリング(CSR) ・サーバー側レンダリング(SSR) ・静的サイトレンダリング(SSG)
Next.jsのフォルダ構造 | ページレベル最適化と効率的な開発のためのベストプラクティス - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
はじめに プロジェクト構成 Next.jsにおけるプロジェクト構成とディレクトリの役割 ルートディレクトリファイル 最後に はじめに 前回のNext.js入門に続き、本日はNext.jsでプロジェクトを構造化する方法について説明していきます。 前回の記事は以下となります。 dev-k.hatenablog.com Next.jsに適したフォルダ構造を自分で考えることは一般的です。 Next.jsにはページレベルでの最適化が存在し、ビルド時にログに記録されたページが表示されます。 すべてのコンポーネントファイルは「pages」フォルダ内でページとして処理されます。 そのため、ページに関係のないコンポーネントを「pages」フォルダに配置すると、ビルド時に不要なコンポーネントがページとして処理され、ビルド時間が増加してしまいます。 今回は、個人開発や小規模なチーム開発向けのNext.jsフォル
初心者向けREST API解説｜APIとは何かも理解する - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
API API プロトコル RESTとは？ REST API アドレス可能性(エンドポイント) クライアントとサーバーの分離 統一されたインターフェース ステートレス 接続性 最後に Webアプリ開発において、フロントエンド開発者に必要なスキルは多岐にわたります。 例えば、テスト・デバッグ、バージョン管理、UI・UX、コミュニケーション能力、SEO、クライアントの理解、クロスプラットフォーム、クラウドインフラ、セキュリティ、アジャイル開発手法などが挙げられます。 これらの中でも、REST APIの理解は必須スキルの一つとなっています。 REST APIの学習は、主にバックエンド開発者が行いますが、現代ではフロントエンド開発者もREST APIの基本的な理解が必要となる場合があります。 REST APIは、最も人気のあるAPIの一つであり、初心者にも理解しやすいものです。 REST APIを
ReactとTypeScript useRefフックの型指定と使い方 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
useRefフックを使用してrefを宣言するさまざまな方法が、現在のrefプロパティの不変性にどのような影響を与えるかを学びます。 当記事では、currentプロパティを不変にする方法、可変にする方法を紹介します。 useRefフックとは？ useStateとuseRefの違い useRefでDOMノードの入力方法 useRefで可変値の入力方法 最後に useRefフックとは？ useRefフックは他のフックでは解決できない、いくつかの問題を解決するために使用できる便利なReact フックの1つです。 Reactでは、レンダリングに使用するデータは不変です。 状態の一部の変更は、セッターまたはレデューサーを通じて反映されます。 const App = () => { const [name, setName] = useState<string>(''); return ( <input
JavaScript文字列の作成、検索、置換、その他の操作について学ぼう！初心者向け完全ガイド - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
本日はJavaScript文字列について学習します。 JavaScriptでの文字列の作成、検索、置換、それらその他の操作について初学者のうちに知っておくべき必要のあるすべてを網羅してもらう事を目的とした記事となります。 プリミティブ 文字列でのメソッドとプロパティ 文字列の作成 オブジェクト 文字列の比較 パディング文字列 文字列内の検索 文字列内の文字を置換する 文字列の分割(配列に変換) 長い文字列と改行 特殊文字 テンプレートリテラル タグ付きテンプレートリテラル HTMLテンプレートリテラル 最後に JavaScriptには、基本的に2つの種類の文字列があります。 それらは文字列プリミティブと文字列オブジェクトです。 文字列プリミティブは不変であり、文字列オブジェクトは可変であることが、これらの種類の主な違いの1つです。 JavaScriptには、他にもさまざまなデータ型が存在し
こんにちは。谷口です。 paizaラーニングに新規講座「Linux入門編1: Linuxの基本を理解しよう」が追加されました！ 「Linux入門編」では、システム開発に欠かせないLinuxの基本、利用形態やシステム構成を把握するとともに、パッケージングシステムやシェルコマンド、ファイルシステムなどについて学べます。 今回は「Linux入門編1: Linuxの基本を理解しよう」の講座内容をご紹介します。 プログラミングは少しできるようになったけど、Linuxについてはよく知らない 仕事でLinuxを使うことになったけど、実は使ったことがない… といった方におすすめです。 Linux入門編1: Linuxの基本を理解しようの内容紹介 Linuxの特徴 Linuxは、Unix互換のオペレーティングシステムです。オペレーティングシステム(OS)は、WindowsやmacOSと同じように、コンピュー
JavaScript Promiseについての初学者向け解説 - 概念と操作の基礎 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
本日はJavaScriptのPromiseの操作とその概念について初学者様に解説致します。 非同期関数 Promise Promiseの状態 Promiseの作成 Promiseをチェーンする方法 Promiseを返す promiseのthenとfinallyの違い より高度な複数のPromise処理 最後に 前提の知識とスキルとして、少なくともES6の関数・高階関数・コールバック関数およびJavaScriptオブジェクトに精通している必要があります。 上記を学び終えてない方は、以下で学習できますので参照ください。 dev-k.hatenablog.com dev-k.hatenablog.com dev-k.hatenablog.com 非同期関数 JavaScriptにおいて非同期処理を行う際には、従来はコールバック関数を利用していました。 しかし、JavaScriptにおいて関数が第
2021年 個人的に気になったIT・プログラミングニュース まとめ - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
どうもdev.kです！ 今年も本日で最後となります 今年最後の記事は個人的に気になったIT・プログラミングに関するニュースをまとめました。 2021年 個人的 ITニュース まとめ WordPress人気の検索プラグインに脆弱性、6万以上のWebサイトに影響 GitHubにAIプログラミング機能『Copilot』登場する WebサイトにJavaScriptプロトタイプ汚染の脆弱性あり Facebookが社名変更『メタバース』 JavaScriptデバッグがVSCodeに組み込まれる Apple『Swift 5.4』をリリース 『Python 3.9.4』が登場 Visual Studio Code 1.55がリリース プログラミング言語人気ランキング 時間が足りず、一部を抜粋しました。 ぜひ一読下さいませ。 2021年 個人的 ITニュース まとめ WordPress人気の検索プラグインに
React JSXでのループ処理 基礎 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
この記事では、Reactでのループについて初心者向けに解説します。 JavaScriptやTypeScriptのロジックでループを実行する場合、特別なルールに気を配る必要はありません。 普通のJSループを使えば、様々な種類のループを使用できます。 もちろん、すべてのループがすべての場合に適しているわけではありませんが、ほとんどの場合には可能です。 Reactでは、主にES2015で導入された最新のJavaScript機能を使用しています。 これらの機能を活用するために、Reactアプリケーションでよく使われる一般的なJavaScriptパターンやメソッドを紹介します。 例えば、配列から商品のリスト全体をレンダリングする場合、反復処理を使用して実現できます。 これらのポイントを詳しく説明します。 React JSXでループする マップ関数 forEachループ Reactループ処理での注意点
Pythonは注目度が高く、初心者の方が最初に選ぶプログラミング言語として人気が上がっています。 未経験エンジニアが、独学でPythonを勉強してIT業界に就職・転職しているケースも増えてきました。 PythonはWEBシステムで使われることが多く、初心者でも学習しやすいプログラミング言語になります。 ですが同じWEB系のプログラミング言語であるPHPなどに比べると、学習コストはそこまで高くありません。 特にプログラミング未経験の初心者の方は、独学でどうやって勉強すれば良いかわからず挫折することも多いと思います。 今回はプログラミング初心者が、独学でPythonを使った仕事ができるレベルになれた勉強法を紹介します。 Pythonを独学で勉強する時に気をつけるべきこと まずプログラミングをやったことがない人は、独学でプログラミング言語であるPythonを覚えることが難しいと思うかもしれません
React useDebugValueフックとは 使い方 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
useDebugValueとは？ 非文字列パラメータ 複数でのDebugValue useDebugValueはいつ使うのですか？ 本日の記事はReact初学者様には、まだ教えるべきかどうか悩みました なぜかと言いますと ほとんどの場合ではReactフックでuseDebugValueを使用する必要はないからです。 ですが、Reactのカスタムフックの複雑さによっては役立つ場合があります。 useDebugValueフックが、何なのかそれを使用する方法やそして、いつそれを使用する必要があるかについて初心者様に解説していきます。 カスタムフックに精通し複雑化したカスタムフックを書いていく事になれば、将来この記事はあなたにとって役立つ事は間違いないでしょう。 useDebugValueとは？ useDebugValueフックは、FacebookのReact dev toolの拡張機能と連携して機
JavaScript配列の基本的な作成と操作方法 | 初心者向け解説 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
配列は、プログラミングにおいて非常に便利なデータ構造であり、初心者にとっても重要な概念です。 配列を理解することで、より複雑なプログラムを作成することができます。 データ構造とは、データを効率的に管理するための方法のことです。 配列は、複数の値を一度に扱うことができ、データの整理や処理に非常に役立ちます。例えば、配列を使用して、数値の平均値を算することができます。 本日は、基本的なデータ構造の一つである、JavaScript配列の作成および操作についての初心者向け解説となっております。 JavaScript配列 配列リテラル 配列コンストラクター JavaScript 連想配列 JavaScript 多次元配列 最後に JavaScript配列 JavaScriptでは、変数には1つの値しか割り当てることができません。 しかし、配列を使用することで、1つの変数に複数の値を格納することができ
Reactアプリを構築するための基本的なWebpackとBabel設定ガイド - CRA不要の初心者向けチュートリアル - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
事前準備と条件 プロジェクト作成 package.jsonの設定 Webpackの設定 Babelの設定 HTMLファイルの生成 本記事は、Create-React-App(CRA)を使用せずにReactアプリを構築する方法について初心者向けに説明します。 なお、ご注意いただきたい点として、この記事を読まれる方はすでにReact.jsに精通されていることが予想されます。 そのため、React.jsについての詳細な説明は行いません。 つまり、React.jsについてはすでに知識があることを前提としています。 ご理解いただけますよう、よろしくお願いします。 事前準備と条件 ・ 当ブログの記事ではWindowsとなります。 ・ VS Codeを使用します。 ・ Node.js ・ JavascriptおよびES6からES8の構文に関する基本的な知識 ・ React.jsの基礎に精通している まず
JavaScript 数値計算と操作 基本的な算術演算子 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
本日はJavaScript数学のお時間となります。 これは人によって得意、不得意が分かれるかと思います。 ですが世界中の誰もが数学は私たちが生きていく上でなくてはならない、基本的な部分であることを否定することはできません、それは事実です。 これはJavaScriptまたはプログラミングに関わる、その他言語でも当てはまります。 ですのでまずは基本的な数値の操作を学びましょう。 数値型と演算子 数値の定義方法 10進数 指数表記 加算 割り当ての連鎖 減算 インクリメント・デクリメント 乗算 除算 剰余 べき乗 無限を表す 浮動小数点の操作 NaN JS数値メソッド 数値を文字列に変換 isFiniteおよびisNaN toLocaleStringメソッド valueofメソッド 最後に 数値型と演算子 JavaScriptでは、数値(Number)はプリミティブデータ型です。 数値データ型は
プログラミング学習では、いわゆる『写経』が効果的だと言われています。 プログラミング初心者だと、あまりピンとこないですよね。難しいコードを写して、意味があるんだろうか？と。 ただ、プログラミング初心者のわたしの経験からすると、プログラミングの写経は非常に効果的だと感じました。 なぜなら、 ✅アウトプットがたくさんできる ✅わからないことにたくさん向き合える ✅プログラミングの理解力が高まる というメリットがあったからです！ プログラミング関連記事 【プログラミング学習】初心者の始め方【勉強法メリット・デメリット】 目次 [非表示] 1 プログラミングの写経とは？ 2 プログラミング初心者が写経をする３つのメリット 2.1 アウトプットがたくさんできる 2.2 わからないことにたくさん向き合える 2.3 プログラミングの理解力が高まる 3 思考停止で写経しても意味がありません 4 まとめ プ
こんにちは。谷口です。 近年、「Pythonを学んでみたい」という方が急速に増えています。paizaが運営しているプログラミング学習サイト「paizaラーニング」でも、Python入門編は非常に人気があります。 一方で「プログラミング未経験から学ぶのは難しそう」「まず何をしたらいいのかが分からない」「入門を終えたあと、どのような学習に進めばよいのか分からない」といった声も聞きます。 そこで、今回は独学でPythonを学ぼうと思っている初心者・未経験者の方へ向けて、Pythonの学習に役立つ記事をまとめました。 これからPythonの学習を始めようとしている方の参考になれば幸いです。 目次 Pythonへの入門 Pythonを使ってプログラミング問題を解いてみる Pythonを使って開発を実践してみる 機械学習への挑戦 まとめ Pythonへの入門 Pythonは、プログラミング言語の中でも
WebStorageのセキュリティに関する重要な考慮点と対策 - 開発者が知っておくべきこと - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
初学者様向けのJavaScriptでWebストレージを使用する上でのセキュリティ(安全性)などの基本的な知識を解説致します。 プロジェクト構築の過程で、権限認証のトークン、ユーザー情報、埋め込みポイントの数、スキン情報、顧客が構成した言語タイプなどの情報をローカルに保存する必要がある状況に遭遇することがよくあります。 一時的に保存して、不要なリクエストやブラウザの冗長な操作を避け、お客様の利便性を高めます。 その際に、データベースの複雑さを増すことなく、HTMLで何かを成し遂げたい場合があります。 クライアントによってローカルにデータを保存する新しい方法を提供します。 それはWebストレージとなります またWebストレージは、LocalStorageとSessionStorageに分けられJavaScriptでアクセス可能です。 サーバーではなくブラウザにキーと値のペアで保存できます。 ※
この記事は主な読者として新入社員の方を想定しています。 はじめに 入社おめでとうございます。 入社して1ヶ月程になりますでしょうか。まだ研修中で、週末は同期の皆様と飲み会で忙しいでしょうか。 飲みすぎて入館証や配布PCを紛失しないよう気をつけくださいね。 早速ですが、あなたが所属する環境は以下に当てはまっていませんか？ 自分自身がプログラミング初心者 同期も理系・文系問わず大多数がプログラミング初心者 残業はプロジェクト次第だがそれなりにありそう もし当てはまっている方がいらっしゃる場合、これから私の書くことがあなたの役に立つかも知れません。 この記事の主な対象読者 ほぼプログラミング初心者だが、プログラミングする立場になった新入社員の方 この記事で得られること 労働を長時間にしない方法 会社でストレスを少なくする方法 まずは結論 最初は技術力が大事 技術力をつけるため短期間だけプライベー
Next.jsのデメリット【欠点】を理解する - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
Webテクノロジーは、ほぼ毎月のように成長し、変化し続けています。 決定を下すには、各オプションの長所と短所を事前に知る必要があり、自信を持って適切な選択を行うことはますます困難になってきています。 本日はReactを利用したフレームワークであるNext JSの欠点に焦点を当てて解説していきます。 Next.jsとは Next.jsの短所 技術的な短所 プロジェクトにNext.jsは必要か？ 最後に Next.jsとは Next.jsは、以前はZEITとして知られていたVercelという名前の会社が所有しており、そのオープンソース開発プロセスを主導および維持しています。 Next.jsの最初の作成者は、VercelのCEOであるGuillermo Rauch氏でした。 Next.jsのサーバーレスアプローチにより、Vercelを使用してWebサイトおよびアプリをデプロイできるため、ホスティ
文字化けって地味に困りますよね。。。でも、すぐに直せたよ(/・ω・)/ メダカ皇帝 こんにちは！メダカ皇帝（ @medakakoutei ）です！ブログの毎日更新を400日達成！当ブログはリンクフリーです！記事はお気軽にシェアして下さいヽ(=´▽`=)ﾉ プログラミング学習をしていて、たとえばこんなことありませんか？ 文字化け・・・。 文字化け・・・。 でも、これは初心者にありがちなことであって、カンタンに直せます！ 目次 [非表示] 1 meta charset のタグ指定が無いか間違ってる 2 HTMLには文字化け対策が必要です！ 3 まとめ 【プログラミング初心者】HTMLが文字化けしたときの対処法 meta charset のタグ指定が無いか間違ってる 先ほどの文字化けが起きたファイルはHTMLで、下記のような記述となっています。 <form action="checkbox2.p
フリーランスエンジニア（超見習い）を目指すことにしました！ メダカ皇帝 こんにちは！メダカ皇帝（ @medakakoutei ）です！ブログの毎日更新を400日以上継続しています。読者のみなさまへ有益な情報提供を心がけていますヽ(=´▽`=)ﾉ 今日から私はフリーランスエンジニアを目指すことにしました。いつも唐突な行動ばかりですが、自分のこれからの働きたかやライフスタイルを考えた場合に、フリーランスエンジニアが最適だと判断しました。 そこで今後は、プログラミング学習を初心者が学ぶためには、どんなことをしていけば良いのか？おすすめの勉強法は？果たして本当にフリーランスエンジニアになれるのか？などについて、当ブログと自分を実験台にしてお伝えしていこうと思います。 目次 [非表示] 1 プログラミング学習をしたい理由 2 なぜフリーランスエンジニアになりたいの？ 3 どうやってプログラミング学習
Python超入門コース 合併版｜Pythonの超基本的な部分をたった1時間で学べます【プログラミング初心者向け入門講座】
キノコード監修【キノクエスト】 ＼気軽に始める月額1990円！環境構築不要／ Python学習なら基礎から実践までキノクエストにお任せ！ ベーシックプラン→https://kino-code.com/kq_service_a/?utm_source=youtube.com&utm_medium=referral&utm_campaign=HyU3XL2F9GE_gaiyou ＼より実践スキルを身に付けたいあなたへ。ぴったりの学習プランを提案します！／ キノコード認定トレーナーが、あなたの目標に合わせた学習プランからキャリアプランまで提案！ プレミアムプラン→https://kino-code.com/kinocollege_dx/?utm_source=youtube.com&utm_medium=referral&utm_campaign=HyU3XL2F9GE_gaiyo_k
Reactプログラマーを目指す方必見！JavaScriptの変数と定数の基礎解説 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
当ブログでは、将来的にReactプログラマーを目指す方に向けて、JavaScriptの基礎を解説します。 今回は、JavaScriptの変数と定数について学習します。 また、スコープについても解説致しますが、詳しくは当ブログの別の記事で説明しています。 以下のリンクを参照してください。 dev-k.hatenablog.com JavaScript 変数 変数の宣言 変数の命名規則 変数の割り当て(代入) 変数の値を変更(再代入) 値の型操作 再宣言 JavaScriptグローバル変数 JavaScriptローカルスコープ 関数スコープ ブロックスコープ 定数 JavaScriptの定数とオブジェクト 最後に JavaScript 変数 変数はJavaScript固有のものではございません。 実際、ほとんどすべてのプログラミング言語には変数の概念があります。 データを非常に簡単に処理および
React 18 useStateフックの使い方と仕組み - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
Reactで最も一般的に使用されるフックの1つはuseStateです。 使用頻度も、ダントツで高いです。 ここではReact 18を使用した簡単な例で解説していきます。 初心者が一般的な問題を解決する方法について疑問が生じることは間違いありません。 それらを一緒に解決していきましょう。 このフックの使用方法と実装方法を学び終えると、それは本当にシンプルで使いやすく、便利なフックである事が分かってきます。 useStateとは useState基本的な状態操作 useStateフックを複数で状態宣言 useStateフックで数値の状態更新 useStateフックで真偽値の状態操作 useStateフックで配列の状態操作 useStateフックで配列要素の追加 useStateフックでオブジェクトの状態操作 オブジェクトからkeyを削除 useStateでのコールバック useStateフック
React v18から17にダウングレードする方法【CRAまたはCNA】 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
React.jsがReact v18をリリースしてから、CRAはこの最新バージョンのReactをインストールします。 つまり、create-react-appは最新のすべてのReactバージョンと依存関係バージョンを使用して、まったく新しいReactアプリケーションを作成するためのCLIツールです。 ですが、現時点ではすべてのパッケージがこの最新バージョンのReact 18をサポートしているわけではありません。 そのような場合、プロジェクトで依存関係エラーが発生します。 この問題は、React 18をまだ使用する準備ができていない依存関係に対してより広く存在します、React v18でまだ動作できない内部ライブラリがあるため、この問題が発生しています つまり、使用したい他の多くの依存関係がバージョン18に対して最新ではなくサポートがされていないので、ダウングレードをしたい場合です。 既存の
Photo by Robbie Sproule こんにちは。谷口です。 エンジニアの仕事やプログラミングの勉強をする中で「仕事とは別に自分で考えたサービスを作ってみたい」と思った経験はありませんか。 個人開発はプログラミングやソフトウェア開発の勉強になるだけでなく、自分で考えたものを一から作る楽しみを味わえます。最近は「サービスやアプリを作りたい」と思ってプログラミングの勉強を始める人も多いです。 一方で 個人開発をやってみたけど途中でうまくいかず挫折した 個人開発してみたいけどなかなか時間がない 何から手をつけたらいいのか、どうしたらいいのかわからない という人もいるのではないでしょうか。 そこで今回は、プログラミング初心者が個人開発をするとよい理由、個人開発でつまずきやすいポイントとその解決策などについてお話しします。 個人開発に興味があるプログラミング初心者の方の参考になればと思いま
WindowsでのReact Native開発環境構築と基礎文法解説：Expoを使った最初のプロジェクト手順 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
一般に、React Nativeを使い始めるには、「Expo CLI」または「React Native CLI」を使用する2つの方法があります。 どちらの方法にもそれぞれ長所と短所がありますが、React Nativeの公式ドキュメントでさえ、モバイル開発が初めての場合はExpo CLI から始めることを提案しております。 したがって、当記事ではWindowsを使用した最初の React Nativeプロジェクト用にExpo開発環境をセットアップするために必要なすべての手順を説明致します。 そして、Windows上でReactを使用してiOSアプリ開発を試してみたいと思っている方に向けた入門記事でもあります。 ですが、MacOSをお持ちの方はReact Native CLIを使用してプロジェクトをすばやく起動するのが標準的な方法ですので、すぐに移行をお勧めします。 また、この記事では、Re
プログラミング初心者に最適なお手本を見つけました！PHPを実際に動かしてみよう！ 本記事はこんな方におすすめ プログラミング初心者の方 HTML&CSSの基礎を身につけた方 PHPを実際に動かしてみたい方 メダカ皇帝 こんにちは！メダカ皇帝（ @medakakoutei ）です！ブログの毎日更新を400日達成しました。読者のみなさまへ有益な情報提供を心がけていますヽ(=´▽`=)ﾉ PHPを動かしてみよう！ プログラミング学習をはじめました。最初はHTML&CSSを学習し、いまはPHPも並行して勉強しています。 YouTubeやProgateでプログラミングを独学で勉強していますが、なんか物足りない感じがありました。 課題をクリアしたり、コードがちゃんと写経できればそれでうれしいのですが、なんでしょうかね。なんかちょっと虚無感が漂っていました。 そうだ、自分は何のためにプログラミングをやり
JavaScript DOM操作の基本 要素の取得【追加・削除・置換】 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
本日はJavaScriptでDOMの要素にアクセスし、それらを操作していく方法を解説致します。 JavaScript オブジェクトメソッド IDによる要素へのアクセス クラス名の要素へアクセス タグ名の要素にアクセス クエリセレクタによる要素へのアクセス スタイルの変更 要素の追加と削除 初心者がメソッドを使用する際の注意点 JavaScript Documentオブジェクトは、ドキュメントのすべてのHTML要素へのアクセスを提供するオブジェクトとなります。 ドキュメントオブジェクトは、HTML、head、body、その他のHTMLタグなどのHTMLドキュメントの要素をオブジェクトとして格納します。 ドキュメントオブジェクトモデルまたはDOMが分からない方は下記で解説しております。 dev-k.hatenablog.com dev-k.hatenablog.com ドキュメントオブジェクト
React コンポーネントをリファクタリングする方法 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
Reactアプリケーションに適用されるリファクタリングに関する一般的な問題について解説します。 クラスコンポーネントから学習してしまい、フックに移行する前に少し混乱する可能性があります。 関数コンポーネントが好まれる理由と、クラスコンポーネントよりも関数コンポーネントを使用する利点があるかどうかを詳しく学んで下さい。 なぜクラスではなくフックなのか？ 状態がない場合 状態を持つコンポーネント Props ライフサイクルの簡素化 これから 最後に なぜクラスではなくフックなのか？ Reactでクラスを使用する利点は、状態がいつ変化したかを識別し、this.stateキーワードを使用してグローバル状態またはコンポーネント状態を更新するライフサイクルメソッドがクラスに含まれていることです。 対照的に、フックはReact 関数コンポーネントで使用され、クラスを必要とせずにコンポーネントの状態やその
React useMemoおよびuseCallbackフックの使用方法 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
Reactでは、関数コンポーネントでさまざまなライフサイクルを実現するためのフックがたくさん組み込まれておりますが、その中にuseMemoというフックがあります。 Reactの初心者でなければ、useMemoおよびuseCallbackフックには既に馴染みがあるかと思います。 useMemoおよびuseCallbackフックの使い道はいくつかの非常に特殊で具体的なケースに限られます。 負荷の高い計算によってアプリのパフォーマンスが低下していることに気付く確率は10%も満たないでしょう。 これらフックに関係なく、実行されるすべてのコード行にはコストがかかります。 事前に最適化をしたいだけかもしれません。 しかし、ほとんどの場合は私たち(開発者)はそれらを使って不必要なものをラップしています。 useMemoとuseCallbackのこれらの実際の目的は何なのか、そしてそれらを適切に使用する方
はじめに 今回の記事では、プログラミング初心者や駆け出しエンジニアが必ず読むべき書籍を10冊紹介する。プログラミング学習を効率良く進めるためには、書籍は必要不可欠である。 「プログラミングを勉強したいけど、どんな書籍を買えばいいのかわからない..」 「プログラミングを効率良く学べる本があれば知りたい！」 今回の記事は主にこのようなことを考えている人のためにある。これを読めば、プログラミング学習を進める上でもう本選びに困ることはないだろう。今回の記事で、一冊でも手にとって読みたいものがあれば幸いである。 アメリカの中学生が学んでいる 14歳からのプログラミング 図解付きでプログラミングを理解できる良書。難しい専門用語がないので初心者がプログラミングの概要をざっくり学べる。Webやコンピュータサイエンスについても徹底解説されているので、将来それらで生計を立てたい学生や子供にもオススメできる。
ReactでのonClickイベント処理 【イベントハンドラ】 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
Reactの最新版（v18）において、イベントハンドラ関数に引数を渡す方法および基本的なイベント処理について説明します。 ボタンやリンクなど、あらゆる要素をクリックした後に何らかの処理を実行する場合は、常にonClickイベントハンドラを使用します。 これはReactで最も強力で、最も頻繁に使用される機能の一つです。 また、この記事ではonChangeイベント処理についても解説しますが、ほとんどはonClickイベントハンドラを重点的に学習していきます。 SyntheticEvent(合成イベント) Reactのイベントハンドラ イベントハンドラをインライン関数として呼び出す インライン関数にボタンの値を引数として渡す 複数の関数を呼び出す イベントハンドラ内の状態を更新 最後に SyntheticEvent(合成イベント) イベントは、ユーザーが行う操作やシステムが生成するトリガー動作に
ReactフックでlocalStorageを使用する方法 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
このチュートリアルでは、ローカルストレージにアクセスし、それを使用してアプリケーションの状態を保存する方法を説明します。 ※前提条件として、Reactの概念およびReactフックの基本を理解していることを確認してください。 Webストレージとは フォームコンポーネントの作成 フォーム入力をlocalStorageに保存 localStorageに保存されたデータの削除 カスタムフックとしてカプセル化 データ検証とエラー処理 localStorageでuseEffectフックを使用 getItem()でデータの読み取り 最後に ユーザーからユーザー名とパスワードを受け取り、それをユーザーのコンピュータのlocalStorageにデータとして保存するReactアプリケーションを構築します。 Webストレージとは 2つの主要なWebストレージメカニズムがあります。 React localStor
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
プログラミング初心者に必要なもの【7選】学習効率がアップ！ - メダカ皇帝
プログラミング初心者でもLinuxを無料で学べる入門講座が新登場 - paiza times
Python独学 プログラミング初心者がステップアップできる入門レベルの本と勉強法 – 資格ナビ
プログラミング初心者は基礎学習後に写経するべき【３つのメリット】 - メダカ皇帝
プログラミング初心者向け「Pythonの学習に役立つ記事」まとめ - paiza times
プログラミングする会社へ入社した、プログラミング初心者なあなたへ - Qiita
【プログラミング初心者】HTMLが文字化けしたときの対処法 - メダカ皇帝
【プログラミング初心者】独学で勉強！【フリーランスエンジニアになる】 - メダカ皇帝
プログラミング初心者でも挫折せず楽しく個人開発を続けるコツとは？ - paiza times
プログラミング初心者がPHPでサイト作成【実践的な勉強法】 - メダカ皇帝
【必読】プログラミング初心者と駆け出しエンジニアが必ず読むべき書籍 10冊