きれいで読みやすいJavaScriptを書く デコレーターの基本を先取り
ES2015の登場とトランスパイラーの普及により、コードや記事の中で言語の新機能を見かけることが増えました。とりわけ難しい新機能がJavaScriptのデコレーターです。 デコレーターはAngular2に採用されたことで人気が高まりました。デコレーターは現時点ではAngularではTypeScriptで使うことができ、JavaScript（ECMAScript）のプロポーザルではステージ2（編注：ドラフト）です。将来的にはJavaScriptにも採用されるでしょう。そこで、デコレーターの役割や、デコレーターを使ってきれいで読みやすいコードを書く方法を紹介します。 デコレーターとは デコレーターは、コードの一部をほかのコードでデコレート（装飾）するように包むことで、「関数合成」や「高階関数」と表現されていました。JavaScriptで実装可能で、具体的には次のようにある関数をほかの関数で包む
async/await 入門（JavaScript） - Qiita
はじめに 今更ですが、JavaScriptのasync/awaitに関する備忘録になります。 「今まで$.Deferred()やPromiseなどで非同期処理は書いたことがあるが、async/awaitはわからない」 「$.Deferred()やPromiseなどの非同期処理の書き方より、もっと簡潔に書ける書き方があれば知りたい」 「今までの非同期処理の書き方と比べて何が良いのかわからない」 といった人達向けの記事です。 $.Deferred()やPromiseなどで非同期処理を書いたことがある前提のため、非同期処理自体に関する説明は記載しておりません。 記載している利用例のコードはChrome（最新）のコンソール上で動きますので、コンソール上で実行して動作を確認してみると理解が深まりやすいと思います。 本記事で用いている用語 Promiseを返す Promiseオブジェクトを返すこと。
JavaScriptフレームワーク選定の議論 - Qiita
相談内容 既存の管理ツールを新しく作り直すために新しいJSフレームワーク/言語使いたいのですが、何を選んだらよいでしょうか？ ここで選んだものは今後新しく作る時にも使用していく予定のため、学習コストよりメンテナンスしやすいものを選びたいと考えています。 利用者は社内外で特定の権限を持った人のみであるため、サーバサイドレンダリングはしない予定です。 言語は型があるものを利用したいのですが、TypeScriptとFlowのどちらがよろしいでしょうか？ 時間に余裕があれば、テストフレームワークやビルドツールについてもお聞きしたいです。 現在のページ/チーム jQueryなどで書かれている部分が多いですが、変更を加えることが難しくメンテナンスコストが高いです。 サーバサイドをやってる人が片手間で書くJavaScriptといった状況です。 今回新規で数ページを追加する必要があるため、何を利用すれば良
STEP3-1.Ajaxを使ってみる / チームラボ オンラインスキルアップ課題
STEP3-1.Ajaxを使ってみる Ajaxとは、JavaScriptなどからHTTP通信をすることによって、ページのリロードをせずにサーバとデータのやり取りをする技術です。ここでは1秒ごとに自動で再読み込みを行うような簡単なチャットを作成してみます。 まずはAjaxで取得するデータを用意しましょう。データはSTEP1で作成した掲示板のデータを流用することにします。以下の内容をajax_get_data.phpという名前で保存します。今回はCakePHPは使用しませんのでhtdocsに保存してください。 <?php $mysqli = new mysqli('localhost', 'root', '', 'board'); $json = array(); $result = $mysqli->query("SELECT * FROM datas ORDER BY created DE
PHPとAjaxで擬似的にリアルタイム通信を実現する。 - nigoblog
先日QiitaQiita [キータ] - プログラマの技術情報共有サービスが主催するハッカソンに参加して参りました。 結果はなんと優勝しちゃいました!! テーマは「マルチスクリーンで動作するアプリケーション」というわけで、 一つの画面を複数のデバイスで操作するという感じのアプリケーションを作成しました。 その時に端末のデバイスでのイベントをリアルタイムでメインの画面に反映させるということをPHPとAjaxで行いました。 具体的なPHP, Ajax技術利用法を書いていきます。 アイディア 具体的にどんなものかというと、一つのメイン画面にバーが2つあり、端末を振るとそのバーが変化します。 2台以上の端末を使って、バーを二手に分け、どちらがより振ったかを競うようなアプリケーションです。 端末側はチームメンバーで私はメインの方を担当しました。 PHP, Ajax実現アルゴリズム 擬似的にリアルタイ
BACKBONE.JSによるWebアプリケーション開発について
フロントエンドとJavaScript JavaScriptのMV*向けライブラリ BACKBONE.JSによるWebアプリケーション開発について 「オープンソースカンファレンス 2013 福岡」の HTML5と最近のフロントエンド事情で発表した資料です。
テキストエリアの高さを文字数に応じて変更
サイトやブログをJavaScriptを使って動きのあるページに、スタイルシートで見栄え良く装飾してみませんか？ コピーしてご自由にご利用ください。 textarea要素 element.scrollHeightプロパティでテキストエリアの高さを自動変更。 * 自動折り返し、Enterキー,改行で高さが自在に変わります。 ウェブ検索するだけで楽天スーパーポイントがもらえる ホームページが無料で作れます サンプルソース <html> <head> <title>テキストエリアの高さをリサイズ</title> <script type="text/javascript"> <!-- function resize(Tarea){ var areaH = Tarea.style.height; if(Tarea.value == ""){areaH=26+"px";} areaH = parseI
Facebookやtwitterなどのソーシャルボタンを高速に読み込む方法まとめ | Cappee Design
今朝突然iPhoneから避難訓練の緊急速報がピピピとなってびっくりした、@cappeeです。 以前投稿したこちらの「ソーシャルボタンの設置まとめとボタンの幅や吹き出しの直し方、コーディング方法など」がわりと好評なので、高速化についても追記しようと思ったのですが、あまりにも長くなるので別記事で投稿したいと思います。 ソーシャルボタンの高速化に関する方法は色々なブログで見かけるのですが、記述方法などまとまったものがなかったのでメモしておきたいと思います。 ソーシャルボタンのJavaScriptを最後に記述する ソーシャルボタンに限らず基本的なことですが、JavaScriptは表示が問題なければ</body>の直前に記述するとページの読み込みを早くすることができます。 jQueryなど<head>内で指定しないといけないJSもありますが、ソーシャルボタンのタグであれば最後に記述しても問題ありませ
トップ固定でレスポンシブ対応のナビゲーション/メニューを簡単に実装できる「Fixed Nav」 | co-jin
トップ固定で、レスポンシブ対応のナビゲーションが増えていますね。 これだけ増えてくると、トップ固定のメニューが実に使いやすくなってきます。 今回はそんなトップ固定のメニューでありながら、レスポンシブにも対応したナビゲーションを簡単に実装できる「Fixed Nav」をご紹介します。 「Fixed Nav」は、トップ固定でレスポンシブ対応のナビゲーション/メニューを簡単に実装できるプラグインです。 jQueryは使用していません。 ページスクロールアニメーションに対応していて単ページもののサイトととっても相性がいいナビゲーションです。 ナビゲーションはアクティブにも対応していますので、現在、自分がいる位置がすぐにわかりますよ。 もちろん商用利用可です。 ソースはGitHubのFixed Navにありますよ。 デモをご覧になりたい方は以下からどうぞ。 DemoFixed Nav Sponsore
初心者でも分かる！モーダルウィンドウの作り方
特にスマホで活躍する、ダイアログのように浮かび上がるモーダルウィンドウ。初心者でも1から作れるよう、解説します。
テキストエリアを自動的にリサイズしてくれる「Autosize」
「Autosize」は、テキストエリアのサイズを入力文字数によって自動的に変更してくれるjQueryプラグインです。標準では、枠を超える文字数を入力するとスクロールバーが表示されますが、かわりに建増ししてくれます。 ダウンロード CDN スクリプト <script src="jquery.min.js" type="text/javascript"></script> <script src="jquery.autosize.js" type="text/javascript"></script> 実装 <textarea id="text1018"></textarea> <script type="text/javascript"> $(document).ready(function(){ $('textarea').autosize({ // append: "\n" // 内部に
要素のリサイズイベントを取得 - Qiita
要素のリサイズイベントを取りたいが、jQueryだけでは出来ないみたいなので、探していたらこういうものを見つけた。 http://d.hatena.ne.jp/cyokodog/20101101/exresize01 https://github.com/cyokodog/jquery.ex-resize ただ、このままだとjQuery1.9以降でエラーがでるみたいなので、その部分だけとりあえず動くようにしてみた。 この変更を入れると、古いブラウザに対応できなくなるのかな？ 古いブラウザも対応する必要がある場合は、ここのブラウザ判定処理をそれ用に書き直せばいけると思う。 $.ex.resize = function(idx , targets , option){ if ($.isFunction(option)) { option = {callback : option}; } var
jQuery の位置・サイズ関連メソッドまとめ - Cyokodog :: Diary
ばらけてきたのでこちらにまとめます。 索引 位置の設定 css(name,value) 位置の取得 css(name) offset() position() scrollTop() / scrollLeft() event.pageY / event.pageX サイズの設定 css(name,value) / height(value) / width(value) サイズの取得 css(name) / height() / width() attr(clientHeight / offsetHeight / scrollHeight) outerHeight() / innerHeight() コンテナ要素の取得 offsetParent() 解説 位置の設定 css(name,value) 対象要素を指定した位置に配置できます。単位を省略した場合はピクセル単位となります。 $('#
jQuery で JSON ファイルを読み込む - Qiita
[ {"id":1,"name":"田中"}, {"id":2,"name":"鈴木"}, {"id":3,"name":"佐藤"} ] <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script> $(function() { $.getJSON("data.json" , function(data) { var ulObj = $("#demo"), len = data.length; for(var i = 0; i < len; i++) { ulObj.append($("<li>").attr({"id":data[i].id}
jQuery の on() と off() を理解する - tacamy--blog
初心者向けの本とかだと、イベントを jQuery オブジェクトの後に直接指定する、 $('.foo').click(); のような書き方で説明されている場合が多いけど、少し複雑なことをしようとするとそれだと困ることが出てきます。そんなときに便利なのが on() を使ったイベント設定です。 on() ひとつで bind() live() delegate() を表せる jQuery 1.7 で、bind() live() delegate() がすべて on() に統合されたそうです。 つまり on() の書き方によって、3 パターンの使い方ができるということです。 .foo という要素をクリックしたら何かするという例で、イベントの設定と削除の方法をそれぞれ書いてみます。 bind() $('.foo').bind('click', function(){...}); は $('.foo')
Enterでsubmitするtextarea - Qiita
追記 (2019-04-16) MDNによると、keypressはdeprecatedで今後はkeydownを使ってくれとのこと。 あわせてkeyCodeもdeprecatedなので、keyかcodeを使ったほうが良い。 Facebookのコメント投稿欄とかLingrの発言欄とか、Enter一発でsubmitするtextareaの作り方。 一応次の機能も盛り込む。 Shift+Enterで改行も入力できるようにしておく。 本文がスペース、改行だけならsubmitしない。 HTML: <form action="/messages" method="POST" id="new-message"> <textarea id="message-text" name="text"></textarea> </form> var $form = $("#new-message"); var $ta
JavaScript・jQueryの改修・高速化のためのメモ - Qiita
たまにJavaScriptやjQueryなどの改修が入ったりすると忘れてしまうので、自分用のメモとして残しておきます。 JavaScriptコーディングベストプラクティス（高速かつ堅牢なコードを効率よく書くために）を参照しながらのメモになります。 随時、この記事に追記予定です。 高速化メモ JavaScript編 スタイルシートは上に、JavaScriptは下に指定する JavaScriptファイルは読み込んだ後、通常はスクリプトを解析している間、他のファイルの読み込みをブロックする JavaScriptはページの上部に指定すると、このブロックによりロード時間が増加する場合がある スタイルシートはなるべく上に、JavaScriptファイルは下部にしていることで、ロード時間が短縮できる 画面描画に関係ないJavaScriptは、</body>の直前に書く $(document).readyを
初めてのJavaScript ~コナミコマンドをやってみた~ - Qiita
初めてのJavaScriptということで、コナミコマンドを入力するとテキストのサイズが大きくなるという機能を実装しなさいという課題に取り組みました。 そもそもコナミコマンドってなんぞや。 コナミコマンドとは、いわるゆゲームでは定番の隠しコマンドの俗称です。代表的なコマンド「↑↑↓↓←→←→BA」というのがあり、今回はこのコマンドを使用しました。 以下がソースコードです。 <html> <head> <script src="http://code.jquery.com.jquery-1.11.1.min.js"></script> </head> <body> <div id="target">Target!!</div> <script type="text/javascript"> var input = []; konami = [38,38,40,40,37,39,37,39,66
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
autosizeの上限を指定する方法 - Qiita
