久しぶりにJavaScriptを勉強しようと思ったら、すっかり浦島太郎状態だった……なんて人も多いのでは？  モダンなJavaScriptの知識をコンパクトにまとめました。 JavaScriptを取り巻く環境がどんどん変化しています。新たなツールやフレームワークが生み出されているだけでなく、言語そのものがES2015（ES6）の登場で大きく変わりました。JavaScript開発の学習がいかに難しいか愚痴をこぼす記事がたくさんありますが、無理もないことです。 本記事ではモダンJavaScriptを紹介します。JavaScriptの進展を解説し、フロントエンドWebアプリケーションを作るために使われているツールや手法の全体像を確認します。JavaScriptを学び始めたばかりの人や、以前は使っていて数年間離れたため変化を知りたい人はぜひ読んでください。 Node.jsについて Node.jsは

JavaScript,jQueryの爆速コーディング、デバッグ方法論の勧め～実践向け逆引き(windows,chrome向け)～JavaScriptjQuery ※2017/4/21にオンロード時のデバッグ方法8を追記しました！ こんにちは！エイチーム引越し侍の加藤です！ みなさんJavaScript書いてますか？ console.logめっちゃ使うよねーって人は目からうろこのデバッグ方法を、 ケース毎に紹介していこうと思います。(僕はconsole.log使いません) サーバーにデバッグ用のコードをアップロードすること無いので、 消さずに意図に反してリリースしてしまう危険性がないのもお勧めです。 前提知識 F12で出てくるデベロッパーツール(Elements, Console, Source, Network)の知識 Ctrl+Shift+Fで外部ソース(js,css)に対して一括検索が

 どうも、まさとらん（@0310lan）です。 今回は、JavaScriptでWeb開発をされている方や、これから勉強しようという方も含めてとても便利に使える無料オンラインエディタのご紹介です！ バックエンドは「Node.js」でプログラミングして、フロントエンドは「HTML / CSS / JavaScript」で開発し、そのままホスティングもしてくれるので手軽に公開することも可能なスグレモノですよ。 【 Gomix 】 以前は「HyperDev」という名称でサービスが公開されていましたが、現在は「Gomix」というサービス名に変更されており、今も活発にバージョンアップが続けられています。 ■基本的な使い方！ それでは、実際に「Gomix」を使いながらどのようなサービスなのかを見ていきましょう！ まずは、ブラウザから「https://gomix.com」にアクセスすると、いきなりコード

jQueryだけで他のサーバーのコンテンツを読み込もうとすると、クロスドメインの制限がついて回ります。なぜJSONではなくJSONPを使わなければならないのか確認し、他の解決策も検討してみましょう。 ※本記事は2016年7月15日に掲載した記事の翻訳を一部更新したものです。執筆時点の情報をベースにしており、最新ではない可能性があります。 Webベースのアプリケーションを開発し、権限のないドメインからデータをロードしようとすると、おそらくブラウザーの画面に以下のようなメッセージが表示されているはずです。 XMLHttpRequest cannot load http://external-domain/service. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘h

時代はECMAScript 2015（ES6）とはいえ、実はまだES5も追いかけられていない、使いこなせていない…という開発者も意外と多いのでは？  ES5のArrayメソッドを使ってメンテナンスしやすいコードを書く実例を紹介。 JavaScriptのメリットは多様なプログラミングスタイルを選べることです。オブジェクト指向、命令型、関数型のプログラミングもできます。さらに、必要性、好み、チームの意向に応じて、スタイルの切り替えもできます。 JavaScriptは関数型の書き方をサポートしてはいるものの、HaskellやScalaといった言語のように純粋な関数型プログラミングには最適化されていません。JavaScriptのプログラムを100%関数型にはできませんが、関数型プログラミングのコンセプトを使うと、コードがきれいになるだけでなく、簡単に再利用でき、テストしやすくバグを減らしやすいコー

JavaScriptで取得した数値を整数として取得するため小数点以下を削除したいことがある。例えば12.34を12にするなどだ。 この際にfloorを使用されているケースが非常に多いのだがfloorは小数点切り捨てではなく小数点切り下げなので使用してはいけない。 小数点切り捨てと切り下げの違い 小数点切り捨てとは1.5なら1、-1.5なら-1のように小数点以下を削除することだが切り下げは指定された基準値1の倍数になるように、最も近い値に数値を切り捨てます。 そのためMath.floor(1.5)は1になりますがMath.floor(-1.5)は-2になります。 console.log(Math.floor(12.34)); // => 12 console.log(Math.floor(56.78)); // => 56 console.log(Math.floor(1.5)); // =

