Reactに対する見方をアップデートする 国内外の優れた開発者の方による React の各論の記事は枚挙にいとまがありません。しかし、React の入門を一通り終えた方に向けの浅く広い総論はあまり見かけません。 React の公式ドキュメントのトップページに掲載されている短い3つの文章があります。この React の本質を表現した文章を掘り下げることが、初学者のステップアップにつながるのではないかと考え、各章に対して注釈を加えました。 React について少し深く知ることで、さらに React を好きになったという方を一人でも多く増やしたい。その思いから本記事を執筆しました。 本記事は React の考え方を知ることで、React に対する見方をアップデートすることを目的としています。 Reactとは何か。それはUIを構築するためのJSライブラリである React公式ドキュメントの一文 R

教師と生徒の恋愛、漫画の中だけだと思うじゃん？教師同士よりあるんだなこれが。もちろん在学中の生徒と付き合ってんのがバレたら教師は一発クビだから、大抵は卒業後に会ってるうちに…っていう体だけど、まあ在学中から噂が立ってるようなのが殆どですよ。隠してはいるんだろうけど、人の目が多い狭い空間で関係の隠し事はなかなかに難しい。校長副校長も目を光らせてるけど、クビが絡む事案だけに証拠がないと動けないらしく、あくまで噂立ってるから気をつけてね程度の注意で終わる。だから減らない。 そもそも生徒が教師に思いを寄せがちなのが私立高校である。自分も何度か告白されたことがあるが、それは別に自分のスペックが高いわけじゃなくて、うちの学校で高校三年生を担当する若手教師で、未婚で性格によほど難がなければ生徒に告白される経験をする羽目になる。なんでかっていうと簡単で、受験期の不安定なメンタルのケアをしてくれた大人への感

Hatena ID is an account used for various Hatena services.

※ @mizchi さんのアンサー記事「プログラミング初心者のための JavaScript と Node.js の歴史、それを踏まえた勉強方法」 もこの後にあわせてどうぞ。 https://zenn.dev/mizchi/articles/3789a101dae388d98159 Python3とPHP7をちょぼちょぼとやっている個人がJavaScript(2016年以降)/node.js/JS系ライブラリ/JS系Webフレームワーク/TypeScript等を攫っている中で一つ思ったことをメモった。JavaScriptやるなら絶対node.jsの実行環境揃えてからがいい、そうしないでJSやるくらいなら汎用性信じてPython3一択に絞った方がいい、と思ったという件です。 具体的には、以下の構成のみでJavaScriptの開発演習をすればいいんじゃないか、という話です。 続きを読む

プログラミング初心者のための JavaScript と Node.js の歴史、それを踏まえた勉強方法 2020年でJavaScript学ぶならきっとブラウザ向けJSガン無視していきなり初手node.js（ただし暫く何も足さない）がいいんじゃないかというメモ - min.t (ミント) Node.js を教えることについて、自分は賛成なんですが、その学習パスが整理されてないなと思っていたのと、学習パスがなぜ整理されていないかについて書きます。 はじめに 問題意識として、今のプログラミングスクールや独学勢が Ruby on Rails に偏っていて、 Node.js の人間としては、歯がゆく感じているんですが、実際 Node.js を教えるとしても問題も多いと認識しています。 歴史の話は、当時の実情や政治を省いて結果だけを書きます。具体的には第一次ブラウザ戦争、第二次ブラウザ戦争を言及しませ

Next.js by Vercel - The React Framework 画像は Next.js サイコー！っていう顔です。 Webフロントエンドエンジニアであれば、「Reactのフレームワーク」と聞いて真っ先に思いつくであろうNext.js。僕は小規模の趣味開発から中規模の業務まで、4年程度Next.jsを使い続けてきました。触りはじめの当時はバージョン4で、”SSR（Server-side Rendering）を提供するReact製フレームワーク”だったものが、執筆時時点の最新バージョン（10.0.1）ではガラッと異なるフレームワークへと進化しています。 この4年間は実務で利用するだけでなく、新しいものや廃止された機能、RFC止まりになった機能など、Next.jsに関する情報を追いかけており、ある程度の知見をためつつも、Next.js並びに開発元のVercelが目指す方向性を何と

