タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
【JS完全に理解した】JavaScript PrimerとプログラミングTypeScriptとレガシーフロントエンド安全改善ガイドを読んでみた - give IT a try
はじめに 僕は仕事でRuby on Railsを使ってWebアプリケーションを開発しているので、JavaScriptはそれなりに使えます。 ですが、サーバーサイドで使っているRubyに比べると、JavaScriptの習熟度はそれほど高くありません。 とくに、文法が一気にブラッシュアップされたES2015（ES6）以降の知識は「なんとなく把握はしているが、あくまでなんとなく」といった感じです。 また、最近よく名前を聞くようになったTypeScriptも「名前は知っているが使ったことはない」というのが現状です。 というわけで、「そろそろちゃんと勉強しておかないと」という思いから、以下の本を購入してみました。 JavaScript Primer 迷わないための入門書 (アスキードワンゴ) 作者:azu,Suguru Inatomi発売日: 2020/06/10メディア: Kindle版プログラミ
この3つの原則は書籍の構成にも現れています。 第一部の基本文法で「書き方」を学び、第二部のユースケースで「作り方」を学べるようになっています。 「学び方」は、章としてではなく全体的な流れとして取り入れることにしました。 なぜなら、「学び方」自体は学びたいことによっても異なる方法を取る場合があります。 そのため、「学び方」で個別の章とするよりは、他の章で「書き方」や「作り方」と一緒に見たほうがよいと考えたためです。 たとえば、基本文法などの学び方にはMDNのようなリファレンスサイトを見たほうがいいし、 アプリケーションの作り方は実際のサイトなどを参考にしたほうがよいためです。 第一部と第二部がどのように書かれたのかをざっくりと振りかえってみます。 第一部: 基本文法 第一部: 基本文法はJavaScriptの基本的な文法について扱っています。 プログラミングの入門書で文法については避けること
ECMAScript 2020の変更に対応したJavaScriptの入門書としてJavaScript Primer 2.0.0を公開しました。 JavaScript Primerのウェブサイトから閲覧できます。 ウェブサイト: https://jsprimer.net/ サマリIssue: ECMAScript 2020の対応 · Issue #1145 · asciidwango/js-primer 変更内容の詳細はリリースノートを参照してください。 Release 2.0.0: ECMAScript 2020対応 · asciidwango/js-primer 2.0.0の目的 JavaScript Primerは、継続的にメンテナンスするためにOSSとして開発しています。 ECMAScriptの仕様は年に一度アップデートされていて、現実でのJavaScriptの使われ方も変化していく
SOLID原則を理解し、JavaScriptで実践するためのガイド - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
ソフトウェア開発者にとって、堅牢でテスト可能で拡張性があり、保守性の高いオブジェクト指向のソフトウェアシステムを設計することは重要です。 そこで登場するのがSOLID原則です。 SOLIDは、ソフトウェア開発中に生じるかもしれない特定の問題を解決するために5つの設計原則が組み合わさったセットです。 この記事では、SOLID設計の原則について詳しく学んでいきます。 具体的には、SOLID原則が何を意味しているのか、各部分がそれぞれ何を表しているのか、また実際のプログラム例を挙げながら現役のプログラマーが説明します。 さらに、JavaScriptを使ってこれらの原則を実装する方法も紹介します。 SOLID設計原則とは？ 単一責任原則 (SRP) Open/Closed原則 リスコフ置換原理 (LSP) インターフェース分離原則 (ISP) 依存関係逆転の原則 最後に SOLID設計原則とは？
JavaScript Primer - 迷わないための入門書
付録: JavaScriptチートシート JavaScriptの言語機能に関するチートシートです。 言語機能 コメント データ リテラル 文字列 データアクセス 演算子 関数と挙動 コントロールフロー モジュール その他 ガイド プロジェクト構造 言語機能 コメント コメントの書き方について。
JavaScript Primer 改訂2版をリリースしました！/JavaScript Primerはなぜ更新され続けるのか？ JavaScriptの入門書であるJavaScript Primer 改訂2版 迷わないための入門書がリリースされました。 書店やオンライン書店で購入できます。 KADOKAWA: 「JavaScript Primer 改訂2版 迷わないための入門書」azu [ＰＣ・理工科学書] - KADOKAWA Amazon: JavaScript Primer 改訂2版 迷わないための入門書 | azu, Suguru Inatomi |本 | 通販 | Amazon 楽天: 楽天ブックス: JavaScript Primer 改訂2版 迷わないための入門書 - azu - 9784048931106 : 本 ヨドバシ: ヨドバシ.com - JavaScript Pri
JavaScript Primerは https://jsprimer.net/ でOSSとして公開しているJavaScriptの入門書です。 JavaScript Primerの書籍版が2020年4月27日にアスキードワンゴから発売されます！ 正式名称は「JavaScript Primer 迷わないための入門書」となっています。 略称は今まで通り jsprimer または js-primerです。 ハッシュタグも引き続き #jsprimer を利用してください。 予約できるのは物理書籍だけですが、電子版(Kindleと達人出版)も発売同日〜後日に発売される予定です。 書店への物理的なアクセスが難しい状況なので、欲しい人はできるだけ予約してください！Amazonなら次のページから物理書籍を予約できます。 JavaScript Primer 迷わないための入門書 | azu, Suguru
Reactコンポーネントの基本原則と人気のUI/UXデザインライブラリの解説 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
Reactは単なるUIライブラリではなく、コンポーネントベースのアプリケーション開発フレームワークです。UI/UXデザインの基本原則に加え、再利用性や状態管理、データフローなどの概念も重要です。 Reactのコンポーネントベースのアーキテクチャを活用すると、UIと裏側のロジックを分離して管理しやすくなり、効率的なアプリケーションの開発が可能です。 今日は、Reactにおけるコンポーネントの基本原則の解説と、初心者に役立つReactコンポーネントライブラリの紹介を提供します。 コンポーネントの設計原則 UI（ユーザーインターフェース） UX（ユーザーエクスペリエンス） UIのデザインに役立つReact コンポーネントライブラリ React Material UI React-Bootstrap Fluent UI Chakra UI Semantic UI React Ant Design
【感想】『JavaScript Primer 迷わないための入門書』でモダンJS再入門 #jsprimer - Rのつく財団入り口
JS完全に理解した……（し て ま せ ん） 見出しはエンジニア界隈でお馴染みのダニング=クルーガー曲線のアレでございます。2020年6月に出たばかりの最新のJS本を読んだので書評です。 570ページ余りの分厚さで電子版もあり。著者はECMAScriptの仕様にも関わっているazuさん、Angular日本ユーザー会代表のSuguru Inatomiさんと強力な布陣。ES2015(ES6)以降も進化を続けるJavaScriptについて、完全にES6をベースにしたモダンな入門書となっています。 コンテンツはGitHubで管理されてオープンソースとして執筆され、様々な人がコントリビュートした結果が反映される面白い作り方になっています。Web版もすべて無料で参照できるのですが、こういう体系的な情報はまとまった本で学ぶことにしているので電子版で読みました。 僕も2017-2018年ごろに掛けてJS＆
JavaScript Primer(jsprimer.net)が、ECMAScript 2022(ES2022)に対応しました。 リリースノート: Release v4.0.0: ES2022 · asciidwango/js-primer これまでのjsprimer ECMAScriptの仕様書は毎年更新されるので、それに合わせてjsprimerも更新しています。 1.0.0(ES2019): JavaScript Primerを出版しました！/JavaScript Primerはなぜ書かれたのか？ 2.0.0(ES2020): JavaScript Primer 2.0 - ECMAScript 2020に対応した入門書を公開しました 3.0.0(ES2021): ES2021に対応したJavaScript Primer 3.0を公開しました - JavaScript入門 今回のアップ
オブジェクト指向プログラミング入門 -- Java object-oriented programming primer
Javaで学ぶ、オブジェクト指向プログラミングの基礎知識。型とカプセル化が腹落ちすると、びっくりするくらいオブジェクト指向プログラミングがわかようになる／できるようになるRead less
JavaScript Primer 迷わないための入門書
JavaScript Primer 迷わないための入門書 azu, Suguru Inatomi アスキードワンゴ 3,344円 (3,040円+税) 変化に対応できる基礎を身につけよう! JavaScriptは激しく変化している言語です。このような変化に対応できる基礎を身に付けられるよう、単に書き方を解説するのではなく、プログラミングの現場で直面する問題を自分自身で解決するのに必要な調査方法についても焦点を当てています。 関連サイト本書の関連ページが用意されています。 JavaScript Primerを出版しました！/JavaScript Primerはなぜ書かれたのか？ | Web Scratch内容紹介変化に対応できる基礎を身につけよう! 本書の「第1部 基本文法」では、JavaScriptの文法と機能について、実際の利用方法を示しながら解説しています。また「第2部 ユースケース」
https://jsprimer.net/ で公開している「JavaScript Primer(jsprimer)」の改訂2版の予約が開始されました。 jsprimer 改訂2版の発売日は2023年6月9日の予定です。 KADOKAWA: 「JavaScript Primer 改訂2版 迷わないための入門書」azu [ＰＣ・理工科学書] - KADOKAWA Amazon: JavaScript Primer 改訂2版 迷わないための入門書 | azu, Suguru Inatomi |本 | 通販 | Amazon 楽天: 楽天ブックス: JavaScript Primer 改訂2版 迷わないための入門書 - azu - 9784048931106 : 本 ヨドバシ: ヨドバシ.com - JavaScript Primer 改訂2版 迷わないための入門書 [単行本] 通販【全品無料配達
JavaScript入門書のJavaScript Primerのウェブ版をアップデートして、2021年の最新の仕様であるES2021に対応しました。 JavaScript Primerのウェブサイトから閲覧できます。 ウェブサイト: https://jsprimer.net/ リリースノート: Release 3.0.0: ECMAScript 2021対応 · asciidwango/js-primer 対応のサマリIssue: ES2021の対応 · Issue #1220 · asciidwango/js-primer JavaScript Primerについて JavaScript Primerは、これからJavaScriptを学びたい人が、ECMAScript 2015以降をベースにして一からJavaScriptを学べる書籍です。 ECMAScriptの仕様は毎年アップデートされ
GitHub - primer/github-vscode-theme: GitHub's VS Code themes
Clone and open this repo in VS Code Run yarn to install the dependencies. Press F5 to open a new window with your extension loaded Open Code > Preferences > Color Theme [⌘k ⌘t] and pick the "GitHub ..." theme you want to test. Note: It seems this has to be done 2x because the first time it switches back to the default light theme. This might be a bug? Make changes to the /src/theme.js file. UI: Fo
技術書典用に書いていた本「A Primer on Adversarial Examples」を公開した
TL;DR PDF ファイルは こちら GitHub repository は こちら 無料で公開してますが、役に立ったという人はぜひ BOOTH の商品 を買っていただけると！（内容は同じです） 技術書典 8 で販売しようと思っていた adversarial examples の本を公開します。 技術書典、初参加の予定だったので楽しみだったんですが、中止となってしまったのは残念です（致し方ないですが）。 運営の方々は大変な決定だったと思います、改めてこの場で労いと感謝の意を表明しておきます。 オンラインで開催されるという話ですが、元々は 2 月末に出そうと思って準備していて一通りは完成したので、ここで公開しておきます。 （オンラインで開催されるようならそちらにも出したいとは思っています） 本とコードをセットで書きました。 自分は有料じゃないと見れない情報とか好きじゃないので、無料で公開し
JavaScript ES6のAsync/Awaitで非同期処理とエラー処理、並列処理を解説！初心者向け完全ガイド - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
この記事では、ES6のasync/await、およびPromises.all()を使用して非同期プログラミングを容易にする方法を学習します。 前回でのPromiseチュートリアルは以下で学ぶことができますので参照ください。 dev-k.hatenablog.com async/awaitとは asyncキーワード awaitキーワード Promise並列処理 async/awaitでのループ エラー処理 async/awaitでFetchを使用する方法 使用に関する注意点(ルール) 最後に async/awaitとは async/awaitは技術的に言えば、Promisesのシンタックスシュガー(Syntax sugar)となります。 シンタックスシュガーとは簡単に言ってしまえば、構文を省略しプログラムを書いていく事をシンタックスシュガーと言います。 ですが、これはプログラミング言語によっ
JavaScriptの巻き上げとは？変数と関数での動作 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
本日はJavaScriptの巻き上げについて学習します。 巻き上げとは？ 変数の可変巻き上げ 関数の巻き上げ 関数式(無名関数)の巻き上げ クラスでの巻き上げ まとめ JSのスコープについては下記入門で解説しております。 dev-k.hatenablog.com 巻き上げとは？ JavaScriptでの巻き上げ(hoisting)は、宣言の前に関数または変数を使用できる動作です。 JavaScriptコンパイラは、エラーが発生しないように、変数と関数のすべての宣言を一番上に移動します。 これは巻き上げと呼ばれます。 なぜこの巻き上げを１つの記事として取り上げるのか それは巻き上げは、多くの開発者にとってJavaScriptの未知のまたは見落とされた概念でもある為です。 中級者ですら巻き上げについてあまり理解されていない方が稀にいらっしゃいます。 しかし、開発者が巻き上げを理解していない場合
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に基づいて特定の値
JavaScriptからTypeScriptへの移行ガイド：フロントエンド開発者にとって不可欠なTypeScriptの利点と基礎知識 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
TypeScriptとは？ コンパイル 静的型システム 型の違いについて 型の定義 最後に 本日は、JavaScriptにおけるフロントエンド開発者にとって不可欠なTypeScriptについてご紹介します。 TypeScriptを学ぶには、JavaScriptにおける「型」やその他の基礎知識に詳しいことが重要です。 実際、多くのエンジニアは次のように言います。 「JavaScriptの知識を基にしてTypeScriptに移行しましょう」 TypeScript公式も同様のアドバイスをしていますので、JavaScriptに詳しくない方にとっては、この記事を読んでも理解するのが難しいかもしれませんのでご了承ください。 今後、多くの用語が登場しますので、お気をつけください。 この記事では、TypeScriptの利点を紹介し、初心者から上級者まで、誰もがこの言語に興味を持つように刺激します。 Typ
JavaScript Primer v5.0.0: ES2023の対応/CC BYライセンスに変更/Open Collectiveで支援できるようになりました ECMAScript 2023(ES2023)をサポートしたJavaScript Primer v5.0.0をリリースしました。 Release v5.0.0: ES2023/CC BYライセンスに変更/Open Collective · asciidwango/js-primer JavaScript Primer(jsprimer)は、JavaScriptの文法や機能を一から学べるように書かれている入門書です。 今回のウェブ版のアップデートでは、最新のECMAScriptに対応しました。 jsprimer v5.0.0リリースに合わせて、文章のライセンスをCC BY-NC 4.0からCC BY 4.0へと変更しています。 また、
JavaScript PrimerのES2024の対応を進めていく予定なので、 対応を手伝ってくれるContributorとjsprimerというプロジェクトを支援してくれるSponsorを募集しています。 追記(2024-03-22): Contributorを希望する方は集まりました。ありがとうございます！ JavaScript Primerスポンサーは引き続き募集しています！ Gold Sponsors Supporters 3行サマリー ES2024の対応を6月末までにやるマイルストーンを切りました ES2024の対応を手伝ってくれるContributorを募集しています Open Collectiveを始めたので、プロジェクトを支援してくれるSponsorを募集しています jsprimerのES2024対応 jsprimerは毎年のECMAScriptの仕様改定にあわせてメジャー
React.jsの欠点を理解する 基礎 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
React.jsは、モバイルアプリとウェブアプリのビューレイヤーを担当するJavaScriptライブラリです。 Reactには多くの利点がありますが、考慮すべきいくつかの欠点があります。 React.jsの使用を開始する前に、Reactの全体像を把握するために簡単に触れておきましょう。 ※メリットに関しては別途記事に致します。 本日はReact.jsでの欠点を重点的に解説していきます。 ドキュメントに関する欠如 プラットフォーム関連 開発ペース 複雑なJSX構文 学習における問題 まとめ ドキュメントに関する欠如 教育に関する文書とリソースは、最新の更新と変更をカバーするのにまばらになる可能性があったりします。 これはアップデートや新しいリリースの数が多いため、完全なドキュメントを作成するのに十分な時間がありません。 開発者はドキュメントをReact.js/React Nativeの欠点と
JavaScript Primer - 迷わないための入門書
文字列とUnicode 「文字列」の章で紹介したように、JavaScriptは文字コードとしてUnicodeを採用し、エンコード方式としてUTF-16を採用しています。 このUTF-16を採用しているのは、あくまでJavaScriptの内部で文字列を扱う際の文字コード（内部コード）です。 そのため、コードを書いたファイル自体の文字コード（外部コード）は、UTF-8のようにUTF-16以外の文字コードであっても問題ありません。 「文字列」の章では、これらの文字コードは意識していなかったように、内部的にどのような文字コードで扱っているかは意識せずに文字列処理ができます。 しかし、JavaScriptのStringオブジェクトにはこの文字コード（Unicode）に特化したAPIもあります。 また、絵文字を含む特定の文字を扱う際や「文字数」を数えるという場合には、内部コードであるUTF-16を意識
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を利用して攻撃を行う方法についても探ってみましょう。 現代のデジタル時代において、セキュリティの重要性はますます高まっています。 個人情報や機密データの保護は切迫した課題であり、特に開発者やプログラマーにとっては重要なテーマです。 個人情報やクライアントのデータは、悪意のある第三者に漏洩する可能性があるため、適切に保護する必要があります。 開発者やプログラマーは、暗号化技術やセキュアな通信プロ
JSのFW使うなら一度でいいから JavaScript Primer の Todoアプリの章はやっておいたほうが良い件 | WEBMAN
Tags: JavaScript vue 個人的にはJSを学ぶならMDN 推しなのですが、MDNに並ぶ参考書として JavaScript Primer も推しています。 推しているクセに最近まで「第二部: ユースケース 」を全く読んでいなくて、「Todoアプリの章 」を読みながら手を動かしてみるとめちゃくちゃ学びが多かったのでメモです。 # データバインディングの理解が深まる フレームワーク(FW)ではよしなにしてくれいているデータバインディングをVanilla JSで実装していくので、Vue.jsの理解が深まります。 emit メソッドを自分で実装して、Vue.jsの emit もこんな感じのことやっているのかなと想像を掻き立てられました。 Observerパターンという単語は知っていたけど、よくわかっていなかった私にとっては目からウロコでした。 # モデルの理解が深まる DOMで状態を
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のコールバック・高階関数の概念を理解し、それらを使いこなすための基礎知識を身につける
React コンポーネントを強制的に再レンダリングする方法 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
Reactは、PropsまたはStateが更新されるたびに、コンポーネントを自動的に再レンダリングします。 どちらも変更されない場合は、再レンダリングは発生しません。 しかし、初心者はコンポーネントを再レンダリングするのが非常に難しいと感じることがよくあります。 まず、コンポーネントを再レンダリングするために使用できる方法を見て、本当に再レンダリングを強制するべきか、 Reactに処理させるべきかについて説明します。 Reactコンポーネントを再レンダリングさせる方法とタイミングを真に理解するには、Reactの内部動作を理解する必要があります。 つまり、コンポーネントを強制的に再レンダリングするべきかどうかを学習すれば、Reactの内部動作を理解するのに非常に役立ちます。 Reactコンポーネントを強制的に再レンダリングする必要はあるのか？ Reactの状態が正しく更新されない 不
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アプリケーションおよびネイティブアプリケーションを構築する際に最も困難なのは、アプリのアイデアを考え出すことかもしれません。 優れたアイデアを
React Propsの基礎 完全ガイド：関数コンポーネントでの簡単な取り扱い方法とデータフローの解説 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
React Propsの使い方を初心者にわかりやすく解説します。 関数コンポーネントでは、Propsの取り扱いが非常に簡単です。 また、データの流れを理解するために、Reactコンポーネントのツリー構造を具体的な画像例とともに解説します。 この記事を読んで、Propsの基礎を完全にマスターしましょう。 ReactのProps(小道具)とは？ 関数コンポーネントでPropsを渡す方法 複数のProps オブジェクトをPropsとして渡す 関数をPropsとして渡す 子コンポーネントから親にデータを渡す プロップドリル(Prop Drilling) 最後に ReactのProps(小道具)とは？ コンポーネントを再利用すると、両方の時間で同じコンテンツが表示され続けます。 ですが、他のテキストや外部ソースからデータをフェッチしている間、事前に情報が分からない場合は非常に厄介です。 HTML要素
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
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScript Primerを出版しました！/JavaScript Primerはなぜ書かれたのか？
JavaScript Primer 2.0 - ECMAScript 2020に対応した入門書を公開しました
JavaScript Primer 改訂2版をリリースしました！/JavaScript Primerはなぜ更新され続けるのか？
JavaScript Primerの書籍版が4月27日に発売予定です！
JavaScript Primer 4.0.0: ECMAScript 2022に対応したJS本
JavaScript Primer 改訂2版の予約が開始されました
ES2021に対応したJavaScript Primer 3.0を公開しました - JavaScript入門
JavaScript Primer v5.0.0: ES2023の対応/CC BYライセンスに変更/Open Collectiveで支援できるようになりました
JavaScript PrimerのES2024対応を手伝ってくれるContributorとSponsorを募集しています
pukupuku25.hatenablog.jp
himatubushitrend.com
yama5600.tokyo
eigakansou.biz
togetter.com
news.yahoo.co.jp