Railsフロントエンド技術の今とこれから
待望されたYarnサポートの入ったRails5.1が2017年4月にリリースされました。 Ruby on Rails 5.1 Release Notes — Ruby on Rails Guides 他にもjQueryがデフォルトdependencyから外されたり、Optionalでwebpackサポートが入ったりしており、Railsのフロントエンドは大きな転換点を迎えたと言ってよいでしょう。本エントリではRailsのフロントエンド技術の今を振り返り、今後どうなっていくかをまとめてみたいと思います。 DisられてきたRailsフロントエンド Railsのフロントエンド技術スタックは、フロントエンドを専業とするエンジニアにDisられるものでした。具体的には下記の技術要素です。 jQueryCoffeeScriptAssets Pipeline (sprockets)gemのエコシステムに乗っ
フロントエンドエンジニアはjQuery以外のライブラリを覚える必要があるのか - Qiita
はじめに 先週フロントエンドエンジニア向けの勉強会に行った際、最近フロントエンドエンジニア（コーダー寄り）になったという方に、 「なんでjQuery以外のライブラリやら、フレームワークやらを覚えないといけないんですかね。業務ならjQueryだけで十分なのに」 と訊かれ、その場の思い付きでつらつらと説明しましたが、改めてその理由を考えてみました。 状況整理 確かに、今からフロントエンドの仕事をしようとしている人や、新しい情報をキャッチアップしていなかった人にとって、今のフロントエンド界隈の新旧入り混じった状況はカオスに映るはずです。 現場ではjQueryが重宝され、それで十分業務は回っているのに、ネットを覗いてみると、やれSPAだ、リアクティブプログラミングだと騒いでおり、Angular、React、Vue.js、PostCSS、Sass、Babel、webpackなどの横文字が乱立していて
フロントエンドエンジニアなら押さえておきたい！最近登場した注目のJavaScript＆CSSライブラリ8選
Webデザイナーやフロントエンドエンジニアにとって、日々登場するフレームワークやライブラリをキャッチアップすることはとても大切です。 なぜなら、そうしたフレームワークやライブラリによって業務が効率化すれば、他の作業に時間を割くことができるからです。 しかし、フレームワークやライブラリが続々と登場するあまり、キャッチアップに追いついていないひともいるのではないでしょうか。 今回は、最近登場した注目のJavaScriptとCSSのライブラリを紹介していきます。 中には簡単なコードを挿入するだけで驚くほどの機能を実装できるものもあるので、ぜひ確認してみてください。 最近登場した注目のJavaScript＆CSSフレームワーク 1. AOS https://michalsnik.github.io/aos/ AOS(Animate on Scroll)は、スクロールしながら要素をアニメーションでふ
jQuery逆引きリファレンス - 処理対象別インデックス
処理対象別インデックス 【Ajax】 イベント ／ 簡略表記メソッド ／ 基本 【Core】 ライブラリバージョン 【CSS】 スタイルプロパティの取得／設定 【アニメーション】 スライド ／ フェード ／ 基本 【イベント】 イベントオブジェクト ／ イベントリスナー ／ フォーカス ／ 基本 【エフェクト】 一時停止 【コア】 jQuery3への移行 ／ jQueryMigrationプラグイン ／ jQueryオブジェクト ／ ライブラリインポート ／ ライブラリの共存 ／ ライブラリフォールバック ／ 基本 ／ 控えめなJavaScript ／ 最新版へのマイグレーション 【セレクター】 jQuery拡張 ／ 階層 ／ 基本フィルター ／ 子要素フィルター ／ 属性 【トラバーシング】 オブジェクトの操作 ／ ツリー上の範囲選択 ／ ツリー上の要素選択 ／ フィルタリング ／ 検索
You-Dont-Need-jQuery - jQueryを使わない書き方教えます
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました jQuery、便利ですよね。すぐに使ってしまうのですが、サイズは肥大化していますし、実際に使うのはそのごく一部でしかなかったりします。 そこで参考にしたいのがYou-Dont-Need-jQueryです。その名の通り、jQueryを使わない標準的な記法を教えてくれるプロジェクトです。 You-Dont-Need-jQueryの使い方 You-Dont-Need-jQueryはソフトウェアというわけではなく、READMEの中で説明をしてくれます。例えばセレクタの書き方。 $('selector'); // ↓ document.querySelectorAll('selector'); クラスを指定する書き方。 $('.class'); // ↓ document.querySele
[JS]縦長ページに面白い仕掛けや便利な機能を実装できるスクリプトのまとめ
縦長のランディングページなどで見かける気持ちいいインタラクションやエフェクト、面白い仕掛けのコンテンツや便利な機能を実装できるスクリプトやjQueryのプラグインを紹介します。 プロダクトやサービスを魅せるスクリプト、さりげないけど気持ちいいアニメーション、縦長ページならではのナビゲーション、レイアウト補助など、全コンテンツを1ページにおさめ、スクロールを前提にしたページならではの面白くて役立つスクリプトが満載です。
![[JS]縦長ページに面白い仕掛けや便利な機能を実装できるスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/12d806b696946054b69c1dc3670ffa2dc1985773/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201503%2F2015112505.png)
jQuery プラグインの定義パターンについて調べてみた - Cyokodog :: Diary
jQuery のプラグインの定義手法については、いろいろな記述の仕方が考えられるかと思います。今回、実際に公開されているソースを参照して、どのような定義パターンがあるのかを調べてみました。 jQuery 標準 API の定義構造のおさらい まず、jQuery が標準で提供している各種 API が、どうのような構造で定義されてるかおさらいしてみます。 $ や jQuery はグローバル変数、つまり window オブジェクトのプロパティ名であり、その実体は関数オブジェクトです。 window.$ = window.jQuery = function(){ ... } jQuery が提供する API には 関数 API と メソッド API があり、関数 API は jQuery 関数オブジェクト（以降 jQuery セレクタと記述します）が持つ、関数オブジェクトのことを指します。 jQue
2014年総まとめ、jQueryのプラグインとスクリプト100選
毎年末にjQueryのプラグインをまとめていましたが、今年はプラグインの他に単体で動作するスクリプトも加えて、jQueryのプラグインとスクリプトの総まとめとして記事にしました。 今年目立ったのは、去年から引き続きアニメーション系、縦長ページ用のスクリプトでしょうか。 1カラムのレイアウトが流行っているためか背景関連も充実していました。それとSVGをより簡単に利用できるようになったのも大きな目玉ですね。 また、jQueryに依存しない、単体で動作するスクリプトも多く開発されるようになったと思います。 背景関連 SVG関連 縦長ページ関連 スクロール連動・パララックス関連 その他スクロール操作・補助関連 レスポンシブ関連 ナビゲーション関連 レイアウト関連 コンテンツ生成関連 コンテンツ紹介・ツアー関連 スライダー・カルーセル関連 画像拡大・配置・キャプション関連 アニメーション関連 エフェ
初心者でもすぐできるスマホ対応jQueryアコーディオンメニューの作り方 | SONICMOOV LAB
また会いましたな！ スイカバー(ふつうのやつ)をこよなく愛するマークアップエンジニアのまりぞーですヽ(°ω°)ﾉ 先日、ついにWii UとSplatoonをゲットしました。 そろそろガチバトルでわちゃわちゃするお年頃かもしれません…ガンバルゾー！ガンバルゾー！ 今回はjQueryを利用したアコーディオンメニューの作り方をご紹介します。 前回の【初心者向け】レスポンシブなtableを作ってみる同様、初心者向けです。 また、 来年2016年1月12日からIE8がサポート対象外となるので、対応ブラウザはIE9以降とモダンブラウザ系とします。 デモでは割りとシンプルな構造なので、スマホなどたいていの端末で閲覧できると思います。 よろしくお願いします。 PCのときは横並びのレイアウトで、モバイル端末など画面が小さい場合はぬるりと動くハンバーガーに格納されるjQueryでレスポンシブなメニューを作って
無料麻雀ツール＆アプリ 点数計算＆牌効率ラボ
JavaScriptでプログラミングした麻雀の小粒プログラム集を公開しています。稚拙なものばかりですが、プログラムのヒントや参考になれば幸いです。
あれ、いつも書いてるな～というJavaScript の小技集 | バシャログ。
いい加減髪を切りたいminamiです。 JavaScriptでいつも書いてるな～という処理や、知っていると便利なTipsを簡潔に集めた記事を見てほお～と思ったものがいくつもあったので抜粋してみました。 ※追記1： ご指摘がありましたので一部修正しました。「配列をソートする」ではなく「配列をシャッフルする」でした。 ※追記2：「HTMLをエスケープする」のソースがまちがって表示されていました。修正しました。 ※追記3：予想以上に反響が大きく、多数ご指摘を受けてしまいました。よく使う処理の書き方もいろいろあるんだな～という参考程度にご紹介したのですが、参照元の記事の内容の検証が不十分なまま紹介してしまい申し訳ありませんでした。いろいろと勉強になりました！ 45 Useful JavaScript Tips, Tricks and Best Practices 配列からランダムで値を取り出す v
【無料で学べる！】独学でプログラミングが学習できるサービス10選 | Be My Style
【無料で学べる！】独学でプログラミングが学習できるサービス10選 最近、世界各国でプログラミングの注目度が上がってきています。 これは、日本でも同じでここ最近、無料のプログラミングスクールみたいなものが ものすごく増えてきました。 自分自身も、開発スキルはまだまだ未熟ですが、 独学で学びながら無料のスクールに通っています。 学生でプログラミングを学びたいと思っているけど、無料じゃないと難しいという人が多くいるのではないでしょうか。 そこで、無料でかつ独学で学べるプログラミングサービスを紹介します。 あと、大体のサービスが初心者向けに作られているのでもう挫折もしないはずです。 僕自身も大学1年の時にプログラミングを学ぼうと思って挫折しましたが、 今は続けられているので初心者の人にはオススメです！ 1. teratail（テラテイル） teratail 開発言語：HTML/CSS, JavaS
すごい便利になった！javascript入門の基礎知識と小技まとめ
作成：2013/12/24 更新：2014/11/01 Web制作 > サイト構築中にちょっとした動きをのせたいとき、どうすれば良かったのか何度も調べ直さないといけないことがあります。今回はJavaScript で初心者の方でもすぐ活用できるように、使用頻度の高いリファレンスと基本知識をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ できること １．リファレンス スクリプトの書き方／基礎知識 ２．スクリプトの記述 ３．文字列／特殊文字 ４．演算子 ５．オブジェクト ６．プロトタイプ ７．イベント ８．変数 ９．if文 １０．配列 １１．連想配列 １２．正規表現 １３．デバッグ できること １．リファレンス JavaScriptは開発環境の準備がほぼ不要で、コピー＆ペーストだけで、動くものができてしまいます。他の言語だとそう簡単にはいきません。サ
[JS]Lightboxの進化形！クリックでもタップでも快適動作の画像を拡大表示させる超軽量スクリプト -Intense Images
サムネイル真ん中の風景写真は縦長 Intense Imagesの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 ※jQueryなど他のスクリプトは必要ありません。 <head> ... <script src='../intense.js'></script> </head> Step 2: HTML 画像は2種類の配置方法があります。 img要素はサムネイルと拡大時の画像を兼用し、data-image属性は拡大時に高解像度の画像を利用することができます。 <img src="./img/awesome-source.jpg" /> <!-- OR --> <div class="anything" data-image="./img/awesome-source.jpg" /> data-imageを使用する時は、サムネイルはCSSで背景画像として指定
横メニューの作り方
レスポンシブに対応した横メニューを作る機会があったので、せっかくですし作り方を紹介したいと思います。お役に立てばうれしいです。 【追記 2014.03.19】 元々のタイトルは「レスポンシブWebデザインに対応した横メニューの作り方」でしたが、よく考えるとスマホ対応になったら縦メニューになりますのでタイトルを変更しました。 id名「toggle」の部分は横幅が480px以下の場合に表示するボタンです。481px以上の場合表示させません。その他はごく普通の横メニューです。 CSS 続いてCSSです。まずは全体を載せます。 #menu{ width: 100%; max-width: 960px; margin: 0 auto; padding: 0; } #menu li{ display: block; float: left; width: 12.5%; margin: 0; paddi
JQuery With CoffeeScript | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! I don’t always write CoffeeScript, but when I do, I’m probably using jQuery too; I always forget the syntax for stuff. So I’m going to write it all down here so I can reference it until I memorize it. Note that the compiled example doesn’t include the automatic closure around everything you
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - camsong/You-Dont-Need-jQuery: Examples of how to do query, style, dom, ajax, event etc like jQuery with plain javascript.
Web制作で分からないことはすぐに確認！HTML5, CSS3, jQuery, WordPress, Bootstrapなどのチートシートのまとめ
jQueryは無し、シンプルに必要な機能だけを実装する軽量スクリプトのまとめ
caraldo.net - it転職 リソースおよび情報