Three parts: What you should know about npm What npm knows about you The future of JavaScript
npm and the future of JavaScript
Three parts: What you should know about npm What npm knows about you The future of JavaScript
まだXMLHttpRequestを使ってるの？ fetchのすすめ
JavaScriptでWeb的なプログラムを書いたことがある人は、XMLHttpRequestを使った経験もあるのではないかと思います。XMLHttpRequest，略してXHRは、JavaScript（+DOM）でサーバーとHTTP通信をするための唯一の方法としての地位を長らく保ってきましたが1、ここ3〜4年でより新しいAPIであるfetch APIが登場しました。fetch APIが出たばかりの頃は何だこのおもちゃはと正直思いましたが、いつの間にか仕様が充実していい感じになっていました。 皆さんは、この新しいAPIであるfetchをちゃんと使っているでしょうか。それとも、古いXHRを未だに使っているのでしょうか。この記事では、未だにfetchを使っていない人を主な対象としてfetchの使い方を解説します。（XHRと比較しながら解説するので$.ajaxとかaxiosとかしか使ったことがな
SignalR でChat アプリを作ってみた
サーバーから、クライアントへの通知を行いたくて、SignalR を調査してみた。サンプルは、JavaScript と、.NET サーバーのものが多かったので、ASP.NET MVC + .NET Client という構成で簡単なサンプルを作ってみた。通知をしたいなら、ポーリングでもいいし、Notification Hub でもいいはず。でもそれらのメリット・デメリットを理解したいので、まず、SignalR をやってみることとにした。 SignalR とは SignalR はリアルタイムの双方向通信を簡単におこなうライブラリで、例えばチャットや、対戦ゲーム、プログレスバーみたいな用途に使えるようです。Microsoft で使っているような言語のライブラリが用意されています。問題はWebの情報が古いので動くかドキドキすることですが、意外とあっさり動いてくれました。手順は、VS2012 とかの手
ポップアップウィンドウを使用してログイン基盤を作るときにハマるJavaScriptのポイント - Qiita
TL;DR ポップアップウィンドウからpostMessageを使うことで親ウィンドウと通信ができる IEではポップアップウィンドウからpostMessageを使うことができないのでCORSを使う必要がある iOSのアプリ内ブラウザはポップアップウィンドウ自体をうまく扱えないのでただの遷移以上のことはできない ポップアップウィンドウは真面目に色んなプラットフォームで扱えるようにしようと考えると面倒なことになる 挨拶 この記事はピクシブ株式会社 Advent Calendar 2017 - Qiitaの10日目の記事です。 ピクシブ株式会社で普段はpixivの開発をしたり、広告周りを見たり、インフラっぽい部分を見たりしています。 今回は久しぶりにJavaScriptの話をします。 前提 この記事は去年 https://accounts.pixiv.net/ を開発した際に得られた知見を元にして
Destructuring assignmentのご利用は計画的に
@armorik83です。ES2015に勢いがあるので本日2本目の記事です（前の記事はESLint 1.0.0新ルールまとめ）。 ES2015の活用 今、業務ではBabelの許可が出ているので、フルにES2015（ES6とも呼ばれていました）を活用しています。Class構文やImportはTypeScript経験も手伝ってもはや当たり前になっていますが、最近使い始めたDestructuring assignmentは迂闊に使うと（特にチーム内での）混乱に繋がるぞ…と危険視し始めたので、挙動を確認しておきます。 https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment ブラウザのサポートはまだまだで、現状Babelの変換結果に頼っている状態です。なお個人的
Getting things sorted in V8 · V8
Show navigation Array.prototype.sort was among the last builtins implemented in self-hosted JavaScript in V8. Porting it offered us the opportunity to experiment with different algorithms and implementation strategies and finally make it stable in V8 v7.0 / Chrome 70. Background #Sorting in JavaScript is hard. This blog post looks at some of the quirks in the interaction between a sorting algorith
JavaScriptのオブジェクト指向は、逆の順番で学んだほうが理解しやすいと思うので…
※この投稿は 2011/03/10 に こちら に投稿した記事の転載です。 これを書いた経緯 事の発端というか、きっかけは、id:perlcodesampleさんとid:gfxさんの下のポストを見て、 JavaScriptで一番簡単にオブジェクト指向プログラミングを行う方法 (id:perlcodesampleさん) JavaScriptにおけるオブジェクトの定義 (id:gfxさん) new とか prototype を使うのが推奨されてないとか、直接代入するほうが楽とかじゃなくて、挙動が違うんだよなぁ、と思ったこと。 挙動が違うんだから、もちろん使いどころも違うんですよね。 でも実際、JavaScriptのオブジェクト指向は混乱しやすいと思います。 自分もご多分にもれず、さんざん混乱させられたクチですしね。 わかってしまえば、どってことなくて、とってもシンプルなんですけどね。 せっかく
SHOWROOMの新規開発にHyperappを採用した話 - SHOWROOM Tech Blog
こんにちわ、エンジニアのきむらです。現在は主にフロントエンドを担当しています。 今回は、SHOWROOMの新規機能開発にHyperappというJavaScriptフレームワークを採用したので、そのお話をします。 はじめに SHOWROOMは、ターゲットのプラットフォームをPC / iOS / Androidとしていますが、 iOS / Androidではアプリ内でWebViewコンポーネントを利用しWebページを表示している画面がまだ数多くあります。 既存のページは以下のJavaScriptフレームワーク / ライブラリを使用しています。 JQuery（https://jquery.com/） Underscore.js（https://underscorejs.org/） Backbone.js（http://backbonejs.org/） Marionette.js（https://
フロントエンド開発に迷ったら「Vue.js入門」を読もう - JavaScript関連の書籍とかまとめてみた - Lean Baseball
先日のPyCon JP 2018の野球の話にてVue.js（Nuxt.js）の話をした結果、技術評論社様のご厚意により、一冊頂戴いたしました. Vue.js入門 基礎から実践アプリケーション開発まで 作者: 川口和也,喜多啓介,野田陽平,手島拓也,片山真也出版社/メーカー: 技術評論社発売日: 2018/09/22メディア: 単行本（ソフトカバー）この商品を含むブログを見る 正に欲しかった類の本で大変助かりました、ホントありがとうございます！ 結論から言うと、 Vue.js（またはNuxt.js）で開発するなら一冊持っておけ！（ただし他のFWにもいい本がある） っていうくらい素晴らしい書籍でした、自信を持ってオススメができるレベルです. このエントリーでは、 「 Vue.js入門 基礎から実践アプリケーション開発まで」の簡単な感想 私がフロントエンド開発するまでにやってきたJavaScri
Post by @ficc-workbook
var obj = {}; if(typeof obj.prop !== 'undefined') { // 存在しているときの処理 }
Gulpで始めるwebpack 4入門 - Qiita
webpackは複数ファイルのJavaScriptファイルやCSS、画像ファイルをモジュールとして取り扱う為の人気のツールです。2018年7月時点の最新バージョンは4.16（いちろく、ではなくじゅうろく）です。 ▲ webpackの公式サイト webpackはJavaScriptのモジュールの取り扱いに特に便利で、機能ごとに分割したJavaScriptをimport()やrequire()を使って読み込めるようになります。ビルドツールGulpと組み合わせれば、大規模なプロジェクトでも見通しのよいタスクを定義可能です。 webpack 4をGulpで使用するには一工夫が必要なので、本エントリーで紹介します。 なお、webpackについて詳しくは記事「最新版で学ぶwebpack 4.8入門 - JavaScriptのモジュールバンドラ - ICS MEDIA」を参照ください。 環境準備 Gul
JavaScript おじさんが教える本当の Modern JavaScript 入門 1 - Qiita
一部修正しました Udemy で React コース公開してます。(絶対 Udemy の 1200 円割引価格にはしないので、このリンクから買ってもらうのが一番お互いに得です。) Udemy React + Redux コース 本発表における Modern JavaScript とは何か Phase 1 として以下の環境での開発ができれば Modern JavaScript に入門できたものとする。 Webpack, Parcel 等の module bundler による "module system" の活用。 ES2015+ や TypeScript といった *"Compile to JS 1" の使用。それに伴う Babel によるトランスコンパイルツールの使用。 ESlint, Prettier といった集団開発における、ソース品質安定のためのツール の使用。 ここまでのツール
JavaScriptのイベントをたくさん見られるサイトを作る
JavaScriptのイベント、ややこしいですよね。 名前が似ているものや、使い方にクセがあるものもあり、簡単なようで実装に手間どることが多いです。なので、よく使うイベントの概要をざっくりまとめ、それぞれの実行タイミングとイベントオブジェクトをコンソールで確認できるサイトを作りました。 忘れたときに調べればいいだけの話なので、わざわざサイトを作る必要はなかったのですが、イベントを眺めるのが好きな人に見ていただけたら嬉しいです。 JavaScriptのイベントをたくさん見られるサイト ひたすらaddEventListenerしていたら、イベントに愛着が湧いたので、イベントの実装でハマりそうなところをまとめています。 なぜイベントを使うのか マウスなどはイベントじゃないと値が取得できませんが、頑張ればイベントを使わずとも実装できるものもあります。たとえば、テキストボックスの変更を知りたいだけで
RequireJS使い方メモ - Qiita
未だにモジュール管理してないので、基本っぽい RequireJS を勉強する。 #RequireJS とは JavaScript 用のモジュール管理フレームワークの１つ。 JavaScript を実装していて、 view や model などで細かくファイルを分割していると、ファイル間の依存関係を意識して読み込む順序を注意しないといけなくなる。 （<script> タグの読み込み順序を調整するか、もしくはコンカチしているのであれば、そのコンカチ順序を管理しないといけない） ファイル数が少なかったり、個人で開発しているのであれば手動管理でも大きな問題はない。 しかし、ファイル数が多くなってきたり複数人で開発していると、手動管理では限界がある。 RequireJS では、 JavaScript のコードをモジュールという単位で管理する。 そして、各コードは実装の先頭で使用するモジュールを宣言す
[意訳]初学者のためのJavaScriptモジュール講座 Part2 - Qiita
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の記事では、モジュールとは何か、なぜ開発者はモジュールを使うべきか、そしてプログラムにモジュールを組み込む色々な方法について話しました。 このパート２の記事では、モジュールを”バンドル”するとはどういうことなのかについて取り組みま
![[意訳]初学者のためのJavaScriptモジュール講座 Part2 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/cd9c6b283c2d6a523eee643a126fc35b5cd54e7c/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnMzLWFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkZxaWl0YS1pbWFnZS1zdG9yZSUyRjAlMkY3NzYxNCUyRjUzMjdmMjkzZDk4NTMzZTUyYTUxYzJmMGNiYzM1NjkzZWRiYWQzYjUlMkZ4X2xhcmdlLnBuZyUzRjE3NDM0NzcyMDc_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmZtPXBuZzMyJnM9NTQ5ZjIzNjA2ZGUyMjM0ZjhmNWViZTc0NjBjOTIwYmU%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D10da7b75162b2098afc9710f9e535100%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCJUU2JTg0JThGJUU4JUE4JUIzJTVEJUU1JTg4JTlEJUU1JUFEJUE2JUU4JTgwJTg1JUUzJTgxJUFFJUUzJTgxJTlGJUUzJTgyJTgxJUUzJTgxJUFFSmF2YVNjcmlwdCVFMyU4MyVBMiVFMyU4MiVCOCVFMyU4MyVBNSVFMyU4MyVCQyVFMyU4MyVBQiVFOCVBQyU5QiVFNSVCQSVBNyUyMFBhcnQyJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LXBhZD0wJnM9MGQ5ZDExYzMzZGQ1YzQ3OWU4ZTBlZjZmZmM1OWEwMjA%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDB0ZW5rZWkmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtcGFkPTAmcz1hYWFlNWZiOGFhNjcxY2ZjZDlhYzU4NTZkOGI1ZTg0Zg%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3Dffee21be45e94643187a7d3cf448cbc8)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptの1行小ネタ集 - Qiita
JavaScriptでAOPを実現してみた
イヌでもわかるHyperapp - 犬テトラ+ - BOOTH
Hyperappを読む - Qiita
Build a To-do List with Hyperapp, the 1KB JS Micro-framework — SitePoint