JavaScriptで特定の関数を実行し続けて、ボタン押したら関数を止めるみたいな処理できる？ : IT速報
1: 以下、＼(^o^)／でVIPがお送りします 2015/03/07(土) 13:23:11.54 ID:Hsqe5k/s0.net JavaScliptって特定の関数を実行し続けて、何かボタン等でアクションしたときに その関数を止める、みたいな処理ってできないの？ 4: 以下、＼(^o^)／でVIPがお送りします 2015/03/07(土) 13:25:41.79 ID:n2PEKdf5M.net よくわかんないけどイベント感知してフラグ立ててメソッド抜ければいいんじゃねーの 5: 以下、＼(^o^)／でVIPがお送りします 2015/03/07(土) 13:25:43.92 ID:PmuFwrFs0.net 再帰関数中にフラグ判定入れればいいだけじゃないの 3: 以下、＼(^o^)／でVIPがお送りします 2015/03/07(土) 13:25:27.70 ID:lKFRfk4NM.
[JavaScript] ループ途中で抜ける処理は for(in break) ではなく some を使おう♪ - Qiita
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; for (var i=0,len=arr.length; i<len; ++i) { var value = arr[i]; if (value > 5) { break; } console.log(value); } [runstant] Array.prototype.some 5 より大きかったら true を返す. するとそれ以降のループが止まるので forEach っぽく書けてかつ break っぽいことができます. var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; arr.some(function(value) { if (value > 5) { return true; } console.log(value); });
![[JavaScript] ループ途中で抜ける処理は for(in break) ではなく some を使おう♪ - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/79e86d9834c3b8962d2b080a44fb69c9522202c0/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCSmF2YVNjcmlwdCU1RCUyMCVFMyU4MyVBQiVFMyU4MyVCQyVFMyU4MyU5NyVFOSU4MCU5NCVFNCVCOCVBRCVFMyU4MSVBNyVFNiU4QSU5QyVFMyU4MSU5MSVFMyU4MiU4QiVFNSU4NyVBNiVFNyU5MCU4NiVFMyU4MSVBRiUyMGZvciUyOGluJTIwYnJlYWslMjklMjAlRTMlODElQTclRTMlODElQUYlRTMlODElQUElRTMlODElOEYlMjBzb21lJTIwJUUzJTgyJTkyJUU0JUJEJUJGJUUzJTgxJThBJUUzJTgxJTg2JUUyJTk5JUFBJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz04YjY4Y2EyZjY4ZmVkNWFmMzE3Njc2ZmM4MTA0NzhjYQ%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwcGhpJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1hNzMyODE2YjRmOTNiOTE5N2U1YjI1NGNlZGNmMGY1OA%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D199f26470375c52d111a087603c8e0f1)
今話題のReact.jsはどのようなWebアプリケーションに適しているか？ Introduction To React─ Frontrend Conference
今話題のReact.jsはどのようなWebアプリケーションに適しているか？ Introduction To React─ Frontrend Conference 外村 和仁（株式会社 ピクセルグリッド） 本記事は、2015/2/21に行われたFrontrend Conferenceの「Introduction To React」の内容を紹介します。 当日の資料は以下にアップされていますので、こちらも参照してください。 Introduction To React // Speaker Deck React.jsとは何か React.jsはFacebook製のJavaScriptライブラリです。 http://facebook.github.io/react/ 公式サイトに、「A JavaScript library for building user interfaces」とあるように、R
JavaScriptで構築している箇所もHTMLと同等にGoogleにインデックスされつつある - F.Ko-Jiの「一秒後は未来」
久しぶりに Google のウェブマスターツールにある「コンテンツ キーワード」でこのブログのキーワードを確認していたら、なぜか2位に「users」というキーワードがあるのを見つけました。 試しに Google でサイト内検索してみると、サイドバーに表示している「はてブ数順 人気エントリー」の部分が検索結果のスニペットに表示されていました。 ↑ この「471 users」などの記述は、 ↑ サイドバーのこの部分にだけあるもの。 「ページに表示してるんだからスニペットに表示されて当然なのでは？」と思われるかもしれませんが、この部分は JavaScript を使って動的に構築している部分なのですよね。具体的には、懐かしの Yahoo! Pipes で出力した JSON データを読み込んで jQuery を使用して動的にリストを構築しています。 http://blog.fkoji.com/onl
キーワードは「CARE」！実践的なフロントエンドエンジニアを目指せ！─Frontrend Conference the Final基調講演レポート
キーワードは「CARE」！実践的なフロントエンドエンジニアを目指せ！─Frontrend Conference the Final基調講演レポート 白石 俊平（HTML5 Experts.jp編集長） この記事は、「Frontrend Conference The Final」の基調講演「Pragmatic Front-end Developer: From Artisan to Expert」についてのレポートです。 登壇されていたのはリッチメディアの斉藤祐也さん。HTML5 Experts.jpでも、No.10のエキスパートとして何度もご執筆いただいているので、ご存じの方も多いかと思います。 この講演タイトルは、アンドリュー・ハント氏の著作「The Pragmatic Programmer」をオマージュしたとのこと。「Pragmatic」というのは「実践的」という意味の単語で、フロント
第1回 JavaScriptの基礎を見直す | gihyo.jp
連載のはじめに みなさんこんにちは、今回より「聞いたら一生の宝、プログラミングの基礎の基礎」 の連載を担当させていただく本橋佑介です。 本記事では、広く利用されている技術から新しい技術まで、基本的な部分を現場のエンジニアの声を取り上げつつ解説していきます。習得している方にとっては振り返りとなり、また今から学ぶ方にとっては同じ疑問にぶつかった方の意見が参考になれば幸いです。 現場のエンジニアの声は私が開発に携わっている技術系QAサイトteratailから抜粋しています。 第1回では、現在では様々な環境で利用されているJavaScriptの基礎をteratailの初心者投稿とともに振り返っていきます。 JavaScript JavaScriptは主にウェブブラウザを実行環境とし、動的なウェブサイト構築などに利用されてきました。 また、今ではNode.jsをサーバサイドで利用することが増え、
JavaScript ベストプラクティス Part 1 | POSTD
ThinkfulはWeb/スマートフォンアプリの技術などを学ぶことができるオンラインスクール。プロフェッショナルな開発者がメンターとして1対1で伴走するため、他の同様サービスよりも続けることができる。 Javascript ベストプラクティス パート1 2つのパートに分けてお届けする「ベストプラクティス」のパート1では、MozillaのWebエバンジェリストであるChristian Heilmannが提供する人気のスライドショーから内容を抜粋しています。JavaScriptにはひどく扱いにくい特徴がいくつかありますが、それはこれまで以上にソフトウェア開発において重要になっています。この「ベストプラクティス」ではより読みやすく、効率の良いコードを書く手助けとなるサンプルコードやその使用例を紹介していきます。 もしWeb開発についてもっと学びたいと思うのであれば、私たちが提供しているフロントエ
解決してしまったTap delay問題 #html5j
それぞれの対応方法 Chrome、Firefox meta[name="viewport"][content="width=device-width"] IE touch-action: none iOS8 touch time(150ms)
Inside "dotby.jp 2015" - Qiita
弊社 dot by dot inc. のコーポレートサイトをリニューアルしたときのいろいろをメモ。見た目シンプルなわりにいろいろあったのでね どんな仕組みでつくる？ 日々増えるニュースを簡単に更新できるようなブログ形式、前バージョンの背景エフェクトもってくる（かつページ遷移においてリロードしない＝エフェクトを途切れさせない）という前提で検討した結果、WordPress を CMS に使いつつ WP REST API で JSON ひっぱってきて React でごにょごにょやるんがいーかなーと。 ちょうどどうやってつくろっかなーと考えてる時に、VirtualDom - なぜ仮想DOMという概念が俺達の魂を震えさせるのか - Qiita を読んで、どうやらこれ流行りそう今っぽいーということでフロントのフレームワークを React に決定。ちょうど IntelliJ IDEA 14 が JSX
ふしぎな動き！JavaScript+HTML5で50行で『ラングトンのアリ』を作ろう - コードレシピ
ラングトンのアリについて ラングトンのアリを知っていますか？ラングトンのアリは以下の単純なルールに従って動くアリのことです。 黒いマスにアリがいた場合、90°右に方向転換し、そのマスの色を反転させ、1マス前進する。 白いマスにアリがいた場合、90°左に方向転換し、そのマスの色を反転させ、1マス前進する。 たったこれだけのルールでラングトンのアリさんはとても複雑な動きを見せ、まるで生きているかのようです。そしてこの複雑な動きを大体1万回繰り返すとなぜか一直線の道を作ってどっかにいってしまいます。 詳しくはデモを見てください。 今回はこれをJavaScriptで作っていきます。 今回作るラングトンのアリの動作の流れ 書く前にどんなものか少し考えてみましょう。 アリの場所のマスの色によってアリの向きの変更 アリの場所のマスの色を反転 アリを一マス進める 1へ。 めちゃめちゃシンプルですね。では早
お手軽データバインディングライブラリ「Vue.js」を使いこなそう（基礎編）
はじめに Vue.jsは、シンプル・軽量・高速という特徴を持つデータバインディングライブラリとして最近注目を集めています。LINE社でもアプリ内WebViewの実装技術の選択肢の一つとしてVue.jsを採用しています。2014年11月27日にリリースされたLINEスケジュールは、Vue.jsを使って実装しているSPA（Single Page Application）の代表例です。 本稿は日本語記事がまだ少ないVue.jsの基本機能の紹介を目的とした「基礎編」として、公式ドキュメントの内容を元に解説します（執筆時点のバージョンであるv0.11の内容です）。 Vue.jsとは Vue.jsは、双方向バインディングによるModelとViewをつなぐ仕組み「ViewModelレイヤー（MVVMパターン）」を提供するJavaScriptのライブラリです。 Vue.jsの基本概念は以下のようになってい
JSファイル全体を括るfunctionについての話。（JavaScriptおれおれAdvent Calendar 2014 – 01日目） | Ginpen.com
これですね。これ何か呼び方あるの？ なにこれ グローバル変数にならないようにする仕組み。 スコープ問題 JavaScriptではスコープ（変数の有効範囲）は関数単位（function(){～}）になるのが基本。 そして一番外側、どの関数の中でもないものは「グローバルスコープ」に所属する「グローバル変数」となり、どこからでも利用できる変数になる。そうなるとどこかで変数の名前がかぶった際、勝手に値が変わったりして大変恐ろしい事になってしまう。 そこで、ファイル全体を関数で括る事でスコープを生成して、グローバルではない変数にしておこう、というもの。ただしvar宣言なしに変数を使い始めると、結局グローバル変数になってしまうので注意。 次世代JavaScriptだとletとかあるけど触れません、関係ないし。 関数の前後にくっついてる括弧は 関数は作成するだけでは何もならないので、即時実行してやります
なぜ仮想DOMという概念が俺達の魂を震えさせるのか - Qiita
追記: 情報が色々と古くなったため、2020年に書き直した版へのリンクを張っておきます。 この記事は VirtualDOM Advent Calendar 2014 - Qiita の初日です。 初日ということで、基調講演風に、Virtual DOMとはなにか、なぜ僕はこんな興奮しているのか！という話から。 Virtual DOMとはなにか 既存の概念で当てはめると、JavaScriptのMVC, MVW(Whatever)フレームワークのViewに位置します。が、その程度では終わりません。仮想DOMとは世界を革命する力であり、このjQueryのDOM操作で汚れきったフロントエンドを救う救世主なのです。 現時点で自分が知っている限りは、以下の実装を指します。 facebook/react 最も使われてるFacebookの実装 Matt-Esch/virtual-dom Altenative
フォントジャンプ率のセオリーを考える | フォントの話 | つみきブログ
株式会社つみき UI/UX事業終了のお知らせ 拝啓 時下ますますご清祥のこととお喜び申し上げます。 平素より格別のご高配を賜り、厚く御礼申し上げます。 この度、弊社は創業以来続けて参りましたUI/UX事業（受託制作事業）につきまして、2024年4月30日をもって終了することを決定いたしました。 今後は、弊社の主力事業であるFilmarksをはじめとした、映像関連事業に注力して参ります。 ご愛顧を受け賜りました皆様には、深く感謝申し上げますとともに、ご理解賜りますようお願い申し上げます。 敬具 株式会社つみき 代表取締役社長 鈴木 貴幸 事業終了予定日：2024年4月30日 biz@tsumikiinc.com
スムーズなアニメーションを実装するコツと仕組みを説明するよ。CPUとGPUを理解しハードウェアアクセラレーションを駆使するのだ！（Frontrend Advent Calendar 2013 – 06日目） | Ginpen.com
（追記: 2018年10月）何年か経ってから見ても内容大丈夫そうでした。 この記事はFrontrend Advent Calendar 2013の6日目の記事です。昨日は谷さんでWeb Components/Polymerを軽く触ってみるでした。（これ今後数年で大流行りしそうに思うので、未読なら是非！） さて、最近はHTML5だCSS 3だFlashやめてJS制御でアニメーションだーってんで盛り上がってるわけですが（周回遅れ）、いざアニメーションを実装してみても、なかなかスムーズに動いてくれなかったりしますね。 どうやったらスムーズに動くかってのを解説したいと思います。 なおこの辺りの情報は、概ね斎藤さんを中心としたFrontrend絡みの方々に教えて頂きました。感謝感謝。 先に結論 概念的なの GPU合成レイヤーを適切に使うと早い いわゆるハードウェアアクセラレーション 何がCPUで、何
JSライブラリ/フレームワークの良い、悪いメモ - 素人がプログラミングを勉強していたブログ
※ただのメモで、未来志向なのであまり真に受けてはいけない。 良いっぽい React.js 早速い/コンポネント志向/APIの設計がいい。JSXと他のトランスパイラの組み合わせという問題はある Promise ネイティブに入った、誰もが使ってる TypeScript ES6時代でも存在意義のある言語。TypeScript互換のFacebook Flowの動向に注目 Backbone.js ModelとEventを使う/Viewは使わなくていい Lodash Underscore.jsをよくしたやつ Gulp Gruntより良いという意味で。browserifyまわりがうまく動かない問題があってnpm runのほうがいいという噂もあるがまあ良いに分類してもいい EventEmitter Custom EventはDOMにくっ付いてる感があるのでロジック志向の物にはEventEmitter使った
覚醒!JavaScript
7月19日に行った「覚醒！JavaScript」勉強会で使用したスライドです。 http://connpass.com/event/7082/Read less
動くインフォグラフィックでサイトを楽しくするアイデア (1/3)
デザインとテクノロジーをもとにブランディングやWebサイト制作などを手がける、米国のエージェントのポートフォリオサイト。 気持ちよく回転する円グラフ シンプルなフラットデザインを採用した「Knormal」のポートフォリオサイト。このサイトでは、3枚の画像からなる円グラフを重ね合わせ、CSSアニメーションによって回転させている。インフォグラフィックとしてはごく単純なものだが、スムーズに気持ちよく動くアニメーションと独特の配色がサイトの個性を表していて、おもしろさがある。 今回は、Knormalのインフォグラフィックをヒントに、グラフの基本的な構造から、CSS3を使った動かし方、JavaScriptやSVGと組み合わせた発展的なグラフの作り方までを解説する。 STEP 1：グラフの構造を考える 最初に、円グラフの構造から考えてみよう。立体的に見える円グラフは、3つのレイヤーからなる。色や形状の
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
html5-memo.com
Blog - LINE ENGINEERING