2021年になってJavaScript、TypeScript、Node.jsの勉強を始めました。 この記事では、読んで良かった本、記事、公式ドキュメントなどをまとめていきます。 ※2021/03時点の情報です。 個人的なリンク集ですが、「これも読むと良いよ」というものがあればぜひ教えてください。 ECMAScript ECMAScriptの仕様は、EcmaのTC39で策定されている Ecma TC39 GitHub organization ep78 TC39 | mozaic.fm Node.jsの各バージョンでのECMAScriptサポート状況 JavaScript Misreading Chat - #86: JavaScript: the first 20 years JavaScript 二十年の歴史についての回 JavaScript チュートリアル | MDN JavaScri
プログラミング初心者のための JavaScript と Node.js の歴史、それを踏まえた勉強方法 2020年でJavaScript学ぶならきっとブラウザ向けJSガン無視していきなり初手node.js（ただし暫く何も足さない）がいいんじゃないかというメモ - min.t (ミント) Node.js を教えることについて、自分は賛成なんですが、その学習パスが整理されてないなと思っていたのと、学習パスがなぜ整理されていないかについて書きます。 はじめに 問題意識として、今のプログラミングスクールや独学勢が Ruby on Rails に偏っていて、 Node.js の人間としては、歯がゆく感じているんですが、実際 Node.js を教えるとしても問題も多いと認識しています。 歴史の話は、当時の実情や政治を省いて結果だけを書きます。具体的には第一次ブラウザ戦争、第二次ブラウザ戦争を言及しませ
JavaScript苦手・・という状況からJavaScript好きになれるロードマップ（多分） 全編ほぼ動画なので、とっても見やすい。挫折しづらい。 全体的な流れとしては、動画見る ▶︎ コードを書いて学習の流れです 個人的に好きなエンジニア系Youtuberのお二人の動画がメインになります Yahoo!出身のエンジニア しまぶーのIT大学さん Web万屋エンジニアチャンネルさん LEVEL ☆ JavaScriptってなに？ そもそもJavaScriptって何？フロントエンドって何してるの？ってレベルを解消 フロントエンド基礎編 / 約40分 LEVEL ★ JavaScript入門編 JavaScriptをマスターするならHTMLを知っておかないかん by 弊社マネージャー HTMLの基礎から、JavaScriptの全体像を学習できます。 HTML入門編 / 約43分 JavaScri
VSCodeの拡張機能、なに使ってますか？ はてなエンジニア世論調査 #2 - Hatena Developer Blog
こんにちは、Webアプリケーションエンジニアのid:hogashiです。 半年ほど前に公開した「開発環境のフォントなに使ってますか？」に続く、はてなエンジニア世論調査の第2回「VSCodeの拡張機能、なに使ってますか？」です。 ソースコードエディタであるVisual Studio Code（以下、VSCode）は多くのエンジニアに利用されています。VSCodeにはソースコードのシンタックスハイライトやデバッグなど、さまざまな拡張機能をインストールして使うことができますが、公開されている拡張機能は膨大にあります。 その中から、はてなのエンジニアはどんな拡張機能をインストールして、日頃の開発に使っているのでしょうか？ 前回と同様にアンケート調査してみました。 アンケート方法 アンケート結果から見える人気の機能拡張 6割の拡張機能は1人だけが使用 人によってかなり異なるインストール数 興味深いコ
JSer.infoは2011年1月16日に公開したJavaScriptの情報サイトで、2021年1月16日で公開してからちょうど10年です。 JSer.infoでは、10年間で10201サイト紹介し、522コの記事書いてきました。 JSer.infoの紹介したサイト数(累計)。ソース 10年間途切れることなく毎週更新していて、月別の記事数は毎年同じ推移です。 JSer.infoの月別の記事数。ソース この記事では、10年間やってきたJSer.infoの目的を振り返り、 JavaScriptの情報の集め方、書き方、まとめ方について書いていきたいと思います。 ⚠️ すべてを書いているのでものすごく長いです。 この記事やJSer.infoに関する意見や感想などは、次の場所に書いてください。 この記事をTweetする Twitter: #jserinfo GitHub Issue: JSer.in
個人的なJavaScriptの情報収集の方法についてまとめてみます。 JSer.infoなどをやっているので、JavaScriptの情報については色々な情報源を見るようにしています。 JSer.infoの範囲の中での情報源については、次の記事でまとめています。 JSer.info 13周年: JavaScriptの情報源を整理する - JSer.info この記事では、少しスコープを広げてJavaScriptの情報収集についてまとめてみます。 かなりスコープが広がってしまうので、万人向けの方法ではなく、個人的な情報収集方法としてまとめています。 この記事では、膨大な情報の中から見つけるというアプローチをとっているので、人によって向き不向きがあると思います。 情報収集の方法 情報の元となる情報源はさまざまなサイトや人になると思います。 しかし、そのサイトや人ごとに見ていくというのはかなり大変
この3つの原則は書籍の構成にも現れています。 第一部の基本文法で「書き方」を学び、第二部のユースケースで「作り方」を学べるようになっています。 「学び方」は、章としてではなく全体的な流れとして取り入れることにしました。 なぜなら、「学び方」自体は学びたいことによっても異なる方法を取る場合があります。 そのため、「学び方」で個別の章とするよりは、他の章で「書き方」や「作り方」と一緒に見たほうがよいと考えたためです。 たとえば、基本文法などの学び方にはMDNのようなリファレンスサイトを見たほうがいいし、 アプリケーションの作り方は実際のサイトなどを参考にしたほうがよいためです。 第一部と第二部がどのように書かれたのかをざっくりと振りかえってみます。 第一部: 基本文法 第一部: 基本文法はJavaScriptの基本的な文法について扱っています。 プログラミングの入門書で文法については避けること
2020/07/17: いくつか追記しました はじめに 私は、TechTrainでフロントエンドのメンターとして面談する中で「最近フロントエンドの勉強を始めました！」という方や、フロントエンドエンジニアを目指す学生と話す機会が何度もあります。 その中でよくある質問が 「フロントエンドの情報収集ってどうしてますか？」 です。 何度も質問を貰うので、気になる人は多いのかなと思います。 この記事では「私がどんな風に情報収集しているか」を紹介しようと思います。主に情報収集の流れと、どこからフロントエンドの情報を集めているかについてです。 情報収集の流れ まずは情報収集の流れとして主にプロセス的な観点で整理してみます。 私の情報収集を抽象化すると以下の3つのプロセスがあると思います。 情報源から情報を集める(ex: Twitter, Blog, Qiita) 特定の場所に情報を溜める(ex: はてな
アプリケーションなどOSより上に作られる高水準のプログラムではハードウェアの速度と容量を考慮しない数学的キャッシュアルゴリズムが使われ主にこれを本稿の対象とする。キー探索用マップと明示的キャッシュサイズ(対となる値が保持されているキーのサイズ)は計算量に含まれない。 LRU 最も単純かつ高性能な基礎的キャッシュアルゴリズム。そのため性能比較のベースラインとして常に使用される。逆に言えば実用最低水準の性能である。スキャン耐性皆無でスキャン一発でキャッシュとヒット率がリセットされゼロからやり直しになるため非常に脆く不確実な性能となりベンチマークにおける性能が表面上さほど悪くなく見えても実際の性能はこのような外乱により大きく低下しやすい。このためLRUより高度な主要アルゴリズムはすべて大なり小なりスキャン耐性を備えている。ちなみにプログラミング言語最大のパッケージマネージャであるJavaScri
ここ数年の流れについて 技術的側面 Webフロントエンド（ほぼTypeScript＆React界隈）において、オブジェクト指向（厳密に言うとクラスの利用）から脱却する流れがあります。原因は以下の2点。 クラスの継承の問題点が（IT業界全体に）広く定着したこと JS/TSの進化、Reactの進化、関数型言語の考え方などの影響により、クラスを用いてデータと関数群を紐づけるメリットが薄くなったこと 現状、設計レベル（実務的にはどの関数を纏めてモジュール化するのか、モジュール同士をどう繋ぎ合わせるのか、フォルダ割りどうするのか等）のノウハウがまだ固まっておらず、既存の設計論はそれなりに有効です。 コミュニティ的側面（政治） これらの流れはWebフロントエンドの中でもTypeScript＆Reactの界隈が主導しており、そのノウハウは長年絶対視されてきたオブジェクト指向を解体するような内容であったた
GitHubリリースという、GitHubでタグに対してリリースノートを書ける機能があります。 このリリースノート機能は、パーマネントリンクもあるし、Markdownも書けるし、画像もアップロードできるし、絵文字でリアクションもできるし、RSSもあるし、通知機能もあるし、GitHub Discussion連携すればコメントも書けるし、全文検索もついてくるしこれブログとして使えるんじゃないかと思いました。 そういう発想から、GitHubリリースノートをブログとして運用するためのちょっとしたブログシステムを作って使っています。 次のリポジトリが実際に動いてるものです。 azu/book-review: 本を読んだ感想を書くブログです。 リリースの一覧を見ると本の感想の記事が並んでいます。 Releases · azu/book-review Release 伴走型支援: 新しい支援と社会のカタチ
textlint - Linterの作り方
[fit] textlint - Linterの作り方 自己紹介 Name : azu Twitter : @azu_re Website: Web scratch, JSer.info Book: JavaScript Primer アジェンダ Linterを作る人向けの話 Linterの考え方とアーキテクチャを一致させる 使うものを作ろう、作るために使おう textlint とは 自然言語(日本語や英語など)に対するLinter MarkdownやHTMLなどのマークアップ言語に対応している ビルトインのルールは0 利用できるルールは100以上ある 多くのルールはオフラインで動くので、外部に入力してる内容を送信しない CI/CDに組み込める自然言語のチェッカー(表記揺れ、スペルチェック、誤用、読みやすさのチェックなど) textlint users Translation: Angul
Likebook Mars 7.8(電子ペーパ) + Dashbling + Fully Kiosk Browserで、電子ペーパを使ったダッシュボードを作って動かすようにしたメモです。 電子ペーパーのダッシュボードを壁に設置した。 likebook mars + Fully kiosk Browser + dashbling. 結局材料みつけられなかったので、 余ってたエレコムのケーブル結束クリップで貼り付けた。 壁にマスキングテープ⇨梱包テープ⇨結束クリップで固定してるので簡単に剥がせる。 pic.twitter.com/LpLARCP3at — azu (@azu_re) February 2, 2021 最近Likebook Marsをあまり使ってなかったので物理的?なダッシュボードとして使うことにしてみました。 きっかけはDashblingの作者がKindleを使ったダッシュボー
Google DomainsがSquarespaceに買収されるので、持っているドメインとカスタムドメインのメールアドレスをCloudflare Registrarに移管した。 Cloudflare Registrar · Cloudflare Registrar docs 基本的にはCloudflare Registrarに表示される手順でやっておけば、問題は起きなかったので、よくできてると思った。 次のような手順で順番に移管していたので、移管時のメモ。 手順 Google Domainsの移行準備 Cloudflareのname serverを使うように移行する ドメインの移管 メールの転送設定 Google Domainsの移行準備 移管する前に、Google Domainに登録しているドメインの設定を変更しておく。 それぞれONになってると移管時に問題が発生する。 DNSSECを無
2020/07/17: いくつか追記しました はじめに 私は、TechTrainでフロントエンドのメンターとして面談する中で「最近フロントエンドの勉強を始めました！」という方や、フロントエンドエンジニアを目指す学生と話す機会が何度もあります。 その中でよくある質問が 「フロントエンドの情報収集ってどうしてますか？」 です。 何度も質問を貰うので、気になる人は多いのかなと思います。 この記事では「私がどんな風に情報収集しているか」を紹介しようと思います。主に情報収集の流れと、どこからフロントエンドの情報を集めているかについてです。 情報収集の流れ まずは情報収集の流れとして主にプロセス的な観点で整理してみます。 私の情報収集を抽象化すると以下の3つのプロセスがあると思います。 情報源から情報を集める(ex: Twitter, Blog, Qiita) 特定の場所に情報を溜める(ex: はてな
週に一度まとめて更新のようなパターンだと、体調が悪いときなどにその週はスキップされ、また次の週も更新しようとして偶然タイミングが合わなかった場合などに、1ヶ月更新が止まるみたいな状態は起きやすいです。 1ヶ月更新を止めてしまうと、そこで更新する習慣が失われて、この書籍でいう逆戻りが起きるのかなと思っています。 そのため、JSer.infoではタスクを細分化して進められる時にやっていけるような形を作っています。 ライブラリのメンテナンスのリズムをツール化する JavaScript周りは顕著ですが、ライブラリが細かく分かれていることが多いため、リポジトリの数も多いです。 そのため、リポジトリのCI設定や依存ライブラリのアップデートなどをメンテナンスするだけで無限の時間がかかります。 このメンテナンス作業を手動で毎回やるととても疲れるので、自分の場合はツール化していることが多いです。 作ったり、
クラスメソッドでは、毎週フロントエンド技術に関する勉強会を開催しています。主に技術的な情報と、やっていることの共有を目的としています。 2021 年の年明けから開始して、 4 ヶ月継続しています。 GW という節目を迎えたので、これまでやったことをまとめてみます。 State of JS 2020 最初はどういったレベルの方が参加されるのかがわからなかったので、現時点の復習にちょうど良いということで、 State of JS の 2020 年度版をみんなで眺める時間としていました。 次の認識合わせができたので、大変有意義だったと思います。 ECMAScript が tc39 によって毎年更新されること よく使われている技術 各分野における選択肢 JSer.info 参加者のベースラインができたところで、毎週話すことのトピックを入手する先として、 JSer.info を使用しています。 RS
今では200以上のルールがある自然言語のLintツールであるtextlintがどのように作られたかを振り返る記事です。 6月はMaintainer MonthというイベントをGitHubが主催しています。 Maintainer Month is a reminder for the ecosystem to support, celebrate, and compensate open source maintainers. – Maintainer Month Maintainer Monthは、オープンソースのメンテナーが集まって情報共有したり、メンテナーを祝ったり、支援したりするイベントです。 メンテナーがどういうサポートを求めているかを知る、負荷が特定の箇所に集中するエコシステムはバランスが悪いのでそれを支援する方法を知るといったことを思い出すのがMaintainer Monthの
フロントエンドだけではないかもしれないけど、 エンジニアがおすすめするMac無料ツール2020下半期まとめです。 関係ないけど10人くらいサンタが家に来てくれないかな.... ■ Mac Apps 1. VSCode だいたいのエンジニアがみんな使ってるよね。って思うけど一応記載しときまっす。エディタなんて好みだと思うけどね。 こやつは拡張性高いし必須だと思ってます。 好きなテーマはDraculaです。 2. Draw.io Integration VSCode拡張。Drow.io単体でも使うけど Draw.ioをVSCode内で利用できる。エディタ内でグリグリ製図するの楽しいね。 3. Biscuit アプリ一元管理ツール。 BiscuitにslackとかNotionとかInoreaderを食べさせて便利につかわせていただいております。 Stationよりも使いやすいし動作が軽い。あとロ
この記事ははてなエンジニア Advent Calendar 2020 5日目の記事です。4日目は id:syou6162 さんで、数字のバラ付きを考慮して意思決定する技術でした。 qiita.com developer.hatenastaff.com こんにちは、id:mizdra です。今年新卒としてはてなに入社し、WebアプリケーションエンジニアとしてGigaViewerというマンガビューワーを作っています。 最近のはてな社内では「tech-future」という、様々な技術を見つめ直すワーキンググループを運営しています。この会では、ある技術についての要点をまとめるだけでなく、その技術にまつわる歴史を紐解いて整理し、その上で全体を俯瞰して将来その技術がどういう方向に向かうのかを議論し、未来を予測する手がかりを作る、といった挑戦的な取り組みをしています。既に弊社のエンジニアから「tech-
どうも。 普段フロントエンド周りの開発をやっている者です🐶 今回は普段自分がやっている情報収集と学習で使ってるサイトや手法を紹介します。 過去にも何度かこの類の話をしているのですが、2020年版という感じです。 誰かの参考になればいいなと思います。 情報収集 まずは情報収集についてです。 自分の場合は、毎日見るものと週に1度見るものがあります。 daily.dev 普段はこのdaily.devのブラウザ拡張機能を入れて、Chromeのトップ画面で情報を見ています。 新しいタブを開くたびに表示されるので、いつも目に入るのがいいところです。 2021/05/26 追記 Chrome拡張だけではなく、Web アプリケーションもリリースされました🎉 PWAにも対応しているので、デスクトップやモバイルでインストールも可能です！ daily.devは簡単に説明するとさまざまなサイトのRSSリーダー
JSer.infoで紹介したサイトのデータをドメイン別で一覧できるサイトを作りました。 JSer.info Watch List JSer.info Watch Listは、次の条件でサイトをドメイン別(または作者別)で一覧できます。 JSer.infoで2年以内に紹介したことがあるサイトが対象 紹介した回数順 GitHubやAmazonなど一部特殊なものは除外 JSer.infoを更新するたびにこのリストも更新されます。 そのため、鮮度を保ちつつ、JavaScriptの情報源となるサイトが一覧できるようになっています。 また、タグでの絞り込みもできるようになっているので、興味があるトピックのサイトやブログなどを調べてみるといいかも知れません。 https://t.co/CXy3hOXJ8q のデータを使ったJavaScript情報源リスト タグでの絞り込みができるようになった。 "per
非同期処理の道具箱 — HACK The Nikkei
この記事はNikkei Advent Calendar 2022の 13 日目の記事です。 こんにちは、Web チームの井手です。最近 Web チームで働く魅力について語ったので是非とも読んで欲しいです。 今日は非同期ランタイムについて書きます。 私は非同期ランタイムやサーバー進化論が好きで、たまにブログを書いたり、前職でもアドベントカレンダーに書いたりしていました。 本稿では効率的な非同期処理を実現するライブラリが中で何をしているのかを、低レイヤーの非同期処理そのものを解説しながら見ていきたいと思います。説明の都合上 Rust を使うので、Rust 特有の話もありますが、低レベルな API があればどの言語でも当てはまる話だと思います。この辺りは Rust, Scala(JVM), Erlang, Go などはお互いがお互いのアイデアを参考にしていて切磋琢磨しつつも似た仕組みをそれぞれが
Ruby/Rails でサーバ書いてたエンジニアが、転職後数ヶ月で TypeScript/React/Redux なチームで書けるようになるまでに参考にしたこと - Qiita
Ruby/Rails でサーバ書いてたエンジニアが、転職後数ヶ月で TypeScript/React/Redux なチームで書けるようになるまでに参考にしたことJavaScriptTypeScriptReactredux 夏に転職して、それまではrubyしか書いてこなかったのですが、 転職後はそれまで全く触ってこなかった TypeScript/React/Redux/Firebase なチームに入って開発できるようになるまでに参考になったものです。 もちろん、実際にはもっと他にも色んなものを参考にしています。 また、ここに書いたものも隅々まで読んだりしたわけではないのですが、振り返ってみて役に立ったなって思い出せるのを書いてみました。 本 りあクト！ りあクト！ TypeScriptで始めるつらくないReact開発 第2版 りあクト！ Firebaseで始めるサーバーレスReact開発 E
株式会社ラクスが開催するエンジニア向けのイベント「RAKUS Meetup」。今回は「Vue.js、React、TypeScript、E2Eテスト」をテーマに、「楽楽明細」の機能開発を担当する三田英一氏が登壇し、「息の長いサービスのフロントエンドを少しずつ改善していく営み」という内容で話をしました。関連資料はこちら。 フロントエンドとバックエンドのどちらも担当 三田英一氏（以下、三田）：「息の長いサービスのフロントエンドを少しずつ改善していく営み」というテーマで発表したいと思います。よろしくお願いいたします。 まず自己紹介です。三田英一と申します。TwitterとかGitHubはこのアカウントでやっています。ラクスには、中途入社で2014年に入りました。以来、フロントエンドとバックエンドのどちらもやっています。 あと、今日の話とはあんまり関係ないのですが、アジャイル開発も好きなので、認定ス
勇気を持ってマイノリティになる。凡人ソフトウェアエンジニアが生きていくために選んだ道 - Findy Engineer Lab
たとえ今はメジャーでなく、どうなるか分からない技術であっても、仕組みとしての正しさに共感し、未来への可能性にワクワクさせられるなら躊躇せずに飛び込むべきではないか。現在のフロントエンド技術につながるコミュニティで早くからイベントの主催などをしてきた川田寛（@_furoshiki）さんに、20代で突き当たった大きな壁と、ブレイクスルーした体験を執筆いただきました。 インターネットがいかがわしくて飛び込めない…… いかがわしくない会社でインターネットに関われたものの コードはロジカルでもエンジニアはロジカルに動かない 落ちるところまで落ちたなら周りの評判は気にならない 先行者利益によって身に余るモテを得たものの いかがわしい何かへ全力で挑むことは難しい インターネットがいかがわしくて飛び込めない…… インターネットはただのオモチャだ。そんなふうに見られていた時代があります。 私が高校に入学した
EventEmitterのようにPub/Subを行うeventmitという小さなライブラリを書きました。 azu/eventmit: Simple EventEmitter. A single event object per an event. eventmitは、TypeScriptで書かれています。 また、Node.jsのEventEmitterなどとは違って、イベント一つに対してeventmitのオブジェクトを一つ作成して使います。 import { eventmit } from "eventmit"; const event = eventmit<{ key: string }>(); // Register handler event.on((value) => { console.log(1, value); }); event.on((value) => { consol
Layer0というJamstackプラットフォームを試してみた記事です。 Jamstackプラットフォームが何かは表現しにくいですが、Netlify、Vercel、Cloudflare PagesみたいなSPAなアプリケーションとかをホスティングしてくれるサービスです。 Cloudflare Pages・Vercel ・Netlify の違いや使い分けをまとめる Layer0はMoovweb XDNという名前のプロダクトでしたが、2021年4月にLayer0へリブランディングしています。 Moovweb is officially Layer0! 📝 XDN = Experience Delivery Network Layer0は、Netlify、Vercel、Cloudflare PagesのようにSPAアプリケーションをホスティングできるプラットフォームです。 他のプラットフォーム
Node.js 21では --experimental-default-type=module フラグで、JavaScriptファイルのデフォルトの解釈をCJS(CommonJS)からESM(ECMAScript Modules)に変更できるようになっています。 Node.js 21 is now available! | Node.js これは、Node.jsにおいてJavaScriptファイル(.js)のデフォルトをESMに変更するための第一歩です。 今回のDeep Diveでは、Node.jsのESMデフォルト化に向けたIssueや実装について紹介します。 Node.jsのESMデフォルト化 Discussion: New “ESM by default” mode · Issue #49432 · nodejs/node このIssueは、Node.jsにおけるambiguous
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2021年にJavaScriptやNode.jsを勉強し始めたので、読んで良かった資料をまとめる
プログラミング初心者のための JavaScript と Node.js の歴史、それを踏まえた勉強方法
JavaScript学習ロードマップ - Qiita
JSer.info 10周年: JavaScript情報の集め方、書き方、まとめ方
私のJavaScriptの情報収集法 2024年版
JavaScript Primerを出版しました！/JavaScript Primerはなぜ書かれたのか？
フロントエンドの情報収集について - Qiita
キャッシュアルゴリズムの比較 - falsandtruのメモ帳
💣Webフロントエンドにおける関数型「風」プログラミングに関する個人的まとめ - Qiita
1クリックで始めるGitHubリリース as a ブログ
電子ペーパを使ったダッシュボードを設置した
Google DomainsからCloudflare registrarにドメインとメールを移管した
フロントエンドの情報収集について - Qiita
Maintainer Month: オープンソースをメンテナンスするコツ
クラスメソッドにおける Web フロントエンド勉強会 | DevelopersIO
Maintainer Month: なぜtextlintを作ったか
【2020年版】フロントエンドのおすすめMac無料ツール - Qiita
polyfill を深堀りする - mizdra's blog
普段やってる情報収集や学習について(フロントエンド寄り)
JavaScript情報の情報源となっているサイトの一覧を作った
新しすぎるものは避けてアーリーマジョリティくらいを目指そう 息の長いサービスを少しずつ改善していく営み
小さなEventEmitterライブラリ - eventmitを書いた
JamstackプラットフォームのLayer0へNext.jsのアプリをデプロイしながら試す
Deep Dive: Node.jsのESMデフォルト化への道