初期の作品 --- Early Work Paul Graham, October 2020 これは、Paul Graham： Early Work を、原著者の許可を得て翻訳・公開するものです。 <版権表示> 本和訳テキストの複製、変更、再配布は、この版権表示を残す限り、自由に行って結構です。 (「この版権表示」には上の文も含まれます。すなわち、再配布を禁止してはいけません)。 Copyright 2020 by Paul Graham 原文: http://www.paulgraham.com/early.html 日本語訳：Shiro Kawai (shiro ＠ acm.org) <版権表示終り> Paul Graham氏のエッセイをまとめた『ハッカーと画家』の 邦訳版が出版されました。 出版社の案内ページ Amazon.co.jp サポートページ 2020/10/20 翻訳公開

最近 React のパフォーマンスチューニング、特に再レンダリング抑制について調べたのでそのまとめです。 特に昔からおまじないとして書いていたことを、「なんであの書き方していたんだっけ」というのを調べてまとめました。 古いものを調べたのは、今あるチューニング方法とその当時の解決方法を比較したかったからです。 再レンダリングとはなにか 公式に説明があったのでそのまま引用します。（https://ja.reactjs.org/docs/optimizing-performance.html#avoid-reconciliation） React では、コンポーネントの props や state が変更された場合、React は新しく返された要素と以前にレンダーされたものとを比較することで、実際の DOM の更新が必要かを判断します。それらが等しくない場合、React は DOM を更新します

この記事は、著者の許可を得て配信しています。 https://blog.robenkleene.com/2020/09/21/the-era-of-visual-studio-code// 使用するツールを選ぶときに私が最も重視しているのは寿命です。ソフトウェアの学習は投資であり、後で別のアプリケーションに切り替えなければならない場合は、今まで投資してきた資産の一部を失うと言っても過言ではありません。 ほとんどのソフトウェアのカテゴリにおいて、寿命の長いソフトウェアを選ぶのは簡単で、最も人気のあるツールは、通常、最も長く続いているものです。Microsoft ExcelとAdobe Illustrator は両方とも1987年にリリースされましたが、今でもそれぞれのカテゴリで最も人気のあるソフトウェアであり続けています。 一方、テキストエディタは、最も人気のあるオプションが一番古いものでは

React のコンポーネント周りの用語ってごっちゃごちゃになった経験はありませんか? 友人と話すときなどはなんとなくのニュアンスで伝わるので気にしていなかったのですが、型注釈つけるときやコードリーディングするときに言葉の定義がわからなくなって何回も調べるといったことをよくやるのでこれを機に整理しようと思います。 本記事では JSX 以外にも createElement 記法の知識も要するので、自信がない方は公式やどうして JSX を使ってもエラーにならないのか？をご覧ください。 ここでは React のドキュメント JSX Elements Components TypeScript の型定義 JSX.Element ReactElement DetailedReactHTMLElement DOMElement FunctionComponent Component ReactNode

このチュートリアルでは、Oh My Posh を使用して PowerShell または Linux 用 Windows サブシステム (WSL) のコマンド プロンプトをカスタマイズする際に役立つリソースと指示書をいくつか紹介します。 Oh My Posh には、Git 状態の色分けとプロンプトを提供する、完全にカスタマイズされたコマンド プロンプト エクスペリエンスを実現するためのテーマ機能が用意されています。 このチュートリアルでは、以下の内容を学習します。 Nerd Font をインストールする カスタマイズされたコマンド プロンプトでは、多くの場合、プロンプトのスタイルを設定するのにグリフ (グラフィック シンボル) を使用します。 お使いのフォントに適切なグリフが含まれていない場合は、プロンプト全体に Unicode の置換文字 '▯' がいくつか表示されることがあります。 ター

将来読み返して「そんなこともありましたねぇ」と思うために書き残しておきます。なお、記事中の日時は日本時間です。 2020年9月16日 2:00に開催されたAppleEventにて、iOS14のリリース日が2020年9月17日だと発表されました。突然の発表に戸惑い、時にはキレるエンジニアたち。どうしてでしょう。 iOS 14のGM版が出てねぇ AppleEventの開始時点ではiOS 14のBeta版は以前から利用可能でしたが、GM版は出ていませんでした。 Beta版でのデバッグも可能ですがやはりBeta版ですので、不具合も発生します。この不具合がBeta版iOSのせいなのか、アプリのせいなのか判断をするのは難しいです。そのため、不具合報告をAppleにフィードバックを送ったりしてGM版の登場を待ちます。そして、GM版が公開されてから、再度がっつりと動作確認・デバッグすることが多いです。 i

