Preface This comprehensive primer on the internal operations of WebKit and Gecko is the result of much research done by Israeli developer Tali Garsiel. Over a few years, she reviewed all the published data about browser internals and spent a lot of time reading web browser source code. She wrote: As a web developer, learning the internals of browser operations helps you make better decisions and k

JavaScriptチュートリアルBeginner's tutorialsYour first website: Adding interactivityDynamic scripting with JavaScriptJavaScript frameworks and librariesJavaScript ガイド入門編文法とデータ型制御フローとエラー処理ループとイテレーター関数式と演算子Numbers and stringsRepresenting dates & times正規表現インデックス付きコレクションキー付きコレクションオブジェクトを利用するクラスの使用プロミスの使用JavaScript 型付き配列イテレーターとジェネレーターInternationalizationJavaScript モジュール中級編Advanced JavaScript objectsAsynchrono

SPAなどモダンな Web開発に欠かせないモジュールバンドラー。高速でシンプル、webpackに代わる次世代ツールとして注目の「FuseBox」の使い方を解説します。 急速に発展しているフロントエンドの環境は、JavaScriptのモジュールシステムの理解が必要不可欠です。モジュールを利用してコードを組織化することで、メンテナンス性と再利用性が向上します。残念ながら、ES modulesのブラウザーサポートはあまり進んでいないため、モジュールバンドラーでモジュールを1つのファイルにつなぎ合わせてブラウザーが扱えるようにする必要があります。 webpackはJavaScriptのデファクト・モジュールバンドラーになったとの意見がある一方で、分かりにくく、学ぶのが難しいとの評価もあります。本記事では、webpackの代替ツールで、より高速でシンプルなFuseBoxを紹介します。 FuseBox

TOPICS Web , JavaScript 発行年月日 2017年07月 PRINT LENGTH 256 ISBN 978-4-87311-807-9 原書 Building Ismorphic JavaScript Apps FORMAT PDF EPUB アイソモーフィックJavaScriptは、クライアントサイド（ブラウザ）とサーバーサイドで同じコードを実行できるようにするためのフレームワークの総称。本書では、従来のアプリケーションが持つ問題点（読み込みの遅さ、SEO対策の困難さなど）を明らかにするところから始め、アイソモーフィックなアプリケーションの分類やアイソモーフィックさの度合いについて理解したうえで、アイソモーフィックなJavaScriptフレームワークを構築するための実践手法を解説し、Walmart、Airbnb、Facebook、Netflixといった大企業がアイソ

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

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

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

Ask questions, find answers and collaborate at work with Stack Overflow for Teams. Explore Teams Collectives™ on Stack Overflow Find centralized, trusted content and collaborate around the technologies you use most. Learn more about Collectives

本稿では，switch(true) イディオムの是非について論じて行きたいと思います．なお，話をややこしくしないために，本稿では JavaScript における switch(true) イディオムのみについて考察します．（当然ですが，言語によって switch のシンタックスおよびセマンティクスは大きく異なります．例えば ruby の case はいわゆる C-like な switch とは全く異なり，フォールスルーがない点や === 演算子による柔軟性がある点などにおいて同列に語れるものではありません．） 賛否両論の switch(true) switch(true) イディオムに関しては，様々な意見があります．記事の末尾に，各所から集めて来た意見をまとめておきますので参考にしてください．ここで私が述べたいことは，このイディオムに対しては とにかく賛否両論ある ということです． いっ

EDIT: This guide is outdated because it was made before react-router v4. I’m writing this guide because I haven’t found implementations of this setup using the new and cool (and official) create-react-app by Facebook. This is not about server-side rendering or Redux. The source code is available here: https://github.com/mrpatiwi/routed-react Why this is important?Suppose you want to start a new pr

マイクロソフトが無償で提供しているコードエディター「Visual Studio Code（略称：VS Code）」はGoogle ChromeやMicrosoft Edgeのデバッグ機能と連携できます。VS Code上でブレークポイントを設定してコールスタックを確認したり、ステップ実行や変数のウォッチなどを行えます。複雑なJavaScript開発を行っている方は、デバッグ機能を使うことで、効率のよい開発体験を得られるでしょう。 本記事ではデバッグ機能を使うためのVS Codeの導入方法について説明します。 導入手順と前提 VS Codeにはデフォルトでデバッグ機能が搭載されています。 ※2021年8月以前のVS Codeでは拡張機能「Debugger for Chrome」の導入が別途必要でしたが、今のVS Codeでは拡張機能をインストールする必要はありません。 本記事では、ウェブページ

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

Reactを導入して半年近くが経ちましたWantedlyでは、今年の初めからReact(+Redux)の導入に取り組み始めたので、気付けば半年近く立っていることになります。今自分がこの記事を書いているエディタから、Wantedly Adminのチケット画面まで、ある程度大きなアプリケーションを開発してきました。 そこで今回は、チームで継続的に開発していく過程で遭遇した問題と、それを解決するために導入したImmutable.jsについて紹介します。 増え続けるCallbackとAction、肥大化するStoreReactとセットで語られることが多いFluxアーキテクチャ。ここでは詳しい説明は省略しますが、とてもシンプルな考え方なので、チュートリアルなどで簡単に学ぶことができます。しかし、実際にチームで開発していくと、たしかに動いてはいるけど、綺麗とは言い難いコードが増えてしまいました。 Ac

