できる！レスポンシブな javascript Chart.jp で基本の棒グラフ、線グラフ、円グラフを作る。 データラベルも表示できる。円グラフに割合％、ラベルを円の中や外に表示できる。 ガラケーやスマホでも見ることができる。 1. 使用ファイル ｜2. 使い方 ｜3. サンプル 最近、グラフを作るのは、CGI系のフラッシュグラフとは異なり、HTMLへの組み込みが簡単なJavascriptライブラリーが主流になっています。 主なJavascriptライブラリーには、 Chart.js、 Taucharts、 C3.js、 Google Charts、 ccchart(canvasChart)、 amCharts（有料）や Highcharts（有料）などがあります。 その中で、Chart.js（フリー） はシンプルでデザイン性が高くレスポンシブなチャート/グラフを作成可能なJavaScri

こんにちは、okutani(@okutani_t)です。先日、Google Analyticsのデータを整形して表示するツールを仕事で作ってました。 そのときに、「Chart.js」なるものを見つけて使ってみたのですが、なかなかオシャレでよさげだったのでご紹介します。 Chart.jsを使うとWebサイト上でグラフがかんたんに作成できます。特徴としては「フラットデザイン」「HTML5のCanvasを使っている」「IE8対応」「jQueryが不要」などなど。 非プログラマーでも比較的かんたんに設置できるかと思いますので、グラフを使う機会があれば参考にしてください。 では、さっそくChart.jsの導入＆利用方法についてみていきましょう。 スポンサーリンク Chart.jsの導入方法 Chart.jsの導入方法をみていきましょう。下記公式サイトへアクセスします。 LINKChart.js |

グラフを描くとなると、最近ではjavascriptで！？、という記事が増えてきました(私は、python+matplotlibかRでやってました。) 実際にやろうとしたところ、パーツパーツのやり方は色々なページにあるのですが、全部を通してがないかなあ、と感じましたので載せてみました。というか、あれこれやって何とかできましたので、残しておこうと思いました。 データと実行結果のグラフ 元のCSVデータ January, -10.4, -5.5 Feburary, -30.3, 1 March, 3.8, 12.3 April, 5.9, 13.5 May, 9.6, 16.4 June, 12.0, 19.4 July, 16.1, 28.2 August, 20.6, 30.3 September, 17.2, 26.2 October, 15.0, 20.8 November, 5.9,

index.md express実践入門 自己紹介 小川充 mitsuruog フロントエンドエンジニア Javascript, HTML, CSS, Node.js, API設計とか認証とか 2015/5月入社(約半年) はじめに あくまで「俺が考える最強のexpress実践入門」です。 初学者がexpressを攻略する上でのつまづくポイントと、中規模開発をターゲットにしたベストプラクティスを経験ベースでお話します。 おそらく、初〜中級者向けの内容です。 本コンテンツの使い方 express初心者 初学者向けチュートリアル(dotinstallとか)のあとに express経験者 ご自身のコードの見直しに 他の言語の経験者 他の言語の「あれ」は、node.jsでは「これ」のマッピングに (※)中で紹介するコードは抜粋したものであり、そのままでは動作しない場合があります。ご注意ください。

Version 1.91 is now available! Read about the new features and fixes from June. Node.js tutorial in Visual Studio Code Node.js is a platform for building fast and scalable server applications using JavaScript. Node.js is the runtime and npm is the Package Manager for Node.js modules. Visual Studio Code has support for the JavaScript and TypeScript languages out-of-the-box as well as Node.js debugg

Help us understand the problem. What is going on with this article?

npm で [TypeError: Request path contains unescaped characters.] がでたときの対処JavaScriptNode.jsnpm npm http GET https://registry.npmjs.org/coffee-script npm ERR! TypeError: Request path contains unescaped characters. npm ERR! at Agent.request (_http_agent.js:278:11) npm ERR! at TunnelingAgent.exports.request (http.js:52:22) npm ERR! at TunnelingAgent.createSocket (/usr/local/lib/node_modules/npm/node_mod

JavaScriptでは初期化されていない変数には全て「undefined」という値が入っています。 var a; alert(a); //undefinedが入っている これを利用して、変数が定義済みかどうかを判別することが可能です。…が、やり方がいろいろあるみたいなので、まとめてみることにします。 undefinedと比較する if (a === undefined) { alert("aは未定義"); } グローバル変数として、そのまんまundefinedという名前の変数が用意されているので、それと比較するやり方。一番素直な方法ですが、JavaScriptにおいては良くない書き方とされています。 undefinedは予約語ではなく、単なる変数です。だから上書きすることができるし、関数スコープ内で同名のローカル変数を作ることもできます。（ただし最近の処理系ではconst扱いになって上書

