The Newsletter: a weekly list featuring the top 10 most voted articles About 2000 front-end devs get this email every Monday. Subscribe ×
何かJavaScriptのソースコードを機械的にチェックするためのツールを作りたいという場合に、JavaScriptのASTというものを触る必要が出てくると思います。 この記事では、その取っ掛かりとなる案内を簡単にまとめたものです。 ASTとは AST(Abstract Syntax Tree)はコードをパースした抽象構文木のこと。 JavaScriptの場合はJavaScriptオブジェクト(JSON)として表現されます。 コード: { "range": [ 0, 10 ], "type": "Program", "body": [ { "range": [ 0, 10 ], "type": "VariableDeclaration", "declarations": [ { "range": [ 4, 9 ], "type": "VariableDeclarator", "id": {
coffeeの特にクラス記法などを多用していると、coffeeを辞めたい際にES5へのコンパイルしてから再出発しようとすると、多くの情報が欠損してしまう。なので decaf を使う。 decaf は coffee を ES.next へ書き換えるトランスパイラ。 Issueをみるとわかるが(僕も3件ぐらいバグ報告してるのだが)、完全に動くコードに置き換えることはできない。実際には、変換できるまで何度か手を加えながら試して、変換できたら、今度は実際に動くかまた試して… というステップを踏むことになる。面倒だが、自分でゼロからやるよりはマシだ。 使い方 いれる。 var glob = require("glob"); var decaf = require("decafjs"); var fs = require("fs"); var path = require("path"); glob.
Enough with the fatigue – tips against feeling overwhelmed: Don’t try to know everything – it’s impossible in modern web development. Given that there is always more to know, it doesn’t matter that much what you learn (unless you have a specific need). Go for depth in areas you love. Go for breadth and on-demand learning in areas you are merely interested in or think you should know more about. Wa
Ok…so we’re all hipsters, or cocky nerds, neckbeards, losers who only know JavaScript which isn’t a real programing language, or…whatever you wanna call us. But does that mean that we always have to make shit so complicated? Hands down, Webpack is an amazing tool. It’s topping the charts along with React until the next hipster shit comes out, but in the meantime let’s actually begin to share some
日々の仕事の中で役に立つES2015(ES6)のティップス、コツ、ベストプラクティス、プログラムの見本をご紹介します。コントリビューション歓迎です! 目次 var vs. let / const IIFEからブロックベースへ アロー関数 文字列 デストラクチャリング モジュール パラメータ クラス シンボル マップ WeakMaps Promises ジェネレータ Async/Await var vs. let / const var の他に、値を格納する let と const という識別子が新たに追加されました。 var とは異なって、 let と const はクロージャのスコープ内で最初に記述されることはありません。 var の使用例です。 var snack = 'Meow Mix'; function getFood(food) { if (food) { var snack
ECMAScriptは毎年リリースの方針となったため、最新の仕様を管理しているtc39/ecma262には毎日のようにコミットされています。 ECMAScriptのリリース方針についてなどは以下を参照してください。 ECMAScriptの仕様策定に関するカンニングペーパー | Web Scratch これらの最新の変更が反映されたLiving Standardなものは以下のURLで公開されています。 tc39.github.io/ecma262/ また、Proposalを元にECMAScript 2016に入る機能は既に決まっています。 何か新しく入るのかは以下の記事を見てみてください。 ECMAScript 2016 features & changes - JSer.info “どこで”決まっているのかというと2ヶ月に1回行われているTC39のミーティングです。(物理的に集合してF2F
知人がesaのデスクトップクライアントを使わなくなった理由が、複数タブが開けなくて不便だったと聞いた。 確かに「Electronのアプリでも複数タブが使えるといいな」と思ったのでさくっと作ってみました。 作ったもの タブ周りの処理を中心に書いた。ブラウザというよりただのQiitaリーダ。 環境 MacOS X 10.10.4 Node.js v.4.1.1 electron v.0.34.3 準備 Electron環境の導入が必須。 30分で出来る、JavaScript (Electron) でデスクトップアプリを作って配布するまでがとても参考になります。 今回はReactをES6で書くのでbabel+webpack+gulpの設定を書いておきます。 gulpfile.js webpack.config.js npmで必要なパッケージをインストールし、gulpでビルド用のタスクを起動すると
npm はパッケージ依存管理ツールであると同時に、便利なタスク・ランナーです。 本体はごく基礎的な機能だけを持ち、npm が管理するパッケージと Shell の力を組み合わせてタスクを定義します。「npm-scripts で利用する CLI コマンドは npm で管理できる」という分かりやすさが気に入っています。 npm-scripts には以下の特徴があります。 多くのツールが CLI を持っているためにラッパープラグインが不要です。Gulp ラッパー プラグインは非公式であることも多く、メンテナンスが継続するか不安な場合があります。 簡潔です。Gulp で書くと数十行だった処理が数行になるなんてこともよくあります。 複雑なことをするには向いていないです。 環境変数の扱いに難があります。 この記事では、私が npm-scripts を書くときによく利用している便利ツールたちを紹介します。
はじめに 以前、React JSX with TypeScript(1.6)にて書いたことがありますが、TypeScript 1.6以降ではReact JSXを直接コンパイルできるオプションが追加されています。 一般的にクライアントサイドWebアプリ開発は以下の3言語が土台ですが、 JavaScript HTML CSS TypeScriptのお陰で、1.と2.についてはタイプセーフな世界を手に入れたことになります(HTMLの要素名や属性名まで含めて、コンパイル時のチェックがされる) JavaScript -> TypeScript HTML -> React JSX(.tsx) CSS -> ??? こうなると、3. におけるCSSについても、何とかできんものかと期待するのが人情です。 今回のエントリは、CSS ModulesをTypeScript JSX環境に統合することで、タイプセー
成果物 github.com 目的 ReduxとES6への入門。 React.jsを(ようやく)触る機会が出て、情報量の多いFluxxorとCoffeeScriptで入門してた。 いろいろ情報を集めると、flummoxが人気!!みたいなのを見て、覗いてみたら4.0 will likely be the last major release. Use Redux instead. It's really great.って書いてあってReduxを触ってみることにした。exampleとawesome-reduxを眺めたらどれも当たり前のようにES6で書かれていて、合わせて入門することにした。 Redux概要 まだかなり理解が怪しいんだけど、以下の図がイメージしやすかった。 André Staltz - Unidirectional User Interface Architecturesより S
React.js の 公式Tutorial を Redux を利用して書き直した。また Mocha + power-assert を利用したテストも追加JavaScriptmochapower-assertReactredux 前回 QiitaにReact.js の React.js の公式Tutorial を gulp を利用して簡単に実行できる環境を作って、ES6も試した で公式TutorialをECMA2015(ECMA6)を利用して書き直しを行ったのですが、ReactといえばFlux、Flux といえばRedux ということで、流行りのRedux を利用して記述したらどうなるのかを試してみました。 また 同じく流行りのテスト環境である Mocha + power-assert を利用して、テストを追加してみました。 React および Redux はテストも非常に行いやすいのを体感
最近IoTが話題になっています。マイコンデバイスと言うと、C言語や専用のプログラミング言語で書く必要があるように感じますが、最近ではJavaScriptでも書けるようになっています。そこで今回はIoT用に作られたJavaScriptライブラリを紹介します。 IoT.js サムスンが開発しているライブラリで、これと合わせたJerryScriptというJavaScriptエンジンも提供されています。特にJerryScriptは64KBのRAM上でも動作するくらい軽量な作りになっており、組み込み系にJavaScriptを活かせるエンジンとなっています。IoT.jsはnode.jsと後方互換性があります。 deviceJS deviceJSはIoTにおけるjQuery的位置づけを目指しています。他のデバイスを特定する、イベントフックなどが手軽に実装できるようになっています。x86とARM両方に対応
JavaScript Standard Style English • Español (Latinoamérica) • Français • Bahasa Indonesia • Italiano (Italian) • 日本語 (Japanese) • 한국어 (Korean) • Português (Brasil) • 简体中文 (Simplified Chinese) • 繁體中文 (Taiwanese Mandarin) This is a summary of the standard JavaScript rules. The best way to learn about standard is to just install it and give it a try on your code. Rules Use 2 spaces for indentation. e
React初学者のためのガイドで著者のPete Hunt氏がオススメしていたwebpack入門を和訳しました。 意訳が含まれるため、誤りやより良い表現などがあればご指摘頂けると助かります。 原文:https://github.com/petehunt/webpack-howto Webpack入門 このガイドの目的 これはwebpackで物事を成し遂げるためのクックブックです。インスタグラムで実際に使用されているものをほぼ網羅した実践的な内容となっています。 私からのアドバイス:まずはこれをwebpackの参考資料として手元に置いて始めてみましょう。公式ドキュメントは理解を深めるために後で参照することにしましょう。 前提条件 browserify、RequireJSまたは類似したものを知っていること 下記のいずれかに価値を見出していること バンドルの分割 非同期ローディング 画像やCSSの
Created at: 2016-01-14 ついにChakraCoreが公開されたので、早速ビルドしてC#からとりあえずハローしてみます。 ChakraCore is 何とその前にChakraCoreのおさらいです。 まずChakraCoreはInternet ExplorerやEdgeで使われているJavaScriptエンジン ChakraのWindows固有の機能を外したライブラリです。要するにV8とかJavaScriptCoreみたいなものです。 オープンソースになった後のロードマップが公開され、いろいろ書いてあります。 Windows以外のプラットフォームでも動かすことを考えている(最初はJIT抜きでUbuntu) Node.jsのV8をChakraにする魔改造を本家にPR WebAssemblyやるとか云々 ChakraCoreのメリット従来のChakraはWindowsまたは
Exploring Real Time Apps with VueJS, ES2015 and Webpack Vue.js is a framework for building web applications using a component based approach. It focuses primarily on the “View” layer of the traditional MVC and in that sense is much more akin to ReactJS than a larger framework like Angular or Ember. If you’re keen for code, the app we’ll build is on GitHub for you to check out and hack with. We’ve
karma + babel + browserify + isparta を使って、es2015 で書いたフロントエンドテストのカバレッジを出す設定JavaScriptTDDkarmacoveragebabel こちらの記事も合わせて参考にしてください。 - karma + babel + istanbul でフロントエンドのカバレッジを出す設定 2016年版 フロントエンドで es2015 かつ browserify でバンドルしつつ書きたいという需要はそこそこ高まっているんじゃないかと思いますが、そのセッティングで開発した場合に、テストカバレッジってどうやって出したらいいの?という情報があまり出回っていない気がしたので、自分なりにミニマルだと思う設定の例をまとめてみました。 なお、この記事では、テストランナーには、karma、バンドラには browserify を使う前提で書いています
componentWillMount() { store.on("change", this.onChange.bind(this)); } componentWillUnmount() { store.off("change", this.onChange.bind(this)); } だとイベントが解除できないという問題が起こります。 そのため、事前にbind済みのハンドラを持っておく必要が出てきたりします。 サンプル この記事では上記のような、ボタンでカウントアップするだけのものを React - thisを普通にbindする手法 React - azu/idempotent-bindを使ってbindする手法 deku を使って書く の3つ書いてみます。 ソースコードはこちら azu/component-event-binding React - thisを普通にbindする手法 こ
HTML5で導入されたiframe要素のsandbox属性は、そのiframe内のコンテンツに対しJavaScriptの実行を始め様々な制約を課すことでセキュリティの向上に役立つ機能である。例えば、以下のように指定されたiframeでは、iframe内からformのsubmitなどはできるが、iframe内でのJavaScriptの実行やtarget=_blankなどによってウィンドウを開くことなどは禁止される。 <iframe sandbox="allow-forms" src="..."></iframe> sandbox属性に明示的に allow-scripts という値を指定しない限りはiframe内では直接的にはJavaScriptは実行できないが、かといってiframe内から間接的にJavaScriptを必ずしも実行させることが不可能かというとそうでもない。 sandbox属性
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く