JavaScriptにおいて、XMLHttpRequest（XHR）に代わるAPIとして、Fetch APIというものが提供されるようになりました。XHRと同等の機能を提供しますが、Fetch APIはよりシンプルで強力です。使い方を学んでみましょう。 基本的な使い方 Fetch APIはPromiseベースの簡単なAPIです。リクエストするにはfetch(url)を呼び出すだけです。 fetch('file.txt') fetch()メソッドはPromiseを返します。PromiseはResponseオブジェクトとして解決されます。返ってきたPromiseを実際に処理してみましょう。 fetch('file.txt') .then((response) => response.text()) .then((text) => console.log(text)) .catch((error

(2016/12/11、いただいたフィードバックをもとに翻訳を修正いたしました。) JavaScriptにおいて”純粋関数”とはどういう意味でしょうか？　一般的なプログラムの用語では、純粋性というのは”参照透過性”として知られています。カッコよく言うと、「 式や関数の呼び出しをその結果と置き換えたとしても、プログラムの振る舞いが決して変わらない 」こと、また別の言い方をするなら、「 同じ入力値を渡すたび、決まって同じ出力値が得られる 」ということです。 これなら直感的に理解できそうに聞こえますし、 x => x * 10 などの関数は純粋に見えます。これに数字の 3 を引数として渡したら必ず、出力値として 30 が得られますからね。では、ある関数が純粋で別の関数が純粋でないと、どうしたら分かるのでしょう？　コードを読むだけで十分でしょうか？ 一般的にどう思われているかを見てみましょう。昨日

HTMLを書く上で一番よく見かける要素は何でしょうか。それはおそらくdiv要素でしょう。大量に散らばったdiv要素は、もはやHTMLではありふれた光景となっています。しかし見た目が美しくありませんし、マークアップ的にも推奨できる行為ではありません。 そこで現れたのがCustom Elementsです。Custom Elementを使用すれば、独自の要素を定義することができ、マークアップがわかりやすくなります。この記事では、Custom Elementsについて簡単に解説します。 Web ComponentsとCustom Elements Web Componentsは以下の4つからなる規格です。 Templates Shadow DOM Custom Elements HTML Imports 今回はこのうちCustom Elementsに焦点を当てていきます。 独自要素を定義するCus

[markdown] こんにちは。 ついに自分の番が回ってきて、かなりのプレッシャーを感じております。 社会人４ヶ月目、新米フロントエンジニア（デザインもしますよ）の坂本です。 フロントエンドの記事で上司がヒエログリフなんて彫ってしまったもんなので、どんな面白い記事を書いたらよいのかと余計にプレッシャーを感じております。 [参考：2016年6月30日 ヒエログリフを彫る。cssで](https://creatorsblog.nijibox.jp/carving-hieroglyphs-in-css/) 困りました。 ところで、フロントエンドの人なんかがブログを書くとなると、 面白い文章の記事よりも実際に作ってみたサンプルを動かしてみて、どうです？すごいでしょ！？的な記事が多くなってくると思うんです。 そこで、活躍するのが、先のヒエログリフでも使われておりましたコレです。 これならhtml、

近年ではウェブに対する要求が肥大化しており、それに対応してHTMLも複雑化してきています。しかし、もともとHTMLはウェブアプリを記述するための言語ではありません。大規模なウェブアプリを作成するとなると、様々な点で不都合が出てきてしまいます。特に、まとまった部品をコンポーネント化して扱う機能に欠けていました。このことが私たちを悩ませ、今まで多くの苦労を引き起こしていました。 でも、もう悩まなくてもよくなるかもしれません。HTMLをコンポーネント化する規格が生まれました。それがWeb Componentsです。 Web ComponentsとShadow DOM Web Componentsは次の4つの部分からなる規格です。 Templates Shadow DOM Custom Elements HTML Imports 今回は、このうちのShadow DOMに焦点を当てていきたいと思いま

JavaScriptの3つある変数宣言、varとletとconstは、よく混乱を生みます。どれも変数を宣言することに変わりはないので、違いがわかりにくいのです。このことが初学者を混乱させている場面をたびたび目にしますし、プログラミングに慣れ親しんだ人でも役割を意識しないまま書いていることがあります。 そこでこの記事では、3つの変数宣言の役割とその使い分けについて、それぞれ簡単に紹介してみます。 3種類の変数宣言とその使い分け var – 変数を宣言する varは、JavaScriptにおいて変数を宣言する上で、最も基本的な方法になります。varで宣言された変数は関数スコープとなり、宣言のスコープ先頭への巻き上げ（Hoisting）が行われます。（※変数のスコープおよび巻き上げについてはここでは解説しません。） var x = 10; x = 20; もともと、JavaScriptの変数宣言

Sublime Text は、私のお気に入りのプログラミング用テキストエディタです。 Sublime Textで気に入っている特徴の1つは、あいまい検索アルゴリズムです。ファイルや関数の検索が超高速なのです。これまで多くの人が、インターネット上で、この仕組みについて質問していましたが、満足の行く回答はありませんでした。そこで、私が自らこれを解明することにしました。 全部読むのが面倒な方へ 本文を読まずに最終結果だけ知りたいですか？　了解！　私は、あなたを責めたりしませんよ。 インタラクティブなデモ： こちらをクリック ソースコード： C++ 、 JavaScript Sublime Textの仕組み Sublime Textのあいまい一致とは何でしょうか。そして、なぜそれはそんなに賢いのでしょうか。聞いてくれてうれしいです。 Sublime Textには、2つの非常に便利なナビゲーション関

(編注：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(勤勉＝先行評価) で、式の全てを

ブラウザ上で動き、Google Driveと連携できるエディタを作って見たかったので、色々研究しました。 ※HTML+JavaScriptなサンプルコードでは、<script>周辺の必要な部分しか書いてないので悪しからず。 参考文献 [1] Google REST API 公式ドキュメント https://developers.google.com/drive/v3/web/about-sdk#create_and_open_files_directly_from_the_drive_ui 「Google Drive API」で検索すると、だいたいこのサイトが出ます。大変参考になるのですが、今いちサンプルが足りなかったり、今回のようにJavaScriptでゴリゴリやりたい時には参考にならないことも多くてどうも。 [2] Google Drive Javascript API 公式ドキュメン

注意とお願い この記事の内容はもはや古いです。ここに書いている方法では動かないものをいくつか見つけました。参考にする際は動作をよく確認してから使ってください。 ひとつお願いがあります。「あれ、動かないぞ」というコードを見つけたら是非コメントか編集リクエストで教えてください。解決方法までなくても結構です。「これはもう動かないよ」という印をつけたいのです。 この記事はYou Don't Need jQueryの日本語訳と同じ内容です。 先日ひょんなことからYou Don't Need jQueryの日本語訳をさせていただきました。著者のCam Songさんからも快諾をいただけたので1、Qiitaでも公開させていただきます。 なお、本家の英語の説明は継続的にメンテされているので、この記事の情報は古くなっている可能性があります。 追記 この記事は当初は「もうjQueryは必要ない」というタイトルで

さあ開発者のみなさん、真面目な話の時間です。読者の皆様はおそらくすでにお気づきでしょうが、今週、ReactやBabelやその他大量の有名なNPMパッケージ群が壊れました。そしてその原因は少々驚くようなものでした。 ReactやBabel、その他のパッケージが依存する、left-padというシンプルなNPMパッケージがあります。この記事を書いている現段階で、このパッケージは GitHub上で11 star となっています。このパッケージは全体で 11行のシンプルな行があり、文字列の左を詰める基本的な関数が実装されている というものです。上記のリンクが消えた場合に備えて、コード全体をいかに掲載しておきます。 module.exports = leftpad; function leftpad (str, len, ch) { str = String(str); var i = -1; if

Web系の開発でJavaScriptの動きをちょっとだけチェックしたいなと思ったことはありませんか？ 最近、自分は便利な関数がいろいろと詰まったUnderscore.jsというライブラリを仕事でよく使っているのですが、ちょっとした関数を実際に動かしてテストしたいなと思うことがあります。 そんな時に便利なのが「JS.Bin」というサービスです。 JS.Binを使えば、ブラウザ上でJavaScriptを動作させることができます。 他にも、jQueryや今話題のReact、AngularJSといったフレームワークなどのライブラリもプルダウンから選ぶだけで簡単に読み込むことができるので、とても便利です。 似たようなサービスはJS.Bin以外にもあるのですが（有名どころだとJSFiddleなど）、JS.Binはデザインがシンプルでコードの文字が大きく見やすい所や、Consoleなどを並べて1つの画面

JavaScript を使って小数を整数に変換する（小数部分のカット）いろいろな方法の紹介です。Math.random() を利用するときによく使うでしょうか。最も一般的な方法は Math.floor() を使うものだと思うのですが、他の方法でも出来るので紹介してみます。 ついでに実行速度まで計測してみました。 「切り捨て」のみに着目しています。「切り上げ」や「四捨五入」はまた別の方法になりますのでご注意ください。 Math.floor(number)Math.floor(5.368) //→ 5一番使われる有名な方法です。 ただしこの方法は、「プラス値」であれば「小数部分のカット」になるのですが、数値が「マイナス値」だった場合は挙動が違いますので注意してください。 Math.floor(-5.368) //→ -6つまり、Math.floor() は「値を切り下げる」ということです。その