ThimbleはCSSやJavaScriptをブラウザ上で書いて動作テスト出来るオンラインコードエディタ。Mozilla製でGithubにてソースコードも公開されています(今のところ特定のライセンス表記は見当たりません)。Bracketsみたいなやつですかね。結構前にリリースしたツールですが、再度ローンチした模樣ですね。基本的にはWeb制作を学べる教材として位置づけられているようです。プレビューカラムはスマフォにも対応していました。 Thimble on Github
![CSSやJavaScriptをブラウザ上で書いて動作テスト出来るMozilla製のオンラインコードエディタ・「Thimble」](https://cdn-ak-scissors.b.st-hatena.com/image/square/ea36dab124005f00ce09460c9662c0bc2807bfdd/height=288;version=1;width=512/http%3A%2F%2Fkachibito.net%2Fwp-content%2Fuploads%2F2015%2F09%2Fthim01.jpg)
_ NodeJSでちょとつまづいた Chrome上で動かしている割と大きなシステムがあって、そのうちバックグラウンド側で動く(つまるところ、モデルということだが)スクリプト群に、コマンドラインインターフェイスを付けて動かしたくなった。 で、NodeJSを使う(同じV8だし)ことは決めて、7月ごろにインフラ用の環境を用意しておいたのだが、やっと手が空いたのでいじろうとして仰天した。 NodeJSのWebサイトには、LTSが4.4と書いてあるのに、環境は0.12とか出てくるじゃん。 で、NEWSを見たらいきなり4になったということで納得して(V8 v4.5の4なのか?)、さあ始めるかと始めたところ、ひっかかる。 元のスクリプト群が、リソースを突っ込むためのオブジェクトresを共有しているわけだが、すべてのスクリプトは次のように書いてある。 var res = res || {}; (funct
こんにちは、トレンド調査ラボの井上寛之(@inohiro)です。 クックパッドの検索ログを基にした法人向けデータサービス「たべみる」の開発を担当しています。 本稿では、現在開発を行っているスマートフォン向けウェブアプリケーション(Rails)で採用した、 JavaScriptチャートライブラリを選定するにあたって検討した観点について述べます。 また、実際に採用したライブラリと、その利用例を簡単に紹介します。 ウェブ上に無数にあるJavaScriptチャートライブラリから、最適なものを一つ選択するのは なかなか難しい作業ではないかと考えています。おそらく、これから記述する条件を満たすライブラリは数多く存在し、 今回私が選択したライブラリ以上に良いものがあるのではないかと思います。 「何を以って良いライブラリとするか」という議論もまた難しい話題です。 そのようなライブラリについては、はてブコメ
はじめに もう2ヶ月前の話なのですが、日本のTDD第一人者で、最近はpower-assert-jsの開発などJS界隈でも活躍されている@t_wadaさんが、Twitterでこんな提案をされていました。 『JavaScript: The Good Parts』と『WEB+DB PRESS Vol.87 第1特集』のあわせて250ページ未満でES6までの全体像をつかむ速習コースのご提案 http://t.co/doPQ7V4enw http://t.co/NKTGz3syk7— Takuto Wada (@t_wada) 2015, 8月 10 ちょうどこの頃、初めてのgemを作り終え、Ruby以外の言語に対する学習欲が高まっていたので、この提案に乗っかってみることにしました。 本エントリでは、この速習コースを実際に履修した感想と、結果どうなったのかを書きたいと思います。 履修前の状態 ずっと
概要 JavaScriptでDOMを作ってるサイトをPythonを使ってスクレイピングしたので、手順をメモ。 大雑把には、ScrapyとSeleniumを組み合わせてやった。 Scrapy Scrapyは、クローラーを実装するためのフレームワーク。 クローラーをSpiderのサブクラス、スクレイピングした情報をItemのサブクラス、スクレイピングした情報に対する処理をPipelineのサブクラス、という風にフレームワークが決めたインターフェースを満たすクラスとしてクローラーを実装する。 scrapyというコマンドが提供されてて、このコマンドを使って、作ったクローラーの一覧を見たり、クローラーを起動したりできる。 Seleniumは、ブラウザをプログラムから制御するためのツール(でいいのかな?)。Pythonも含めたいろんな言語で使える。 よくWebサイト/アプリの自動テスト文脈でよく出てく
テンプレートエンジン不要?JavaScriptで文字列処理を簡潔にするTemplate literal 高津戸壮(株式会社ピクセルグリッド) これまでのJavaScriptでは、複雑な文字列処理はテンプレートエンジンを使うことが一般的でした。しかしECMAScript 2015(ECMAScript 6)では、パワフルなTemplate literalが標準で利用できるようになりました。この新たに追加されたTemplate literalについて、概要とサンプルコードを紹介します。 これまでの文字列組み立て ES6で追加されたTemplate literalを使うと、文字列をより柔軟に、シンプルに組み立てることができます。例えば、これまでのJavaScriptでは、文字列を組み立てるために、例えば以下のような方法を取る必要がありました。 var name = 'john'; var cou
今年、クックパッドでは夏のインターンと題して20名弱のインターンを受け入れました。 このインターンは前半と後半に大きく分かれており、 後半が社員に混じって業務をするいわゆる普通のインターンで、 前半は7日間にわたってプログラミング関連の講義を受けるという仕組みです。 わたし(青木)はその前半の過程において、「プログラミングパラダイム」という 1 日の講義を担当し、 JavaScriptの処理系を書くという、ツッコミどころの多い課題を実施しました。 本稿では、その講義を開発する際に考慮したこと、特に難易度調整についてお話しします。 また講義のために開発したJavaScript処理系「JetSpider」についても軽くふれます。 ▼講義資料 Cookpad Summer Intern 2015 - Programming Paradigm from Minero Aoki JetSpiderコ
背景 コンピュータ・サイエンスのバックグラウンドを持たない者として、私は常々もっと低いレベルでプログラムのしくみを理解したい、そこに多くのエネルギーを費やしたいと考えてきました。 そこで、まずは基本を身につけるためにプログラミングの入門書である『 Programming from the Ground Up 』を入手したのですが、なかなか学習を始められずにいました。そんな時、ちょうどブラジルまでの11時間にも及ぶフライトが予定されており、それがこの本を読み始めるにはもってこいの機会となったのです。 読んでみると、この本がすっかり気に入ってしまいました。ただ、事例がLinux x86 GNUアセンブリ言語で書かれていたのです。私は64ビットのMac OS Xユーザでした…。アセンブラ、リンカフラグの例や、 i386 と x86_64 間のシンタックスを理解するのにはインターネットが欠かせない
もうだいぶ前からすでに私はクロージャを使っています。使い方を学びましたが、実際にクロージャがどう機能するのか、また、使うと隠れたところで実際に何が起きるのかを明確に理解しているとは言えませんでした。そもそも、クロージャとは一体何なのでしょうか。 ウィキペディア はあまり役に立ちません。クロージャはいつ生成され、いつ削除されるのでしょうか。どのように実装されるべきなのでしょうか。 "use strict"; var myClosure = (function outerFunction() { var hidden = 1; return { inc: function innerFunction() { return hidden++; } }; }()); myClosure.inc(); // returns 1 myClosure.inc(); // returns 2 myClos
ECMAScript 2015(ECMAScript 6)で新たに追加されたPromiseについて、その概要を全2回に渡って紹介します。 ひとつずつ処理されるJavaScript まず、Promiseについて解説する前に、基礎的なことではありますが、JavaScriptのコードがどのようにJavaScriptエンジンに処理されるかについて、軽く解説しておきましょう。例えば以下の様なコードがあったとします。 var result1 = 1 + 2; // 3 var result2 = result1 + 100; // 103 /* functionらを準備 */ var doSomething1 = function() { document.getElementById('price').value = result2; }; var doSomething2 = function()
altJSの人気が混戦で面白い! 2014年中に人気が急上昇してきており、「2015年では必須の知識」となりそうなJavaScriptライブラリをランキング形式で発表。 ← 前回 連載 INDEX 次回 → こちらのページで【2016年版】も発表! ■ 2015年が始まり、心機一転で「今年こそはWeb開発を頑張ろう」と思っている人も少なくないだろう。そんな方々に向けて本稿では、2014年中に人気が急上昇してきており、「2015年では必須の知識」となりそうなJavaScriptライブラリをランキング形式で発表する(※昨年の2014年版はこちら)。 なお、本稿のランキング決定では、検索キーワードの流行を調査可能な「Googleトレンド」(「すべての国」「過去 12 か月間」「すべてのカテゴリ」「ウェブ検索」という条件で絞り込み)を使って、ライブラリの人気をジャンルごとに比較した(※ライブラリ名
はじめよう TypeScript - 入門から実践まで - 素の JavaScript とはさようなら!
最近のフロントエンド事情には全然詳しくないのですが、ちょっと以下のようなことをやろうかなと思いまして。 複数のJavaScriptをまとめたい まとめたJavaScriptはminifyしたい SourceMapも作成したい Bowerを使って依存関係も解決したい Bowerで解決しようとしているのは、他に手段をよく知らないのとクライアントサイドのJavaScriptの依存関係を書くのは、Bowerが一般的なのかなと思いまして。 で、こういうことをやろうとした時、webpackとBrowserifyが目につくのですが、今回はwebpackでやってみました。 webpack module bundler 以降に、やったことを書いていきます。なお、Bowerで引き込むライブラリは、jQueryとします。 あとで、Browseriry版も書きました。 Broserifyを使ってJavaScrip
Hatena-Textbook はてな教科書は、はてなのエンジニアとして最低限必要とされる技術を身につけるための教科書です。 Web開発における重要なトピックを順番に学びながら、課題をといていくことで、Webアプリケーションをひととおり構築できるようになります。 実装言語としてPerlとScalaのどちらを選ぶことができます。 トピックごとに学びたい言語の方の教科書を読み進めてください。 目次 プログラミングの基礎 Perlによるプログラミングの基礎 Scalaによるプログラミングの基礎 データベースの基礎 Perlによるデータベースプログラミング Scalaによるデータベースプログラミング Web開発の基礎 PerlによるWebアプリケーション開発 ScalaによるWebアプリケーション開発 Webフロントエンド開発 はてな教科書JavaScript編 hatena/Hatena-Tex
(注記:9/13、いただいた翻訳フィードバックを元に記事を修正いたしました。) 半年ごとに”今一番ホットな”フレームワークが新たに登場しては、私たちは興奮に沸き返ります。 誇大広告を信じてはいけません。 フレームワークの寿命 はプロジェクトの成功を左右するほど重要な要素です。フレームワークを選ぶ際、テクノロジにおける多くの意思決定者は納得のいく選択をするために、コミュニティの大きさ、人気、大企業によるサポートの有無などを基準にしています。しかし実際は、こうした要素によって寿命が決まるわけではありません。 最初は勢いがあったのに、徐々に弱まり、最終的には線香花火のごとく儚く消えてしまうようなフレームワークを選んでしまうと、書き直しに無駄な時間を費やしたり、チームの士気を下げたりする原因となります。本記事は、そうした残念な結果を回避するヒントをまとめたものです。 本記事では以下のことを示したい
JavaScriptはとても強力な言語です。強力がゆえ、実はプロトタイプをデザインしたり、オブジェクトのインスタンスを生成したりするのに何種類もやり方があります。それぞれの方法には長所も短所もあります。そこでJavaScript初心者の皆さんのために私がそのあたりを整理して説明したいと思います。今回の投稿は、以前私が書いた 「JavaScriptを分類するな」 の続編です。前回の投稿でたくさんのコメントをいただき、コードの例を出してほしいをいう反応をいただいたので、今回はそれらにお応えします。 JavaScriptはプロトタイプを使って継承 つまり、JavaScriptでは、オブジェクトは別のオブジェクトを継承することができます。 { } 波括弧を使って生成されるJavaScriptの基本的なオブジェクトは、唯一のプロトタイプとして Object.prototype をプロトタイプに持ちま
JavaScriptプログラミングのTOPへ さいきん5〜6年で人気のある jQueryプラグインを, 年ごとに全て把握するためのまとめ。 毎年,「今年のお勧めプラグイン」が ランキング記事として幾つか発表される。 それらの記事へのリンク集。 目を通しておくだけで,最新のjQuery事情が把握できるし, Webデザインの引き出しを増やせる。 2015年 2014年 2013年 2012年 2011年 2010年 ※↑ もくじジェネレータ で自動生成 2015年 [jQuery]WEB制作でよく使うjQueryプラグイン [2015年版] | EMiAC-Works http://emiac-works.com/coding/jquery/... 2015/04/16 WEB制作でよく使うjQueryプラグインをご紹介。色々使ってきた中で今のものに落ちついてきた。定番と呼ばれるものが多い ス
JavaScript チュートリアル 初級編 JavaScript の基礎 JavaScript の第一歩 JavaScript の構成要素 JavaScript オブジェクト入門 JavaScript ガイド 入門編 文法とデータ型 制御フローとエラー処理 ループとイテレーター 関数 式と演算子 数と日付 テキスト処理 正規表現 インデックス付きコレクション キー付きコレクション オブジェクトを利用する Using classes プロミスの使用 JavaScript 型付き配列 イテレーターとジェネレーター メタプログラミング JavaScript モジュール 中級編 クライアントサイド JavaScript フレームワーク クライアントサイド Web API Language overview JavaScript のデータ構造 等値比較と同一性 プロパティの列挙可能性と所有権 クロ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く