こんにちは、プラットフォーム開発部の新卒エンジニアの松下です。 普段は会員基盤フロントエンドチームでログインやアカウント登録などの会員基盤システムの開発をしています。 早いものであと1ヶ月ちょっとで1年目が終了。春には次の新卒が入ってくるとのことで、うかうかしていられないなと思う今日このごろです。 さて本日はEnzymeを使ってReactのテストを書く方法を紹介したいと思います。 Enzymeは宿泊予約サイトのAirbnbが開発しているReactコンポーネントのテストツールです。 チームでは以前よりテスティングフレームワーク「Mocha」とアサーションライブラリ「Chai」でNode.jsアプリケーションの単体テストや結合テストを行ってきました。しかし、これらのツールだけではReactのテストを行うことができず、今回Enzymeの導入を検討することにしました。 目次 Enzymeのセットア

この記事のオリジナルは voxxed に投稿されたものです。 JavaScript関連の問題を抱えるチームをサポートする仕事を通じて、いくつか共通の問題点があることに気づきました。もしあなたもJavaScriptに対するイライラを感じているのであれば、この記事は何らかの助けになるかもしれません。おことわり：私がお教えするヒントはすでにご存知のものもあるとは思いますが、うまくいけば、多少なりとも有用な情報があるかもしれません。特にエンタープライズアプリケーションやCMSソリューションを構築する際に有効なヒントです。チームの誰もが話したがらないCMSのコードについてお話しします。いずれも必要に応じて採用できるものです。 debuggerステートメント 大半のブラウザでサポートされているにもかかわらず、JavaScriptを書く際に最も活用しきれていない機能の1つです。debuggerステートメ

Webアプリのデバッグやチューニングに役立つ、Chrome Developer Toolsの主要機能を、スクリーンキャプチャ中心で簡潔に紹介。2014年10月に最新情報に改訂。 モダンブラウザーの中でGoogle Chromeは最後発ながら、その機能の潤沢さ、便利さ、高速さからシェアを大きく伸ばしている。そして、今やほとんどのブラウザーではWindowsの場合F12キーを押すことで（Macの場合はCommand＋Option＋Iキーで）手軽に各ブラウザー搭載のデベロッパーツールを利用できるが、特にChromeのデベロッパーツールは、非常に機能が豊富なため、利用している人もかなり多い。 本稿では筆者がよく使う機能や、使うと便利な機能を中心に、Chromeのデベロッパーツールについて紹介していく。なお、本書は執筆時点で、最新のChrome 38を使用している。 機能ふかん 残念ながら、Chro

Reactを勉強し始めた頃は、その概念はわかったとしても、実際にコードを書いてみようとすると、どう書いていいかわからず手が止まってしまう人もいるかと思います。jQueryをバリバリ書いていた人でも、Reactを書こうとすると最初は戸惑ってしまうっていうのはよく聞く話です。ある意味Reactの書き方は特殊です。まずは書き慣れる必要があるかと思います。今回の記事では、初心者向けとしてReactの実装でよく使う基本的な構文を紹介します。今回紹介する構文を覚えれば、ほぼほぼReactの仕組みも理解できるようになり、その後の学習も楽になるかと思います。ぜひ参考にしてみてください。 ファイルを読み込む時の構文ReactでUI（ユーザーインターフェース）を実装する際は、一般的にnpm経由でreactとreact-domをプロジェクトディレクトリ内にインストールして、ファイルに読み込んで使うようにします。

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? このポストは、JavaScript Modules Part 2: Module Bundling の意訳になります。 ちなみにPart1を意訳したものが[意訳]初学者のためのJavaScriptモジュール講座 Part1です。 何か間違いなどありましたらご指摘いただけると幸いです。 （以下、意訳） Part1の記事では、モジュールとは何か、なぜ開発者はモジュールを使うべきか、そしてプログラムにモジュールを組み込む色々な方法について話しました。 このパート２の記事では、モジュールを”バンドル”するとはどういうことなのかについて取り組みま

はじめに http://qiita.com/raccy/items/bf590d3c10c3f1a2846b を見ていたら、はてブに「理由がないから」ということがよく挙がっていたので、理由をつけてあげたら有益な内容になるかな？と思い、拙いながらも補足を試みようと思います。 【2017 1/3 15:10 追記】 元記事の前提はgulpなどを使ってminifyなども行なえる（もしくは行う目標がある）前提の様子なので、中級者以上がターゲットかなーと思いました。そのつもりで読むととてもいい記事だと思っています。 「最新のJSの書き方を覚えてあとは変換機能に任せればレガシーなJSのキツイところに向き合わなくて済みますよ？」みたいなイメージだとわかりやすいかな？ ==、!= 理由 暗黙の型変換が発生して、別の型の比較が真で扱われてしまう場合があるため。 解説 サンプルコードにも出ていますが言葉足らず