console.log関連についてまとめました。 モダンブラウザであればどれも使用できると思いますが、基本出力結果等はchromeで確認したものです。 console.hogehogeのいろいろ 基本 引数を入れることで出力結果をカスタマイズできます console.info、console.warn、console.error それぞれで見た目を変えることができます。 console.assert 式を評価してfalseの場合にログ出力します。 console.count ログの出力結果が同じ場合にカウント数が自動的に増えていきます。 console.dir オブジェクトのプロパティの中身をログに出力します。 console.dirxml HTMLとかXMLの要素を渡すと、下の要素が全部見れるようになります。 console.group、conosle.groupCollapsed co

こんにちは、@yoheiMuneです。 JavaScriptの実装において、「Promise」を聞いたことがある方も多いのではないでしょうか。 今回は、JavaScriptにおけるPromise/A+を深く学ぶことができる記事を翻訳しました。その内容を紹介したいと思います。 Special Thanks to https://flic.kr/p/b5bNqv 翻訳について 本記事は、Matt GreerのJavaScript Promises ... In Wicked Detailの翻訳記事です。翻訳するにあたり、ご本人から許可を頂いています。 本記事では、JavaScriptにおけるPromiseの仕様がどっぷりと解説されていますので、お時間を割いて読んで頂く価値があると思います！ それでは、始まりますー！！ はじめに 私はJavaScriptを使った開発において、長らくPromise

結局jQuery.Deferredの何が嬉しいのか分からない、という人向けの小話 一年ほど前に JavaScript - jQuery.Deferredを使って楽しい非同期生活を送る方法 - Qiita [キータ] という記事を書きました。 で、一年経って、ふと、「もっと分かりやすくjQuery.Deferredの便利さを説明できるんじゃないか」と思い立ってざざざっと書いてみました。 小話と言うにはちょっと長いけど。 -- jQuery.Deferredを使うと嬉しいのは、jQuery.Deferredの仕様を満たす部品同士を簡単に組み合わせることが可能だからです。中には処理を書き下すことができるとかコールバックのネストを防げるのがいいとか言う人もいますが、個人的にこっちのほうがよっぽど重要だと感じます。 例えるならレゴブロックです。レゴブロックはあの凸と凹を持ってるブロックを自由に組み合

おっさんES6/ES2015,React.jsを学ぶ 2016JavaScript入門 2016/11/21 @BizReach D3イベント登壇資料 最近のJavaScript動向 ・試験に出るJavaScript21年の歴史 ES6/ES2015を学ぶ ・ES6/ES2015概要 ・ES5を振り返る ・altjsの意義 Reactを学ぶ ・DOCを読む ・Tutorialをやる まとめ ・今回の学習を通じて感じたこと Read less

マイクロサービスアーキテクチャが話題を集め、コンポーネントのWeb API化が更なる急加速を見せる昨今。 とは言え「誰でも自由に叩いて良い」Web APIなんてのは事実上無く、ほぼ全てのケースで何かしらのアクセス制御が必要になります。 - Spring Security もサポートする昔ながらの「Basic認証」。古い、ということは、悪いソリューションなのか？ - 最近のAPIのアクセス制御と言えば「OAuth 2.0」がトレンディ？ Spring Security OAuth もあるし！ - 一方でAWSは「APIキー方式」を採用。なぜAWSはOAuth2ではないのか？ - Spring Security はまだ公式にサポートしていない「OpenID Connect」とは一体…？ Webにおけるアクセス制御の歴史を振り返りつつ、様々なAPIの立ち位置と共に、その最適解を探っていきたいと思

create-react-appではじめるReact開発

The compiler for next generation JavaScript

はじめに React（通称 React.js1）を全く知らない、あるいは幾つか記事を見たけどなんなのかピンと来ていない、という人のために書いています。 「jQuery くらいしか知らない」くらいの人に具体的に雰囲気を知ってもらうのが目的であり、すでにやる気がある人向けのチュートリアルではありません。やる気が出れば日本語版ドキュメントを読んで手を動かせばあっという間なので、そこまでの興味が出ることを目標にしています。 以降では ES2015 (ES6) の文法（アロー関数とか）を使っています。この部分が怪しい人は先にアロー関数と const 文だけでも知ってから先に進んでください。 以下の説明中、このアイコンで表すのは（2023 年現在から見た）『昔話』です。新しく自分のコードを書く際には本来知らなくていいことですが、古い記事を見たときに混同しないための参考情報として書いてあります。この記事

このサイトは Google JavaScript Style Guide(Revision 2.93) を私的に日本語訳したものです。 この翻訳の内容について、翻訳者は一切の責任を負いません。ご利用は自己責任でお願いします。 以下のコーディングルールは、最終的にコードをClosure Compilerにかけて完成させることが暗黙の前提となっている点に注意してください。Closure CompilerはGoogle自身が提供しているJavaScript圧縮・最適化ツールです。（こちらの日本語の解説も参考にしてみてください。） JavaScriptコードがこのスタイルガイドに適合しているかどうかを検証する、Clisure LinterというツールがGoogleから提供されています。使い方はこちらを参照してください。

