querySelectorAll()で取得した要素をeachで回す５つの方法 - 動かざることバグの如し
例えばhttps://github.com/のような普通のページがあって、そのページ内の全リンクを取得してforeach的な何かで順番に処理していきたいということは全然あると思う。 取得自体は簡単で const links = document.querySelectorAll('a'); で可能。が、流石JS、簡単にはいかなくて、これを回すとなると難しい。document.querySelectorAll()で返ってくるNodeListオブジェクトは単純な配列ではないからである。 ここではNodeListをなんとかしてeachするやり方を残す。 方法１ forのループを使う いつものって感じ var links = document.querySelectorAll('a'); for (var i = 0; i < links.length; i++) { console.log(li
HTML5のLocal Storageを使ってはいけない（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Randall Degges - Please Stop Using Local Storage 原文公開日: 2018/01/26 著者: Randall Degges 日本語タイトルは内容に即したものにしました。 画像は元記事からの引用です。 初版公開: 2019/10/19 追記更新: 2024/04/05 -- リンク情報を記事末尾に移動しました 本気で申し上げます。local storageを使わないでください。 local storageにセッション情報を保存する開発者がこれほど多い理由について、私にはさっぱり見当がつきません。しかしどんな理由であれ、その手法は地上から消えてなくなってもらう必要がありますが、明らかに手に負えなくなりつつあります。 私は毎日のように、重要なユーザー情報をlocal storageに保存す
TypeScriptで学ぶJavaScript入門
プログラミング初心者向けのTypeScript入門連載。最終回はいよいよクラスの利用。クラスの基本や重要な考え方を詳しく解説する。TypeScriptでプログラミングへの理解を一歩深めよう。連載完結。
React、Redux、D3を用いたアニメーション | POSTD
これは小さな粒を生成するものです。あなたがクリックした場所から、小さな円が生まれて飛び出していくのです。マウスを持って、動かしてみましょう。粒はカーソルから生み出され続けます。 モバイル機器や、マウスではなく指で動かすタイプのコンピュータだったらどうでしょうか。同じように動きます。 私はオタクなので、これが楽しいと思います。皆さんの見解は様々かもしれません。埋め込み画像をクリックして、円が飛ぶのを見てください。クールじゃないですか？ 仕組み これは全てReact、Redux、D3を使って作られています。アニメーションのトリックはありません。少しの賢さが必要なだけです。 一般的な方法を、以下で説明してみます。 私たちは、ページ、SVGエレメント、内部の粒といった 全てをレンダリングするためにReact を使います。この全ては、propを使ってDOMを返す、Reactコンポーネントを使って作ら
JavaScriptのデバッグのコツと技 | POSTD
以前の記事で、 Webアプリケーションのデバッグの仕組み について触れました。今回は実践的なJavaScriptのデバッグについて掘り下げていきたいと思います。 ブラウザデベロッパツール 私の個人的なお気に入りはChromeデベロッパツールです。SafariやFirefoxはChromeほどの高水準に達していません。しかし、徐々に改善されてきています。FirefoxにはFirebugと改良されたFirefoxデベロッパツールが組み合わされた機能が備わっています。もし、Firefoxチームがビルトインされているデベロッパツールの改良の中で素晴らしい仕事をし続けたとしたら、Firebugはいつか、すたれるかもしれません。 個人的な好みにかかわらず、ターゲットとするあらゆるブラウザで、全てのコードのテストやデバッグができるようにすべきです。”あらゆるブラウザ”には、かの有名なInternet E
マンガで分かる JavaScriptプログラミング講座
はじめに 「マンガでわかるJavaScript」は、難しそうに思えるプログラムを、簡単そうに見えるマンガで解説するという初心者向けの入門講座です。 架空の高校生たちに教える形式で、プログラムの基礎から応用を、解説していきます。一通りのマンガを読めば、かなり実践的なところまで、プログラムを書けるようにしていきます。 （マンガは、左上から右下へと読みます） プログラムというと、けっこう大変そうに思えますが、この講座のテーマは「面倒くさいことを楽にする」です。面倒臭がりで、手抜き大好きの女子高生を主人公にして、楽しくプログラムを学んでいくことにします。 主な対象読者は「これからプログラムを学んでみたい人」「Webの世界に関わっていてJavaScriptを学んでみたい人」「昔JavaScriptを触っていたけど最新のトレンドが分からないので改めて学んでみたい人」などです。初心者だけでなく、Webデ
「マンガで分かる JavaScriptプログラミング講座」第2版公開中
JavaScriptと言えば、GmailやGoogleマップなどのページ移動を伴わない動的ウェブコンテンツの登場で一気に息を吹き返して注目を集めたプログラミング言語で、jQueryの登場によってプログラマだけではなくウェブデザイナーにも重要なものとなっています。 そんなJavaScriptを簡単に初心者でも理解できるようにということで、マンガ158ページ、解説文とサンプルソースコード全471KBの「マンガで分かる JavaScriptプログラミング講座」第2版が公開中となっています。この講座の第1版は2010年4月26日から連載を始めて2010年5月10日に完成しており、今回の第2版はその第1版からマンガをすべて描きなおし、説明文章を1.7倍に増補して、図版を充実させたものです。 アクセスは以下から。 マンガで分かる JavaScriptプログラミング講座 http://crocro.co
最近の行儀のよい JavaScript の書き方 - Qiita
JavaScriptは移り変わりの早い言語です。 もう1年以上経っていますし、記事のメンテもちゃんとできていないので、消し線を入れることにしました。 参考程度のために記事は一応残しますが、より新しい情報を読まれることをお勧めいたします。 はじめに --- 最近では JavaScript の実行環境はブラウザに限りません。（node.js, Web Workers） また、旧来のような <script> 経由でのロードもとうに古くなっています。今は CommonJS スタイルで、require を用いたモジュールのロードを行なうことがより良いとされています。 ですから、次のようなことは改める必要があります。 ~~- var YourModule = {}; などとして、外部から YourModule.hoge(); などと呼び出す書き方 this === window だと思うこと~~ 今回
MEAN stackに入門してみた - Qiita
http://mean.io/ MEAN is a boilerplate that provides a nice starting point for MongoDB, Node.js, Express, and AngularJS based applications. MEANとはMongoDB、Express、AngularJS、Node.jsからなるアプリケーションのテンプレートであると。 今風過ぎておっ てなったので試してみた。 このエントリではインストールからサーバー起動までをメモしてます。 以下を参考に進めました。Kobitoでメモしながらでも30分ほどで完了します。 http://mean.io/ http://www.mongodb.org/ Boilerplate ここからtarballをダウンロードして解凍。
初めてのWebサービスを3日でつくってみた（Node.jsで） - Think Big Act Local
Node.jsを触って勉強してたらWebサイトができました。 結婚式の余興.jp - 結婚式の余興を考えるときに参考になる動画を集めました Youtubeから結婚式の余興の動画を集めてくるサイトです。Web開発は初めてだったので、つくった流れや勉強の方法などをまとめてみます。 9/14追記）スマホ対応をやりました！ 普段はiOSアプリを書いています 普段はiOSアプリ開発者をやっていて、仕事と趣味でObjective-Cを書いてます。とても楽しくて2年くらい続けてるのですが、サーバーサイド書けたら幅が広がっていいな、とずっと思ってました。 普段の週末は個人アプリを作ったりしてるのですが、夏休みだし新しいことやろうと思ってNode.jsを触ってみました。 つくったもの 結婚式の余興.jp - 結婚式の余興を考えるときに参考になる動画を集めました 結婚式の余興動画がまとまっていて、だら見できる
Google+ API Shutdown | Google+ Platform | Google Developers
フィードバックを送信 Google+ API のサービス終了について コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 2019 年 3 月 7 日をもって、すべての Google+ API はサービスが終了します。このサービス終了は 1 月後半から段階的に実施され、これらの API 呼び出しは 2019 年 1 月 28 日から断続的に正常に動作しなくなります。 デベロッパーの皆様には、プロジェクトで最近使用された Google+ API メソッドと Google+ OAuth スコープ リクエストを記載したメールをお送りしておりますが、メールを受け取ったかどうかにかかわらず、Google+ API の依存関係を検索し、アプリケーションからすべて削除することを強くおすすめします。 サービス終了となる API のうち、よく使用されているものは次のとおりです。
EJSテンプレートエンジンを使おう！(1/5):初心者のための Node.jsプログラミング入門 - libro
前回、HTMLファイルを読み込んで表示させる、ということを行いましたが、思ったより面倒くさいことがわかりました。ファイルを読み込むのに非同期メソッドを使わないといけないし、ちょっとしたデータをHTMLに受渡して表示させるのもいちいちreplaceでコードを置換したりしないといけない。もっと簡単な方法はないのか？と思ったことでしょう。 実は、あります。それは「テンプレートエンジン」を使うのです。Node.jsでは、さまざまなテンプレートエンジンが利用できます。もっとも一般的に用いられているのは「EJS」というものでしょう。 では、EJSをインストールしましょう。Node.jsには「npm」というパッケージ管理プログラムが用意されています。これを使うことで、コマンド一発で必要なライブラリをオンライン経由でダウンロードしインストールできます。 コマンドプロンプトやターミナルを起動し、以下のように
JavaScript のスコープチェーンとクロージャを理解する - tacamy--blog
前回で JavaScript のスコープの基本がわかったので、今回はスコープチェーンとクロージャを勉強してみました。 Call オブジェクトとクロージャの理解がかなり大変でした・・。 変数オブジェクト JavaScript で変数の宣言と参照をするということは、変数オブジェクトを読み書きするということです。 変数オブジェクトというのは、key と value による変数管理専用のハッシュテーブルのこと key が変数名、value が値のセットになっているテーブルで、変数の数だけレコードができるイメージ 変数オブジェクトはプログラマが意識することのない、便宜的なオブジェクト グローバルオブジェクト JavaScript は、ブラウザが新しいページを読み込んだとき、内部的に新しいグローバルオブジェクトを生成して初期化します。 グローバルオブジェクトとは、グローバル変数やグローバル関数を管理す
jQueryでjsonデータを扱ってみる【入門編】
jQueryでjsonデータを扱ってみる【入門編】 javascriptで外部のWebサービスを利用するデータ形式はjsonを使うことが基本なようです。 似たようなフォーマットとしてXMLがありますが、こちらはHTMLと同じマークアップ言語なのですんなり入っていける反面、jsonは少々わかりずらいといった先入観があったりするんじゃないでしょうか。 そこで入門編と題して（入門編しかない!）改めて基礎から勉強していけたらと思います。 投稿日2010年07月25日 更新日2016年04月26日 とにかくシンプルなjson jsonデータは基本は外部から読み込むことになりますが、練習なのでとりあえずjavascript内の変数内に直に書きます。 「:（コロン）」で区切ったキーと値を一組として、２組目を「,（コンマ）」で区切って記述していきます。 それらを{}で囲むことで一つのオブジェクトとして扱い
JavaScriptプログラミング講座【JSON について】
JSON は、「JavaScript Object Notation」の略で「ジェイソン」といいます。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Googleブックマーク追加用のブックマークレット | インサイドフラッギング
JavaScriptを読んでて「なにこれ！？」と思うけれど調べられない記法8選。 - Qiita
Web担当者Forum
Flashじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたら
Webサイト高速化に寄与する、スタイリッシュなデザインの JavaScript/CSS 圧縮ソフト「Voralent WEBmini」
