目的と対象 オフラインでの授業に使う補足資料として作成したものが、今回の一連の記事。Javaなど他の言語を学んでいる人に向けた授業のため、記事の内容も、それを前提としている。 目次 (1) 学習環境の構築と基本的な書き方 <-- この記事の内容 (2) 変数とデータ型 (3) 演算子および配列 (4) 制御構文と関数 (5) 関数の応用1 (6) 関数の応用2 (7) オブジェクトの基礎 (8) JavaScriptのオブジェクト指向プログラミング1 概要 (9) JavaScriptのオブジェクト指向プログラミング2 オブジェクトの作り方と継承 (10) JavaScriptのオブジェクト指向プログラミング3 多態性 (11) JavaScriptのオブジェクト指向プログラミング4 カプセル化 (12) ES6の新機能について この記事の内容 Firefoxに搭載されている簡単な学習環境
Note: this is a big refactor of a previous post. I was planning on making this into a series, when I realised that first I had to make some improvements to this initial post to have a better structure. Well, this is the result, and I hope you enjoy. Alternatively, the original version can be found here. I had heard about lambda calculus, but it wasn’t until recently, when I started reading Types a
This tutorial is the final of a three-part series by Brad Westfall. We’ll learn how to manage state across an entire application efficiently and in a way that can scale without dangerous complexity. We’ve come so far in our React journey, it’s worth making it across the finish line here and getting the full bang-for-our-buck out of this development approach. Redux is a tool for managing both data-
...or how solving code puzzles can be your path to enlightenment. Whenever I'm asked how a developer can learn more about a particular language, I stress that it's crucial to find the technique that works best for you. Most folks can think of a few immediate ways to pick up a new language: Books Conferences Classroom study While these work, they've always had a few drawbacks for me. When it comes
何か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": {
このサイトはHTML5 Canvasのフレームワーク「CreateJS」の入門サイトです。初学者から学べるように基本的なCreateJSの使い方から解説しつつ、発展的な内容までまとめています。このサイトを通して、webでのインタラクションデザインについて学んでいきましょう。 導入編 webのリッチコンテンツを作るためのフレームワーク「CreateJS」。どのような場面で利用されるのか、どういった表現が可能なのかという点を中心に、概要と導入方法を説明します。 CreateJS とは CraeteJS の事例 簡単なサンプルを試そう ブラウザの開発ツールの使い方を抑えよう CDNのURL 次のコードをHTMLファイルに記述することでCreateJSが利用可能になります。 <script src="https://code.createjs.com/1.0.0/createjs.min.js">
If you’re new to React (or frontend in general) you may find the ecosystem confusing. There are a few reasons for this. React has historically been targeted at early-adopters and experts Facebook only open-sources what it actually uses, so it doesn’t focus on tooling for smaller-than-Facebook projects There’s a lot of bad marketing masquerading as React guides Throughout this document, I’ll assume
Qiita:Teamに投げた社内ドキュメントだったけど、特に問題ないのでQiitaにも投げる。 前提として browserify-rails とbabelify が導入されている状況を想定してる。 基本方針 新規コードはES2015で書く 本番はbrowserify(-rails)でコンパイルする。 単体テストは node 環境下で走らせる テスト環境下では jsdom で window, document をモックする 単体テストでは ブラウザ特有の挙動はテストしない 裏側の環境(browserifyやspec-helper)は難しくして良いが、利用者からみえる範囲は複雑にしない(npm install; npm testで走る) Universal JavaScript に寄せることでコードのポータビリティを上げる 事前準備 browserify-railsを導入する。 .babelr
※この説明では関数型プログラミングの部分について触れていませんが、Rxへの入門の準備という目的をややこしくしてしまうと思ったので省いています。 (私はObservable Streamを外部状態に依存しない書き方で使うことで安定して綺麗なコードを書ける、みたいな理解の仕方をしています) 実装例 長々と個人的な解釈を書き連ねてきたので、この辺で実際のコードに落とし込んでみたいと思います。 ここではマークダウンエディタを実装している想定で、ユーザーのキーボード入力イベントから、`(逆クォート記号)で囲まれた文字列を spanタグで囲んだhtml文字列に変換するような処理を実装します。 ただし、変換したhtml文字列をその度に描画していると描画コストが掛かり過ぎてしまうという想定で、 500ms毎に最新のhtml文字列を検出したいという仕様があるとしました。 準備 まず、ユーザーのキーボード入力
概要 React + Redux の Action についてサンプルを使って、Action の作成と動作の確認をします。 準備 redux/examples/real-world からいろいろそぎ落としたこちらのソースの tag/init を使って説明します。 ※ 実装完了はtag/action Action とは Action はストアの state を変更するためのメッセージです。 Action によって state が変わると UI の表示などアプリの変化が起きるので、アプリに何か起こすための出発点となります。 Action 発行 Reducer が現在の state と action を元に新しい state を作成。 state の変更をUIなどに反映 Action は javascipt のオブジェクトでどのような形でも大丈夫ですが、慣習として type フィールドに文字列で
Written by Jamie Kyle A guided handbook on how to use Babel and how to create plugins for Babel. Translations English Afrikaans العربية Català Čeština Dansk Deutsch Ελληνικά Español فارسی Français עִברִית Italiano 日本語 한국어 Magyar Nederlands Norsk Polskie Português Português (Brasil) Română Русский Српски језик (Ћирилица) Suomi Svenska Türkçe Tiếng Việt Українська 中文 繁體中文 Request another translation
JavaScript勉強会 #フロントエンドのテスト アジェンダ フロントエンドのテストの種類 node.jsのテストとの違い 何故ブラウザテストが必要か? Try it! karma.conf.jsの中身 broserifyされたモジュールのテスト フロントエンドのテストの種類 フロントエンドで行うテストは大きく分けて2種類ある。今回は単体/結合テストを行う。 単体/結合テスト JavaScriptをモジュール単位でテストする ブラウザ用テストランナー(testem or Karma) E2Eテスト 実際のユーザー動作、DOM Eventをエミュレートしてテストする ブラウザ自動化ツール(Selenium) node.jsのテストとの違い フロントエンドの単体/結合テストでは、node.jsのテストで用いたテストフレームワーク/アサーションライブラリに加え、ブラウザ用テストランナー(te
Vue.js is a library for building web interfaces. Together with some other tools you can also call it a “framework”, although it’s more like a set of optional tools that work together really well. Now, if you’ve never heard of or used Vue before, you are probably thinking: great, yet another JavaScript framework! I get it. Turns out Vue isn’t particularly new — I first started working on its protot
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く