イマドキのJavaScriptの書き方2018
PySpa統合思念体です。これからJavaScriptを覚えるなら、「この書き方はもう覚えなくていい」（よりよい代替がある）というものを集めてみました。 ES6以降の難しさは、旧来の書き方にプラスが増えただけではなく、大量の「旧来の書き方は間違いを誘発しやすいから非推奨」というものを作り出した点にあります。5年前、10年前の本やウェブがあまり役に立たちません。なお、書き方が複数あるものは、好き嫌いは当然あると思いますが、あえて過激に1つに絞っているところもあります。なお、これはこれから新規に学ぶ人が、過去のドキュメントやコードを見た時に古い情報を選別するためのまとめです。残念ながら、今時の書き方のみで構成された書籍などが存在しないからです。 たぶん明示的に書いていても読み飛ばす人はいると思いますが、すでに書いている人向けではありません。これから書くコードをこのスタイルにしていくのは別にいい
JavaScript における文字コードと「文字数」の数え方 | blog.jxck.io
Intro textarea などに入力された文字数を、 JS で数えたい場合がある。 ここで .length を数えるだけではダメな理由は、文字コードや JS の内部表現の話を理解する必要がある。 多言語や絵文字対応なども踏まえた上で、どう処理するべきなのか。 それ自体は枯れた話題ではあるが、近年 ECMAScript に追加された機能などを交えて解説する。 なお、文字コードの仕組みを詳解すること自体が目的では無いため、 BOM, UCS-2, Endian, 歴史的経緯など、この手の話題につき物な話の一部は省くこととする。 1 文字とは何か Unicode は全ての文字に ID を振ることを目的としている。 例えば 😭 (loudly crying face) なら 0x1F62D だ。 1 つの文字に 1 つの ID が割り当てられているのだから、文字の数を数える場合は、この ID
レトロエンジニアのための近代Webフロントエンド事情 - Qiita
フロントエンド開発という言葉があちらこちらから聞こえてくる。 「反対語はバックエンド開発だから、サーバとかCUIじゃない、アプリとかGUIあたりのことを指す広い意味の言葉だよね。」 ・・・とか思ってたらとんでもない。 世の中ではJavaScript界隈を限定している風な使われ方をしている。 私のような C/C++ メインのレトロエンジニアは肩身が狭くなるばかりである。 本文は、近年のWeb技術に追いつこうと調査した結果のメモ書きである。 n番煎じの内容だが、Web業界にいない人間の視点 なので、私と同類のレトロエンジニア等、一部の人には新しい気付きが与えられるかもしれない。 詳しい人の添削・ツッコミは大歓迎。 詳細はリンク先に任せ、私が思う「わかりやすい順序」で、調べたことをざっと紹介していく。 きっかけ 読み飛ばしてもよい。 Reactを使うとなぜjQueryが要らなくなるのか 数年前、
関数型プログラミングはまず考え方から理解しよう
関数型プログラミングが注目されて久しいです。 そろそろ勉強しておかないとなぁということで調べてみるものの、情報として出てくるのは"高階関数","カリー化","遅延評価","モナド"などの物々しい単語の数々。これらを勉強して理解した気になったものの、プログラムを書こうと思うと全然書けませんでした。 結局、関数型言語を実現する手段を学ぶ前に関数型と言われるパラダイムを理解しないことには書けません。ということでここでは関数型プログラミングの"手法"ではなく、オブジェクト指向と関数型プログラミングを比較しながら考え方の違いを見ていきます。 本日の例題 プログラミング課題を設定してオブジェクト指向と関数型で解答してみましょう。 課題： 唐揚げ弁当がいくつかあるとします。それぞれ唐揚げが複数入っています。 この中からｘ個の唐揚げをつまみ食いするプログラムを作りましょう。 つまみ食いはバレないようにする
You Don't Need jQuery - Qiita
注意とお願い この記事の内容はもはや古いです。ここに書いている方法では動かないものをいくつか見つけました。参考にする際は動作をよく確認してから使ってください。 ひとつお願いがあります。「あれ、動かないぞ」というコードを見つけたら是非コメントか編集リクエストで教えてください。解決方法までなくても結構です。「これはもう動かないよ」という印をつけたいのです。 この記事はYou Don't Need jQueryの日本語訳と同じ内容です。 先日ひょんなことからYou Don't Need jQueryの日本語訳をさせていただきました。著者のCam Songさんからも快諾をいただけたので1、Qiitaでも公開させていただきます。 なお、本家の英語の説明は継続的にメンテされているので、この記事の情報は古くなっている可能性があります。 追記 この記事は当初は「もうjQueryは必要ない」というタイトルで
あのライブラリは何故誕生したの?のまとめ - Qiita
はじめに 最近、フロントエンドのライブラリ乱立問題について盛り上がってました。 自分はnobkzさんの以下の文に全てがまとまっていると思います。 僕の最初の違和感は、「技術的な流行り」に乗ることに何の価値があるのだろうか?ということである。もちろん、最新のツールやフレームワークはより何かが良くなってるかもしれない。しかし、 それをあなたのプロジェクトで採用するには何の価値があるだろうか? 「最近のフロントエンドへの違和感 - nobkzのブログ」より 裏を返せば、新しいライブラリの内容、特に「どのような問題を解決するためにこのライブラリが生まれたのか」という思想を把握しておくことは重要だと言えます。 つまりは、 "How?(ライブラリの使い方)" よりも "Why?(なぜそのライブラリが必要なのか)" を学んでおこう ということです。この記事では どのような既存の問題・要求を どう解決して
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
春からはじめるモダンJavaScript / ES2015 - Qiita
春ですね！人の配置がリファクタリングされ、コードもリファクタリングの季節です。 では僕がここでモダンなJavaScriptとES2015の利点を語る役をやるので、みなさんはチームを説得する役をやってください。 JavaScriptの歴史 まず最初にJavaScriptの歴史を踏まえることで、今学ぶべきものとその理由を確認しましょう。 なぜ2016年の記事でES2016ではなく、ES2015なのか、と疑問に思った方もいるかもしれません。それは、ES2015がただの年次アップデートではなく、これから始まる毎年のメジャーバージョンアップの起点となるバージョンであり、またES5から飛躍的に仕様が増えたバージョンであるからです。 簡単に(雑な)歴史を紹介します。 ブレンダン・アイクによってNetScapeに実装/搭載された古の時代〜IE6 (1996~2005) ES3: 一時はシェア7割を誇ったレ
JavaScriptでのDOM操作は重いのかという話とForced Synchronous Layoutについて - id:anatooのブログ
2015年にもなるのにJavaScriptでのDOM操作のパフォーマンスについて書く。ウェブページにインタラクションを持たせたい時に、JavaScriptでDOM操作を行うことがよくある。このDOM操作のパフォーマンスについて、よく聞く意見を大別すると次の2つがある。 JavaScriptによるDOM操作は重たい レンダリングが重いだけで、DOM操作そのものはそれほど重たくない JavaScriptでオブジェクトのプロパティを操作したりする単体の処理は通常1ミリ秒もかからないが、DOM操作をするとレンダリングが完了するまでに数十ミリ秒程度かかったりする場合がある。1番目のDOM操作が重たいと言っている人は経験則的にそう言っていることが多い。 レンダリングの仕組みを知っている人は2番目の意見を言うが、重箱の隅をつつくような話をするとこれも必ずしも正しいわけではない。DOM操作するコードによっ
[JavaScript] 猿でもわかるクロージャ超入門 １ 問題 - DQNEO起業日記
問題です。 問題： 呼び出すたびに、1,2,3,...を返すような関数 f( )を定義せよ。 f(); // 1 f(); // 2 f(); // 3 この問題、解けますでしょうか？ 普通の関数では、できないと思います。 しかし「クロージャ」というのを使えば、このようなことができます。 クロージャって何だ？ 「クロージャ」という言葉を、プログラムの本やサイトで目にすることがありますよね。 私が最初に見たのは続・初めてのPerl 改訂版（アルパカ本）でした。 まったく理解できませんでした。 その後、404 Blog not foundやnaoyaさんのブログなどで「クロージャ」という単語を目にしました。 やはり、まったく分かりませんでした。 とどめの一撃はWikipediaの解説記事。 クロージャ (クロージャー、Closure) は、プログラミング言語において引数以外の変数を実行時の環境
![[JavaScript] 猿でもわかるクロージャ超入門 １ 問題 - DQNEO起業日記](https://cdn-ak-scissors.b.st-hatena.com/image/square/8f7de7c0278993661a11fbc3637f96292ba773aa/height=288;version=1;width=512/http%3A%2F%2Fdqn.sakusakutto.jp%2Fimages%2Fkali.jpg)
JavaScriptを読んでて「なにこれ！？」と思うけれど調べられない記法8選。 - Qiita
JavaScriptを読んでいると、「あれ、、、なにこれ？この書き方。。。」と思うことがたまにあります。この際の厄介なことは、どうやって調べたらいいかわからないことです。Google先生に聞こうにも、その書き方をなんと呼ぶかわからないので聞けない。 そんな「なにこれ？」を厳選してみました。覚えておくと、将来スッキリとする時が来るでしょう。 1. なみなみ、ふにゃふにゃ言ってる
はてなブログが遅いのはだいたいJavaScriptのせい - もふぬこ動画☆画像
はてなブログって重いですよね～・・・ ブラウザ変えたら早くなるかなと思ってIE11、Firefox、Google Chromeで計測してみたけど、どれもそんなに差は出なくてどれも遅い（苦笑） いったい何が原因なのかなと調べていったら、JavaScriptのせいでした。 「もふぬこ戦記」のトップページを計測しました。 使用したのはGoogle Chromeのデベロッパーツール。 条件はJavaScriptオン、キャッシュオフです。 12.84秒でした。 次にキャッシュをオンにしてみます。 8.38秒です。 次にJavaScriptをオフ、キャッシュをオフにしてみます。 3.48秒！ キャッシュオンの場合・・・ 746ミリ秒 JavaScriptをオフにするだけでサクサク快適動作します！ 星つけたりできなくなるんですけど・・・（´～｀；） ・・・あれ？JavaScriptエラー出てる気がするけ
Google Sites: Sign-in
Not your computer? Use a private browsing window to sign in. Learn more about using Guest mode
JavaScriptは業務アプリの開発言語として有力な存在になる
この記事は、日経SYSTEMS 8月号に掲載された連載「新野淳一の技術インパクト」第5回のオリジナル原稿をPublickey掲載用に編集したものです。Publickeyでは日経SYSTEMS編集部との合意を得て、雑誌発行から一定期間後に記事をPublickeyに掲載しています。 JavaScriptは1995年の登場から何年にもわたって、Webページにちょっとした動きを与えるための簡易なプログラミング言語とみなされてきた。しかしいまやJavaScriptはモバイル向けアプリケーションの開発、業務アプリケーションのフロントエンド開発、そして大規模なWebアプリケーションのサーバサイドプログラミングなど、あらゆる分野での活用が始まりつつある。最も注目を集め、急速に適用分野を広げて進化しているプログラミング言語だ。 業務システム開発の視点で見れば、今後の開発言語としてJavaScriptが有力候
高木浩光さんへ、しっかりしてください - 最速転職研究会
技術者としての良心に従ってこの記事を書きます。俺はセキュリティとプライバシーの人ではなく、JavaScriptとUIの人である。法律の勉強だって自分の生活と業務に関わりのある範囲でしかしないだろう。しかし少なくともJavaScriptやブラウザが絡むような部分については、確実に自分のほうが理解していると思っている。高木浩光さんが、あからさまに間違ったことを書いたり、おかしなことを書いていたりしても、徐々に誰も指摘しなくなってきたと思う。おかしなこと書いていたとしても、非技術者から見たときに「多少過激な物言いだけど、あの人は専門家だから言っていることは正論なのだろう」とか、あるいは技術者から見た時でも、専門分野が違えば間違ったことが書かれていても気付けないということもあるだろう。 もう自分には分からなくなっている。誰にでも検証できるような事実関係の間違い、あるいは、技術的な間違いが含まれてい
jQuery 1.8の更新内容をまとめたよ。 | Ginpen.com
個人的に油断してたんですが、jQuery 1.8がリリースされましたね。 CSSのベンダープレフィックスを自動でほぼ補完してくれるようになったのが目玉機能でしょうか。作業量としては、セレクターエンジンSizzleとアニメーション関係を全面的に書き換えた事が大きそうです。なお諸々強化されているにも関わらず、ファイルサイズは減っています。（ちょっとだけどね。） えらい！ jQuery Blog » jQuery 1.8 Released jQuery Blog » jQuery 1.8 Beta 1: See What’s Coming (and Going!) jQuery Blog » The New Sizzle jQuery Blog » jQuery Core: Version 1.9 and Beyond jQuery Blog » jQuery 1.9 and 2.0 — TL;
swfobject.js がアレな話 - ほむらちゃほむほむ
もばいる全盛感のある世間的には今更，FLASH なんてどうでもいいし，swfobject.js 自体 2009年から更新されてないから，こんな古いものをと言われかねないような話ではあるものの，日本語での言及をあまり見てないし，つい先日もさる通信キャリアがトップページでやらかしてて多分知られてないんだろうなと思ったので書こうと思った次第． swfobject.js とは何か この記事の対象読者にとっては説明するまでもない話とはおもうけど一応前置きとして説明しておくと，swfobject.js は FLASH を web ページに埋め込むための JavaScript のライブラリ．クロスブラウザ対応してたり，面倒な HTML-tag のお作法を覚えなくても良くなったりとでデファクトスタンダードな感じのモノ．2007年とちょい古いがリクルートMTL の SWFObject v2.0 ドキュメント
「JavaScriptの配列は参照渡し(call-by-reference)」は間違い - rarilogger
「JavaScriptの配列は『参照渡し(call-by-reference)』」というネット上に大量に存在する間違った記述を訂正するエントリ。 結論から先に言うと JavaScriptにおいて、関数の引数として配列を与えた場合、『参照の値渡し』になります。『参照の値渡し』は、『参照渡し(call-by-reference)』ではなく『値渡し(call-by-value)』に分類されます。 参考エントリ 以下の解説が非常にわかりやすいです。G-chan Square - [javascript] javascriptの関数で引数に配列を渡すと、それは本当に参照渡しか？ G-chan Square - じゃ、「参照渡し」ってなんだ？簡単に端折ると、関数の引数として変数を与える場合、 値の値渡し(プリミティブ型変数の値をそのまま渡す) 値の参照渡し(プリミティブ型変数の参照を渡す) 参照の値
SQLとJSONをNode.js上で組み合わせた新言語「ql.io」をeBayが公開
eBayが、JavaScriptアプリケーションからSQL文のような形式でデータベースへの問い合わせを記述できるDSL（ドメイン固有言語）のql.ioを発表。オープンソースとして公開しました。 現在、多くのWebアプリケーションが、バックエンドとのデータのやりとりにHTTPをベースにしたAPIを用いています。しかし、WebベースのAPIによってデータを取り出すのは、プログラマにとって実は手間のかかることです。 例えば、キーワードを入力すると関連する商品の名前、詳細、購入者の評価をユーザーに表示する、というWebアプリケーションでは、まずキーワードでデータベースを検索して商品IDを取得し、今度はその商品IDをキーにして名前や概要、評価の情報を取得する、といったように、APIを繰り返し呼び出す必要があります。 ql.ioはこうした内容をSQLのように分かりやすい記述で実現するだけでなく、複数の
パーフェクトJavaScriptはガチ本。クソと言われる言語仕様をまとめあげた良書 - 三等兵
執筆した井上誠一郎氏ら共著者に敬服。お疲れさまでした。 パーフェクトJavaScript (PERFECT SERIES 4) 言語仕様のpart2(2〜7章)まで読みました。その後はパラパラっと流し読み。まずは言語仕様までの内容について雑感を述べます。 JSには既にサイ本と呼ばれるバイブルが存在しますが、サイ本は「仕様を淡々と解説している本」といった印象を持っています。対してパーフェクトJavaScriptは「仕様における用語を整理し、分かりやすくまとめて解説している本」といった印象でした。そして表紙がダサいです。ガラケーがのってます。サイ本に対してガラケー本といったところでしょうか。・・・って不名誉な名称だからやめとこうと思いましたが、パーフェクトJavaScriptと長いのでやっぱり使います。 対象読者 入門書ではないと「はじめに」で言い切っています。対象読者についてもそのページで言
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
