[B! JavaScript] headless_pastaのブックマーク

GitHub - google/zx: A tool for writing better scripts

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

headless_pasta 2021/05/10

リンク

JavaScript入門: 基礎知識をGIFアニメで分かりやすく解説 -総まとめ

JavaScript QuestionsのLydia Hallie氏の「JavaScript Visualized」シリーズすべての翻訳を完了したので、まとめて紹介します。 JavaScriptエンジンの仕組みをはじめ、イベントループ、スコープチェーン、プロトタイプ継承、非同期処理、ジェネレータ関数、Hoisting（巻き上げ）など、GIFアニメを使用して詳しく解説しています。シリーズ7本すべてと、プラス1として楽しく学べるクイズもあります。 JavaScript イベントループの仕組み JavaScriptでエラーの原因となるHoisting（巻き上げ）の仕組み JavaScriptのスコープチェーン・変数参照の仕組み JavaScriptエンジンの仕組み JavaScript プロトタイプ継承の仕組み JavaScriptのジェネレータ関数とイテレータの仕組み JavaScriptの

headless_pasta 2020/12/16

javascript

リンク

JavaScript Primerを出版しました！/JavaScript Primerはなぜ書かれたのか？

この3つの原則は書籍の構成にも現れています。第一部の基本文法で「書き方」を学び、第二部のユースケースで「作り方」を学べるようになっています。「学び方」は、章としてではなく全体的な流れとして取り入れることにしました。なぜなら、「学び方」自体は学びたいことによっても異なる方法を取る場合があります。そのため、「学び方」で個別の章とするよりは、他の章で「書き方」や「作り方」と一緒に見たほうがよいと考えたためです。たとえば、基本文法などの学び方にはMDNのようなリファレンスサイトを見たほうがいいし、アプリケーションの作り方は実際のサイトなどを参考にしたほうがよいためです。第一部と第二部がどのように書かれたのかをざっくりと振りかえってみます。第一部: 基本文法第一部: 基本文法はJavaScriptの基本的な文法について扱っています。プログラミングの入門書で文法については避けること

headless_pasta 2020/04/27

リンク

JavaScriptでJSDocコメントを書くメリットとは - ICS MEDIA

筆者が試したところ、開発環境としてWebStormやVS Codeがとくに優れており、ツールチップにJSDocコメントの情報がすべて表示されました。ちなみにReactやAngularなどのメジャーなJSライブラリにおいても、そのソースコードではJSDocコメントが使われています (例 : Angular、React)。APIが多岐に渡るJSライブラリを利用するとき、わざわざリファレンスをブラウザで開いたり解説書で調べることなく、コード上で関数の仕様を確認できます。 ▲描画ライブラリCreateJSのAPIを表示したもの JSDocコメントのメリット② APIリファレンスの生成 TypeDoc等のツールを使うことでコードのリファレンスドキュメントを作成できます。こういったJSライブラリのリファレンスはみなさんも一度は見たことがあるのではないでしょうか。ウェブサイト案件のソースコードでAP

headless_pasta 2019/06/04

javascript

リンク

ReactとVueを改善したSvelteというライブラリーについて - Qiita

海外のフロントエンド界隈で話題になっているSvelte 最近海外のフロントエンド界隈でSvelteが少し話題になっています。この記事では、なんでSvelteが話題になってるのか、そしてReactやVueの代わりに、Svelteを使うメリットについて私が感じたことを共有していけたらと思います。 My talk from @YGLF_IL, 'Rethinking Reactivity', went online yesterday — https://t.co/eoGiBBAkKI. You probably don't have time to watch a 35 minute video though, so I'm going to pull out a few key slides into a quick tweet thread: — Rich Harris (@Rich_H

headless_pasta 2019/05/21

リンク

SPAじゃないプロジェクトのための控えめなJavaScriptフレームワーク「Stimulus」 - yuhei blog

ReactやAngularのように、アプリ内のすべてのHTMLをJavaScript側で管理して描画するアプローチは大げさすぎる。ほとんどの場合において。もちろん一定以上の複雑さがあればその辺のJavaScriptフレームワークを使った方が良い。が、それがやり過ぎになるプロジェクトは多い。というかその方が多い。それでも、それらのアプローチではやり過ぎになってしまう場合でも、秩序のあるコードを書き続けられないと当然苦しい状態へ向かう。この微妙な（そして多数派であるはずの）環境を適度に管理できる枠組みが必要だ。これまでちょうどいい解決策を見つけられずに苦労してきた。Web Componentsは課題を解決するかもしれないがまだ来ない。そこで出会ったのがStimulusだ。いわく、Stimulusは既存のHTMLのための控えめなJavaScriptフレームワーク。サーバーサイドレンダリング

headless_pasta 2019/05/07

javascript

リンク

JavaScriptで数値の区切り文字を使いたい物語 - Qiita

桁数の多い数値をプログラム中に書く場合は、1_234_567のように間に区切りを入れることで桁数を分かりやすくしたいことがありますよね。実際、既に多くのプログラミング言語でこれが可能です。Java, Kotlin, Swift, Perl, Ruby, Rustなどの言語で1_234_567が可能です。また、C++は1'234'567のように_ではなく'を用いて区切るのが特徴的です。 JavaScriptにおいてはまだこれは不可能ですが、できるようにしようという提案は古くから知られていました。それがnumeric separatorというプロポーザル（提案）です。日本語に直すと「数値区切り文字」とかでしょうが、何となくしっくり来ないのでこの記事ではnumeric separatorと呼ぶことにします。当該のプロポーザルは2017年4月に起草され、同5月にはStage 1に認定されています。

headless_pasta 2019/05/07

toLocaleString()の話かと思ったら違った。言語のよっては1_234_567みたいな記述が可能なのか。

javascript

