10年遅れたJavaScriptの知識をざっくり10分でアップデートしよう
久しぶりにJavaScriptを勉強しようと思ったら、すっかり浦島太郎状態だった……なんて人も多いのでは？ モダンなJavaScriptの知識をコンパクトにまとめました。 JavaScriptを取り巻く環境がどんどん変化しています。新たなツールやフレームワークが生み出されているだけでなく、言語そのものがES2015（ES6）の登場で大きく変わりました。JavaScript開発の学習がいかに難しいか愚痴をこぼす記事がたくさんありますが、無理もないことです。 本記事ではモダンJavaScriptを紹介します。JavaScriptの進展を解説し、フロントエンドWebアプリケーションを作るために使われているツールや手法の全体像を確認します。JavaScriptを学び始めたばかりの人や、以前は使っていて数年間離れたため変化を知りたい人はぜひ読んでください。 Node.jsについて Node.jsは
Electronプログラミング入門 — インストールからミニブラウザ構築まで
Electronプログラミング入門 — インストールからミニブラウザ構築まで 古川陽介 Electronとは、デスクトップクライアントを作るためのフレームワークです。クロスプラットフォームで動作することをサポートしているため、Electronで作ったアプリケーションはMac、Windows、Linuxの環境でも動作します。Atomと呼ばれる GitHub社製のエディタがあります。 ElectronはAtomを作る際にフレームワークとして作られました。以前はAtomShellと呼ばれていましたが、Electronとして名前を変更し、2016年にはversion 1.0がリリースされるまでに成長しました。 ElectronはJavaScript / HTML / CSSを使ってクライアントアプリケーションを作成します。中のアーキテクチャはChromiumとNode.jsで作られており、Web開
JavaScript中級TIPS - Qiita
文字列リテラル HTMLを含む文字列を生成する際に便利なため、囲む時はシングルクォート'hoge'がよい セミコロン 末尾にセミコロンをつけなくても解釈してくれるが、バグを生む可能性があるのでセミコロンはつけるように習慣化する ES6のclass記法のメソッド末尾にはセミコロン不要 同値比較 基本的に===をつかう。==だと寛容過ぎる解釈のため、バグを生むことがある。 短絡評価 hogeFuncの引数にtrue相当の値が入ってきた場合、 ||の右側は読まれない。 hogeFuncの引数にfalse相当の値が入ってきた場合、 （false, null, undefined, NaN, "", 0） ||の右側を読みにいく。 function hogeFunc(e){ e || console.log('piyo'); } hogeFunc(1); // 何も出力されない。もし短絡評価がなけれ
Seleniumアレルギーのための処方箋 - Qiita
何年も前、SeleniumやWebDriverの話で盛り上がった記憶があります。ただ、その当時はまだRailsなどバックエンド中心の文脈でした。今、フロントエンドに軸足が移る中、ブラウザテストの状況はどうなったのでしょう? 不思議なことに、フロントエンド界隈でそれほど話題に上がって来ないですよね (私の周りだけ?)。結構大事なのに。実は皆さん、「Seleniumアレルギー」なんじゃないですか? 公式サイトに漂う ゼロ年代感(下図)。Javaへの躊躇、「めんどくさい」と聞かされ続けた過去、無意識に避けてしまうのがSeleniumです。 ただ、フロントエンドの文脈でこそ、ブラウザテストは重要度を増しています。そこで「Selenium触りたくない病」の筆者が、 四苦八苦した背景 と、2016年だからこそ 見えてきた落とし所 を書いてみたいと思います。 註: 思ったより長文になってしまいました。先
ユニークな見せ方や動きを実装したい時に使えそうなスクリプト 10 - NxWorld
他ではあまり見かけることのないユニークな見せ方や動きを実装したいとき、遊び心あるイースターエッグを仕込んでおきたいときなどに個人的に使えそうだなと思ったスクリプトをまとめてみました。 ブラウザやデバイスによっては実装できないものも幾つかあるのでその点は注意が必要ですが、いずれもそこまで難しい記述などもなく実装することができます。 窓に水滴がついていく様子を表現できる「rainyday.js」 とにかく実際に動いているデモを見てほしいのですが、雨が降って窓に水滴が徐々についていく様子をリアルに表現することができるスクリプトです。 水滴のサイズやついていくスピード、ぼかしや不透明度具合を調整することができます。 水面に滴が落ちているような感じを表現できる「Raindrops.js」 コンテンツやセクションの区切りなどを水面に見立て、そこに滴が落ちてきたようなエフェクトを実装できるjQueryプ
既存のコードの理解が捗るChrome DevToolsの使い方 - kitak blog
jQuery系ライブラリによるDOM操作が中心のプロジェクトにがっつり機能を追加する機会があった。 そのJavaScriptのコードは他の人から引き継いだコードで、一応引き継ぎ時にディレクトリ構成、設計、実装方針について共有を受けたが、それでもいざ手を入れようとすると自分自身のコードの理解が進んでおらず「えーっと...」となってしまった。 上記以外にも、長年、多くの人が触れてきたJavaScriptのコードに機能を追加する、修正するのはなかなか難しいのではないか、と思う。最初は、ちょっとしたユーザビリティの向上のために書かれたスクリプトが、気がつけば多数のDOM操作、至る所で宣言される変数、どこから実行されるか分からない関数群で無秩序に膨れ上がり、頭を抱えることになる(そうならないようにするのがウェブフロントエンジニアがいるひとつの理由ですが…)。 これらのケースでは、まずは修正、あるいは
10年のツケを支払ったフロント界隈におけるJavaScript開発環境（2016年4月現在）。 - 日々、とんは語る。
2015年はCSSが普及した以来となる10年に1度のフロントエンド大変革期で、それまでのツケが一気に回ってきたと個人的に感じていました。目まぐるしく状況が変化していきましたが、2016年になり、個人的にだいぶ落ち着いてきたと感じているので、ここらへんでまとめておきたい思います。 最初に結論を書いておくと、 『React + Redux + react-router + material-ui + axios + ES2015 + Babel + webpack + ESLint + Airbnb JavaScript Style Guide』 という組み合わせが、いま僕の採用しているJavaScriptの環境です。 主要ライブラリは React A JavaScript library for building user interfaces | React 去年、一気に普及したReact
WebAPIのJSONPってなあに？JSONとは別物！ - マネー報道 MoneyReport
JSONの受取 WebAPIを利用してJSON形式のデータを受け取り、ブラウザ上に表示する処理を作っている最中です。 その実装の中で、 「WebAPIを呼び出すのは基本ブラウザのJavaScript側？それともサーバー側のPHPとかでも呼んで良いの？」 という基本的な使い分けが分からず、Web開発者の方々のアドバイスを頂いて切り分けたのが昨日の記事。 やはりブラウザ上でWebAPIから取得したデータを表示するだけなら、ブラウザのJavaScript側で実装するのがスマートで良いそうです(^-^)v ただ特段、ユーザーにデータ表示をさせたりしない用途であればサーバー側で実装してもＯＫとのこと。 まぁ待っている人がユーザーじゃなくて自分（開発者）とかであれば、時間が掛かってもまぁ問題ないですからねぇ。 と、言う訳で昨日はWebAPIを呼び出してJSON形式で返してくれる物で、以前からデータが欲
Electronアプリをプロダクトとして「正しく」リリースするために必要な3つのこと | 株式会社ヌーラボ(Nulab inc.)
Typetalkデスクトップアプリ 先日、弊社チャットサービスTypetalkのデスクトップアプリをリリースしました。おそらくTypetalk.appのパッケージを覗いてElectronの痕跡を見つけ出した方もいらっしゃると思いますが、その通りElectronをベースに実装しています。 ElectronはHTML、JavaScript、CSSなどWebの技術を使用してデスクトップアプリを開発できます。GitHub社のAtomエディタをはじめとして、今では非常に多くのアプリがElectronベースで公開されており、実装方法についても既に多くの記事が書かれています。 ただし、正式にアプリを公開する場合には、コードサイニングなどを行うなど、考慮が必要なポイントがいくつかあります。そこで本記事では正式にElectronアプリをWindows/Mac向けにリリースするにあたって必要だった3つのことを
Electronでデスクトップウィジェットを作るまで - Qiita
はじめに HTML/CSS/JSを使ってデスクトップアプリケーションが作成できるElectron。 本記事ではデスクトップウィジェット作成するまでの流れを、簡単な時計アプリを題材として解説します。 ※ この時計アプリのソースコードとパッケージは、GitHubにて公開しています。 GitHub: SallyAcolyte/tutorial_clock 対象読者 - HTML/CSS/JSで簡単なアプリは作れるが、Electronは初心者な方 - Electronで透過ウィンドウ/フレームレスウィンドウを扱う際のポイントが知りたい方 - 自分好みなデザイン/機能を持つウィジェットを作成したい方 ※ Windows環境を前提としていますが、基本的な流れは他環境でも同様です。 チュートリアル Electronの入手 Electronの本体は、以下からダウンロードできます。 Releases · a
Chrome開発者ツールの小技集 | POSTD
最近、普段以上にChromeの開発者ツールを使うことに時間をかける機会がありました。その過程で、自分が今まで気づいていなかった機能をいくつか見つけました（少なくとも今までその機能を探す必要に迫られていなかった、とも言えるのですが。例えばブラックボックス化や非同期のスタックトレースなど）。そのため、開発者ツールでとても気に入っているいくつかの機能についてまとめてみたくなったのです。 小さな虫眼鏡ののアイコンは、特定の要素やCSSプロパティに対して、「どのCSSファイルに書かれているどのセレクタ/クラスが最終的なスタイルを決めているか」を示してくれます。例えば、どれかDOM要素に対して「要素を検証」を選び、右側の「Computed」というタブを選びます。確認したいCSSプロパティを見つけてその虫眼鏡アイコンをクリックすることで、すぐさま右側に正しいCSSファイル内のクラス/セレクタを表示してく
エンジニアがいい感じにフロントエンド開発を爆速化できる環境構築の手順 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
今年もHTML5 Minutesに登壇してきました。こんにちは、先生です。 当日は「フロントエンド開発スピードをあげるための環境を作ってみた話」をしてきました。 今回はその環境を使ってみるまでの手順を書いていきたいと思います。 必要なものをインストール NodeJS Gulp WebPack Bower PhantomJS NodeJSとGulpのインストールは過去の記事「Gulp.js入門 – コーディングを10倍速くする環境を作る方法まとめ」をご覧ください。 WebPackのインストール WebPackはさまざまな形式のモジュールを静的なファイルにまとめて出力してくれるツールで、拡張性が高く最近好んで使っています。 WebPack http://webpack.github.io/ インストールはnpmを使って簡単にできます。 npm install webpack -g ※ macは
モダンJavaScript環境構築一歩目
JavaScriptの現状を支えるエコシステム群を軽く紹介して、モジュールについて少し掘り下げた勉強会
ユーザーの体感速度を高めるためのJavaScriptチューニング（後編）
連載「Webサイト・アプリ高速化テクニック徹底解説」の第3回は、前回の「ユーザーの体感速度を高めるためのJavaScriptチューニング（前編）」の続きです。この後編では、「ユーザーの操作を阻害しない」方法についてJavaScriptのシングルスレッドやイベントループを交えて解説し、HTML5のWeb Workersについても紹介していきます。 前回は、ユーザーの体感速度を向上させるための方法として、3つのうち「ページを素早く表示する」と「ユーザーに素早くインタラクションを返す」を解説しました。今回は、最後の「ユーザーの操作を阻害しない」について詳しく解説していきます。 ユーザーの操作を阻害しない JavaScriptによる処理が重くなると、いつまでも画面が更新されなかったり、ユーザーの操作が止まってしまったりということがあります。止まっている時間が長すぎると、ブラウザから応答がないという
JavaScriptを読んでて「なにこれ！？」と思うけれど調べられない記法8選。 - Qiita
JavaScriptを読んでいると、「あれ、、、なにこれ？この書き方。。。」と思うことがたまにあります。この際の厄介なことは、どうやって調べたらいいかわからないことです。Google先生に聞こうにも、その書き方をなんと呼ぶかわからないので聞けない。 そんな「なにこれ？」を厳選してみました。覚えておくと、将来スッキリとする時が来るでしょう。 1. なみなみ、ふにゃふにゃ言ってる
JavaScriptユーザエージェント判別・判定
Updated 2015.11.24 / Published 2015.04.02 新しいFirefox OSやWindows Phoneを含めた2015年現在のユーザエージェントを判定し分岐処理を行う手順をご紹介します。OSや機種毎の処理を行っていくには、もはや無理がありますので、タブレットかスマートフォンかを判別することのみにフィーチャーしています。 ユーザエージェント情報に依存して、分岐処理を行うと、常に付きまとう悩みの種が新しいOSの登場です。今年もすでにauからFirefox OSを搭載したスマートフォンであるFx0が新たに登場し、次いで日本国内でもWindows Phoneが発売されることが決まっており、ユーザエージェント情報に依存して処理を行っている部分は相次いで見直しを迫られることになりますので、以下、ご参考に活用いただければと思います。 var _ua = (functi
Reactがなぜ素晴らしいのか
詳しくはこちらへ → https://www.facebook.com/groups/toretatech/
Backbone.JSからAngular2まで、全9大JavaScriptフレームワークを書き比べた! - paiza times
(English article is here.) こんにちは、吉岡([twitter:@yoshiokatsuneo])です。 ウェブ開発に欠かせないJavaScriptフレームワークですが、日々発展しておりReact.js, Ractive.js, Aurelia.js, AngularJS2.0など次々と新しいフレームワークが出てきています。 一体どれを使えばいいのか？何が違うのか？何から調べていいのか迷うことがあります。 そこで、現時点で事実上全てとなる、９大主要フレームワークについて、実際に使ってみて比較を行います。 Backbone.js Ember.js Knockout.js AngularJS(1.x) React.js Ractive.js vue.js Aurelia.js AngularJS2.0(アルファ版) これらのフレームワークでは、以下のような機能が実現さ
JavaScriptの少し独特なオブジェクト指向についてまとめてみた - Rails Webook
Photo by Flickr: slworking2's Photostream 既にJavaやPHPなどオブジェクト指向言語を生業としてやっているが、その感覚でJavaScriptを少し扱っているて、いまいちJavaScript分からないという方を対象に、それらのプログラム言語とは違う、「少し独特なJavaScriptのオブジェクト指向」について説明します。 目次 オブジェクトの作成 プロパティの定義と代入 プロパティの削除 アクセサプロパティ（getter / setter) クラス定義 コンストラクタ引数 インスタンスメソッドの定義 クラスプロパティとクラスメソッドの定義 クラスの継承 クラスプロパティとクラスメソッドの継承 1. オブジェクトの作成大かっこ({})でObjectクラスを作成することができます。 また、new演算子で特定のオブジェクトを作成することができます。 //
ES6時代におけるWeb開発者とセキュリティ業界の乖離
enchant.js meetup! ショートセッション「はじめてのenchant.js AtlasXでゲームをつくる」wise9
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
