JSHint入門 - JSHintを使ってJSコードの信頼性を高める - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
2016年を振り返って、 HTML, CSS, JavaScript の書き方を変えたところ
2016年のブラウザ事情の進展に伴い、実務で HTML, CSS, JavaScript の書き方が変化した部分を列挙してみます。あくまで代表的なもののみです。 2016年1月に IE 8 のサポートが終了しました。 html5shiv.js の読み込みが不要になった SVGが（PNGによる代替画像を用意することなく）使えるようになった video要素、audio要素が使えるようになった ::before, ::after 擬似要素をダブルコロンで書けるようになった :not 擬似クラスが使えるようになり、例えば一行テキストエリアのセレクターが input:not([type]), input[type="text"] で正確に表せるようになった addEventListener(), getElementsByClassName(), String.prototype.trim, Arr
ESLint 最初の一歩
We're excited to announce that ESLint v6.0.0 has been released: https://t.co/EO4ZrZIMYM — ESLint (@geteslint) 2019年6月22日 ESLint は JavaScript のための静的検証ツールです。コードを実行する前に明らかなバグを見つけたり、括弧やスペースの使い方などのスタイルを統一したりするのに役立ちます。同様のツールとしては JSLint, JSHint 等があります。 ESLint の特色は、 すべての検証ルールを自由に on/off できる 自分のプロジェクトに合わせたカスタムルールを簡単に作れる 豊富なビルトイン ルール (5.0.0 時点で 260 個) に加えて、たくさんのプラグインが公開されている ECMAScript 2015 (ES6), 2016, 201
jsでTDD！MochaとChaiとsinon.js入門 - lxyuma BLOG
※この記事は社内勉強会向けの資料の下書きです。書きなぐりの下書きで見直すと最後の方の文書がヤバいので、いつか書き直します。読み辛い所は申し訳ないです。 概要 TDD テスト自動化とTDDを整理 TDDとBDDの違い Test Framework in javascript QUnit/jasmine/mochaについて、違いやメリデメを知る mocha 基本的な書き方 アサーションライブラリのメリデメを整理する chai 記述形式の違い整理 基本文法 sinonjs spy stubs mock TDD Test Driven Development テスト駆動開発 by ケントベック 特徴 xUnit系/BDD系のテストフレームワーク使う テストするコードも実装 テストファースト 実装の後にテストするのではなく、テストを先に書いて実装する サイクル Red(失敗) => Green(通過
2017年、新規にJavaScriptを書くならどんな設計をするか｜デロイト トーマツ ウェブサービス株式会社（DWS）公式ブログ
この記事はJavaScript Advent Calendar 2016の記事です。 今回は、2017年、新規にJavaScriptを書くならどんな設計をするか、というテーマで書いてみようと思います。2017年といっても、しばらくはこんな感じのアーキテクチャでやってきましたので、どんな構成でJavaScriptを設計してきたかという方が正しいかもしれません。基本的にはSPAをベースとしています。 また、最新のイケてる技術バリバリ使ってやるぜ、というよりは、堅牢で、はやりが変わってもメンテができるということを意識してみました。 DOMのレンダリング Virtual DOMを代表とした、DOMのレンダリングを行うライブラリをなにか採用します。特に理由がなければReactでいいと思います。Virtual DOMではありませんが、AngularでもDOM管理においてはさほど違いはありません。この2
KUTE.js Core Engine Examples | Javascript Animation Engine
KUTE.js core engine can animate by itself a great deal of CSS properties as well as scroll. You can do it all with native Javascript without libraries like jQuery, but before we head over to the more advanced examples, let's have a quick look at these two basic examples here. Note: the examples are posted on codepen. Basic Native Javascript Example When developing with native Javascript, a very ba
GoogleアナリティクスでJavaScriptエラー情報を収集する (ときどきGoogleタグマネージャ) - Qiita
###目的 Googleアナリティクスを使ってみます。 ユーザー端末で出現しているJavaScriptエラーを収集します。 JavaScriptエラー情報をレポートとして表示します。 ついでに、Googleタグマネージャも使ってみます。 ###お役立ちどころ 端末、環境によってJavaScriptエラーが出たり出なかったりする場合に有効です。 ユーザーの端末で発生しているエラーを収集、その他OSなどの情報も取得できます。 情報を整理して表示されるので、分析に役立ちます。 ##用語の確認 ####Googleアナリティクス 今まで見えなかった情報を見える化します。 いろいろなものにイベントをつけて、情報収集します。 クリック、例外発生、ページの表示などにイベントをくっつけられます。 イベントを通ると情報がGoogleアナリティクスサーバーに送られます。 情報をもとに分析、解析、レポート作成を
作図系ツール・ライブラリまとめ
diag.md シーケンス図とかフローチャートをしごとで描画することになった場合、 テキストから生成できたら楽なので、それ系のツールまとめ GraphViz http://www.graphviz.org/ C製 Doxygen, Moinmoinなどと連携可能 ブロック図、クラス図、ネットワーク図など PNG, SVGなど 出力可能形式一覧 JavaScript（Emscripten）版もある。リアルタイムプレビュー出来て便利 https://github.com/mdaines/viz.js PlantUML Java製 シーケンス図, ユースケース図, クラス図, アクティビティ図, コンポーネント図, ステート図, デプロイ図, オブジェクト図などめっちゃたくさん作れる PNG, SVG, LaTeX, ASCII出力 なんとワイヤーフレームも作れる。アイコンとかも入れられる。 オ
JavaScriptライブラリ「clmtrackr」でお手軽フェイストラッキング - ICS MEDIA
フェイストラッキングという技術を使うと、画像から顔のパーツの位置や大きさを特定できるようになり、静止画やアニメーションを重ねるといった演出を加えられます。 フェイストラッキングの技術は昔からありましたが、高度な画像解析の知識が必要なため導入するにはハードルの高いものでした。今回は、JavaScriptライブラリを使って、HTMLでフェイストラッキングを実現する方法を紹介します。 ウェブテクノロジーでフェイストラッキングに挑戦しよう ウェブテクノロジーで簡単にフェイストラキングを実現するには、JavaScriptライブラリ「clmtrackr」が挙げられます。このライブラリでは、負荷が高いフェイストラッキングの処理をWebGLで行っています。ライブラリのGitHubページではさまざまなデモが用意されています。 ▲画像から顔を検出しているデモ JSライブラリclmtrackrで画像や動画の顔の
2017年に注目しておきたい、JavaScriptのライブラリのまとめ | コリス
数多くあるJavaScriptのライブラリの中で、どれを勉強すればいいか判断することはなかなか難しいものです。いくつかのライブラリは放置され衰退し、またいくつかは急速に成長し、広範囲に採用されることがあります。 jQueryやReactは多くの人が知っているでしょう。 2017年に注目しておきたい、急成長しているJavaScriptのライブラリを紹介します。 D3.js ビッグデータは成長産業で、データ ビジュアライゼーションも同じくらい重要になっています。グラフ作成やマッピングのライブラリはたくさんありますが、D3.jsほど目立つものはほとんどありません。このJavaScriptライブラリはSVGやCanvasの要素と連携して、Web上のグラフ、チャート、動的なビジュアライゼーションをレンダリングします。 D3.jsは完全に無料で、JavaScriptで構築された最も強力なビジュアライゼ
Node.jsの開発を超速化するGitHub連携 三種の神器 - teppeis blog
Node.js Advent Calendar 2013 - Adventar 9日目です。 あまりネタを用意する時間がなかったので、GitHubにNode.jsのリポジトリを置いたりnpmにパッケージを公開したりしたときに便利な定番サービスを3つ紹介します。 Travis CI Coveralls David タイトルは釣りですが、特にTravisとCoverallsは一度体験すると離れられないぐらいほんとにlife changing。コードをpushしたらブランチのビルド結果をプルリクに表示してくれたり、カバレッジ結果をコメントで書き込んでくれるので、それを見ながらコーディングを進めていけます。これが無料なのは意味不明なぐらいの神です*1。 サンプルコードはこちらのプロジェクトで見てください。 Github: https://github.com/teppeis/fixclosure
Node.js + Express 4.x + MongoDB(Mongoose)でRESTfulなjsonAPIサーバの作成を丁寧に解説する．+ テストクライアントを用いたAPIテストまで - Qiita
Node.js Advent Calendar その2 http://qiita.com/advent-calendar/2015/nodejs2 Node.js Advent Calendarはこちら! http://qiita.com/advent-calendar/2015/nodejs こちらは1日目の記事です! RESTfulなAPIサーバって良く聞きますよね． 実際の開発でも，クライアントサイド，サーバサイドと作業を分担して行う事が多いと思います． 同様な記事は多々あります． しかしながら，具体的なコードへの言及や実行方法の確認などが甘いものも多く，初心者が作成する際には「結局どうすりゃ作れるんだよ」と途方に暮れる事も多いかと思います． この記事では2つの目標を建てました． 「APIサーバ作成初心者がNode.js + Express + MongoDBでのRESTfulAPI
Nodeにおける初のオブジェクトデータベース: Realm Node.js
Realmではこれまでモバイルデベロッパーにフォーカスして Realm Mobile Database をSwift、Objective-C、Java、XamarinとReact Nativeに対して開発し、オープンソースとして提供してきました。本日、完全に新しい挑戦としてRealm Node.jsをリリースします。Nodeにおける初の真のオブジェクトデータベースです。本日から無料で完全にオープンソースとしてリポジトリが公開され、NPMを用いて npm install --save realm を実行するだけで利用できます。 これまで何年もの間、モバイルデベロッパーのみなさまから、サーバーサイドで動作するRealmが欲しいという本当にたくさんのご要望をいただいていました。長い間タスクリストに残ったままで、優先度は高くありませんでした。しかし、その状況は Realm Mobile Platf
クライアントとサーバの両方で使える JS コードの書き方 - Block Rockin’ Codes
追記 11/12/25 Bi ってそんなに一般的ではない、 Both-Sides JavaScript の方が、ということでまた変更しました。(side でなく side's') 11/12/04 Both Side JavaScript は変ということで、 BSJS=Bi-Side JavaScript に変更しました。 本文 CSJS と SSJS で両方同じ言語で処理が書けるメリットの 1 つとして、 書いた処理の共有があげられます。 (そこにメリットを感じない人もいるかも知れませんが。) 例えば Validater を共有 クライアントの状態をサーバで再現 などがあります。前者はそのままですね。 受け取った入力のバリデーションはサーバでは必須で、フィードバックを速くするためにクライアントでも同じように行う場合があります。 今まではサーバで書いたバリデーションと同等のものを JS に
webpackを使い倒す - Thujikun blog
本エントリーJavaScript Advent Calendar 2014 7日目の記事になります。 webpackとは 概要については最近いろんな方が書いてるいるのでそちらを参考にしていただければつかめるかと。 全部のせRequireJSっぽいWebpackを使ってみた。 RequireJS等はもう古い。WebPackとは？ ようはナウいフロントエンドの依存解決ツールですね。 っていうネタで書こうと思っていたら、昨日yutaponさんが既に書いていたりするので（gulp.jsを使ってフロントエンドのビルドをする【webpack, stylus】）、いいところはパクリ参考にしつつ、もうちょっとwebpackに突っ込んだ内容を書いてみようと思います。 Options entryとoutput 簡単に試すときはentryは1ファイルだけ指定できればよいですが、実際にプロジェクトで使うとなると複
Node.jsのClusterをセットアップして、処理を並列化・高速化する | POSTD
Node.jsが多数のイベントの非同期な処理に長けていることはよく知られていますが、それが単一のスレッドで行われていることを多くの人は知りません。Node.jsは実際にはマルチスレッドではないので、リクエストは全て単一スレッドのイベントループで処理されているだけなのです。 そこで、Node.jsクラスタを使って、クワッドコアプロセッサの能力を最大限に引き出しましょう。コードの複数のインスタンスで起動し、さらに多くのリクエストを処理します。少し難しく思えるかも知れませんが、Node.js v0.8で導入された cluster モジュールを使えば、実はとても簡単です。 もちろん、これは、作業を別々のプロセスに分割することのできるアプリならどんなアプリにでも役立ちますが、webサイトのような多くのIOリクエストを処理するアプリには特に重要です。 残念ながら、並行処理は複雑なので、サーバ上でのアプ
Node.js、Socket.IO、MongoDBでリアルタイムWeb
Node.js＋Socket.IO＋MongoDB こんにちは！ 著者は、マインドフリーという会社でNode.jsを使ってWebアプリなどを作成している。この連載では、最新Webテクノロジを使った研究開発の事例や実績を発信する弊社のサイト“Tech Release”のリニューアルで培ったNode.jsに関する知識を分かりやすくお伝えする。 Tech Releaseは一見、普通のブログに見えるが、実は記事の更新内容がリアルタイムにView画面に反映されている。管理者が、記事の文章（データ）に変更を加えると、その記事を見ている人にもページをリロードせずに、リアルタイムに文章（データ）が変化していく。 このUXを実現するために開発したシステムが、REALTIME BLOG ENGINE「REABLO」というエンジンだ。「REABLO」はNode.jsとSocket.IO、MongoDBを使用して
レトロエンジニアのための近代Webフロントエンド事情 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? フロントエンド開発という言葉があちらこちらから聞こえてくる。 「反対語はバックエンド開発だから、サーバとかCUIじゃない、アプリとかGUIあたりのことを指す広い意味の言葉だよね。」 ・・・とか思ってたらとんでもない。 世の中ではJavaScript界隈を限定している風な使われ方をしている。 私のような C/C++ メインのレトロエンジニアは肩身が狭くなるばかりである。 本文は、近年のWeb技術に追いつこうと調査した結果のメモ書きである。 n番煎じの内容だが、Web業界にいない人間の視点 なので、私と同類のレトロエンジニア等、一部の人には
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://qiita.com/inoinojp/items/e368589c7787823dce4c
Redirecting to jqlang.github.io