【2023年】新年のご挨拶 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
謹んで新年のご挨拶を申し上げます。 本年も何卒よろしくお願い申し上げます。 いよいよ、2023年がスタートいたしました。 みなさまはどんなお正月をお過ごしでしょうか？ 皆様におかれましては、新春を清々しい気持ちでお迎えのこととお慶び申し上げます。 昨年は、多くのお力添えいただき誠にありがとうございました。 今年も更なる、更新や記事の質の向上に対して努めて参ります。 皆様のより一層のご支援を賜りますよう心よりお願い申し上げます。 ※ 当ブログの更新は、1月4日辺りを予定しておりますのでご了承下さい。
Reactフックを使って制御されたコンポーネントを作成する方法｜初心者向けガイド - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
2022年の新年、React.jsの初心者向けの講座を始めます。 まずはじめに、明けましておめでとうございます！皆さんはお正月をどのようにお過ごしでしょうか？自宅でのんびり過ごす方もいれば、勉強に励む方もいるかもしれませんね。 React.jsを学習している初心者の方々に、私は応援の気持ちを込めて、今日もReact.jsの学習方法をブログで提供していきたいと思います。 React開発者として、制御可能なコンポーネントを作成することは、非常に重要なスキルの1つです。 このブログでは、Reactフックを使って、制御されたコンポーネントを作成する方法を初心者向けにご紹介します。 ぜひ、参考にしてください。 制御されたコンポーネントとは？ 制御されていないコンポーネントとは？ なぜ制御されたコンポーネントを使用する？ 制御されたコンポーネントの作成 制御されていないコンポーネントの作成 最後に 制
ReactでのJSXで条件付き三項演算子を使用する - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
ReactのJSXの中で、Reactの開発者が条件を設定する方法は複数あります。 if/else文やswitch文も使えますが、第三の方法として三項演算子がございます。 この記事では、Reactで三項演算子を使用する方法について学習します。 Vanilla.JSでの三項演算子の基礎は下記で解説しております。 dev-k.hatenablog.com 三項演算子 Reactでの三項演算子 JSX内に記述する Reactでのネストされた三項演算子 論理積演算子 インラインスタイルでの三項演算子 最後に 軽く三項演算子のおさらいをしときましょう。 三項演算子 条件付き三項演算子は、3つのオペランド(値や変数)を取る唯一のJavaScript演算子となります。 この演算子は、値を返すif文のショートカットつまり代替えとしてよく使用されます。 条件を設定し、trueまたはfalseに基づいて特定の値
ツイッターで発信すると応援がもらえるよ！ メダカ皇帝 こんにちは！メダカ皇帝（ @medakakoutei ）です！ブログの毎日更新を400日達成！当ブログはリンクフリーです！記事はお気軽にシェアして下さいヽ(=´▽`=)ﾉ プログラミング学習を始めました。まだまだ覚えたことが少ないし、点と点がつながらず、苦労しながら学習を継続しています。 プログラミングは多かれ少なかれ、独学する部分が出てくると思います。独学はつらい、孤独、挫折、そんなことと隣り合わせですね。本を読む、コードを書く、わからないことに直面する。頼れる友人や仕事仲間も大事ですが、もっと広く仲間を探してみましょう。 オススメはツイッターをやることです。ツイートでプログラミング学習のことを発信すると、たくさん見てもらえるし、応援もしてもらえます。独学で頑張る人ほど、心強い気持ちになれると思います。 今日は、プログラミング初心者は
JavaScriptからTypeScriptへの移行ガイド：フロントエンド開発者にとって不可欠なTypeScriptの利点と基礎知識 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
TypeScriptとは？ コンパイル 静的型システム 型の違いについて 型の定義 最後に 本日は、JavaScriptにおけるフロントエンド開発者にとって不可欠なTypeScriptについてご紹介します。 TypeScriptを学ぶには、JavaScriptにおける「型」やその他の基礎知識に詳しいことが重要です。 実際、多くのエンジニアは次のように言います。 「JavaScriptの知識を基にしてTypeScriptに移行しましょう」 TypeScript公式も同様のアドバイスをしていますので、JavaScriptに詳しくない方にとっては、この記事を読んでも理解するのが難しいかもしれませんのでご了承ください。 今後、多くの用語が登場しますので、お気をつけください。 この記事では、TypeScriptの利点を紹介し、初心者から上級者まで、誰もがこの言語に興味を持つように刺激します。 Typ
こんなお悩みの方におすすめ なるべくお金をかけずに勉強したい 独学でどんな勉強ができるのか知りたい 必要があればお金をかけたいが最初は無料で勉強したい プログラミング初心者が無料で独学していくことは可能なのでしょうか？ ポイント わたしはまさにいま無料で独学でプログラミングを学習中です。完全無料で独学でプログラミングをマスターするのはさすがにちょっとむずかしいと思いますが、基礎の基礎を身につけるだけなら、無料の独学でも学習は可能です！ しかも、かなりいろんなことを勉強することができます。 もちろん、お金をかければよりよい学習ができるでしょう。でも、最初からお金に頼るのもどうかと思いますし、自分で調べればいろんな情報が検索できるわけですから、最初から誰かや何かを頼るのではなく、自分で頑張って身につけようと努力してみることが大切かなと思います！ 目次 [非表示] 1 プログラミング初心者が無料
0.この記事を読む方へ 初めまして。私の名前は「Kag」です。私はPythonの勉強を開始して一年後にはKaggleとSignateでメダルを取ることが出来ました。この記事は、KaggleやSignateに興味がある人、始めたものの何をすればよいのかわかない人、Pythonの勉強を新たに挑戦したい人を意識した記事です。少しでも多くの人がKaggleやSignateに興味を持って、コンテストをさらに盛り上げることにつながれば本望です。 目次 1.プログラミングとの出会い 2.プログラミングへの挑戦のきっかけ 3.初期の挑戦と乗り越えた困難 4.コンテスト初参戦からメダル獲得まで 5.一年間の学び 6.初学者へのアドバイス 7.結び 1.プログラミングとの出会い 初めに私のスペックを紹介します。プログラミング初心者が～～系の記事はたくさんありますよね。初心者といいながらイメージしていた初心者と
PHP&SQLは難しいけど頑張って学習しよう！ メダカ皇帝 こんにちは！メダカ皇帝（ @medakakoutei ）です！ブログの毎日更新を400日達成！当ブログはリンクフリーです！記事はお気軽にシェアして下さいヽ(=´▽`=)ﾉ PHPとSQLの基礎を学びながら、実践的な学習もできるサイトを紹介します。 ポンクソフト『PHP入門』 PHPとSQLが動く環境を作ろう プログラミング学習に大切なのは学習の目的 こっぷさん もりおさん まとめ 【プログラミング初心者】 PHP&SQLの学習におすすめサイト ポンクソフト『PHP入門』 ポンクソフトのPHP入門を利用して学習してみましょう。 ポンクソフト『PHP入門』 こちらのサイトは解説がわかりやすく、段階を追って順に説明してくれますので、理解もしやすいです。 課題で作成したものを次の課題で使ったりしますので、自分が作ったプログラムがどのように
React.jsの欠点を理解する 基礎 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
React.jsは、モバイルアプリとウェブアプリのビューレイヤーを担当するJavaScriptライブラリです。 Reactには多くの利点がありますが、考慮すべきいくつかの欠点があります。 React.jsの使用を開始する前に、Reactの全体像を把握するために簡単に触れておきましょう。 ※メリットに関しては別途記事に致します。 本日はReact.jsでの欠点を重点的に解説していきます。 ドキュメントに関する欠如 プラットフォーム関連 開発ペース 複雑なJSX構文 学習における問題 まとめ ドキュメントに関する欠如 教育に関する文書とリソースは、最新の更新と変更をカバーするのにまばらになる可能性があったりします。 これはアップデートや新しいリリースの数が多いため、完全なドキュメントを作成するのに十分な時間がありません。 開発者はドキュメントをReact.js/React Nativeの欠点と
学習は目的じゃないよね？ メダカ皇帝 こんにちは！メダカ皇帝（ @medakakoutei ）です！ブログの毎日更新を400日達成！当ブログはリンクフリーです！記事はお気軽にシェアして下さいヽ(=´▽`=)ﾉ プログラミング学習を始めました。プログラミング学習は難しいけど、日々すこしづつ自分のスキルが上がっている感じがして良いですね！ 難しいことばかりなのでとっても疲れますが、自分がやりたいことに向かって進んでいくことが大事なんだと思います。 ところで、プログラミング初心者は何のために学習しているのでしょうか？ スキルのため？エンジニアになりたいから？サイトを作りたいから？ 何を目標に、何を目的にプログラミング学習をしているのか、挫折せずに継続するために明確にしておきましょう！ プログラミング学習は目標や目的ではない DBを使った検索サイトを作りたい まとめ プログラミング初心者は目標設定
React コンポーネントを強制的に再レンダリングする方法 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
Reactは、PropsまたはStateが更新されるたびに、コンポーネントを自動的に再レンダリングします。 どちらも変更されない場合は、再レンダリングは発生しません。 しかし、初心者はコンポーネントを再レンダリングするのが非常に難しいと感じることがよくあります。 まず、コンポーネントを再レンダリングするために使用できる方法を見て、本当に再レンダリングを強制するべきか、 Reactに処理させるべきかについて説明します。 Reactコンポーネントを再レンダリングさせる方法とタイミングを真に理解するには、Reactの内部動作を理解する必要があります。 つまり、コンポーネントを強制的に再レンダリングするべきかどうかを学習すれば、Reactの内部動作を理解するのに非常に役立ちます。 Reactコンポーネントを強制的に再レンダリングする必要はあるのか？ Reactの状態が正しく更新されない 不
プログラミング初心者が地味に悩むのがエディタは何を使えばいいのか？ってこと。 いろんなものがあるから、よくわからないですよね。 今日はわたしがプログラミングを始めてから、使って良かったなと感じたエディタを紹介します！プログラミング学習の参考にしてくださいね！ 本記事はこんな方におすすめ プログラミング初心者の方 オススメのエディタを知りたい方 いま使っているエディタが使いにくい方 サクラエディタ Visual Studio Code paiza.IO まとめ プログラミング初心者にオススメのエディタ紹介【３選】どれも便利 サクラエディタ サクラエディタはWindowsOSで動作するフリーのエディタです。画面がシンプルで見やすいので、初心者にはとっつきやすいです。 シンプルなエディタなので、１からコーディングをやるというよりは、すでにコーディングされたプログラムやテキスト情報を編集したりする
React Router v6: 変更点とv5との違いを初学者向けに詳しく解説 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
はじめに React Routerとは何ですか？ React Router v6 スイッチコンポーネントをルートに置き換え 相対パスとリンク 正確なルートパスを指定するNavLink useNavigateに置き換え 最後に はじめに React Router v6は最新のバージョンであり、最近React Routerを学習し始めた方々にとっては、既にこのバージョンを使用しているかもしれません。 v6には多くの変更点が加えられており、v5との違いや変更点について初心者の方々に詳しく説明していきます。 以前の記事では、React Router v6でのルーティングの解説を行っていました。 dev-k.hatenablog.com ただし、この記事はReact Router v6が最近アップグレードされたばかりの頃に書かれたものであり、現在の最新情報とは異なる可能性があります。 そのため、読者
Next.js画像最適化のベストプラクティス：効果的な方法と手法の解説 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
現代のデジタル世界では、ウェブページやアプリにおいて画像は欠かせない要素となりました。 画像を使用することで、情報を迅速に伝えることができ、ユーザーエンゲージメントと体験を向上させることができます。 ただし、単に画像を追加するだけでは十分ではありません。画像を最適化することが重要です。 なぜなら、大きなサイズの最適化されていない画像は、ウェブサイトの読み込み速度を遅くし、ユーザーエクスペリエンスやコンバージョン率に悪影響を及ぼす可能性があるからです。 そのため、初めから画像最適化に注力することが不可欠です。特にNext.jsを使用している場合は、Imageコンポーネントを利用して効率的なNext.js画像最適化を実現することができます。 もしもあなたがNext.jsを利用しているアプリを開発している場合、本記事では効果的なNext.js画像最適化の方法について解説します。 しっかりと最適化
JavaScriptのボタン作成とクリックイベント処理 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
JSのイベント ボタンオブジェクトの生成 ボタンオブジェクトのプロパティ イベントハンドラ addEventListener()とonclick イベントハンドラを削除 クリック数の制御 共通のイベント Event object イベントのバブリングについて 最後に Buttonオブジェクトは、HTMLの<button>要素を表しています。 通常は、<button>要素にアクセスするために「getElementById()」メソッドを使用します。 ただし、プログラム上でHTMLボタンを作成する必要がある場合があります。 JavaScriptを使用して、HTMLボタンをプログラムで作成する方法を学ぶために、DOM操作の基本である要素の取得【追加・削除・置換】を理解する必要があります。 また、JavaScriptでクリックイベントを処理する方法も重要です。 したがって、この記事では、JavaS
React 18 新機能解説: useIdフックの使い方 | 初心者向けチュートリアル - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
本日はReact 18で新たに導入された「useId」フックの使い方について、初心者の方に解説していきます。 「useId」は、React 18以降で利用できる組み込みのフックです。 React 18に関する新機能について、以下で詳しく説明しています。 dev-k.hatenablog.com useIdフックとは 抑えておくべきポイント 一意のID生成 最後に useIdフックとは useId()フックは、React18でクライアント側とサーバー側の両方で安定した一意のIDを生成する新しい方法のフックとなっています。 以前では、HTMLのIDを使用して2つのHTML要素を結合させます。 つまり、Reactコンポーネント内で一意のIDを必要とする場合、通常は手動でIDを生成する必要があります。 今までの例を簡単なフォームで見てみましょう。 const App = () => { const
個人情報とプライバシーの保護に役立つセキュリティ対策とAIを悪用するハッカーへの対策 | 初心者向けアドバイス - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
SNS活動とプライバシー保護：写真交換とメタデータの注意点 セキュリティ対策 一般のユーザーに向けた対策 ソフトウェア開発者向けの対策 攻撃手法や脅威について AIはサイバーセキュリティを侵害するのか？ AIを使用した新たな攻撃手法 最後に この記事では、セキュリティに関心のある人々にとって重要な情報を提供し、セキュリティやプライバシーの保護に役立つ知識と対策方法を紹介します。 さらに、ハッカーがAIを利用して攻撃を行う方法についても探ってみましょう。 現代のデジタル時代において、セキュリティの重要性はますます高まっています。 個人情報や機密データの保護は切迫した課題であり、特に開発者やプログラマーにとっては重要なテーマです。 個人情報やクライアントのデータは、悪意のある第三者に漏洩する可能性があるため、適切に保護する必要があります。 開発者やプログラマーは、暗号化技術やセキュアな通信プロ
Progateはスマホ版とPC版を両方活用しよう！ メダカ皇帝 こんにちは！メダカ皇帝（ @medakakoutei ）です！ブログの毎日更新を400日達成！当ブログはリンクフリーです！記事はお気軽にシェアして下さいヽ(=´▽`=)ﾉ プログラミング初心者がプログラミングを学ぶのにとっても便利なサイトがあります。それがProgateです。 基礎的な部分は無料で利用できます。プログラミング学習の難易度が上がってくれると有料になってくるのですが、それでも月額は980円（税抜き）です。 わかりやすいし、クオリティも高い。 これが無料、もしくは月額980円はすごいです。 Progateはコチラ！ そんなすごいProgateを有効活用するには、スマホ版とPC版を上手に利用すると学習効率が高まりますよ！ オススメの勉強法はスマホでPCをサンドウィッチ！ プログラミング学習はProgateだけでは不十分
IE11サポート終了でWeb開発者にどのような影響があるのか - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
すでに、IE11のサポートが終了して年月が経過していると思いますが、筆記時点では、2022年6月18日でり、IE11のサポート終了してばかりの時期なのでご了承下さい。 ※ 現在の最新情報については、読者の方がご自身で判断してください。 IE 11のサポートが終了したことにより、Web開発者に多大な影響が出ています。 個人ユーザーから企業まで、すべての人々に影響があるでしょう。 IE11デスクトップアプリは、Microsoftによって廃止され、Webブラウザとしてもサポートが終了しました。 このため、ユーザーはIE 11の使用を中止し、Microsoft Edgeに移行する必要があります。 Windows 11のユーザーは既にMicrosoft Edgeがデフォルトのブラウザとなっているため、この変更に心配する必要はありません。 ただし、多くのレガシーアプリやウェブサイトは、まだIE11に依
JavaScriptで学ぶコールバック関数と高階関数の使い方と重要性 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
今回は、JavaScriptにおけるコールバック関数と高階関数について学習していきます。 コールバック関数は、JavaScriptで最も一般的に使用される関数型プログラミングの手法の一つです。 初心者の方でも、知らず知らずのうちに使用していることがあるかもしれません。 JavaScriptには、高階関数が組み込まれており、これらを使うことで、より柔軟で効率的なコーディングが可能となります。 例えば、map()、reduce()、filter()メソッドなどが挙げられますが、これらが高階関数であることに気付かずに使用している方もいるかもしれません。 もしかしたら、すでに高階関数を書いたり使ったりしている方もいるかもしれませんが、その重要性に気付いていないこともあるでしょう。 この記事では、JavaScriptのコールバック・高階関数の概念を理解し、それらを使いこなすための基礎知識を身につける
JavaScript初心者向け：比較演算子、論理演算子、条件演算子の基礎解説 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
本日は、React.js入門を始める前にJavaScript初心者の方向けに、条件付きの論理に関する学習に焦点を当てます。 具体的には、三項演算子、比較演算子、および論理演算子の使用方法を学びます。 なお、代入演算子については説明を省略させていただきます。 ご理解いただくために、これらの用語に関して別途説明を用意しています。 ステートメント 演算子 比較演算子 if…else文 論理演算子 論理否定 論理積(AND) 論理和（OR） 三項演算子 最後に ステートメント JavaScriptでは、多くのステートメントと式を含むことがあります。ステートメントと式は、プログラム内で非常に重要な概念です。 コンピュータプログラムは、コンピュータによって実行される命令のリストです。プログラミング言語では、これらの命令をステートメントと呼びます。JavaScriptにおいても、プログラムはステートメン
Reactアプリケーションのアイデア: 初心者向けの魅力的なプロジェクト例 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
はじめに 1. 生産性系のアプリケーション 2. 個人・専門のブログ 3. SPA(シングルページアプリケーション) 4. クロスプラットフォームモバイルアプリ 5. チャットアプリケーション 6. 語学学習アプリケーション 7. クイズ系アプリケーション 8. お天気アプリ 9. 本・読書アプリケーション 10. オンラインストア 11. ポートフォリオ 12. 出会い系アプリ 13. 音楽アプリ ReactとReact Nativeで構築された有名なアプリの数々 はじめに 初めてReact.jsやReact Nativeを学ぼうとしている初心者の方々にとって、どのようなアプリケーションを作成できるのかについて疑問を抱くことはよくあります。 Webアプリケーションおよびネイティブアプリケーションを構築する際に最も困難なのは、アプリのアイデアを考え出すことかもしれません。 優れたアイデアを
プログラムはほぼ英語で書かれているので、英語で習っても理解できるのではないか――。こんな期待を抱いて米ニューヨーク州で初心者向けのプログラミング教室に参加した経験がある。そこで得た経験を今回の本コラムではお伝えしたい。 私は2021年夏から1年強、家族の都合で2人の子どもと共にニューヨークに住んでいた。そこで英語が全くできない子どもたちが「Google翻訳」や「DeepL」といった様々な翻訳ツールを使いこなしながら、現地の小学校の学習をこなしていく経験を以前にまとめた。 子どもたちが奮闘している間、大人の私は何をやっていたのか。ビザの都合などで働けなかったため米国滞在中は、自由な時間が日本よりも多くあり、「日本でやりたいと思っていたけど時間がなくてできなかったことをやりたい」と考えていた。 そこで見つけたのがPython入門の教室だった。仕事でプログラミングに触れたり、学生時代に入門レベル
React Propsの基礎 完全ガイド：関数コンポーネントでの簡単な取り扱い方法とデータフローの解説 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
React Propsの使い方を初心者にわかりやすく解説します。 関数コンポーネントでは、Propsの取り扱いが非常に簡単です。 また、データの流れを理解するために、Reactコンポーネントのツリー構造を具体的な画像例とともに解説します。 この記事を読んで、Propsの基礎を完全にマスターしましょう。 ReactのProps(小道具)とは？ 関数コンポーネントでPropsを渡す方法 複数のProps オブジェクトをPropsとして渡す 関数をPropsとして渡す 子コンポーネントから親にデータを渡す プロップドリル(Prop Drilling) 最後に ReactのProps(小道具)とは？ コンポーネントを再利用すると、両方の時間で同じコンテンツが表示され続けます。 ですが、他のテキストや外部ソースからデータをフェッチしている間、事前に情報が分からない場合は非常に厄介です。 HTML要素
プログラミング初心者は何から始める？【YouTubeでインプット】アウトプットも大事 - メダカ皇帝
こんにちは😃メダカ皇帝（ @medakakoutei ）です！ブログ収益は10万円以上を達成しましたヽ(=´▽`=)ﾉ ブログの毎日更新、頑張っています。 今日でブログ開始から５９２日目 毎日更新は３８２日目 記事数は７９５記事 となりました。 ずっと苦手で避けていて克服できずにいる分野があったので、この際だから挑戦することにしました。それがプログラミングの勉強です。 初心者のわたしがオススメしたい勉強法はYouTubeです！ でも、ただダラダラYouTubeを見てもわかった気になるだけで頭には残りません。カンタンなコードで良いからアウトプット、つまり実践してみることが大事ですね！ ↓続きはコチラ↓ プログラミング初心者は何から始める？【YouTubeでインプット】アウトプットも大事
JavaScriptのthisキーワードを理解する方法と使い方 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
JavaScriptのthisキーワードやpromise/async/await、スコープ、巻き上げなどの概念を学び始めると、JavaScriptの中級者レベルに到達したと言えます。 ただし、この段階は概念を理解するための難易度であり、技術的な中級者になるための一歩となります。 この中でも、Promiseの概念の理解は、thisキーワードと同じぐらい難易度が高く、学習者によっては急に難しく感じるかもしれません。 thisとはなんですか？ グローバル実行環境 単独のグローバルスコープ 関数内部のthis コンストラクターでの呼び出し クラスでのthis オブジェクトメソッドでの呼び出し thisのカスタム値 アロー関数でのthis DOMイベントハンドラー thisの優先順位 最後に thisとはなんですか？ JavaScriptにおける最も難しい概念の1つが、この「this」キーワードです
JavaScriptクロージャーの仕組みとスコープ：関数型プログラミングにおける重要な概念の解説 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
クロージャー（Closure）の概念は関数型プログラミングにおいて重要であり、JavaScriptの面接でよく質問される事もあります。 どこでも使用されていますが、クロージャーは把握するのがとても困難でもあります。 まず、クロージャーを学ぶまえに（スコープ）および（レキシカルスコープ）の基本を学ぶ必要があります。 そして、前提としてJSの変数および関数に精通しているかご確認下さい。 この記事では、JavaScriptクロージャーの仕組みおよびJavaScriptスコープについて解説します。 スコープ スコープチェーン レキシカルスコープ JSのクロージャーとは？ レキシカルスコープとクロージャーの違い JSでのクロージャの利点と欠点 最後に スコープ JavaScriptのスコープ(Scope)は、変数や関数がどこからアクセス可能かを定義する仕組みです。 変数や関数がどこで宣言されたかによ
Next.js入門: 初心者向けの簡単なセットアップとルーティングシステムの作成方法 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
Next.jsとは プロジェクト作成 フォルダ構成 ルーティングシステム・別ページ作成 最後に ReactのフレームワークであるNext.jsの入門を初心者の方に向けて解説します。 本日の記事と合わせて、静的サイトについても触れています。 こちらの記事も参考にしてみてください：dev-k.hatenablog.com 必要な条件 ・ JavaScriptに精通していることや豊富な経験があることが求められます。 クラス、スプレッド演算子、Promiseなどの概念の知識は必須です。 ・ ローカルの開発環境にNode.jsがインストールされていること。 Node.jsのインストールは、Download | Node.jsから行ってください。 ・ React.jsの基礎知識をある程度持っていること。 ※ なお、この記事はNext.js 13以前に投稿された記事となっておりますのでご了承下さい。 N
複合代入演算子って何？！【プログラミング初心者】見慣れない式で混乱しないために - メダカ皇帝
プログラミング学習を頑張っています！ メダカ皇帝 こんにちは！メダカ皇帝（ @medakakoutei ）です！ブログの毎日更新を400日達成しました。読者のみなさまへ有益な情報提供を心がけていますヽ(=´▽`=)ﾉ 現在、プログラミング学習を頑張っています。いまやっているのは、HTML&CSS、そしてPHPです。 初心者のわたしにはどちらも本当に難しいです。プログラマーの人は、こんなのを当たり前のように理解しているんですから、本当にすごい人たちで尊敬しちゃう。。。 そんなプログラミング初心者のわたしですが、複合代入演算子がなかなか理解できずにつまづきそうになりました。 いまはなんとなくわかったような気がするんですが、復習の意味を込めて整理していきたいと思います。 複合代入演算子って何なの？もう全然わかんなーい！ ブロガーちゃん メダカ皇帝 プログラミング初心者には言葉だけで難しそうですよ
JavaScript関数の基礎構文と種類の使い方解説 | 初心者向けJavaScript学習ガイド - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
この記事では、初心者向けにJavaScriptの関数・関数式およびアロー関数の基礎構文について学習します。 JavaScriptで利用できる関数にはさまざまな種類があります。 全てをここで紹介は難しいですが、ほとんどの関数動作を学んでいきましょう。 関数の利点 関数の宣言と呼び出し 関数リターン(戻り値) 関数式(無名関数) ES6 アロー関数 関数オブジェクト 即時関数 関数配列 最後に 関数は、特定のタスクを実行するコードのブロックとなります。 何かしらの図などの機能を作成して色を付けたりするプログラムを作成する必要があるとします。 まず問題を解決するために2つの関数を作成できます。 図を描く関数と図に色を付ける関数 １つの複雑な問題を小さな機能によって分割すると、プログラムが理解しやすくなり、再利用しやすくなります。 メイン機能プログラムとは別に保持および保守できます。 関数はより移
Webpack基本構成ファイルのセットアップ手順｜初心者向け基礎ガイド - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
Webpackとは entryとoutput Loaders ローダー babel-loader css-loader/style-loader Plugins(プラグイン) webpack-dev-server 最後に 以下のリンクを合わせてお読み下さい。 dev-k.hatenablog.com Webpackとは Webpackは、JavaScriptやその他のモジュールに依存するファイルを1つのファイルにまとめることができる便利なモジュールバンドラーです。 JavaScriptのモジュールバンドラーとしては最もよく知られており、HTMLやCSSなどのファイルに対してもバンドルすることができます。 Webpackを使用するには、Node.jsのパッケージマネージャーであるnpmを介してインストールする必要があります。 まず、"npm init"コマンドを使用してプロジェクトを初期化し
プログラミング学習を始めました！ メダカ皇帝 こんにちは！メダカ皇帝（ @medakakoutei ）です！ブログの毎日更新を400日達成しました。読者のみなさまへ有益な情報提供を心がけていますヽ(=´▽`=)ﾉ 長年、やってみたかったのに挑戦できていなかったプログラミング学習を始めました。 わたしはもう40歳をはるかに過ぎ、人生はすでに折り返した感じです。 ポイント このまま惰性でサラリーマンとして逃げ切ることもできるんでしょうが、どうしても自力で稼げるスキルを身につけたくてプログラミング学習を始めました。 今日は40すぎでプログラミング学習を始めるのは無謀なのか？いったいどうすればプログラミングを身につけられるのかについて解説していきます。 目次 [非表示] 1 プログラミングの習得は若い人じゃないと無理？ 2 プログラミング学習で大切だと思ったこと 2.1 インプットを繰り返す 2.
こんにちは。谷口です。 最近、機械学習の勉強をしている人や、機械学習に関連した研究開発の求人を探す人がすごく増えてきました。 paizaが運営しているプログラミング学習サイト「paizaラーニング」でも、Python×AI・機械学習入門編は非常に人気があります。 ただ、「機械学習を勉強したいけど、何から手を付けたらいいのかよくわからない」「挑戦してみたいけど、難しそう」という人も多いです。それなりに開発経験のあるエンジニアでもそうなので、経験の浅い人だと、なおさらかと思います。機械学習を実践するのに必要な知識の分野は多岐に渡りますので、やみくもにやろうと思ってもなかなか身につきません。 そこで今回は、機械学習を学ぼうと思っている初心者・未経験者の方へ向けて、機械学習の入門に役立つ記事をまとめました。 これから機械学習の勉強を始めようとしている方の参考になれば幸いです。 目次 機械学習への入
React カスタムフック スクロールイベント - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
スクロールイベント 現在のウィンドウ位置を取得 ページ上のDOM要素にアクセス 最後に スクロールイベント スクロールイベントは、Webページで最もよく使用されるイベントの1つです。 ほとんどの場合では必要なのは『一番上までスクロール』することだけです。 長いコンテンツページがありそこに移動すると、下にスクロールされたままになり、一番上に戻るのが非常に面倒になるためです。 ですが、その前にReactのコンポーネントを作成しスクロールイベントリスナーで現在のウィンドウ位置を取得する方法を学ばなければいけません。 本日はその取得方法を解説していきます。 Reactフックでカスタムフックを作成し、再利用可能なコンポーネントにします。 それでは簡単な例で学んでいきましょう。 現在のウィンドウ位置を取得 // useScroll.js import { useEffect, useState } f
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は、独自の
プログラミング 初心者に必要なものをまとめました！ メダカ皇帝 こんにちは！メダカ皇帝（ @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)
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
プログラミング初心者はツイッターをやるべき５つの理由【独学はつらい】 - メダカ皇帝
プログラミング初心者が無料で独学する方法【無料はコスパ最高】 - メダカ皇帝
プログラミング初心者が1年でKaggle・Signateでメダルを取った話 - Qiita
【プログラミング初心者】 PHP&SQLの学習におすすめサイト - メダカ皇帝
プログラミング初心者は目標設定が大事【学習が目的にならないために】 - メダカ皇帝
プログラミング初心者にオススメのエディタ紹介【３選】どれも便利 - メダカ皇帝
プログラミング初心者にオススメの勉強方法【Progateの活用】 - メダカ皇帝
プログラミング初心者がニューヨークでPythonを習って気づいたこと
【40代！？】プログラミング初心者が勉強を始めた【無謀】 - メダカ皇帝
プログラミング初心者が「機械学習の入門に読むといい記事」まとめ - paiza times
プログラミング初心者に必要なもの【7選】学習効率がアップ！ - メダカ皇帝