FileSystemObject。よく使うんだけど、メソッド名とかがいつも思い出せなくなるので、ここにまとめて書いておく。 FileSystemObjectって何？ Windowsでファイルシステムを簡単に扱えるようにするためのコンポーネント。最近のWindowsなら最初から標準で入ってる。 VB6やVBA、あとJScript/VBScript(WSHやASP)でよく使う。JScript/VBScriptでファイルシステムを扱いたい場合、通常はこれを使うしかないと思う。VB6は標準でファイルシステムを扱う関数とかがあるけど、使いにくいので(Openとか使いにくいよね？)FileSystemObjectを使った方がいい。VC++は知らない。.NETには標準で便利なクラスがあるのでFileSystemObjectは使わない。 インスタンス化 まずはインスタンス化しないと使えるようにならない。

日々の仕事の中で役に立つES2015（ES6）のティップス、コツ、ベストプラクティス、プログラムの見本をご紹介します。コントリビューション歓迎です！ 目次 var vs. let / const IIFEからブロックベースへ アロー関数 文字列 デストラクチャリング モジュール パラメータ クラス シンボル マップ WeakMaps Promises ジェネレータ Async/Await var vs. let / const var の他に、値を格納する let と const という識別子が新たに追加されました。 var とは異なって、 let と const はクロージャのスコープ内で最初に記述されることはありません。 var の使用例です。 var snack = 'Meow Mix'; function getFood(food) { if (food) { var snack

Jqueryを使ってHTML5ドラッグ＆ドロップファイルアップロード ホームJavaScriptJqueryを使ってHTML5ドラッグ＆ドロップファイルアップロード 今のプロジェクトでドラッグ＆ドロップでブラウザファイルアップロードの機能がいる。 検索してみたらたくさん方法が出てきます。その中一番いいと思うのはJqueryを使ってファイルアップロード。 とても勉強になりました、英語のページを翻訳して、ここに転載します。 原文はこちら これに対してサーバー側のファイル保存について、下記リンクを参照してください。 phpサーバーアップロードファイル保存 *****以下は翻訳内容です***** jQueryドラッグ＆ドロップファイルアップロードの例で、HTML5およびjQuery AJAX APIを使用して、ドラッグ・アンド・ドロップ・ファイル・アップロードを実現する方法について説明しました。

JavaScriptに、applyとcallというメソッドが用意されていますが、自分なりにapplyとcallの丁寧に説明をしてみようと思ってこのエントリーを書くなどをしてみます。 applyとcallは非常に似たメソッドなので、まずはcallから説明します。 callメソッドとは？ callメソッドは以下のように呼び出します。 methodA.call(thisArg, [, arg1 [, arg2, ...]]); methodAには任意の関数（メソッド）を指定します。 callの引数は第一引数にmethodAのthisとしたいオブジェクトを指定して、第二引数以降はmethodAに渡したい引数があれば、カンマ区切りでそれぞれ指定します。 callメソッドは、すべての関数が共通して持っているメソッドです。すべての関数はFunctionクラスのオブジェクトで、callはFunction.

この記事のオリジナルは voxxed に投稿されたものです。 JavaScript関連の問題を抱えるチームをサポートする仕事を通じて、いくつか共通の問題点があることに気づきました。もしあなたもJavaScriptに対するイライラを感じているのであれば、この記事は何らかの助けになるかもしれません。おことわり：私がお教えするヒントはすでにご存知のものもあるとは思いますが、うまくいけば、多少なりとも有用な情報があるかもしれません。特にエンタープライズアプリケーションやCMSソリューションを構築する際に有効なヒントです。チームの誰もが話したがらないCMSのコードについてお話しします。いずれも必要に応じて採用できるものです。 debuggerステートメント 大半のブラウザでサポートされているにもかかわらず、JavaScriptを書く際に最も活用しきれていない機能の1つです。debuggerステートメ

JavaScript 1.7 はいくつかの新機能、特にジェネレータ (generators)、イテレータ (iterators)、配列内包 (array comprehensions)、let 式 (let expressions)、および分割代入 (destructuring assignment) を取り入れた言語アップデートです。JavaScript 1.6 のすべての機能も含まれています。 JavaScript 1.7 のサポートは Firefox 2 に導入されました。 この記事に含まれるコードの例は JavaScript シェルから実験できます。Introduction to the JavaScript shell を読み、シェルのビルド方法と使い方を学んでください。 JavaScript 1.7 の一部の新機能を使うためには、JavaScript 1.7 が使いたいという宣

第1回「クリスマスイベント」レポート～FizzBuzzダンジョンレベル1とレベル2解説 #javascript #codegolf 2013.12.26 Category：CodeIQ問題解説・リーダーボード ,勉強会・イベント Tag：codegolf ,FizzBuzzダンジョン ,JavaScript ,クリスマス CodeIQで話題のダンジョンシリーズの解説記事です！出題者の柳井さんより寄稿となります！ まずは4つのレベルで出題されたFizzBuzzダンジョンシリーズの問題のうち、レベル1とレベル2に関する解説となります。 by CodeIQ運営事務局 「クロノス・クラウン合同会社」の「柳井政和」です。 @ITとCodeIQのコラボ企画のイベント「JavaScriptでクリスマスダンジョンに挑戦！」にて、拙作問題「FizzBuzzダンジョン」「素数ダンジョン」の解説を行いました。