TypeScript入門『サバイバルTypeScript』〜実務で使うなら最低限ここだけはおさえておきたいこと〜
本書『サバイバルTypeScript』は実務でTypeScriptを使う開発者のための入門書です。そして、このページはTypeScriptの特徴を最速で把握できるよう、数百ページからなる本書のコンテンツをつまみ食いした要約です。 » 本書ついて詳しく知る » とにかく今すぐTypeScriptを書いてみたい TypeScriptとはJavaScriptのスーパーセットとなるプログラミング言語。静的型付け言語であり、プログラムの正しさが静的に検査できる。ライブラリやIDEなどの開発環境が充実しており、大きなエコシステムを持っている。Microsoftが2012年に開発し、オープンソースで公開した。» TypeScriptの特徴について詳しく知る » TypeScript誕生の背景について詳しく知る TypeScriptはJavaScriptのスーパーセットスーパーセットとは、元の言語との
【コピペOK】フッターまで行ったら消えるor表示するjavascript | ホームページ・ウェブサイト制作
ある地点までスクロールしたら追尾してくるor表示するヘッダーっていう記事は結構あるんですが、フッターまで到達したら消えるっていうjavascriptの参考ページが少なかったので、ご紹介。 使い道 例えばキャンペーンバナーをフッター追尾にする場合、フッターの最後まで追尾してしまうと、フッターコンテンツが見えなくなってしまう。なので、フッターに近づいたら消え、フッターから遠い場合のみ表示したい！って時に使えるよね！ フッター付近で消えるjavascript（フェードアウト） <div class="banner"> <img src="img/test.jpg"> </div> /*javascript*/ <script type="text/javascript"> window.onscroll = function () { var check = window.pageYOffset
bfcache について覚えて帰ってもらいます。（転載） - oogatta のブログ
動作サンプル消しちゃったの直しました。 以下の内容は、『 mixi Engineers' JavaScript Advent Calendar 2012 』の12月19日分として投稿したものの転載です。内容に差異はありません。 bfcache について覚えて帰ってもらいます。 こんばんは。日々、一体お兄ちゃんだけど愛さえあれば関係ないのかどうなのか、そこのところについて確認作業を怠らないものです。 今日、偶然にもこれを閲覧してしまったみなさまには、近代ブラウザの誇る謎機能、 bfcache について覚えて帰っていただきます。どうぞよろしくお願いいたします。 bfcache （正式名称なのか、別名なのか定かではありませんが Back-Forwad Cache とも呼ばれます）をおもむろに Google さんに検索いただくと、権限のありそうな回答は Using Firefox 1.5 cach
ブラウザの戻るボタンで戻ったときに呼ばれるイベントとかキャッシュとかそこらへんのこと - koumiyaの日記
IEでは戻るボタンで戻ったときにonloadイベントが呼び出されるが、Firefoxでは呼び出されないなどブラウザによって動きが違うようです。 よくある二度押し防止対策として、送信ボタンをクリックしたときにボタンを無効(disable = false)にして次の画面に遷移させるということをやりますが、その後ブラウザの戻るボタンで戻られるとボタンが無効のままで操作できないままになってしまいます。 その対策として、画面を表示したときに無効を解除するという処理が考えられますが、IEではonloadイベントが呼ばれるがFFでは呼ばれないという上記の問題が発生します。 調べてみたところ、戻るボタンとonloadイベント - a geekで紹介されている方法で解決できるみたいです。IEではonloadを使い、FFではpageshowを使い、Safariではonloadとonunloadの合わせ技で戻る
即時関数(function(){ ... })()の別の書き方いろいろ - 泥のように
JavaScriptでよく使われるコード片に即時関数というものがあります。無名関数を宣言して即実行することで、ブロックスコープの存在しないJavaScriptにおいて擬似的にブロックスコープを再現します。 var a = "global"; (function(){ var a = "local"; alert(a); //local })(); alert(a); //global 一番有名なのはこの(function(){ ... })()の形式なのですが、なぜfunctionの外側にカッコが必要なのか不思議に思ったことはないでしょうか？ ためしにfunction(){ ... }()と書いてみると、Syntax Errorが発生します。 なぜfunction(){ ... }()はSyntax Errorなのか JavaScriptにはfunction文とfunction式があって、
Rails 必要なJavaScriptのみを読み込む
Railsは、初期状態でapp/assets/javascriptsディレクトリ以下の全てのJavaScriptを自動で読み込みます。 読み込ませるJavaScriptを個別に指定するには次のようにします。 目標 app/assets/javascripts/sample.jsを個別に読み込む。 準備 JavaScriptファイルは次のように実装しています。 $(document).ready(function() { $("p").css("color", "blue"); }); Step1. ツリー読み込みの停止 自動で読み込まれるJavaScriptはapp/assets/javascripts/application.jsで管理されています。この中に//= require_tree .があるかと思いますが、これが定義されていると、app/assets/javascripts以下の
私のRails と jQuery のフロントエンド開発指針 - ボクココ
Railsでの基本的な開発スタイルといえば、ページはリンクとフォーム送信、そしてリダイレクトの基本構成だろう。確かにこれでWebアプリケーションを作ることができる。 ただ今回はよりリッチなWebアプリケーション、具体的にはAjaxを駆使した開発について、Railsでどうやって開発していけばグチャグチャにならずに簡潔に書けるのか、私が心がけている点を紹介したいと思う。これを読めば、別にクールなJavaScriptフレームワークを使わずとも、シンプルなjQueryで作れることを知ることができるだろう。 そもそもなぜリッチにするのか リッチなWebアプリケーションにすれば、以下のような点のメリットがある。 毎回application.js や application.css、共通画像などを読み込む必要がなくなるため、サーバー負荷に優しい。 ユーザーはページ遷移を意識せずにWebアプリを利用できる
Javascript：JavascriptでPOSTの値を追加する | raining
Javascriptでsubmitボタン押下時にPOSTされるデータを追加したい場合があります。 フォーム内に複数のボタンを設置した際に押されたボタンによってPOSTするデータを追加したい場合あったので、その時のメモです。 ■ Javascript function funcBtn() { // エレメントを作成 var ele = document.createElement('input'); // データを設定 ele.setAttribute('type', 'hidden'); ele.setAttribute('name', 'hoge'); ele.setAttribute('value', 'テスト'); // 要素を追加 document.myForm.appendChild(ele); } ■ HTML <form method="post" id="myForm" n
JavascriptでFormのsubmitを行う | システムサポート技術ブログ
FormのsubmitをJavascriptで行う方法です。 ボタンでsubmitする場合は、以下のように書きます。 <input type="submit" value="登録"> Javascriptで実行する場合は以下のようにします。 <script> function do_submit() { document.forms['hoge'].submit(); } </script> <form method="post" name="hoge" action="index.php"> <input type="text" name="name" /> <input type="submit" value="登録" /> </form> <input type="button" value="登録" onClick="do_submit();"> type=”submit”をクリッ
PhantomJS でログインが必要なページでも自由自在にスクレイピング - 凹みTips
はじめに PhantomJS - Scriptable Headless Browser PhantomJS はヘッドレスな（ブラウザ画面のない）QtWebKit ベースのブラウザで、JavaScript の API を通じて、そのブラウザを自由自在にあやつることが出来ます。使用シーンとしては、Jenkins などの CI ツールとの組み合わせによる Web ページの GUI の自動テストや、Web ページのスクリーンキャプチャ、スクレイピングなどが挙げられます。 今回は、ログインが必要なページの情報をパースして自分専用に RSS 化したいなと思い、３つ目のスクレイピング用途をベースに調べてみました。その内容を備忘録として残しておきます。 出来るようになること ログインが必要なページの HTML を取ってくる ログインが必要なページのスクリーンキャプチャを撮る PhantomJS の導入
【今更ES2015を追ってみるシリーズ 3】Symbol編 - 俺、サービス売って家買うんだ
不定期連載その3です。 今回はSymbolについて調べたのでその辺を書きます。 前回までの記事 【今更ES2015を追ってみるシリーズ 1】Promise編 - 俺、サービス売って家買うんだ 【今更ES2015を追ってみるシリーズ 2】Proxy編 - 俺、サービス売って家買うんだ Symbolとは？ ES2015から追加された新しいプリミティブ型です。目的としては以下が考えられます。 主目的 アプリケーション内のオブジェクトで利用する一意のキーを作成する 何かしらの名前として利用するもの 副次効果 オブジェクトのアクセスコントロールの観点からprivateなプロパティを作成する 後述しますが完全なprivateというわけにはいかないよう 公式によると The Symbol type is the set of all non-String values that may be used
Array.prototype.slice.call(arguments)とは - console.lealog();
Array.prototype.slice.call(arguments); っていう、いかにもJavaScriptを使いこなしている風なこの書き方。 もちろん最初はまったく意味がわからんかったです。 そして次に、意味はわかっても、使い道がわからんかったです。 けど最近、使い道がやっと見えてきました。 というわけで、その過程をメモ。 arguments ざっくり引数のこと。 var func1 = function(name, arg1, arg2) { console.log(arguments); // ["Test", 100, 200] }; var func2 = function(name) { console.log(arguments); // ["Test2", true, function] }; func1('Test', 100, 200); func2('Test
JavaScriptでクリップボードにコピーするボタンを設置する方法
JavaScriptでクリップボードにデータをコピーしたい場合、clipboard.jsを使用すると簡単に実装することができます。clipboard.jsはMIT Licenseのオープンソース・ソフトウェアで、実装している機能をサポートしているブラウザはChrome 42以上、Firefox 41以上、IE9以上、Opera29以上です。Safari9.1はサポートしていません。 clipboard.jsを読み込む clipboard.jsを使用するためには、script文で以下のファイルを読み込むことで使用することができます。 https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.8/clipboard.min.js または、以下のURLからライブラリをダウンロードし、distディレクトリ内のコードを読み込んでも使用することがで
優秀なJavaScriptの開発者になるための5か条 | POSTD
(注記：7/15、いただいた翻訳フィードバックを元に記事を修正いたしました。) 子供の頃、私の興味は互いに関係性のない様々な分野に及んでいました。数学も歴史も大好きでした。 ルネッサンスマン 、つまり 博学者 と言う、複数の分野に秀でた人になりたいと思っていました。これはとても難しい課題で、私は突如として、器用貧乏な人になってしまう危機に直面したのです。 私は特定の分野に特化しなくては、と考え始めました。そうすればたとえルネッサンスマンにはなれなくても、少なくとも、器用貧乏にならなくても済むと思ったのです。どうしたらソフトウェア開発をするのに必要な広い知識を保ちながら、1つの分野で専門性を高めることができるのでしょうか。 この記事では、過去5年間、私が良いJavaScript開発者になるために使ったテクニックとリソースの概要をお伝えしようと思います。 最近の多くのWeb開発者は、ある共通の
Node.js チュートリアル | Node ビギナーズブック
本書について 本書は、Node.jsでのアプリケーション開発を始めようとする皆さんに、 ”高度な”JavaScriptについて知るべきあらゆることを解説します。 よくある”Hello World”チュートリアルの、はるか上をいくものです。 ステータス 貴方が読んでいるのは、本書のいわゆる最終版となります。 つまり本書は、間違いが見つかった場合や、 Node.jsの新バージョンにおえる変更点を反映する時のみ、改訂されます。 最終更新日は2012年2月12日です。 本書内のコードのサンプルは、Node.jsのバージョン0.6.10でテストしています。 ターゲット読者 本書は、Ruby、Python、PHP、Javaのような、少なくともひとつのオブジェクト指向言語を理解しており、 JavaScriptについてはあまり経験がなく、Node.jsについては全く経験がないという、 著者と同じようなバッ
2016年にJavaScriptを学ぶとこんな感じ
このストーリーは、Circle CIに投稿された”It’s the future”というストーリーにインスパイアされたものです。オリジナルはこちら。ここに書いたことは一つの意見というだけで、他のJavaScriptフレームワークもそうですが、過剰に真に受けないでください。このストーリーを執筆中に新たなJavaScriptフレームワークは作成されていません。 やあ、今新しいプロジェクトをやっているんだけど、実はここ数年ウェブのコード書いていなくてさ、しかも以前とは少し変わったとも聞いているよ。それで君が一番この辺でウェブ開発に詳しいって聞いたんだけど？ -フロントエンドエンジニア、といったほうが正しいが…まあ、俺なら間違いない。俺のは2016年のウェブだからな。ビジュアライゼーション、ミュージックプレイヤー、サッカーをするドローン等々。JsConfとReactConfから帰ってきたばかりだか
テンプレートエンジン不要？JavaScriptで文字列処理を簡潔にするTemplate literal
テンプレートエンジン不要？JavaScriptで文字列処理を簡潔にするTemplate literal 高津戸壮（株式会社ピクセルグリッド） これまでのJavaScriptでは、複雑な文字列処理はテンプレートエンジンを使うことが一般的でした。しかしECMAScript 2015（ECMAScript 6）では、パワフルなTemplate literalが標準で利用できるようになりました。この新たに追加されたTemplate literalについて、概要とサンプルコードを紹介します。 これまでの文字列組み立て ES6で追加されたTemplate literalを使うと、文字列をより柔軟に、シンプルに組み立てることができます。例えば、これまでのJavaScriptでは、文字列を組み立てるために、例えば以下のような方法を取る必要がありました。 var name = 'john'; var cou
今からでも読んでおきたいReact.js入門資料12選
Facebookが提供しているJavaScriptライブラリ・React.jsは「Yahoo!」「Airbnb」「Reddit」「Netflix」などで採用されています。 日本でも注目され始めているので、React.jsを使ってみたい方は多いのではないでしょうか。 これからReact.jsを学ぶ方の参考になるReact.jsの入門資料（サイト・記事・スライド）を12個ご紹介します。 他のJavaScriptフレームワークからReact.jsに乗り換えようか迷っている方の参考になる資料も紹介しています。 React.jsの学習の参考になるサイト・記事 今話題のReact.jsはどのようなWebアプリケーションに適しているか？ Introduction To React─ Frontrend Conference / HTML5 Expert.jp https://html5experts.j
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Nuxt.jsとFirebaseでSPA×SSR×PWA×サーバーレスを実現する - DMM inside
FORMでsubmitする前にhidden項目を追加する。