JavaScript,jQueryの爆速コーディング、デバッグ方法論の勧め～実践向け逆引き(windows,chrome向け)～ - Qiita
※2017/4/21にオンロード時のデバッグ方法8を追記しました！ こんにちは！エイチーム引越し侍の加藤です！ みなさんJavaScript書いてますか？ console.logめっちゃ使うよねーって人は目からうろこのデバッグ方法を、 ケース毎に紹介していこうと思います。(僕はconsole.log使いません) サーバーにデバッグ用のコードをアップロードすること無いので、 消さずに意図に反してリリースしてしまう危険性がないのもお勧めです。 前提知識 F12で出てくるデベロッパーツール(Elements, Console, Source, Network)の知識 Ctrl+Shift+Fで外部ソース(js,css)に対して一括検索ができる HTML、CSSはElementsから直接修正⇒確認ができる jsはSourceから直接修正できる(Ctrl+Sで保存したらその状態で実行できる) jsは
私たちはなぜReactではなくVue.jsを選んだのか | POSTD
Qwintryチームは最近、既存のすべてのプロジェクトのフロントエンドをVue.jsに移行しはじめました。新しいプロジェクトでもVue.jsを使います。 レガシーなDrupalのシステム（qwintry.com） ゼロから新しく書きなおすqwintry.comのブランチ Yii2で動くb2bシステム（logistics.qwintry.com） その他、比較的小さめのプロジェクト（ほとんどは、PHPとNode.jsでバックエンドを構築しているもの） プロジェクトの規模についていうと、 Qwintry は世界中で約50万人の顧客が使っています。アメリカとドイツに倉庫を持っていて、アメリカ国内 最大の郵送先 のひとつで、東欧や中東への出荷に注力しています。Qwintryは、アメリカのオンラインストアでグッズを購入する人たちのためのツールです。私たちの倉庫に届いた荷物をコントロールパネルで管理で
Vue.jsから手軽に始めるJavaScriptフレームワーク - Qiita
Vue.jsはそのまま使ってもよいですが「自分(プロジェクト)に合ったフレームワーク」を見つけるのにも向いています。 これは、後発フレームワークだけあり各フレームワークの特徴を意識した設計がなされているためです。他の著名なフレームワークとの特徴を比較した文書もあるので、こちらをチェックしながら導入を検討するとよいと思います。 そのため、以下はVue.jsの紹介と他フレームワーク(Knockout.js と Angular)へのステップという2セクションに分けて紹介していきたいと思います。 JavaScriptフレームワークの導入を行いたいがこの選択は慎重にいきたい、という状況であれば最初にVue.jsを試金石としてみて、効果的と感じられる機能からAngularやKnockout.jsに流れていくというのは十分ありだと思います。 2016/06: Vue.jsの1.x系に合わせて記述・サンプ
Facebook公式のcreate-react-appコマンドを使ってReact.jsアプリを爆速で作成する - Qiita
新規に作るReact.jsプロジェクトの、新しい始め方について書きます。スターターキットの代わりにどうぞ。 React.jsのひな形を簡単に作れるcreate-react-appが公開されました (2016/07/22) Launching create-react-app, a no config getting started experience, #nomorejsfatigue https://t.co/fqVWgn7w5t — React (@reactjs) July 22, 2016 Facebook(React.js開発元)がきょう、React.jsアプリを素早く作成するコマンドラインツール、create-react-appを公開しました。 公式ブログ記事: "Create Apps with No Configuration" GitHub: facebookincub
小さいことはいいことだ。小さいグラフに特化したフリーのjsチャートライブラリ３選。 - webhack / 猫とウェブ技術が好き
2016 - 07 - 21 小さいことはいいことだ。小さいグラフに特化したフリーのjsチャートライブラリ３選。 d3 Javascript jQuery SVG ウェブデザイン 写真はうちのみーこ。 スマホでも見やすいグラフを使う機会があるプログラマ・デザイナーの皆さまへ。小さいグラフを綺麗に描画できるJavascriptのライブラリを紹介します。 1. Peity http://benpickles.github.io/peity/ HTMLの要素をSVGの小さいチャートに変換してくれる使い易いライブラリです。これだけでパイチャートを描画できます。 <span class="pie">1/5</span> <script> $("span.pie").peity("pie"); </script> jQueryに依存 SVGで描画 ライブラリ自身も小さい 2. MetricsGraph
Webブラウザで高速な演算を可能にする低水準言語asm.jsと、WebAssembly詳解ーJavaScript が動く仕組み
Webブラウザで高速な演算を可能にする低水準言語asm.jsと、WebAssembly詳解ーJavaScript が動く仕組み 清水智公（Mozilla） Webブラウザの上で動作するアプリを書くための言語、といえば何が想起されるでしょうか。Flash、Sliverlight、Java、さまざまな言語が利用されてきましたが、やはり今のメインストリームはJavaScriptでしょう。 JavaScriptはさまざまな言語の特徴を併せ持つ動的言語で、Web技術の発展とAPIの整備の結果、Virtual Reality(VR)や画像認識、DAW(Desktop Audio Workstation)といった、少し前まではネイティブでの実装しかありえなかった種類のアプリケーションもWebブラウザをランタイムとするJavaScripで実装されるようになってきました。 そのようなアプリの代表例がゲームで
ReactでTDD（テスト駆動開発）を始めよう : 環境構築からテスト作成、機能実装までの詳解ガイド | POSTD
最小限の設定のTDD手法を使い、「何をテストすべきか？」から、よくある落とし穴の避け方まで、Reactコンポーネントをテストする方法を学びましょう。 導入 まず、 React を触ったことがあり、更にはいくつかのテストも書いた経験があるとしましょう。それでも、コンポーネントをどうテストするのが最善なのか、よく分からないかもしれません。どこから始めるのでしょう。具体的には何をテストすればよいのでしょうか。 いくつかのReactコンポーネントは簡潔過ぎて、そもそもテストが必要なのかすらはっきりしません。 AngularからReactに乗り換えた 人なら、テストには愛憎のような思いがあるかもしれません。 確かに Angular にはテストを支援するツールがたくさんありますが、同時にテストを書くのが難しくなる可能性があります。冗長ながら省略できない定型コードが多々ある上、 $digest の呼び出
JavaScriptでグラフ描画入門！全８個のライブラリをコード付きで一挙に解説！ - paiza times
どうも、まさとらん（@0310lan）です。 今回は、JavaScriptを使って「グラフやチャートを描きたい！」とか、「さまざまなデータを可視化させたい！」という人にオススメのJSライブラリをご紹介しようと思います。 また、すぐに使い始められるように、ミニマムな構成の「サンプルコード」も合わせて掲載しているので、自分に合ったライブラリを使う取っ掛かりになれば幸いです。 ■Chart.js 【Chart.js】 最近、活発にバージョンアップをしている「Chart.js」は、すべてのグラフが自動的にアニメーション表示されるユニークな仕掛けを持っており、シンプルで理解しやすい記述が出来る点も魅力です。 グラフの種類は少ないものの、モダンブラウザ＆レスポンシブ対応で、あまりカスタマイズせずに「デフォルト」のままでも手軽に使えるでしょう。 【 基本の書き方 】 「chart.js」ファイルは、公式
phiary
phi I'm a Game Programmer and Frontend Engineer passionate about programming education. Math / C / C++ / C# / JavaScript / HTML5 / CSS3 / Python はじめに 「webpack インストールしといてー」, 「gulp 導入して watch しながら開発してー」, 「React だから ES6 でコード書いてー」 最近こんな会話が当たり前のように現場で飛び交っています. フロントエンドの開発者には HTML, CSS に特化している人 (coder, markup engineer) JavaScript は得意だけど CSS はちょっと弱い人 (javascripter) HTML, CSS, JavaScript 全てを統べる者 (frontend
JavaScriptにフレームワークが必要な理由 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? JavaScriptにはむしろもっと抽象化がもたらされるべき - Qiitaという記事で、もう少し踏み込んだ話を書いてみました。 某所でReact.js界隈の人に聞きたいというフレームが発生したのだが、はてなブックマークでコメントしたらIDコールされたので、反論をここに書くことにした。(最近は技術系記事はQiitaにしか書いてないので)。 あくまで僕が考えるなので、JavaScript界の人達が本当はどう思っているかはわからない。そもそもJavaScriptを本格的にさわり始めたのごく最近なので、JavaScript界では異端かもしれな
TypeScriptを使った方がいいケースとは？ | POSTD
去年の夏、私たちは大量のコードベース（18,000行以上の コード行数 ）をJavaScriptからTypeScriptへと変更しました。この移行作業を通じて、両者の相違点や類似点について大いに学び、TypeScriptの優れたユースケースや、TypeScriptを使うべきではないケースなどについて考えてみました。 型システムとは補助輪のようなものです。転倒防止してくれる代わりに、遅くなり、操作性が制限されます。 TypeScriptのユースケース コードサイズ ：ソースコードが膨大である場合、また複数の人がプロジェクトに従事している場合、型システムは明らかなエラーを防ぐのに役立ちます。 特に SPA の場合は当てはまります。誰かが変更したコードが他の人のコードを破損させてしまう可能性があるなら、何らかの安全機構を持つ方がいいでしょう。TypeScriptの トランスパイラ は明白な誤りを
TypeScriptでのフロントエンド開発環境作成総まとめ - $shibayu36->blog;
これまで自分のブログで、TypeScriptを使ったフロントエンド開発環境についてブログをいくつか書いてきた。ひとまずこの辺りで、TypeScriptでフロントエンドを開発するための最低限の環境を構築できるようになったので、総まとめとしてブログエントリを書いておく。 今回のサンプルコードは https://github.com/shibayu36/typescript-project-sample/tree/4653cd002eef3ee1946a2ca1da344e0076b2844f に置いたので参考に。 これまでの記事 EmacsでTypeScript環境を整える - $shibayu36->blog; JSをbrowserifyでビルドし、ライセンスコメントを適切に残す - $shibayu36->blog; gulp + browserify + tsifyを利用してTypeSc
[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)
いまどきのJavaScript事情とAngular2のはなし - UUUMエンジニアブログ
こんにちは、タナカです。 先日Angularのカンファレンスに参加させていただきました。 Angular2はもちろんですが、JavaScriptの進化についても興味深かったです。 本日の社内勉強会ではカンファレンスで得た情報を含めたいまどきのJavaScipt事情について共有させていただきました。 フレームワークはMVCからコンポーネント指向へ 一昨年リリースされたReat+Fluxが人気となり、フレームワークの注目はMVCからコンポーネント指向に変わってきました。 W3C標準化を進めているWeb Componetsにも追い風になっています。 また、昨今話題のマイクロサービスアーキテクチャーとも相性がいいです。 Web Comonentsのイメージ、各画面部品がコンポーネントとなる 引用元 Virtual DOMが流行 こちらもReactの影響ですがVirtual DOMが流行しています。
作業自動化のための Node.js 入門 - ほんじゃーねっと
これまでいくつかの記事でNode.jsを使ったスクリプトを載せてきたが、 自動化のためのスクリプトを書いて動かす環境として Node.jsは手軽だし速いし色々ライブラリは揃ってきているし なかなか良い環境だと感じている。 Web系の仕事をしていればJavascriptはある程度親しみのある言語だろうし、 GruntやGulpのようなWeb関連作業を自動化する 機能満載のタスクランナーまで用意されている。 実行環境もインストーラをダウンロードしてインストールすれば パッケージ管理ツール付きで入手することができるので、 すぐに開発を始めることができる。 非同期処理が得意なサーバアプリケーションを作るための環境として 紹介されることが多いけど、この手軽に導入できて Javascriptでサクッとアプリが作れるところだけでも十分に価値があると思う。 ノンプログラマが仕事を効率化するためにプログラミ
React.js meetup #3 を開催しました - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは、kintone プログラマの前田です。 2月23日(火)サイボウズ東京オフィスで React.js meetup #3 が開催されました。今回はこのイベントの各セッションの内容を簡単にご紹介します。なお、当日の様子は togetter でもまとめられています。 React.js meetup とは その名の通り React についての meetup で、今回は3回目になります。当日は80人を超える参加者で大変盛り上がり、React の注目度が感じられる meetup でした。 Evolving Complex Systems Incrementally 最初は @cpojer さんによる発表から始まりました。JavaScript をモダンなコードに変換するための jscodeshift を紹介する話だったと思います。全編英語で内容をすべて把握できたわけじゃないのですが、書き方が
React.js meetup #3 - 資料一覧 - connpass
「React.js meetup #3」の資料一覧です。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フロントエンドエンジニアが暇なときにやると良いかもしれないこと - Qiita
ReactとLoopbackことはじめ / React.js meets Loopback
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