はじめに Github Help Wantedでissueを選ぶ OSSのコントリビュート方法を確認する 実装 既存コードの動作確認 機能実装 プルリクを出す マージされる 最後に はじめに こんにちは。広告技術部のjohnmanjiroです。普段は広告配信のAPIや管理画面を作っています。 今回は最近自分が始めたOSS活動のやり方について紹介しようと思います。 issueを見つけたその日にプルリクを出し、約１週間後にマージされました。 「OSS活動始めたいけど、別に普段使ってる中でバグを見つけたりもしてないし、貢献したい明確なOSSもない、どうしよう🤔」そんなOSS活動未経験者の参考になれば幸いです。 ちなみに自分自身、活動を始めたばかりのペーペーです。 Github Help Wantedでissueを選ぶ OSS活動を始めるにあたって、まずは貢献するissueを選びましょう。iss

◆「今季初勝利。レッドブル・ホンダとフェルスタッペンが覆したF1の常識」はこちら＞＞＞ ダイナマイトボディのF1グリッドガール レースというのは、すべてが技術的・理論的に説明できるはずなのに、時に理屈で説明できないような驚くべきことが起きる。だからこそ、そこに感動がある。 アルファタウリ・ホンダのピエール・ガスリーがここで初優勝を挙げるなど、誰が想像できただろうか。王者メルセデスAMGより１秒遅いマシンで勝つなど、理屈のうえではあり得ない。しかし、それをやってのけた。 メインストレートの上空に浮かぶモンツァの表彰台の中央に立ったガスリーは、シャンパンシャワーを楽しんだあとにそこへ腰掛け、ひとりでしばらくぼうっと空を見詰めていた。 「あそこに座っていると、いろんな感情が心の中に浮かんできた。家族、友人、兄弟、そしてここまで僕を支え、プッシュし続けてきてくれた人たち。そういう人たち、すべての人

もともとWindowsを利用していた筆者ですが、MacBook ProがRetina化した際にMacユーザーデビューし、そこからMacを愛用していました。しかし、この度Windowsへ戻ることにしました。理由を紹介します。 なぜWindowsに戻るのか 理由は2つ。Catalinaが酷すぎるから、そしてMacBook Pro 2018が酷いから。 Catalinaは筆者の環境では作業中に突然電源が落ちたり、レインボーサークルが表示され操作不能になったり作業や仕事がままならないときが多くありました。Mojaveではこのような症状は一切起きなかったので、これはCatalinaの問題かと思います。 MacBook Pro 2018は熱が酷いです。ノートパソコンな故ある程度排熱が厳しい面がありますが、フルパワーで使うとCPU温度が100度を超えるときが頻繁にありました。その状態で使い続けると電源が

VS Codeは毎月のようにアップデートされ、便利な機能がどんどん追加されています。最近追加された機能をはじめ、Web制作で役立つ便利な機能を紹介します。 特に人気が高い機能拡張と同じレベルの仕事が、VS Codeの基本機能・設定だけで利用できるので、便利です。 VS Code: You don't need that extension by Rob O'Leary 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. タグの自動名前変更と終了タグ補完 2. 設定の同期 3. モジュールの自動インポート 4. HTMLとCSSのスニペット管理 5. ダミーテキスト 6. 末尾のスペースを自動的に削除 終わりに はじめに 私は最近、VS Codeを深く掘り下げいて、いくつか興味深い発見がありました。人気のある機能拡張の

以下はVitor Paladini ( Twitter / GitHub / dev.to ) によるVS Code shortcuts that I would teach myself if I had a time machine with limited fuelの日本語訳です。 VS Code shortcuts that I would teach myself if I had a time machine with limited fuel 「やあ俺だ。黙って聞いてくれ。時間がないんだ。」 「待って待って、お前誰だ。どうやって部屋に入ってきた。あとどうして俺そっくりなんだ。」 「俺は未来のお前だ。ここまで来たのは、特別にVSCodeのショートカットを教えるためだ。さあいくぞ」 「正気か？ロト6の番号でも株式情報でもなく、わざわざVSCodeのショートカットを教えにやってきた

TypeScript全然わかんない... という状態から、プロジェクトに導入できるまでになんとかなったので、 学習の参考になったものなどをまとめて学習ロードマップを作成いたしました。 私自身もまだまだのレベルですが、これからTypeScriptを勉強したい!という方の道しるべになれば幸いです Level 0: TypeScriptってなんぞや？ まず学習する前に、その対象がなんなのか、を見極める作業です。 TypeScriptは altJS の１つです。 JSは元々大規模なコードを組むには不向きな設計になっているので、 altJSというメタ言語でラッピングすることで扱いやすくするものです。 altJSで他に有名なのはcoffeeScriptなどでしょうか。 TypeScriptはtypeと名乗っている通り、静的型付けを特徴としています。 また、jsと互換性があり、jsの上位互換（スーパセッ