A tool for visualizing Execution Context, Hoisting, Closures, and Scopes in JavaScript.
A tool for visualizing Execution Context, Hoisting, Closures, and Scopes in JavaScript.
某社で自分が React/Redux + TypeScript などの講習をやってみた結果、TypeScript 入門用資料が必要だと思って書いたやつです。 このドキュメントのターゲット TypeScript で書かれたプロジェクトに参加する人 TypeScript を導入するために、その事前知識が必要な人 このドキュメントの読み方 ES2015 for Beginners ES2015 for ES5 Programmers ES Modules 非同期表現: Promise と async/await TypeScript エコシステム編 自分が React/Redux などの講習でいろいろやってみた結果、 ES2015 と TypeScript を同時に教えると、初学者は何がどの概念に由来するかの区別が出来ずに混乱します。なので、ES5 -> ES2015, ES2015 -> Ty
ゴールデンウィーク(以下、GW)の途中で以下の記事を読んで Generative Art (ジェネレーティブアート - Wikipedia)*1 なるものを知り、試しに触ってみたら面白かった。 ジェネラティブアートを始めよう|なめらかサンショウウオ|note Generative Art with JavaScript #1 概要編 - Qiita dev.to にも My first step in learning Generative Art という記事を書いてみたら反応がそこそこあって嬉しかったので GW が終わるまでの7日間で毎日絵を書いて投稿してみることにした。 "Although there might be some unfamiliar functions, what creates the picture is familiar JavaScript code" { a
※この投稿は 2011/03/10 に こちら に投稿した記事の転載です。 これを書いた経緯 事の発端というか、きっかけは、id:perlcodesampleさんとid:gfxさんの下のポストを見て、 JavaScriptで一番簡単にオブジェクト指向プログラミングを行う方法 (id:perlcodesampleさん) JavaScriptにおけるオブジェクトの定義 (id:gfxさん) new とか prototype を使うのが推奨されてないとか、直接代入するほうが楽とかじゃなくて、挙動が違うんだよなぁ、と思ったこと。 挙動が違うんだから、もちろん使いどころも違うんですよね。 でも実際、JavaScriptのオブジェクト指向は混乱しやすいと思います。 自分もご多分にもれず、さんざん混乱させられたクチですしね。 わかってしまえば、どってことなくて、とってもシンプルなんですけどね。 せっかく
初めに この記事ではJavascriptのclassについてザックリですが解説します。 多くの初心者にとってclassは「何だこれ???」と躓くポイントだと思います。 (実際、自分も最初眺めた時は意味が分からず頭が学級崩壊してました。) なので、本記事ではサンプルコードと共に、 「何だこれ???」を「なるほど!!!」に 変えていけるように解説します。 序章 - 基本構文 まずはclassの基本構文を載せます。 使い方は後々に解説しますので、 とりあえず構文を眺めて美味しいご飯でも考えてください。 意味は深く考えないでいいと思います。 はいど~ん! classの基本構文はこんな感じ!これだけ。 大丈夫です、内容も全く難しくないです。 解説すると、 ・NAMEは任意の名前(変数や関数の定義と一緒) ・constructorは必須な関数(classが呼び出された時に最初に実行される関数) ・a,
After 26 canary releases and 3.4 million downloads, we are proud to introduce the production-ready Next.js 7, featuring: DX improvements: 57% faster bootup, 42% faster re-compilation Better error reporting with react-error-overlay Upgraded compilation pipeline: Webpack 4 and Babel 7 Standardized Dynamic Imports Static CDN support Smaller initial HTML payload React Context with SSR between App and
どんなゲームなの? 働クリッカーは、身も蓋もない言い方をすればクッキークリッカーがつまんなくなったやつです。 画面左側の『働く』ボタンを連打してお金をためて、資格やプログラミングスキルを買って一働きの単価を上げ、アフィリエイトや土地、株を買って不労所得(働くを押さなくても入ってくる金)を増やしていくというゲームなのですが、このゲームの肝はそこではなく、どれだけ高速にゲームクリア実績や全実績解除を達成できるか、というプログラミングによる攻略が本質的な所です。 俺が、俺達が TAS さんだ Tool Asisted Speedrun(or Superplay) という、ツールによる補助を受けたスーパープレイの動画は、多分見たことがあると思います。あれはエミュレーターそのものにそういう機能があったりするんですが、このゲーム、働クリッカーの場合は、ゲームそのものにツール機能が組み込まれています。と
2018年9月5日、第70回となる「HTML5とか勉強会」が開催されました。今回のテーマは「開発環境」。 Webフロントエンドの開発環境をテーマに、エディタプラクティスやServiceWorkerを開発ツールとして使うアプローチ、長期運用されたサービスのリニューアル方針など、登壇者たちがその知見を語ります。プレゼンテーション「ServiceWorker Side XXX」に登場したのは、mizchi氏。ServiceWorkerを駆使したある取り組みについて紹介します。講演資料はこちら 開発環境のためにServiceWorkerを使う mizchi氏(以下、mizchi):では「ServiceWorker Side XXX」ということで発表させていただきます。mizchiです。よろしくお願いします。 (会場拍手) ちょっと自己紹介とかはする気ないんですけど、最近本を書いたので、その紹介だけ
After almost 2 years, 4k commits, over 50 pre-releases, and a lot of help we are excited to announce the release of Babel 7. It's been almost 3 years since the release of Babel 6! There's a lot of moving parts so please bear with us in the first weeks of release. Babel 7 is a huge release: we've made it faster, created an upgrade tool, JS configs, config "overrides", more options for size/minifica
一部修正しました 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 といった集団開発における、ソース品質安定のためのツール の使用。 ここまでのツール
Update: The Cost Of JavaScript In 2019 is now available to read. Building interactive sites can involve sending JavaScript to your users. Often, too much of it. Have you been on a mobile page that looked like it had loaded only to tap on a link or tried to scroll and nothing happens? Byte-for-byte, JavaScript is still the most expensive resource we send to mobile phones, because it can delay inter
Linux kernelを直接JavaScript上で動かした. つまり,JSLinuxのようにEmulatorをJavaScriptで作成し, その上でLinuxを動かすのではなく, JavaScriptで書かれたLinuxを生成し,それを動かす,ということである. LKL.js Architecture リポジトリは以下の通り. https://github.com/retrage/linux/tree/retrage/em-v2 なお lkl.js Demo にデモを用意した. SharedArrayBufferを有効にして試してみてほしい. Linux Kernel Library (LKL) ここでは,Linux kernelをLibrary OSの形態の1つであるAnykernelにする Linux Kernel Library (LKL)を利用する. LKLはLinux ke
しがないラジオのgamiです。 JavaScript界隈では有名な、オライリーのサイ本こと『JavaScript 第6版』という鈍器、もとい書籍を読みました。 JavaScript 第6版 作者: David Flanagan,村上列出版社/メーカー: オライリージャパン発売日: 2012/08/10メディア: 大型本購入: 12人 クリック: 252回この商品を含むブログ (18件) を見る 2012年に発行された、約800ページもある、かなり内容の多い本です。 僕は本を読むときにesaに要約しながら読み進めるのですが、サイ本のまとめesaは全体で「約1万行」という修行みたいな分量になっていました。 サイ本、3年越しくらいでやっと読み終わったあああああ!!!esaにまとめながら読んでたけど、コードも含めて約23万字、1万行の分量になっててesaが悲鳴あげてたw今度感想ブログ書く。多くの人
This is the second part of my series of articles describing how to make Emacs a great JavaScript development environment. This time we’ll focus on getting good auto-completion with type inference. If you haven’t read it yet, you should jump to the first post first to get things started. Setting up Tern & company-mode for auto-completion Tern is a great tool once setup correctly. It parses JavaScri
There’s a lot that can be done to make Emacs a great tool for JavaScript development. So much that I had to split it up into several posts. In this first article we’ll see how to setup js2-mode and two other packages that rely upon it: js2-refactor and xref-js2. Emacs comes with a major mode for JavaScript named js-mode. While it is a good major mode, we’ll be using js2-mode instead, an external p
はじめに JavaScriptは如何にしてAsync/Awaitを獲得したのか - がおさんち 技術部屋 ※事前に↑の記事は読まなくても大丈夫です という記事を、以前に個人ブログの方に書いたのですが、私も今年からはQiita始めたので、この記事をリファインして再度書いてみようと思います。 また、この記事では↑の記事では書ききれなかった話もいくつか増やしています。 例えば、不定回数実行されるPromiseの話だとか、非同期処理における例外処理周りの面倒くさい話だとか。 そういうちょっとだけ高度な話も混ぜつづ、前回書いたものよりもクオリティを上げるのを目標にします。それではいきます。 第一章 ~人類はsetTimeoutを採用しました~ 古代のJavaScriptで、以下のような処理をしたい場合、どうしていたでしょうか。 ブラウザ更新直後に『a』を表示し、その2秒後に『b』を表示し、更にその1
まあこれは弊社(Claves)での取り組み方(別に相談してないので独断ですらある)です。 多分そのうち陳腐化するので金科玉条のごとき扱いはしない方が良いです。 書くにあたった動機 若い人間がJavaScriptを書く場合に、 参照しているものが古い 便利なライブラリとかがあるのに再発明とかしてる Railsで書く場合にどう書けば良いのか などが整理されていないと感じた。 都度説明していたが三回をこえて面倒なので書き下すことにした。 JavaScript? TypeScript? 正直モダンに書くのであればJavaScriptでもTypeScriptでも良いと思っている。 構文的にはTypeScriptはモダンなJavaScriptに型、抽象クラスなどが追加されていると思って良いかと思う。 継承とかゴリゴリ書くのであればTypeScriptは便利だし、後述するReactなんかも TypeSc
ウェブサイト制作において、わずかなアニメーションを実装した「マイクロインタラクション」の重要性が高まってきています。メインとなるコンテンツの邪魔せずに、魅力的なデザインを追加できるだけでなく、ユーザーにも分かりやすく情報を伝え、特定の要素に注目を集めることもできます。 今回は、素敵なアニメーションを実装した、HTML/CSS/JSスニペットをまとめてご紹介します。どれもアイデア性にあふれるクリエイティブな動きが表現されています。今後のデザイン制作に活用してみてはいかがでしょう。 詳細は以下から。 アニメーションが気持ちいい!コピペで実装できる最新HTML/CSSスニペットまとめ ページの読み込みに多少時間がかかります、しばらくしてからスクロールするとよいでしょう。 Waves 3つのレイヤーを重ね、それぞれ@keyframesを指定することで、カラフルな波ウェーブ・エフェクトを実現していま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く