[B! jquery][あとで読む] deejayrokaのブックマーク

jQueryを卒業したかった僕がReact StaticでReactをイチから学んでWebサイトを作った話 | 株式会社ヌーラボ(Nulab inc.)

Typetalk チームフロントエンドエンジニアの岡藤（@johnykei）です。先日 Typetalk Webサイトリニューアルに伴い、フロントエンドの技術を jQuery から React + styled-components に刷新しました。本記事では、React を用いた Web サイト制作についてお伝えします。はじめにタイトルにもあるように、僕は今まで JavaScript を書く必要がある時は使い慣れた jQuery を使っていました。フロントエンドエンジニアという肩書きではありますが、フロントエンドエンジニアという職種は幅広く、僕はどちらかというとページやUIのスタイリングが主な業務で、普段 JavaScript を書く頻度もそんなに高くありませんでした。最近海外ではそのような業種の人をフロントエンドデザイナーと呼ぶ動きも出てきていますが、jQuery しか使ってい

deejayroka 2018/03/27

リンク

ReactにするかVue.jsにするか、jQueryだけ触っていたエンジニアがサンプル作って比較してみた - Qiita

ReactにするかVue.jsにするか、jQueryだけ触っていたエンジニアがサンプル作って比較してみたJavaScript Vue.jsReact 今のタイミングでWebサービスを、何か新しく開発しよーって思ったら、フロントサイドをどうしようか悩みますよね？特にVue.jsかReact.jsか... そんな悩んでいるあなたへの記事になります。自分の仕事領域についてあまり普段javascript触ってません触るとしてもjQueryが多いですそんな人が書いた記事だと思って下さい今回作ったもの ReactとVue.jsで簡単なカレンダーを作成しました。 React https://github.com/ykyk1218/react-calendar-sample Vue.js https://github.com/ykyk1218/vue-calendar-sample コンポーネン

deejayroka 2017/12/05

リンク

アニメーションやグラフ等、SVGを使ったJavaScript＆jQueryプラグイン11

2016年11月24日 JavaScript, jQuery, SVG 今やCSSだけでも多彩なアニメーションを取り入れることができますが、JavaScriptとSVGを使うことで、より美しく自由度のきく表現が可能です。今回はSVGを使った、便利なJavaScriptライブラリーやjQueryプラグインを紹介します。 ↑私が10年以上利用している会計ソフト！ラインアート 1. Draw SVG See the Pen Simple usage by Leonardo Santos (@lcdsantos) on CodePen. Webサイト｜GitHub｜デモ SVGのパスを使ってラインをアニメーションさせるためのプラグイン。2kbと軽量です。デモ画面右下の「RETURN」ボタンをクリックして試してみてください。 var mySVG = $('#my_svg_element').draw

deejayroka 2016/11/24

リンク

任意のWebサイトでどのような技術やサービスが使われているかを調査できる・「LargerIO」

LargerIOは任意のWebサイトを調査するWebツールです。URLを指定すると、そのWebサイトで使われている技術やサービス、例えば、jQueryやModernizrなどのJavaScroptフレームワーク、Google FontやFont Awesomeなどのフォントサービス、PHPやRubyなどのプログラム言語、WordPressやDrupalなどのCMS、ApacheやNginxなどのサーバー、といったように従来の調査ツールで調査できる項目は勿論、CKEditorといったリッチテキストエディタやThinkPHP、Pure CSSなどのフレームワーク、mod_pythonやmod_wsgiといったサーバーエクステンションを使っているか否か、TwitterやFacebookなどのSNSで提供されるウィジェットを使っているか等、細かいところまで調査できるようになっています。全世界の技

deejayroka 2016/10/28

リンク

Webデザイナーが一度は読んでおくべきおすすめの本13冊 - LITERALLY

先日、読者の方から「Webデザイン習得するにあたって参考にした本は何か」という問い合わせを頂いたので、回答記事を書こうと思う（遅くなってしまいすみません）。せっかくなので、Webデザインの専門知識に関する本だけでなく、いつもインスピレーションをもらっている本も合わせて紹介しようと思う。参考程度にどうぞ。以下の3つのジャンルについて分けて紹介。 WEBデザインを学ぶための本デザインセンスを磨くための本インスピレーション刺激本 WEBデザインを学ぶための本 1 インターネット技術の絵本振り返れば、いちばんはじめに読んでおけばよかったなと思うのが、この絵本シリーズ。Webデザイン含め、プログラミングを始めた人は「Webデザインがどうやってインターネットに公開され、どうやって人の目に触れるのか」や「今の作業の全体における立ち位置」がいまいち見えなくてモヤモヤすることが多いと思う。HTMLと

