autoscale: true theme: Plain Jane,5 複雑なJavaScriptアプリケーションを考えながら作る話 自己紹介 Name : azu Twitter : @azu_re Website: Web scratch, JSer.info #jsprimerを書いています JavaScript入門書に興味ある人はウォッチ :star: :warning: 注意 :warning: 作成するアプリケーションによって必要な構造は異なります 今回の話はある程度の規模で複雑性を持つクライアントサイド ライブラリ抜きで数万LOC >= 長期的にメンテンナンスや変更が発生するアプリケーション サーバサイドレンダリングはしないクライアントアプリケーション 3行でOK 複雑なJavaScriptアプリケーションを作るにあたりドメインモデルをどう実装するか悩んだ 色々と試行錯誤した
javascriptに関するatawiのブックマーク (458)
-
atawi 2016/09/28
-
JavaScript中級者への道【5. コールバック関数】 - Qiita
JavaScript中級者への道【5. コールバック関数】 JavaScriptのつまづきやすそうなところ 関数はオブジェクトの一種 4種類のthis 関数スコープ 非同期関数 コールバック関数 ← いまここ クロージャ プロトタイプ継承 コールバック関数とは 既に「関数の引数に関数が渡せる」ということを学びました。 これを利用して、「ある特定の処理が終わったら、引数に渡した関数の処理を実行する」といったように 処理のフローを制御することが出来ます。(というより、非同期の場合は制御する必要があります) その際、引数に渡される関数のことを「コールバック関数」といいます。 Wikipediaのコールバック (情報工学)を見る限り、同期/非同期関係無く、引数に関数を取る実装を指しているようです。 ですが、JavaScript界隈で「コールバック関数」といえば、非同期処理に関する記事が多く見受けら
-
『ローカルフォルダのファイル一覧作成(JavaScript)』
まず最初に明言しておく。 現在、ローカルフォルダのファイル一覧を自動的に作成することは不可能。 「javascript ファイル一覧」等のキーワードで検索して表示されるソースはjsx用のため、通常のブラウザで使用できるものではない。 #Folderオブジェクトを使用している時点でアウト また、HTML5で File API を使用してローカルファイルを触ることはできるが、これは「ファイルが指定されていること」が前提。セキュリティ上の問題で多分これからも解放されないと思われる。 対象ファイルは ○：ファイルダイアログで指定したファイル ×：指定フォルダ下のファイル ローカルでなければ一覧作成は可能。 以下参照。 http://ascii.jp/elem/000/000/696/696368/ File system APIでブラウザーで動くファイラーを作る http://qiita.com/
-
春からはじめるモダン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がただの年次アップデートではなく、これから始まる毎年のメジャーバージョンアップの起点
-
-
数行のコードJavascriptのみでデスクトップ/モバイルのネイティブVRアプリが構築できる「Renderloop」
数行のコードJavascriptのみでデスクトップ/モバイルのネイティブVRアプリが構築できる「Renderloop」 2016-03-05 Nicolas Lazareff氏は、「Renderloop」というVRアプリを構築するウェブサイトを発表しました。Javascriptのみを使用して、デスクトップおよびGear VRも含めたモバイルのネイティブVRアプリが構築できるとしています。専門知識があまりなくても、数行のコードだけで360°画像/映像ブラウザ、チャットアプリ、ミニゲーム開発ができると。早期アクセスは、サイトのメールアドレス登録からできます。コーディング、動作している映像もYouTubeで公開されています。
-
Webサイトに華やかな表現を！ HTML5用パーティクルライブラリ「ParticleJS」を公開 - ICS MEDIA
JavaScriptライブラリー「ParticleJS」を公開しました。「ParticleJS」は大量の粒子（パーティクル）の表現を行うためのライブラリーで、ゲームの演出やスペシャルコンテンツなどの表現制作に役立ちます。HTML Canvasとして動作するので、デスクトップ・モバイルを問わずどのブラウザーでも動作します。 また、「Particle Develop」という専用のデザインツールも用意しています。このツールを使うと直感的な操作でデザインでき、出力したパラメーターを「ParticleJS」にコピペで読み込めます。デザイナーが作成したパーティクル演出をエンジニアが利用するといった連携を想定してます。 MITライセンスで公開していますので、商用利用問わずどなたでも自由に利用が可能です。ソースコードやドキュメントはすべてGitHubにて公開していますので参照ください。 ParticleJ
-
Web制作のクオリティを飛躍的に高めるJavaScriptライブラリ10選を一挙公開！ - paiza times
どうも、まさとらん（@0310lan）です。 みなさんは、「JavaScriptライブラリ」を活用しているでしょうか？ Webサイト制作はもちろんのこと、さまざまなWebアプリやサービスなどを開発する時に、大幅な時間短縮やクオリティを飛躍的にアップすることが出来るようになります。 そこで今回は、国内外で人気が高くて誰でも簡単に扱える「JavaScriptライブラリ」を厳選してご紹介しようと思います！ ■多機能な「写真ギャラリー」を組み込めるライブラリ！ ◆1.Viewer.js 複数の画像を表示する際に、オシャレな「ギャラリー風」に変換してくれるライブラリです。 類似のライブラリはいくつか存在しますが、「Viewer.js」は使い方が非常にシンプルで扱いやすいのに、多機能性も備えているスグレモノとなっています。 基本的な使い方としては、HTMLファイルに表示させたい画像を「リスト要素」で指
-
ES6 チートシート | POSTD
日々の仕事の中で役に立つ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
-
チートコードで1億円を稼ぐゲーム「働クリッカー」をやってみたらJavaScriptが自然に学べて楽しい
チート、いわゆる「ズル」をすることで、最速何秒で1億円を稼ぐことができるかを競う無料ゲーム「働クリッカー」がリリースされ、面白いと話題になっています。Windows / Mac対応で、公式サイトから無料でダウンロード可能。 名前の通り、元ネタは「クッキークリッカー」ですが（関連記事）、こちらはクッキーを焼くのではなく、クリックするごとに働いて総資産を増やしていくゲームです。 しかし、ただクリックをして働いたのでは、目標金額1億円の到達まで気が遠くなってしまいそう。そこで、このゲームではチートコードを自分でプログラミングすることで「ズル」ができるようになっているのがもう1つの特徴。チートをうまく使って、いかに効率よく1億円を稼ぐかがこのゲームのポイントなのですが、果たしてプログラミングの知識が一切なくてもプレイできるのでしょうか。実際に遊んでみました。 実際に遊んでみた まず「ゲームを始める
-
JavaScript開発者が一度は読むべきStackOverflow - Qiita
10.How do JavaScript closures work? http://stackoverflow.com/questions/111102/how-do-javascript-closures-work JavaScriptのクロージャーについて 結構とっつきにくい「クロージャー」に苦労されている人も多いかもしれませんが、サンプルコードが多いので英語わからなくても助かります 個人的にはQuestionの「Like the old Albert Einstein said: ... 」というくだりが好きw 9. What does “use strict” do in JavaScript, and what is the reasoning behind it? http://stackoverflow.com/questions/1335851/what-does-use
-
旧石器時代のJavaScriptを書いてる各位に告ぐ、現代的なJavaScript超入門 Section1 ～すぐにでも現代っぽく出来るワンポイントまとめ～ - Qiita
はじめに ネットには様々な情報が溢れており、JavaScriptに関する情報も多数存在しております。 その中には、「今時こんな書き方しねえよ…」と思わずツッコミを入れたくなるような、本当に、本当に古い内容について書かれている古文書も存在します。 そんな罠記事の情報に囚われてしまって、いつまで経っても現代的なJavaScriptが書けない皆さんのために、このシリーズの記事では、各セクション毎に分けて、旧石器時代の記述と、現代の記述を紹介する形で、文明開化をしていきたいという思いで記述する。 最初は、現在比較的メジャーなブラウザで一通り動作する「ECMAScript 5」までの内容に関してポエムを書き連ねていき、最終的には一連の内容を読むだけで「ES6(ES2015)」による新機能や、絶賛提案中の「ES7」の一部提案内容についても把握し、おおよそ現代人を育成することを目標とする。 …なんてめっ
-
人気上昇中のJavaScriptライブラリを調べてみた【2016年版】
新しいWeb開発フレームワークも登場！ 2015年中に人気が急上昇してきており、「2016年では必須の知識」となりそうなJavaScriptライブラリをランキング形式で発表する。 ← 前回 連載 INDEX 2016年が始まり、心機一転で「今年こそはWeb開発を頑張ろう」と思っている人も少なくないだろう。そんな方々に向けて本稿では、2015年中に人気が急上昇してきており、「2016年では必須の知識」となりそうなJavaScriptライブラリをランキング形式で発表する（※昨年の2015年版はこちら）。 なお、本稿のランキング決定では、検索キーワードの流行を調査可能な「Googleトレンド」（「すべての国」「過去 12 か月間」「コンピュータ、電化製品」「ウェブ検索」という条件で絞り込み）を使って、ライブラリの人気をジャンルごとに比較した（※ライブラリ名が一般的な英単語の場合、Web検索時に、
-
クロージャってどんなときに使うの？ ～ 利用場面を ３つ 挙げてみる - Qiita
結論を先にまとめると、以下の３つです。 1. グローバル変数の宣言をなるべく減らしたい場合 2. ユーザが引数を与えてカスタマイズ可能な自由度の高い「関数」を生成したい場合 3. 前回、呼び出されて実行されたときの演算結果（値）を内部で保存して、次に呼び出されたときに、前回の結果（値）に対して、さらに同じ処理（演算）を行う関数を生成したい場合 以下、「クロージャ」の定義から、頭の整理まで、分かりやすい参考ウェブサイトへのリンクを張りつつ、見ていきます。 【 定義 】クロージャ takeharuさん Qiita記事（2013/07/22）「JavaScriptでクロージャ入門」 「自分を囲むスコープにある変数を参照できる関数」 Wikipedia 「クロージャ」 引数以外の変数を実行時の環境ではなく、自身が定義された環境（静的スコープ）において解決することを特徴とする。関数とそれを評価する環
-
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? 1年間真剣にJavaScriptに取り組んだ話 まえがき JavaScriptアドベントカレンダーの最終日をやらせて頂いて光栄です。 http://qiita.com/advent-calendar/2015/javascript ※元々は2の最終日を担当するつもりでしたが、本家が空いておりましたので失礼させていただいております。 2015年、自分の中で一番何に夢中だったかといいますと、モンハンかJavaScript(Node.js)だったなぁと思います。 そんなで今回は1年間どんな感じにJavaScriptとじゃれてきたのかをモクモク
-
ES6時代のNode.js
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。情報システム本部の伊藤(@koh110)です。 社内システムの開発、運用を担当しています。 今回、担当しているシステムをNode.js LTS(v4.x)へバージョンアップしました。 それに伴い実施したES6対応の中から3つの事例を紹介したいと思います。 varを撲滅しよう arrow functionを使おう callbackを撲滅しよう varを撲滅しよう varをlet, constに置き換えます。基本はconstに置き換えます。 メリットは以下の点で、コードの品質向上につながると思います。 プログラム中で変更不可である事を明示的に示せる。 誤った使い方をした時にバグとして検出される。 varを利用するとブロック
-
phiary
ちょっとしたコードで JavaScript を豊かにしよう♪ ってこと jQuery は 嫌い 使いたくない. だけど Pure JavaScript だとちょっと物足りないってときに使える便利なメソッドをまとめてみました. すべて Runstant によるサンプル付きなので, 実際に開いて動かして試すことができます. 実行したりコードをいじってみたりと遊んでみてください. 他にもこんなメソッドあるよーとかあれば追加するので 気軽に Twitter などでご連絡下さい. String.prototype.format() - 文字列フォーマット 文字列を拡張して Phyton っぽい format メソッドを定義しています. '(' + a + ')' って書いていたところを '({0})'.format(a) といった感じで書くことができるようになります. Define 実装です. Ob
-
「JSオジサンに怒られない脱初心者JavaScript」に行ってきました - WEBデザイナー2年目
html5j-begin.doorkeeper.jp javascriptの勉強が一通り終わったので、参加してきました！ javascriptの勉強会に参加するまでの道のりが長かったぜ...(T_T) 話の内容 4名のJSオジサンからのありがたきお話＋質問タイムって感じでした。 一つずつ、つらつら書いていきます（※長文注意ですぞ！） 1.ソースレビューから学ぶ Javascript + 1 株式会社サイバーエージェントの、宗定 洋平さんのお話です。 speakerdeck.com ざっくりまとめると、以下の4点についてのお話でした。 レビューでみているポイント 「バグがない」という言葉の定義 関数名のつけ方 ステップアップするために必要なこと 印象的だったのが...ステップアップするために必要なこと...それは... 「情報処理技術者試験を勉強する」です。 な、なんじゃそりゃー！初耳です。
-
HTML5/Javascriptの画像処理ライブラリまとめ
HTML5(Canvus)、Javascript向けの画像処理ライブラリについてまとめたので紹介します。 続きを読む
-
Webで読めるJavaScript関係の本や記事いくつか - @peccul is peccu
JavaScriptでモジュールを作る方法を幾つか調べていると見つかった本や長めの記事を記録する． 長いので，pdfでダウンロードするか，pdfに変換してDPT-S1に入れた． (ウェブページ→pdf→短縮URL→DPT-S1を楽にするものを作りたい．．．) 長い記事．PDFとして保存した Google流 JavaScript におけるクラス定義の実現方法 Google流 JavaScript におけるクラス定義の実現方法 JavaScript Module Pattern: In-Depth JavaScript Module Pattern: In-Depth 生のJavaScriptでモジュールパターンを表現する話が結構しっかりまとまっていてわかりやすかった． 後発の仕組みを実現しているのかなぁと思っている． 本．PDFがあれば直接．なければPDFとして保存した Learning J
公式Twitter
- @HatenaBookmark
リリース、障害情報などのサービスのお知らせ
- @hatebu
最新の人気エントリーの配信
キーボードショートカット一覧
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Copyright © 2005-2025 Hatena. All Rights Reserved.
設定を変更しました