2015年に向けたJavaScriptアプリケーションアーキテクチャ Part 1 | POSTD
私はかつて自分はアーキテクトだと名乗ったことがあります。これを裏付けるため、今やウソだらけの複雑な話を設計しなくてはならなくなっているので、ある意味これは本当のことですね。冗談はさておき、2015年を目前としてJavaScriptコミュニティのアプリケーションアーキテクチャの状況について目を向けてみるのは有益なことだと思います。合成、関数型の境界、モジュラリティ、不変データ構造、CSPのチャネルと、その他に関連するいくつかのトピックについて書いてみたいと思います。 合成 アーキテクチャのレベルでは、JavaScriptで大規模なアプリケーションを作成する方法に関してここ数年で少なくとも一つの根本的な変更がありました。機械の細かい違いにより生み出される単一指向性の データバインディング、不変データ構造と、仮想DOM （どれも興味深い問題ですね）などを除けば、多くの開発者が一つのキーコンセプト
式と演算子 - JavaScript | MDN
JavaScript での基本的なキーワードと一般的な式です。これらの式は最も高い優先順位を持ちます（演算子よりも高い）。 this this キーワードは関数の実行コンテキストを示す特別なプロパティです。 リテラル 基本的な null、論理値、数値、文字列のリテラルです。 [] 配列初期化子またはリテラル構文です。 {} オブジェクト初期化子またはリテラル構文です。 function function キーワードは関数式を定義します。 class class キーワードはクラス式を定義します。 function* function* キーワードはジェネレーター関数式を定義します。 async function async function は非同期関数式を定義します。 async function* async function* キーワードは非同期ジェネレーター関数式を定義します。 /
フロントエンドできない人が、フロントエンドやりすぎだ。あと、Vanilla.jsが便利だ。 - nobkzのブログ
最近、なんというか、フロントエンド勉強会に出席する度に、「フレームワークじゃねぇんだ! MVC設計がな! 」とか言い続けている気がする。たくさんフレームワークが出てきて、○○フレームワークの問題とか、開発の困難の話を聞く度に、自分の設計を棚に挙げて、「これは、フレームワークがスケールできないせいだ!」「jQueryが糞」とか言ってて、「何言ってんの?コイツ?」みたいな気分になる。 最近になって、なんでこの状況がいつまでたっても変わらないんだろう? って理由が分かってきた。フロントエンドできない人が、フロントエンドやりすぎなのだ。 なんでフレームワーク使うの? そもそも、なんでフレームワークを使うか?ってことに答えられない人が多い気がする。というか、大抵「上司が決めたから」とか「チームで決まっているから」という答えが返ってくる。そもそも、フレームワークを強制して学習させる環境になっている現場
第1回 JavaScriptの基礎を見直す | gihyo.jp
連載のはじめに みなさんこんにちは、今回より「聞いたら一生の宝、プログラミングの基礎の基礎」 の連載を担当させていただく本橋佑介です。 本記事では、広く利用されている技術から新しい技術まで、基本的な部分を現場のエンジニアの声を取り上げつつ解説していきます。習得している方にとっては振り返りとなり、また今から学ぶ方にとっては同じ疑問にぶつかった方の意見が参考になれば幸いです。 現場のエンジニアの声は私が開発に携わっている技術系QAサイトteratailから抜粋しています。 第1回では、現在では様々な環境で利用されているJavaScriptの基礎をteratailの初心者投稿とともに振り返っていきます。 JavaScript JavaScriptは主にウェブブラウザを実行環境とし、動的なウェブサイト構築などに利用されてきました。 また、今ではNode.jsをサーバサイドで利用することが増え、
最近あまり使ってない、流行っていた時期もあるフロントエンドもの
最近あまり使ってない、ちょっと前の流行りもの なんとなく書いてみます。Web アプリケーション開発屋さんなので、Web サイト制作屋さんとはかなり文脈ズレると思います。 jQuery ファミリー 個人的には jQuery って、協業用のツールという位置づけでした。jQuery でさえ書かれていれば、jQuery 書ける人材のほうが外からも調達しやすいため、人員の流動にも有効と考えられる頃が確かにありました。 DOM に触れてくれるな勢の台頭 ところが昨今では AngularJS や React、その他ライブラリでも DOM 操作が大いに抽象化されていることが多く、jQuery で直接 DOM を操作すること自体が相性良くないケースが散見されます。今思えば Backbone.js くらいのころが jQuery 需要の最終ピークだったように思います。 jQuery プラグイン の需要減 jQu
JavaScriptで，グローバル変数の存在判定をする３つの方法 （"window"の定義状況を確認したい） - 主に言語とシステム開発に関して
JavaScriptプログラミングのTOPへ JavaScriptで，グローバル変数が存在するかどうか判定するための３つの方法。 ３つのうち１つはよく使う。 残りの２つは，特殊な状況（WSHとの使い分けなど）で役立つ。 （１）「in window」 を使う 常套手段。 特定のオブジェクトが特定のプロパティを持っているかどうかを判定するためには，inを使う。 下記は， 一つ目のボタンでグローバル変数をセットし 二つ目のボタンでその存在判定を行なう というコード。 <input type="button" value="グローバル変数をセット" onClick="f()"> <input type="button" value="グローバル変数の定義状況を判定" onClick="g()"> <script language="JavaScript"> function f() { // グロ
JavaScriptのデバッグ方法 – JSを嫌いにならないためのTips | POSTD
この記事のオリジナルは voxxed に投稿されたものです。 JavaScript関連の問題を抱えるチームをサポートする仕事を通じて、いくつか共通の問題点があることに気づきました。もしあなたもJavaScriptに対するイライラを感じているのであれば、この記事は何らかの助けになるかもしれません。おことわり：私がお教えするヒントはすでにご存知のものもあるとは思いますが、うまくいけば、多少なりとも有用な情報があるかもしれません。特にエンタープライズアプリケーションやCMSソリューションを構築する際に有効なヒントです。チームの誰もが話したがらないCMSのコードについてお話しします。いずれも必要に応じて採用できるものです。 debuggerステートメント 大半のブラウザでサポートされているにもかかわらず、JavaScriptを書く際に最も活用しきれていない機能の1つです。debuggerステートメ
ES6時代のJavaScript - クックパッド開発者ブログ
こんにちは会員事業部の丸山@h13i32maruです。 最近のWebフロントエンドの変化は非常に激しく、ちょっと目を離した間にどんどん新しいものが出てきますよね。そんな激しい変化の一つとしてES6という次期JavaScriptの仕様があります。このES6は現在策定中で、執筆時点ではDraft Rev31が公開されています。 JavaScriptはECMAScript(ECMA262)という仕様をもとに実装されています。 現在のモダンなWebブラウザはECMAScript 5.1th EditionをもとにしたJavaScript実行エンジンを搭載しています。 そして次のバージョンであるECMAScript 6th Editionが現在策定中で、略称としてES6という名前がよく使われます。 今回は、他の言語にはあってJavaScriptにも欲しいなと思っていた機能や、JavaScriptでよ
人気上昇中のJavaScriptライブラリを調べてみた【2015年版】
altJSの人気が混戦で面白い！ 2014年中に人気が急上昇してきており、「2015年では必須の知識」となりそうなJavaScriptライブラリをランキング形式で発表。 ← 前回 連載 INDEX 次回 → こちらのページで【2016年版】も発表！ ■ 2015年が始まり、心機一転で「今年こそはWeb開発を頑張ろう」と思っている人も少なくないだろう。そんな方々に向けて本稿では、2014年中に人気が急上昇してきており、「2015年では必須の知識」となりそうなJavaScriptライブラリをランキング形式で発表する（※昨年の2014年版はこちら）。 なお、本稿のランキング決定では、検索キーワードの流行を調査可能な「Googleトレンド」（「すべての国」「過去 12 か月間」「すべてのカテゴリ」「ウェブ検索」という条件で絞り込み）を使って、ライブラリの人気をジャンルごとに比較した（※ライブラリ名
JavaScriptでオブジェクトの配列を filter() を使ってフィルタリングする | Try Lifelog
JavaScriptでオブジェクトの配列(普通の配列でもOK)に対し、あるプロパティの値をキーとして、条件を満たす要素のみを抽出したいときは、array.filter() メソッドを使う。(ソートしたい場合は、ここを参照。) 例えば、以下のような配列があるとする。 // JavaScript gLines = [ { ln_file: "T1301451.json" ln_key: "1301451" ln_name: "[ＪＲ]岩泉線 (茂市～岩泉) " }, { ln_file: "T1301541.json" ln_key: "1301541" ln_name: "[ＪＲ]北上線 (北上～横手) " }, { ln_file: "T1301671.json" ln_key: "1301671" ln_name: "[ＪＲ]磐越東線(ゆうゆうあぶくまライン) (いわき～郡山) " }]
Javascriptで配列にある値が存在するかどうかを確認する方法について - プログラミングを勉強するブログ
以前配列にある値が存在するかどうかをfor文を使わずに調べる方法を考えてみたという記事を書きました。この記事は「やろうと思えばこういう方法でもできるなぁ」というアイデアについて書いた記事だったのですが、Javascriptで配列にある値が存在するかどうかを確認する一般的な方法を探して当該記事を訪問していただくことが多いので改めてこの方法について書いてみたいと思います。 といってもJavascriptには"Array.contain"のような「まさにそのためにある」というメソッドが用意されているわけではないのでいずれにしろ方法の紹介ということになってしまいますが。 次の3つのパターンに分けて書きたいと思います。 ECMAScript 5が使える場合 jQueryが使える場合 上記のどちらも使わない場合 1.ECMAScript 5が使える場合 ECMAScript 5では配列に"indexO
JavaScriptの配列の要素を削除する(delete演算子とspliceメソッド)
delete演算子を使うと、削除した要素の値が「undefined」になる。 要素の数は変わらない。 numbers = ['zero','one','two','three']; delete numbers[2]; //3番目の要素を削除 //numbersは['zero','one',undefined,'three']; delete演算子で削除すると、配列に穴が開いてしまう。 この動作が期待した動作ではないことが多い。 要素を削除したら、インデックスを詰めてほしいはずだ。 spliceメソッドを使うと、削除した要素のインデックスを詰める。 要素の数は減少する。 numbers = ['zero','one','two','three']; numbers.splice(2, 1); //3番目の要素を削除 //numbersは['zero','one','three']; spl
JavaScript の配列と連想配列の違い - IT戦記
id:cheesepie:20070131:1170172709 最近は、こういう風に JavaScript を勉強する人が増えていてとても嬉しいです ＾＾ id:cheesepie さん頑張ってください！ で、ちょっと配列と連想配列の使いかたが違うようなので、エントリーを書こうと思いました。おせっかいだったらすみません＞＜ ！ やっぱり、このへんが JavaScript の難しいところのひとつなのだろうか。 ということで、 JavaScript の配列と連想配列の違い いってみよおー 連想配列とは JavaScript では連想配列は一番シンプルなオブジェクトのことである。つまり、すべてのオブジェクトは連想配列である。 以下のすべての連想配列はまったく同じものである。 // 1 var obj = { hoge: 'hoge' }; // 2 var obj = { 'hoge': 'h
IE10 以下を切る場合の JavaScript チェックリスト - Qiita
この投稿は、 JavaScript Advent Calendar 18日目の記事です。 更新履歴 こちら をご覧下さい JavaScript の書き方をアップデートする JavaScript Good Parts で書かれているような JS の書き方は、古くなりつつある部分も多いです。 正直なところ、自分はあの本が「今でも」良書だとは思っていません。 初学者に勧めることもしません。まんべんなさと普遍性と客観性から「パーフェクト JavaScript」 を勧めています。 その頃と比べると、 JavaScript をとりまく環境は変わりました JavaScript の進化に合わせて書き方もアップデートしていくべきなので、今回は分かりやすいしきい値として 「IE10 以下を切れるとしたら」 という前提で、列挙してみます。 たとえば XHR2 や File API に依存したサービスをやる場合な
JavaScriptの「ケツカンマ問題」まとめ · DQNEO日記
なぜIE6,7(とIE8の配列)ではケツカンマが正しく動かないのか 結論からいうと、「それがJScriptの仕様である」ということになるかと思います。 後述のとおりECMAScript3の仕様書はケツカンマなしなので、IE(=Jscript)がそのような仕様になっていても間違いではないということになります。 ひとつだけ納得がいかないのは、IE(=Jscript)は配列ケツカンマとオブジェクトケツカンマで挙動が異なるのです。 var list = ['a' , 'b', ]; // → 要素３個のarrayが生成される。 var obj = { a : 1, b : 2, }; // → 文法エラー この仕様はなんか中途半端な気がします。 ECMAScriptの仕様はどうなっているのか ECMAScript3 Standard ECMA-262 3rd Edition-December199
JavaScriptで、もう連想配列の最後のカンマに悩まない！(※追記あり) · DQNEO日記
末尾に要素を増やしたい、または減らしたいときに問題が起こります 例えば" c : 3 "の行を単純に削除するとバグるので削除したいときに、" b: 2,"のカンマを削除する必要があります。 また、" d : 4 "を追加したいときに、" c : 3 "の後にカンマを入れる必要があります。 これは面倒くさいですね。 (エンバグについてはjslintなどのツールで防げばよいという指摘があったので修正しました。） より良いやりかた var x = { a : 1, b : 2, c : 3, dummy : null } このように最後に "dummy : null" というダミーの要素を書いておきます。 こうすれば、プロパティa, b, cはどれもカンマ付きで平等になります。 ぜひ一度試してみてください。 (もしかして常識だったらすみません。あとこの手法は for in で走査したいときはよく
JavaScript のブロックスコープと名前空間 « Mozilla Developer Street (modest)]
Web 開発や拡張機能開発で JavaScript のコードを書いていると、誰もが一度は次のようなことで悩むかと思います。 ブロックスコープと名前空間 (グローバル変数汚染の回避) 読み書きしやすくデバッグしやすいコードスタイル コールバック関数と this オブジェクトの取り扱い デバッグ方法とデバッグ支援モジュール 非同期処理の書き方 いずれも解決方法は人によって様々で、これが常にベストと言えるものがなさそうですが、私なりにそれぞれ検討したことなどを書いてみようかと思います。もっと良い方法があるとか色々皆さんのご意見やツッコミをいただければ幸いです。 JavaScript では名前空間は言語仕様でサポートされておらず、ライブラリや拡張機能などのコードを書くときにはグローバル変数の使用を最小限に抑える必要があります。先日の Mozilla 勉強会＠東京 3rd でも佐藤さんと守山さんの発
![JavaScript のブロックスコープと名前空間 « Mozilla Developer Street (modest)]](https://cdn-ak-scissors.b.st-hatena.com/image/square/8eebd75773eb0321573d9040b42d88f184780c77/height=288;version=1;width=512/https%3A%2F%2Fdev.mozilla.jp%2Fwp-content%2Fthemes%2Fmodest%2Fimages%2Fpage-image.png)
はてなブログ | 無料ブログを作成しよう
来年も作りたい！ふきのとう料理を満喫した 2024年春の記録 春は自炊が楽しい季節 1年の中で最も自炊が楽しい季節は春だと思う。スーパーの棚にやわらかな色合いの野菜が並ぶと自然とこころが弾む。 中でもときめくのは山菜だ。早いと2月下旬ごろから並び始めるそれは、タラの芽、ふきのとうと続き、桜の頃にはうるい、ウド、こ…
Refresh-SF - Online JavaScript and CSS Compressor
Online JavaScript/CSS/HTML CompressorThis is a web interface to minify your JavaScript, CSS and HTML. This tool uses UglifyJS 2, Clean-CSS and HTML Minifier. You can easly change the defaults below the textarea. Further ReadingIn my investigation, I discovered coding patterns that prevented YUI Compressor from performing variable name replacement. By modifying or avoiding these coding patterns, yo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
is.jsで簡単にデータをチェックする
