レトロエンジニアのための近代Webフロントエンド事情 - Qiita
フロントエンド開発という言葉があちらこちらから聞こえてくる。 「反対語はバックエンド開発だから、サーバとかCUIじゃない、アプリとかGUIあたりのことを指す広い意味の言葉だよね。」 ・・・とか思ってたらとんでもない。 世の中ではJavaScript界隈を限定している風な使われ方をしている。 私のような C/C++ メインのレトロエンジニアは肩身が狭くなるばかりである。 本文は、近年のWeb技術に追いつこうと調査した結果のメモ書きである。 n番煎じの内容だが、Web業界にいない人間の視点 なので、私と同類のレトロエンジニア等、一部の人には新しい気付きが与えられるかもしれない。 詳しい人の添削・ツッコミは大歓迎。 詳細はリンク先に任せ、私が思う「わかりやすい順序」で、調べたことをざっと紹介していく。 きっかけ 読み飛ばしてもよい。 Reactを使うとなぜjQueryが要らなくなるのか 数年前、
JavaScriptにフレームワークが必要な理由 - Qiita
JavaScriptにはむしろもっと抽象化がもたらされるべき - Qiitaという記事で、もう少し踏み込んだ話を書いてみました。 某所でReact.js界隈の人に聞きたいというフレームが発生したのだが、はてなブックマークでコメントしたらIDコールされたので、反論をここに書くことにした。(最近は技術系記事はQiitaにしか書いてないので)。 あくまで僕が考えるなので、JavaScript界の人達が本当はどう思っているかはわからない。そもそもJavaScriptを本格的にさわり始めたのごく最近なので、JavaScript界では異端かもしれない。 元記事では論点(感情)が複数ごちゃまぜになっていたので僕は辛口のブコメを書いたのだが、論点をごちゃ混ぜにするのは意図的にやってるのならばただの詭弁だ。なので、まずは元の記事での論点を整理する。 jQuery (or フレームワーク?) 言語採用 Rea
jQueryで楽になる部分、楽にならない部分、顧客が本当に必要だったもの - Qiita
俺も昔はお前のような jQueryスパゲッティジェネレーターだったのだが、膝にReactを受けてしまってな… 基本的な方針 とくにライブラリ設計者において、小さなモジュールを単機能で分割する以上、ライブラリ設計者は可能な限り依存を減らすことを求められます。node環境ならdependency hellの回避のため、フロントエンド環境ならファイルサイズを減らすためです。 ライブラリ設計者ならずともコードのポータビリティを維持するため、できるだけライブラリに依存しないコードを書くのが望ましいです。 Githubみてる限り、最近書かれるJSのライブラリの多くはjQuery非依存です。ユーザーから見る限りは、jQueryElement渡すかHTMLElement使うかぐらいの違いですけどね。 また、Angular, React等のSPAをスクラッチで設計する場合、気づいたらjQueryを使っていな
素材
★むゆうさん（ @anticyborg ）作成のjQueryプラグイン「Booom」に集中線１を採用いただきました！ ありがとうございます！ ＼(*・ω・*)／
JSといえばjQueryだったWebデザイナーが、Reactを1年間使って感じたメリット｜dwango creators' blog（ドワンゴクリエイターズブログ）
はじめまして、ほそだと申します。昨年秋まで個人事業主の立場でドワンゴでお仕事させていただいておりましたが、いろいろ経緯がありまして中の人になりました。ドワンゴ歴はそこそこ長い新入りです。よろしくお願いいたします。 さて、今回はデザイナー（HTML/CSS/JSは扱えるいわゆる「Webデザイナー」）として1年間ほどReactを使ってみたので、そのメリットを書いてみようかと思います。 Reactとの出会い ReactとはFacebook製のJSライブラリです。 https://facebook.github.io/react/ WebアプリケーションのView部分を実装します。2014年の暮れにエンジニアの方々が魂を震わせているのを見て存在を知りました。2015年はReact元年な感じでしたよね。 僕自身、以前から比較的JSを書くタイプのデザイナーではありましたが、正直なところ自分が関わってき
スマホのメニューなどに使えるjQueryを使って要素をクリックした時に開閉させる方法（ドグルボタン化） | 9ineBB
jQueryを使えば色々と便利なことがあります、今回はjQueryを使って要素をボタン化して、それにアクションを加えてやるというものです TENPARA.NETで現在作成中のテンプレートで作成しているスマートフォンでボタンをクリックしたらメニューが出来るものです、これもjQueryでボタン化してそれにアクションを加えています 初期状態 左上のボタンをクリックして展開 仕組み 左上のボタンはdivですクラスがbutton-toggleのやつです、このdivにアクションを付けることでボタン化しています アクションは、他の要素がslideup、slidedownを交互に繰り替えるslideToggleを使うことで表現しています HTML コード <header> <div class="title"><h1><a href="">創造WEB</a></h1></div> <div class="
jQuery animiteを無駄に繰り返させない方法。animate停止中の要素のみ実行。 | Stronghold Archive
jQuery animiteを無駄に繰り返させない方法です。 animateは結構便利なので使いがちですが 落とし穴もあります。。。 ホバーやクリックを繰り返したら繰り返した分だけアニメーションが実行されたり またscrolltoであっちに行ったりこっちに行ったり…挙動がおかしかったり。 そんな時に役に立つのが animate停止中の要素のみ取り出す$(this).not(“:animated”)の記述です。 例 <script type="text/javascript"> $(document).ready(function(){ $("ul.example li a").hover( function () { $(this).not(":animated").animate({"opacity":"1"},"slow"); }, function () { $(this).anim
Raphaël―JavaScript Library
The most popular coding language for the web is javascript; so much so that since the advent of HTML5, it has now been officially accepted as the default standard. Javascript has moved beyond a smaller client-side browser-based language to become integrated not just for front-end design, but also for back-end server-side development. As a result there are has been a huge growth of Javascript libra
jQuery UIのtoggle()でjQueryのslideToggle()よりカッコよくスライドさせる方法
jQuery UIのtoggle()を使って、jQueryのslideToggle()よりカッコよくスライドさせる方法について紹介します。 ある要素をスライドさせながら表示・非表示を行うには、jQueryのslideToggle()（またはslideUp()とslideDown()）がよく知られていると思います。 が、slideToggle()ではコンテンツの動き方に個人的に不満があり、調べたところ、jQuery UIのtoggle()で期待する動作になることが分かりました。 jQuery UIのtoggle()については、公式ドキュメントのAPIで公開されているのですが、本エントリーで紹介するような詳細な指定方法が書かれていないので、備忘録で本エントリーに残しておきます。 １．jQueryのslideToggle()でスライドさせる まず、jQueryのslideToggle()と使った
初心者でもすぐできるスマホ対応jQueryアコーディオンメニューの作り方 | SONICMOOV LAB
また会いましたな！ スイカバー(ふつうのやつ)をこよなく愛するマークアップエンジニアのまりぞーですヽ(°ω°)ﾉ 先日、ついにWii UとSplatoonをゲットしました。 そろそろガチバトルでわちゃわちゃするお年頃かもしれません…ガンバルゾー！ガンバルゾー！ 今回はjQueryを利用したアコーディオンメニューの作り方をご紹介します。 前回の【初心者向け】レスポンシブなtableを作ってみる同様、初心者向けです。 また、 来年2016年1月12日からIE8がサポート対象外となるので、対応ブラウザはIE9以降とモダンブラウザ系とします。 デモでは割りとシンプルな構造なので、スマホなどたいていの端末で閲覧できると思います。 よろしくお願いします。 PCのときは横並びのレイアウトで、モバイル端末など画面が小さい場合はぬるりと動くハンバーガーに格納されるjQueryでレスポンシブなメニューを作って
.stop() | jQuery 1.9 日本語リファレンス | js STUDIO
サンプル animateの基本的な使い方です。 <div id="hoverme"> Hover me <img id="hoverme" src="book.png" alt="" width="100" height="123" /> $('#hoverme-stop-2').hover(function() { $(this).find('img').stop(true, true).fadeOut(); }, function() { $(this).find('img').stop(true, true).fadeIn(); }); デモ <!DOCTYPE html> <html> <head> <style>div { position: absolute; background-color: #abc; left: 0px; top:30px; width: 60px; h
jQuery.stopのjumpToEnd引数が便利すぎてやばい（JavaScript Advent Calendar 2010 5日目） - KAYAC engineers' blog
JavaScript Advent Calendar 20105日目のago（@kyo_ago）です。 jQueryのソースを眺めててjQuery.stopに引数があることに気づいたので調べてみました。 まず、簡単なスライドダウンメニューを作ってみたいと思います。 jQuery.stop 1 - jsdo.it - share JavaScript, HTML5 and CSS JS部分は以下の通りです。 $(function () { $('div').hover(function () { $(this).find('ul').slideDown(); }, function () { $(this).find('ul').slideUp(); }); }); 少し触ると分かると思いますが、マウスがmenuから外れた後も何度も.slideDown、.slideUpが実行されるため非常に
JqueryのslideDownとかslideToggleでグィングィン何回も開いたり閉じたりしてしまう現象 ｜ WEBTEQ
Jqueryはとても便利ですし、ノンプログラマーでも使える、みたいな売りですが、やっぱり障害に当たるとそれを乗り越える知識と根性はノンプログラマーと言えど必要になってしまいます。 今回ちょっとはまってしまい、どう検索しようか困ってしまったりしたのでキーワード含めてメモしておきます。 本題の、あなたはslideDownとかslideToggleで何回も開いたり閉じたりしてしまう現象に出くわしたことはないでしょうか。 あるいはslideDownとかslideToggleで開閉が止まらない、とかの言い方でしょうか。 ぱっと思いつく解決方法はJqueryが用意してくれているstop()関数ですね。 $(".example").stop().slideToggle(); stop()関数はアニメーションさせるときには必ずと言ってもいいほどつけます。定石ともいえるでしょう。 しかしこんなもんを入れても
はてなブログにjQuery Highchartsを使ってきれいなグラフをのせる方法 - 人生やまあり
Highchartsをつかったグラフ本当に綺麗ですよね！！！ Highchartsつかうと上のようなグラフがすぐ描けます。 昔サイドバーや記事に仕込んでいたjQueryが気づいたら動かなくなっていたので、今日ははてなブログでjQueryを利用する方法を紹介します。 この記事の内容、対象、目標 内容 はてなブログでjQueryを使うための準備について説明します。 はてなブログでHighcahrtsが使うための準備について説明します。 対象 jQuery、highcharts初心者 はてなブログ利用者 目標 サンプルをつかってjQuery highchartsを利用した上記のグラフを描けるようになること！！ はてなブログでjQueryが使えなくなった原因 いろいろと調査したところ下記の記事を見つけました。 ブログをおよそ2倍の速さで表示する、などの改善と機能追加を行いました - はてなブログ開
Highcharts :Uncaught TypeError: $(...).highcharts is not a function
Getting this error while running a HighCharts in my JSP Application. Uncaught TypeError: $(...).highcharts is not a function(anonymous function) @ VendorReports:125n.Callbacks.j @ jquery-1.11.0.js:893n.Callbacks.k.fireWith @ jquery-1.11.0.js:928n.extend.ready @ jquery-1.11.0.js:982K @ jquery-1.11.0.js:989 Please suggest what to do <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jq
2015年総まとめ、jQueryのプラグインとスクリプト100選
毎年恒例のjQueryのプラグインとスクリプトの総まとめを紹介します。「100選」の名称は恒例なので、実際は100以上あります。 今年目立ったのは、ランディングページなどの縦長ページ系、スクロールエフェクト系・CSSやSVGのアニメーションでしょうか。あとレスポンシブ周りも単にサイズ変化に対応させるだけでなく、ユーザビリティを向上させるものが充実していました。 背景関連 SVG関連 縦長ページ関連 スクロール連動・パララックス関連 その他スクロール操作・補助関連 レスポンシブ関連 ナビゲーション関連 レイアウト関連 コンテンツ生成関連 コンテンツ紹介・ツアー関連 ソーシャル関連 スライダー・カルーセル関連 画像拡大・配置・キャプション関連 アニメーション関連 エフェクト関連 テキスト関連 タブ・アコーディオン関連 テーブル・リスト・チャート関連 フォーム関連 パネル・ボックス関連 モーダル
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]アニメーションを使った快適操作がすごい！レスポンシブ対応のフリップコンテンツを実装する軽量スクリプト -jQuery Flipster![[JS]アニメーションを使った快適操作がすごい！レスポンシブ対応のフリップコンテンツを実装する軽量スクリプト -jQuery Flipster](https://cdn-ak-scissors.b.st-hatena.com/image/square/17e1a288172e3bbd2f08f4fe530b95a86e66a99f/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201601%2F2016011505.gif)
jQueryのslideToggleを使ったアコーディオンメニューのメモ | QWERTY.WORK
アニメーションを作成するときは必ずstop()を付けましょう | WebChokoTips – ウェブチョコチップス
漢は黙ってjQuery