空文字判定を行う簡単な方法ですが、JavaScriptでは if 分の中で、空文字を評価すると false になります。 ということで、下記だけで判定が可能です。 var str=""; if ( str ){ alert("空文字でない"); }else{ alert("空文字である"); } ちなみに、[JavaScript] オブジェクトがnullやundefindでないか評価する。 - うなの日記 を参考にさせてもらったところ、値ごとでifの評価をすると以下のようになるようです。 値 :ifで評価した結果 Object :true undefined:false null :false 0 :false 1 :true -1 :true ""(空文字列):false "a" :true 配列 :true ハッシュ :true 例えば0かどうかを判断するときに変数だけで評価できるなど

ifで評価すれば一発で判定できます。 if ( !target ) { ... } // 以下のようにはしなくてもいい。 // if ( target == null || target == undefined ) { ... } 値ごとのifでの評価結果は次の表の通り。空文字列や0はfalse扱いなので注意。 値 ifで評価した結果 Object true undefined false null false 0 false 1 true -1 true ""(空文字列) false "a" true 配列 true ハッシュ true 確認してみます。 var stdout = document.getElementById("stdout"); // オブジェクト / null, undefind は false stdout.innerHTML += "null is " + (

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

全国5000人のエンジニアをやめて寿司職人になろうと思っているみなさんこんばんは。 前回までスライド共有用のアプリケーションを趣味(リハビリ)で作っていたのですが、折角なのでデスクトップクライアントも作ってみました。 構築にはElectronを使ったのですが、結構簡単にできたので記録としてまとめておきます。 Electronって何？GitHubが開発するクロスプラットフォームで動作するアプリケーションを開発するためのフレームワーク。コードの記述はHTML5とNode.js。その範囲であれば既存のWeb開発技術が使いまわせる。例えばjQueryとかAngularなんかを使うのも可能Chromeブラウザのオープンソース版のChroniumのエンジンを内蔵例えばAtom・Visual Studio Code・Slackクライアントや、日本だとKobitoあたりがメジャー作り方あちこちに記事があが

仕事や生活に役立ついろいろな商品をおもしろおかしく体験レビュー！書類管理からサーバー、プログラム、ゲームの話題、子育てグッズなんかも。

はじめに 技術的に「濃い」記事が多いTech-sketchですが、逆にあっさり系の記事が不足しているため、気軽に読める記事を書いてみようと思います。 JavaScriptを使ってブラウザ上で動く簡易ツールを作ってみませんか？ 簡易ツールを作りたい！ 同じツールを実現する場合でも、幾つかの方法があります。 1. C#などでクライアントアプリを作成 メリット： 自由度が高く、ファイルの読み書きやネットワーク通信も可能 ツールの見た目をOS標準に合わせるなど、リッチに出来る 高速動作 デメリット： 各ユーザ毎にダウンロード、インストール（or 解凍）してもらわないといけない ClickOnceで対応可能だがあまり知られていない・・・ ネットワーク通信などを実装しようとするとそれなりに手間がかかる 開発環境が無い場合、インストールの手間が発生する 2. Webサーバ上で動作するアプリを作成 メリ

スコープとは、変数の有効範囲のことで、プログラムのどの場所から参照できるかを決める概念です。 スコープの種類 JavaScript のスコープには、グローバル変数とローカル変数の 2 種類あります。 グローバル変数 ローカル変数 関数の外（トップレベル）で宣言した変数 関数の中で宣言した変数, 関数の仮引数 プログラム全体から参照できる その関数の中でのみ参照できる ブロックスコープは存在しない Java などの言語では、if や for などの {} で囲まれたブロックごとにもブロックスコープがありますが、JavaScript には存在しません。 JavaScript でどうしてもブロックスコープを使いたい場合は、with 命令を使う方法や、無名関数を定義と同時に呼び出すなどの方法で、擬似的にブロックスコープを作ることは可能です。 補足 : let を使うとブロックスコープがつくれると教

バッチのまとめTOPへ WSHでプログラムの「再利用」をしたい場合，下記の３つの方法がある。 単にコピペする。　　←面倒 文字列として読み込んで eval() する。　　←制限がある※後述 WSF形式にする。　　←これがベスト ※後述 WSHと同じくWSF（Windows Script File）形式のバッチも，ダブルクリックするだけで実行できる。 しかし，なぜ eval() を使う方法ではだめなのか。 バッチをライブラリ化したい 自分が作った .js ファイルを，次からWSHのライブラリとして使い回せたら便利だ。 JScript.NET だったら import で名前空間を作れるのだが，WSHにはそういった文が無い。 JScript.NET　名前空間とライブラリ http://homepage3.nifty.com/aya_js/JSc... このため，「外部の js ファイルを文字列と