そろそろなぜjQueryを使うのが難しいのかをちゃんとまとめようと思う。｜榊原昌彦
「jQueryはオワコン」「いや、jQueryは便利！」議論が行われるようになってから2年は経つでしょうか。Twitterを観測してると定期的に盛り上がるので、私なりにちゃんとまとめようと思います。 ちなみに結論を先に書いておくと ・ レンダリングブロックしない構成、かつ最新版を使おう ・ jQueryはいいものだけど、脱jQueryした方が手っ取り早い です。 1. 保守しないといけないサポートの切れたjQuery1, 2を使ってるけど、依存プラグインが動くかどうかわからないから最新版にアップデートしていないプロジェクトが散見されます。 jQuery1, 2 は、Officially End of Life（公式に廃止）が名言されてます。ですので、「jQuery におけるクロスサイトスクリプティングの脆弱性」みたいな報告も修正されていません。EOLのバージョンはやめましょう。 ちなみにj
フロントエンドエンジニアの積極募集を始めました - SmartHR Tech Blog
こんにちは、エンジニアの nabeliwo です。 先日リリースされたカスタム社員名簿ではフロントエンドと BFF 層の開発を担当しました。かなりサクサク動くので機会がありましたらぜひ触ってみてください！ カスタム社員名簿 さて、表題の通りですがフロントエンドエンジニアの募集を始めました。 本記事ではその経緯について書いていきたいと思います。 フロントエンドエンジニア募集ページ 僕が入社するまでのフロントエンド SmartHR は2015年2月に開発が始まったプロダクトです。今ではたくさんの機能を備えている大きなサービスですが、リリース当時は行政手続きの簡略化に特化した機能のみを提供しており、全体の画面の8割以上が入力フォームや一覧画面でした。 この画像はSmartHR 2019年全社キックオフ資料からの抜粋ですが、3年間でどれくらいの機能が追加されたのかを物語ってくれています。 当時のサ
React勉強会のノウハウを紹介します | Recruit Tech Blog
こんにちは！ Air メイトのフロントエンドエンジニアの @sadness_ojisanです。今月から「React 人材をどう育むか」という連載を行います、この記事はその第一弾です。 みなさーん！React 人材の採用はうまくいっていますか？？？私たちはまだまだ足りていません！ そこで最近では、React 人材を登用するために、採用だけでなく育成も試みています。 この連載では実際に行なった育成プランとその効果を紹介できればと思います。 私は社内で 2-30 人規模の React 勉強会の講師をしたり、社外でもプログラミング講座の先生などをやっています。 また、大学院では教育学を専攻していたこともあり、育成はかなり関心がある分野です。 この記事では、React 勉強会を開催しているなか、「この教え方や工夫が効いたよ」といった指導方略や、「受講生はここでつまづいたよ」という経験を紹介します。
jQueryへの依存を外す方法 - dely engineering blog
こんにちは！dely でフロントエンドエンジニアをしている @all__user です。 この記事は dely Advent Calendar 2018 の8日目の記事です。 Qiita: https://qiita.com/advent-calendar/2018/dely Adventar: https://adventar.org/calendars/3535 昨日は、iOSエンジニアのほりぐち（ @takaoh717 ）が「iOS版クラシルの開発からリリースまでの流れ」というタイトルで投稿しました。 tech.dely.jp iOS 版 kurashiru の開発体制の遍歴がよく分かるような内容となっていますので、ぜひチェックしてみてください！ はじめに ここ一年間で Web 版 kurashiru のフロントエンドは Rails から Vue の SPA へと少しづつ置き換えられ
レガシーなフロントエンドコードを整理するためにどう立ち向かったか - Misoca開発者ブログ
2エントリ連続でこんにちは、@mugi_unoです。 名古屋には台湾ラーメンイタリアンという名物があるそうです。 富山県民の私には理解が追いつきませんでした。 フロントエンドでの金額計算処理 さて、Misocaは請求書作成サービスなので、金額計算処理が欠かせません。 フロントエンドも例外ではなく、消費税額や合計額を算出するロジックが存在します。 機能変更が必要になった!! 諸事情により、そのロジックに変更を加える必要が生じました。 長くプロダクトを支えてくれていた存在ですが、内容的にはいわゆるレガシーなコードで、たびたび開発者ミーティングでも課題として挙げられることがありました。 git log で確認してみると、該当コードに対しての機能的な変更は2015年の冬から行われていません。 何が問題だったのか？ DOM操作と計算ロジックの混在 Misocaでは、新しくコードを書く際はVueやRe
Redirecting…
Redirecting… Click here if you are not redirected.
jQueryを卒業したかった僕がReact StaticでReactをイチから学んでWebサイトを作った話 | 株式会社ヌーラボ(Nulab inc.)
Typetalk チームフロントエンドエンジニアの岡藤（@johnykei）です。先日 Typetalk Webサイトリニューアルに伴い、フロントエンドの技術を jQuery から React + styled-components に刷新しました。本記事では、React を用いた Web サイト制作についてお伝えします。 はじめに タイトルにもあるように、僕は今まで JavaScript を書く必要がある時は使い慣れた jQuery を使っていました。 フロントエンドエンジニアという肩書きではありますが、フロントエンドエンジニアという職種は幅広く、僕はどちらかというとページやUIのスタイリングが主な業務で、普段 JavaScript を書く頻度もそんなに高くありませんでした。 最近海外ではそのような業種の人をフロントエンドデザイナーと呼ぶ動きも出てきていますが、jQuery しか使ってい
Webフロントエンドハイパフォーマンスチューニングはサーバサイドエンジニア/デザイナも情報にインデックスをはるために読んでおいたら良さそう - Copy/Cut/Paste/Hatena
フロントエンドの話を学んでいると思ったらTLSハンドシェイクだったりExpiresとかのキャッシュ系ヘッダだったり「例えばGCを避ける」だったりCPUだったりなんかいろいろ学んでいる。あれ？— k1LoW (@k1LoW) 2017年8月17日 Webフロントエンド ハイパフォーマンス チューニング 作者: 久保田光則出版社/メーカー: 技術評論社発売日: 2017/05/26メディア: 単行本（ソフトカバー）この商品を含むブログを見る 私のフロントエンドスペック まずは前提です。こういうスペックの人の感想ということでご了承ください。 主にPHPでWebアプリケーションを構築するエンジニア jQueryから少し脱しているくらい 数年前まではフロントエンドにもステ振りをしていたが、仕事では最近は大人しくPHPなアプリケーションを構築している 業務でもHTML/CSSでデザインしてくれるWeb
The Refactoring Tales - JavaScriptのリファクタリング本を読んだ
GitHub: jackfranklin/the-refactoring-tales 読んだ日付: 2015年1月11日 まだ4章の途中までしか書かれてないですが、ウェブ版は無料で読めてPDF版等は買えるようになるようです(6-7章ぐらい予定) The Refactoring Tales - JavaScript Playground またGitHubにソースが公開されています(ウェブページはまだ反映されてない感じのtypoの修正等がありました) 感想 1,2章はフロントのJavaScriptで、jQuery世界を例にjQueryでべったり書いてしまったものをどうやって分けていくかの話。 1章はとても読みやすくて完成度もあるので読んでみるといい気がします、2章のカヌーセルの話はもっと深くやっても良かったような気がします。 縦に並ぶ$を見かけるとつらい感じになりますが、まずは手が出しやすい場
jQuery + Flux という選択肢 - peroli Developer's Blog
2016 - 05 - 27 jQuery + Flux という選択肢 JavaScript Front-End こんにちは、 SKAhack です。普段はMERYのWebフロントエンドを主に書いています。 今回はMERYのフロントエンドで採用している jQuery + Flux という構成を紹介してみたいと思います。 なぜReactではなく jQuery か 普通はReact + Fluxで語られることが多いですが、MERYでは JavaScript の ソースコード の大半が jQuery に依存しており、簡単には jQuery を捨てられない状態です。 また、Viewの変更をする２つのライブラリを 共存 させるのも良くないですし、MERYのサービス特性上、現時点で1画面を頻繁に書き換えるような処理は少ないこと、ReactがサポートしていないIE8など古いブラウザもサポートしているとい
React勉強会1(2016-05-25) - Dolpenの日記
発端 やりたいと言ったら @mizchi がやってくれることになった。 今回の目標 weapons.json · GitHub メインクエスト : この json を使って、Splatoon のブキを一覧表示する機能を作る サブクエスト : 絞り込み機能を付ける サブクエスト : 検索フォームと一覧部分をサブコンポーネントに分けて、それらを管理するルートコンポーネントに state の更新内容を書き戻す 進捗 割と実践的で、構築しながら説明と言う感じだった。実際 GitHub - dolpen/react-tutorial のコミットログを見た方が何をしたかは分かりやすいのではないかと思うので大胆に割愛。 コンポーネントは何を与えられるべきか React 自体は data => view を担当するのが主機能なので、view を出力するコンポーネントの構築に、この data に当たるもの以
[WIP]これからの生JS & jQueryとの付き合い方 // Speaker Deck
All slide content and descriptions are owned by their creators.
![[WIP]これからの生JS & jQueryとの付き合い方 // Speaker Deck](https://cdn-ak-scissors.b.st-hatena.com/image/square/186eb2a82940b59c5c92c3099669ab595a939682/height=288;version=1;width=512/https%3A%2F%2Fspeakerd.s3.amazonaws.com%2Fpresentations%2Fe8eb376a63b64293987c99a6574d8363%2Fslide_0.jpg)
あなたがReactを使うべき理由 - mizchi's blog
最近フロントエンドでfacebook/reactをずっと使っている。世界的には一部のエンジニアの間で流行っているのだが、国内だとqiitaのタグ等を見てもどうも少ない。みんなもっと使うべきだと思うので、宣伝かねて意見をまとめてみる。 複雑化するデータバインドに対する懸念 MVWのVに対して思いを馳せると、だいたい次のことに行き着く。すなわち、「ある構造体の入力に対して、必ず一意なビューを生成したい」 {items: [1, 2, 3]} を入力とすると、 1, 2, 3のli要素になってほしい。これは単純な例だから問題に成り得ないように見えるが、アプリケーション全体の状態を一つのjsonとして定義し、 そこから常に0から組み立てればアプリケーションの健全性が確保できると考えたことはないだろうか？ 現実の問題 UIのだいたいの状態は遷移で表現される。遷移の差分をプログラマが記述する。jQue
ドラッグ・アンド・ドロップで Rails の一覧表示の順を設定する « ツール工房 覚書
jquery-ui-rails を用いた Todo アプリ作成の覚書です。 JQuery UI Sortable を使ってドラックアンドドッロプでRuby on Railsの一覧表示の順を設定する – @yuumi3のお仕事日記 をお手本にさせていただきました。 環境 - Rails 3.2.8 - jquery-rails 2.1.3 - jquery-ui-rails 2.0.2 Todo アプリの足場を作成して・・・ $ rails new sortable_todo $ rails g scaffold Todo task due:date $ rake db:migrate ドラッグ・アンド・ドロップの前に Datepicker を Due フィールドに表示したいと思います。 joliss / jquery-ui-rails This gem packages the
jQueryプラグイン - Bootstrapを使ったカレンダーを実装 - Zabuto Calendar
Bootstrapを使ったカレンダーを実装するプラグイン「Zabuto Calendar」を紹介します。 jQueryプラグイン「Zabuto Calendar」このプラグインでは、大人気のCSSフレームワーク「Twitter Bootstrap」を使ったカレンダーを実装することができます。 JSON形式のデータを使って、カレンダー上にスケジュールを追加することができます。追加したスケジュールはカレンダー上で色が変わり、クリックすると内容をポップアップすることもできます。便利！ デモでカレンダーの外観を確認してみてください。青色は本日、オレンジはJSONデータによるスケジュールです。スケジュールをクリックしてみてください。なかなかカッコイイですよー。 「Zabuto Calendar」のデモ デモのソース（HTML + jQuery）<!DOCTYPE html> <html> <head
時刻入力に便利な「Timepicker for Bootstrap」
「Timepicker for Bootstrap」は、テキストボックスへの時刻入力を便利にしてくれるjQueryプラグインです。 Bootstrap2版はこちら Datepicker for Bootstrap (別記事) 実装方法 ダウンロード / サンプル (v0.2.6) スクリプト <link href="bootstrap.min.css" type="text/css" rel="stylesheet"> <link href="css/timepicker.css" type="text/css" rel="stylesheet"> <script src="jquery.min.js" type="text/javascript"> <script src="js/bootstrap-timepicker.js" type="text/javascript"> 時刻指定時
期間を指定する場合のカスタマイズ | Workabroad.jp
Twitter Bootstrap使ってるとどうもjQuery UIのカレンダーのデザインが気に食わなくて、bootstrap-datepickerを使う人が多い気がします。jQuery UIは機能が凄いからいいけどね。 で、データピッカーなんですが、ちょっとソースがいろいろあって混乱してしまうので整理します。 Stefan Petre http://www.eyecon.ro/bootstrap-datepicker/ ↓ vitalets https://github.com/vitalets/bootstrap-datepicker ↓ eternicode https://github.com/eternicode/bootstrap-datepicker 多分こんな流れです。 eternicodeのオンラインデモは分かりやすくていい。 期間を指定させる 単一の日付けではなくて、○
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
npmとwebpack4でビルド - jQueryからの次のステップ - Qiita
RailsにjQuery-uiを導入するときの注意 - Qiita
http://hobo-designs.com/2013/05/twitter-bootstrap%E3%81%A8%E4%BD%BF%E3%81%86%E3%81%A8%E3%82%88%E3%81%95%E3%81%9D%E3%81%86%E3%81%AA%E6%97%A5%E4%BB%98%E3%83%BB%E6%99%82%E9%96%93%E5%85%A5%E5%8A%9B%E3%83%87%E3%83%BC%E3%83%88%E3%82%BF/