リンク

【2019年4月版】JavaScriptのconsoleがすごいことになってた。 - Qiita

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

headless_pasta 2019/04/04

javascript

リンク

Webでどこまで遊べるか試してみた - Qiita

Sound Walker という Web アプリを作りました。 ↓ここで遊べます↓（スマートフォンで開いてください） https://www.sound-walker.app リポジトリはこちら https://github.com/Leonardo-mbc/sound-walker ホーム画面に追加することで、インストールしたアプリのように遊べます。 Webでどこまでできるかをやってみようと思って作り始めて、ほっといて数年たったら技術がみるみる変わっていて、いろいろ味が出てきました。 Service Worker, Add To HomeScreen などなど Webでできるゲームってだけだったのが、普通にスマホで動くゲームになる時代になっております。 Sound Walker で使ってる技術は WebGL(Three.js), WebAudioAPI, ServiceWorker,

headless_pasta 2019/02/15

リンク

Beyond console.log()

It seems like it’s cool to tell people doing JavaScript that they should be using the browser’s debugger, and there’s certainly a time and a place for that. But a lot of the time you just want to see whether a particular bit of code executes or what a variable is, without disappearing into the RxJS codebase or the bowels of a Promise library. Nevertheless, while console.log has its place, a lot of

headless_pasta 2018/12/19

javascript

リンク

async/await、promise・・これが最後の「JavaScriptの非同期処理完全に理解した」 - Qiita

福岡でVR・アプリ開発をやっている株式会社OneSmallStep代表取締役CTOの@_takeshi_24です。最近フロントエンド界隈の技術の変化が活発です。 React、Angular、Vue.jsなどモダンなフロントエンド開発を始めた人も多くいると思います。 JavaScript開発でおそらく多くの人が最初につまづくであろう処理が非同期処理です。私も最初はこの非同期処理にかなり戸惑いました。そして今まで何度も「JavaScriptの非同期処理完全に理解した」と思っては、「あれ、この場合ってどうなるんだっけ？」「結局わかってないじゃん・・・」の繰り返しでしたので、非同期処理についてきちんと整理しました。そもそもJavaScriptはどのように動いているのか？ JavaScriptはシングルスレッドで動く言語です。シングルスレッドで動くということは、同時に２つ以上のことはでき

headless_pasta 2018/12/19

javascript

リンク

2019年までに見直しておきたい CSS・JavaScriptの手法 - Speaker Deck

Frontend Conference Fukuoka 2018で発表した資料です。 https://frontend-conf.fukuoka.jp/ 各リンク先を確認する場合は、以下のpdfを参照ください http://tonkotsuboy.github.io/slides/181204…

headless_pasta 2018/12/19

リンク

The State of JavaScript 2018: Home

Discover the most popular JavaScript techno logies of the year.

headless_pasta 2018/11/20

JS界隈のいろんなデータをまとめ

javascript

リンク

「Service Workerってなんだっけ？」のおさらい - Qiita

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに Service Workerを無効化にしようという記事が話題になっておりますが、そもそもService Workerってなんだっけ？というおさらいをしようというのが、今回の趣旨になります。記事のスコープ今回の記事は、概要さらっとおさらいすることを目的としたので、技術的な話や設計については省いております。特にCacheのことについて掘り下げて調べました。（cacheの設計や実装については後ほど詳細をまとめた記事を書く予定です。) Service Workerを使って何ができたっけ？(できるんだろう?) という方の理解

headless_pasta 2018/11/20

リンク

充実するフロントエンドの便利ツール、むしろエンジニアの新たな「悩みの種」に？｜WIRED.jp

headless_pasta 2018/11/09

当たり前の話なはずだけどjQueryの時代から軽視されがちなこれ。 “「フロントエンドのエンジニアは、特にJavaScriptに関して、プログラミングの基礎をしっかりと身につけることに集中すべきだ」”

javascript

リンク

javascriptの参照と値

javascriptの参照渡しと値渡しについて

headless_pasta 2018/11/01

javascript

リンク

JavaScript おじさんが教える本当の Modern JavaScript 入門 1 - Qiita

一部修正しました Udemy で React コース公開してます。(絶対 Udemy の 1200 円割引価格にはしないので、このリンクから買ってもらうのが一番お互いに得です。) Udemy React + Redux コース本発表における Modern JavaScript とは何か Phase 1 として以下の環境での開発ができれば Modern JavaScript に入門できたものとする。 Webpack, Parcel 等の module bundler による "module system" の活用。 ES2015+ や TypeScript といった *"Compile to JS 1" の使用。それに伴う Babel によるトランスコンパイルツールの使用。 ESlint, Prettier といった集団開発における、ソース品質安定のためのツールの使用。ここまでのツール

headless_pasta 2018/08/23

javascript

リンク

JavaScriptのイベントをたくさん見られるサイトを作る

JavaScriptのイベント、ややこしいですよね。名前が似ているものや、使い方にクセがあるものもあり、簡単なようで実装に手間どることが多いです。なので、よく使うイベントの概要をざっくりまとめ、それぞれの実行タイミングとイベントオブジェクトをコンソールで確認できるサイトを作りました。忘れたときに調べればいいだけの話なので、わざわざサイトを作る必要はなかったのですが、イベントを眺めるのが好きな人に見ていただけたら嬉しいです。 JavaScriptのイベントをたくさん見られるサイトひたすらaddEventListenerしていたら、イベントに愛着が湧いたので、イベントの実装でハマりそうなところをまとめています。なぜイベントを使うのかマウスなどはイベントじゃないと値が取得できませんが、頑張ればイベントを使わずとも実装できるものもあります。たとえば、テキストボックスの変更を知りたいだけで

headless_pasta 2018/08/07

javascript

リンク

フロントエンドの必要性について

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。