deejayroka 2016/10/18

リンク

JSのソースコードが変えられない！困ったときにモンキーパッチで逃げ切る方法

他人が作ったJavaScriptのプログラムを部分的に、でも元のコードを修正せずに対応するしかない…。そんなときにモンキーパッチ。やらなきゃいけないときの対処方法を実例で。たった1つの小さな問題点を除いてきちんと動作する、第三者のコードを使ったことはありませんか？なぜ作成者はこんなやっかいなコンソールログを削除し忘れてしまったのだろう、そのAPIコールがもう1つちゃんとしていればうまくいったのに、と思うことがあるでしょう。こうした場合、メンテナンス担当者に変更箇所を実装させるのは困難（あるいは不可能）です。自分自身でコードを変更しようにも、ソースコードを持っていなかったり、自分でコードをホストしたくなかったりするときはどう対処すればよいか悩みます。さあ、JavaScriptのモンキーパッチの世界を一緒に探検しましょう！この記事ではモンキーパッチとはなにかを説明します。また、第三者が

deejayroka 2016/10/07

リンク

フロントエンジニアが今話題のFirebaseについて語りたい - Qiita

最初に最近、Firebaseについての記事をよく見ます。稚拙ながらもFirebaseについて注目している一人として語りたい。知識不足(特に後述の歴史の認識)のため、駄文乱文あると思います。ご指摘いただけると幸いです。 React + Redux + Firebaseの実装記事を書きました。 Firebase Databse導入のために考えた4つのポイント。NoSQLと真剣に向き合った時ぶつかったことを書きました。 Firebaseとは mBaas(Mobile Background as a Service)の一つで、Googleの買収で一気に知名度が上がりました。今までも、十分使えるものでしたが、2016年のGoogle I/Oの発表で統合プラットフォームとしての風格がムンムン漂ってきました。また、Parse終了の知らせがでるやいなや無料プラン(SPARK)の改変、push n

deejayroka 2016/10/07

リンク

第1回　プログレッシブフレームワーク Vue.js：Vue.js入門 ―最速で作るシンプルなWebアプリケーション｜gihyo.jp … 技術評論社

Vue.jsとは Vue.js（ビュージェイエス）は、インタラクティブなUIを構築するためのJavaScriptライブラリです。Webサイト内のウィジェットや管理画面のダッシュボードといったビュー（view）層に特化しています。設計の特徴としてMVVMパターンに影響を受けています。 Vue.jsは2013年にEvan You氏の個人プロジェクトとして開始、2014年2月にバージョン0.8が正式に公開されます。その後いくつかのリリースを経て、2015年4月にLaravelへの標準搭載決定を機に一気に知名度があがりました。2015年10月に1.0が、2016年10月1日（日本時間）に2.0がリリースされ現在に至ります。 Vue.jsの主な特徴には以下のものがあります。これらによって短期間で実用的なアプリケーションを作成できるため人気を集めています。シンプルなAPIやHTMLベースの平易なテン

deejayroka 2016/10/07

リンク

ここからはじめるReactの基礎の基礎 - Qiita

はじめにこの記事はReactの実装をしたことがない人、JSというとjQueryくらいしかやったことがない人でも理解出来るような内容です。 Reactをはじめるというとチュートリアルからはじめるのが基本かと思いますが、チュートリアルよりミニマムにReactってどんなの？というものを実際に実装して感じようというのが目的です。ただし、npmはインストール済みが前提なのでnpmの準備は各自お願いします。この記事ではReactの概念よりも実装を重要視します。なぜReactが良いのか等は他記事に譲らせて頂きます。 Reactを使うとなぜjQueryが要らなくなるのかなぜ仮想DOMという概念が俺達の魂を震えさせるのか簡単に説明すると、ReactはVirtual DOM (仮想DOM)という概念がキーポイントになり、それによって設計面、速度面に利点があります。特徴としてコンポーネントbaseのU