JavaScriptをめぐるパラレルワールド 〜Webデザイナーから見た今どきのフロントエンド事情〜｜dwango creators' blog（ドワンゴクリエイターズブログ）
どうも、ほそだです。ゴールデンウィークも終わり、暖かい空気を感じる季節になりました。 さてちょっと前に、こんな記事が話題になっていました。 You Don’t Need jQuery – Qiita （旧題：もうjQueryは必要ない） 元々は海外の方が書かれたものを日本語訳してくださったものですが、あらかた網羅されていて感服しました。実は今回、これと全く同じようなことをこのブログのネタにしようと考えていたのですが（jQueryでやってたことをjQueryを使わずにやってみた的な）、締切間近になってさあ書くぞってタイミングでここまで完璧なものを先に出されちゃったので、こりゃ勝てねえと泣く泣く断念したのですよね。。 それで急遽新たにネタを考えなきゃいけなくなったのですが、これに対するネット上での反応がけっこう興味深いなと思って見ていました。 「もうjQueryは必要ない」に関するみんなの反応
IEでのonbeforeunloadの厄介な挙動の一部を例外処理で抑制する
数々のバグや非準拠に関して右に出るものは居ない事で著名なIE大先生ですが、例に漏れずonbeforeunloadの挙動もおかしいですね。あまり使わなかったので気がつきませんでした。 細かな違いについてはこちらで詳しくまとめてくれています。 IEでのonBeforeUnload の挙動 | Inside ASCADE 上記ページでも幾つかのサンプルで "キャンセル時にエラーあり" と書いてありますが、 そのエラーに関しては実行する処理を try {} catch(e) {} で無闇に括っておくとお茶を濁す事ができます。 // 画面遷移時に確認する window.onbeforeunload = function(event){ event = event || window.event; return event.returnValue = '確認メッセージ'; }; // 実行する処理を例
ES Modules と Node.js について - from scratch
書こう書こうと思いながらこのタイミングまでのがしてしまいました。 今一番 Node.js の中で hot な discussion の一つと言えるでしょう、『ES Modules が Node.js の中でどうなるか』です。 ES Modules 現況 ES2015 が発刊されてそろそろ一年です。 ES2015 にある機能は Node.js v6でも 93% 程度カバーされています。モダンブラウザでも大体が90%を超えています。しかし、 ES Modules だけはまだどのブラウザも実装しきれていません(kangax compat table は ES Modules は省かれてます)。 そもそも ECMAScript 2015 自身で定義されたのは構文だけなので、構文はともかく、どうやってモジュールを取ってくるかという Loader の部分がまだ決まりきっていません。 https://w
プログラマの三大美徳の啓発の勧め : 怠惰、短気、傲慢 ― JavaScriptで遅延評価 | POSTD
(編注：2016/5/31、頂いたフィードバックを元に記事を修正いたしました。) larry wall 怠慢と勤勉 コンピューティングにおいて、”laziness(怠惰)”は幅広い意味の単語です。大抵は、もし必要が無ければ何もしないということを意味します。その正反対を指すのは”eager(勤勉)”です。後で必要になる場合に備えて、できるだけ働くということを意味します。 以下のJavaScriptを見てみましょう。 function ifThen (a, b) { if (a) return b; } ifThen(1 === 0, 2 + 3) //=> undefined ここで、問題です。「JavaScriptは 2+3 を評価する？」答えはお分かりですね。「評価する」です。呼び出し関数に、引数を引き渡すこととなると、JavaScriptは eager(勤勉＝先行評価) で、式の全てを
こないだ社内の勉強会でwebpackのこととか話したのでまとめた - getalog
webpackとは いろんなファイルをtranspileしてES5のJavaScriptに変換してくれるやつ AMDかCommonJSの形式でファイルをロード(CommonJSならrequire)すると、transpileしたファイルをロードしてくれる クライアント側のjsコードでもrequireを使用することができる assetとしてビルドして配布するイメージ コードが共用の場合、設定を変えることで素のrequireを利用するサーバー用コードと、webpackがpolyfillしたrequireを利用するクライアントコードとを別々に生成できる 全てがJavaScriptになる、画像やCSSも 画像は「Base64かFilePath」に CSSは「headにstyleを挿入するjsコード」に 特定のファイルをどのようにtranspileするかはpathマッチングでプラグイン形式で設定する
ES6 Generatorを使ってasync/awaitを実装するメモ - maru source
こんにちは丸山@h13i32maruです。 ES6のGeneratorを勉強する題材としてasync/awaitを実装してみたので、そのメモです。 Genratorとは ES6のGeneratorとは「任意の時点で処理を中断/再開することができる関数」というもの。一般的にはコルーチン(coroutine)と呼ばれるもので、サブルーチン(通常の関数)を一般化したもの。ES6でGeneratorを理解するには3つのキーワードがある。 Generator Function 処理の中断/再開が行われる特殊な関数 function* generatorFunction(){}のようにfunction*を使って定義する Generator Object 中断された処理を再開したり、値を取得し対するオブジェクト var generatorObject = generatorFunction()のように取
日本のWebエンジニアの大半が、変化に対応しきれなくなっている件について。 - 日々、とんは語る。
先週書いた10年のツケを支払ったフロント界隈におけるJavaScript開発環境（2016年4月現在）。という記事がまずまずの反響を得たのですが、僕の予想とは異なり、「こんなに多くのツールやフレームワークを必要とする現状はおかしい」といった、状況批判の意見が多く集まりました。 Mediumなど海外メディアでは、もはやこの種のツールを組み合わせたフロントエンド開発が当たり前として受け入れらており、この半年間ほどは「実際にどの組み合わせがベストか」という議論が行われていました。そして、そういった議論もようやく落ち着きを見せ、おおよそ僕が書いたような組み合わせに帰結しつつあります。 そのため、まさか「フロントは変化が激し過ぎる」とか「保守が大変そう」などといったような、1年くらい前に言われていた意見が、いまだに多くを占めるとは、まったく予想していなかったというのが正直な意見です。ひと昔まえであれ
社内JavaScript勉強会で作ったコンテンツまとめ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 弊社で実施している社内向けJavaScriptの勉強会のコンテンツまとめです(最近はやってないのも上げてる)。対象は独学でJavaScriptを少し触ったことがあるけど企業でやったことはない、くらいのレベルの人です。このコンテンツを作っている筆者も1年くらいしかJavaScriptを触ってないので怪しい所もあると思いますが、社内でのJavaScript教育に困っている方の参考になればと思います。 ちょっと一部古かったりするので、Issueでも立てて下さい。気が向いたら直します。 コンテンツ ES2015(ES6) JavaSc
power-assert + babel as a development tool
3行まとめ espower-babelは役目を終えたので、Deprecated Babel + power-assertはbabel-preset-power-assertを使う コード上はrequire("power-assert")とrequire("assert") どちらでもpower-assert化できるようになった espower-babelは非推奨へ Babel + Mocha + power-assertの組み合わせを出来るだけ設定ファイルなどを作らずに使えるespower-babelというモジュールを書いていましたが、役目を終えたので非推奨(deprecated)にしました。 テストコードをES6+power-assertで書けるespower-babel 3.0.0リリース | Web Scratch 理由としては、Babel@6からは設定(ファイル)を必ず必要とするの
筋の悪さ | tech - 氾濫原
JS しか書いてないんだなって人は筋悪いものをありがたがっていたりする印象はある。しかし筋悪いものをありがたがるみたいなのはどこにでもいるので、JSがどうとかは直接は関係がないはずではあると思う。JSしか書いてない人とPHPしか書いてない人は似たようなもんで、単に広範囲の知識に興味がないだけな気がする。 それはともかく「これは筋悪そうだな」っていう感覚がどこからくるのかよくわかってないので、現時点で思いつく限り雑にメモしておく。 割の合わなさ 「これは何の問題を解決してるんだろう」と思ってドキュメント読んだりソース読んだりした結果、大したことを解決してなくて、その割に実装量が多いとか学習コストが高いと、筋悪いなあと思う。 フットプリントや学習コストに対して提供されるモノが「割に合わない」のは筋が悪く感じる。 将来性のなさ 「あ、これはただの流行だな」みたいな、5年後には消滅してるなというも
フロントエンジニア向けTwitterに関する実装まとめ 2016 開幕版（ツイートボタンの設置方法・Web Intent・ツイッターウィジェット・Twitterカード etc...） - みかづきブログ その3
（のちにキャッチーでポップな気の利いた文章に差し替える） いつまで経ってもキャッチーでポップな気の利いた文章が思いつかなかったので、このまま公開します。Twitterに関する実装あれこれです。 実は 公式ドキュメント に詳しく載っているので気になる方はそちらも確認してみてください。ちなみに本記事には公式ドキュメントに載っていない生活の知恵的なテクニックも記載しております。 dev.twitter.com 目次 1. 公式ボタンの設置方法 1.1 ボタンの種類と入力項目 1.2 ページ内に公式ボタンを複数置きたい場合 1.3 ツイートの文字数を稼ぐためにURLの短縮を缶変えている場合 1.4 ユーザーを複数入力したい場合 1.5 推奨ユーザーを複数入力したい場合 1.6 ハッシュタグを複数入力したい場合 1.7 画像付きツイートを投稿させたい場合 1.8 動画付きツイートを投稿させたい場合
春からはじめるモダンJavaScript / ES2015 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 春ですね！人の配置がリファクタリングされ、コードもリファクタリングの季節です。 では僕がここでモダンなJavaScriptとES2015の利点を語る役をやるので、みなさんはチームを説得する役をやってください。 JavaScriptの歴史 まず最初にJavaScriptの歴史を踏まえることで、今学ぶべきものとその理由を確認しましょう。 なぜ2016年の記事でES2016ではなく、ES2015なのか、と疑問に思った方もいるかもしれません。それは、ES2015がただの年次アップデートではなく、これから始まる毎年のメジャーバージョンアップの起点
あのライブラリは何故誕生したの?のまとめ - Qiita
はじめに 最近、フロントエンドのライブラリ乱立問題について盛り上がってました。 自分はnobkzさんの以下の文に全てがまとまっていると思います。 僕の最初の違和感は、「技術的な流行り」に乗ることに何の価値があるのだろうか?ということである。もちろん、最新のツールやフレームワークはより何かが良くなってるかもしれない。しかし、 それをあなたのプロジェクトで採用するには何の価値があるだろうか? 「最近のフロントエンドへの違和感 - nobkzのブログ」より 裏を返せば、新しいライブラリの内容、特に「どのような問題を解決するためにこのライブラリが生まれたのか」という思想を把握しておくことは重要だと言えます。 つまりは、 "How?(ライブラリの使い方)" よりも "Why?(なぜそのライブラリが必要なのか)" を学んでおこう ということです。この記事では どのような既存の問題・要求を どう解決して
You Don't Need jQuery - Qiita
注意とお願い この記事の内容はもはや古いです。ここに書いている方法では動かないものをいくつか見つけました。参考にする際は動作をよく確認してから使ってください。 ひとつお願いがあります。「あれ、動かないぞ」というコードを見つけたら是非コメントか編集リクエストで教えてください。解決方法までなくても結構です。「これはもう動かないよ」という印をつけたいのです。 この記事はYou Don't Need jQueryの日本語訳と同じ内容です。 先日ひょんなことからYou Don't Need jQueryの日本語訳をさせていただきました。著者のCam Songさんからも快諾をいただけたので1、Qiitaでも公開させていただきます。 なお、本家の英語の説明は継続的にメンテされているので、この記事の情報は古くなっている可能性があります。 追記 この記事は当初は「もうjQueryは必要ない」というタイトルで
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
CSSのfixedを適用していると横スクロール時に一部非表示になることがある
CSS fixedで固定したメニューの問題点 スクロール時に上のメニュー部分を追随させるためにposition:fixedを指定することがあるが、こちらを指定するとtopだけでなくleftも0pxで固定になってしまう。 これの何が問題かというとウィンドウサイズをページ内のコンテンツの横幅よりも小さくしたときに横スクロールのバーがブラウザの下の方に表示されるがこれを右に移動させても左位置が0pxに固定されているためウィンドウサイズを小さくしたことで非表示になっている右側の部分が右にスクロールしても表示されなくなってしまうのだ。 例えばライブドアブログのメニューの場合、少し下にスクロールするとpositionがfixedになり、ウィンドウサイズを小さくすると「コメント速報」の部分が右スクロールをしても表示されなくなってしまう。 ブログ系のサイトだと上部を固定することが多いようだ。 ライブドアブ
初心者のためのJavaScriptのスコープ - 小さい頃はエラ呼吸
はじめに JavaScriptのスコープについて、あらためて勉強する機会があったので、まとめてみました。 よくわかるJavaScriptの教科書posted with amazlet at 14.02.04たにぐち まこと マイナビ 売り上げランキング: 11,386 Amazon.co.jpで詳細を見る プログラミングにおけるスコープ はじめに、そもそもスコープとは何なのかを理解する必要があります。プログラミングにおけるスコープとは、変数や関数の有効範囲のことを言います。ある変数や関数が見える範囲と言い換えてもいいかもしれません。 プログラミングでのスコープとは、ある変数や関数が特定の名前で参照される範囲のこと。ある範囲の外に置いた変数等は、通常、その名前だけでは参照できない。このときこれらの変数はスコープ外である、「見えない」といわれる。 スコープ - Wikipedia JavaSc
Clingify - a jQuery plugin to make stuff sticky (Demo)
« Back to GitHub Repo Purpose Clingify is a jQuery plugin that allows you to easily create “sticky” or “fixed” headers, navs, and other page elements. Once you scroll past the targeted element, the plugin will toggle a CSS class that gives the element a fixed position, pinning it in place on the page. Features There are many other sticky plugins out there, but here are a few reasons to consider Cl
JavaScriptの文化とleftpadの話とpadStartについて - from scratch
無駄にラノベみたいに長いタイトル書いちゃったんですが、まぁやっぱり一言くらいは残しておくかと思ったので書きます。長いのでまとめだけでも見てもらえると良いかもしれません。 leftpadの話はかなり大事になっていて、Node.js界隈を中心としてその他のOSSをやっている全体的に話が波及しています。幾つかの記事を読みました。今回はJSの文化と歴史についてちょっとずつ書いていこうかなと思います。 本の虫: npmからkikとその他諸々が消されたまとめ 江添さんの話はすごくよくまとまっていて、ネタも含めた上で一番面白い話になっていました、ここで言われている下記の疑問に答えていこうと思います。 もっと憂うべきパッケージがある。isArrayだ。このパッケージは一日88万回もダウンロードされていて、2016年2月だけの一ヶ月間に1800万回もダウンロードされていて、72個ものNPMパッケージが依存し
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フロントエンドにテストを導入 - Qiita
