ES6時代のNode.js
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。情報システム本部の伊藤(@koh110)です。 社内システムの開発、運用を担当しています。 今回、担当しているシステムをNode.js LTS(v4.x)へバージョンアップしました。 それに伴い実施したES6対応の中から3つの事例を紹介したいと思います。 varを撲滅しよう arrow functionを使おう callbackを撲滅しよう varを撲滅しよう varをlet, constに置き換えます。基本はconstに置き換えます。 メリットは以下の点で、コードの品質向上につながると思います。 プログラム中で変更不可である事を明示的に示せる。 誤った使い方をした時にバグとして検出される。 varを利用するとブロック
mermaid.jsが素晴らしいけどなかなか使ってる人見かけないので実例晒す(追記あり) - Qiita
mermaid.jsとは JavaScriptのチャート作成ライブラリです。他にも似たようなのは色々ありますが、これ一本でフローチャート、シーケンス、ガントに対応してるので、個人的にお気に入り。 http://knsv.github.io/mermaid/ サイトの各チャートのページ見ると書き方と何ができるかはわかるので、ご覧あれ。 僕の使い方 JSのライブラリを自分でインポートして何かすることはほとんど無くて(後述の理由からガントだけJSで使ってるけど)、基本的には以下の2つの方法で使ってる。 Haroopad フリーでクロスプラットフォーム(OS X, Win, Linux)なMarkdownエディタ。 v0.13からmermaid.jsがインテグされているので、何もしなくてもそのまま使える。 mermaid.jsのグラフの書き方は、コード表記で、言語をmermaidにしてあげるだけ。
CasperJSで複数ページのタイトル、METAディスクリプション・キーワードをまとめたCSVを出力する - Qiita
var fs = require('fs'); var json = require('./files/src.json'); // URLを配列形式で記載したJSONファイルを読み込む /* データを格納する多次元配列を作成する */ /* 子配列には、title, descriptionなど各データを格納するための空スペース '' を4つ作成 */ /* data[i][0] = url data[i][1] = title data[i][2] = meta description data[i][3] = meta keyword */ var data = (function() { var arr = []; var i, j; var l = json.length; for (i = 0; i < l; i++) { arr[i] = []; for(j = 0; j <
今話題のReact.jsはどのようなWebアプリケーションに適しているか？ Introduction To React─ Frontrend Conference
今話題のReact.jsはどのようなWebアプリケーションに適しているか？ Introduction To React─ Frontrend Conference 外村 和仁（株式会社 ピクセルグリッド） 本記事は、2015/2/21に行われたFrontrend Conferenceの「Introduction To React」の内容を紹介します。 当日の資料は以下にアップされていますので、こちらも参照してください。 Introduction To React // Speaker Deck React.jsとは何か React.jsはFacebook製のJavaScriptライブラリです。 http://facebook.github.io/react/ 公式サイトに、「A JavaScript library for building user interfaces」とあるように、R
初心者でもほぼ無料でJavaScriptを勉強できるコンテンツ16選 -
Photo by dotConferences こんにちは。谷口です。 プログラミングをこれから学ぼうとしている方で、「JavaScriptを使えるようになりたい！」という方は多いと思います。 JavaScriptは実行環境が主にWebブラウザに実装され、動的なウェブサイト構築や、リッチインターネットアプリケーションなど高度なユーザインタフェースの開発に用いられます。（JavaScript - Wikipedia） Webサービスの作成・運用をする機会がある方には必要不可欠なJavaScriptですが、これから勉強を始める方の中には「プログラミング経験ゼロなんだけど、一体どうやって勉強したらいいの……？」と思っている方も多くいらっしゃるのではないでしょうか。中には「エンジニアではないんだけど、仕事でJavaScriptを触る機会があるから覚えたい！」という方や、「初心者だけど、なるべくコス
いま最も注目のライブラリ「React.js」でシングルページアプリケーションを作ってみよう！ 【前編】
対象読者 JavaScriptフレームワーク・ライブラリの選定に悩んでいる方 本格的にJavaScriptを触るのが初めてという方 jQueryでの大規模なフロントエンド開発に限界を感じている方 必要な環境 Node.jsがインストールされていることが推奨です。 React.jsとは何か React.jsは最近注目を浴びているFacebook製のライブラリで、MVCアーキテクチャでいうViewにあたる機能を提供します。 前提として、JavaScriptの世界でMVCのVといえば、紛れもなくDOM（Document Object Model）のことを指します。特に何も意識しないで作った場合、都合の良いDOMからデータを引っ張り出しては別のDOMを書き換えるといった、行き当たりばったりな作りになりがちです。そこで、MVCの考え方を導入することにより、データを画面とは独立した構造体として切り出し
Scala.js ｜ 天下一AltJS武闘会
あなたは、Javascript で開発をしようと思って一歩を踏み出したけれど、 まだできていないという状況ではありませんか？ もしかして、 Scala は知っているけど JavaScript は使いたくない JavaScript は使っているけどメンテナンスがしんどい 型...型... ・・・このような悩みをお持ちではないでしょうか？ このウェブサイトは、これらのお悩みをお持ちのあなたのために作りました。 Scala を JavaScript に変換するツールがあったら、今すぐ欲しい！とあなたがお思いなら、 この先を読む必要はありません。 こちらからお申し込みいただき、このサイトを読む時間を実装にあててください。 さて、 Scala は知っているけど JavaScript は使いたくない JavaScript は使っているけどメンテナンスがしんどい 型...型... このような理由で実装が
これはすごい！3秒でプログラミングが始められるサービス17選 - paiza開発日誌
Photo by Jason Cartwright こんにちは。谷口です。 プログラミングの勉強で「ちょっとあの開発言語の勉強をしてみたいな～」「実際にコードを書いて動かしてみたいな～」という時に、ハードルとなるのが「実行環境の作成」だと思います。 そんな時に役立つのが、書いたコードをブラウザ上で実行できる「オンライン実行環境サービス」です。 今回は、実行環境の手間を省いて「書いたコードをブラウザ上で実行できる無料サイト」を紹介します。 目次 ・複数言語対応系 ・ideone ・CodePad ・paiza.io ・repl.it ・Codecademy ・runnable ・Wandbox ・SourceLair ・JavaScript系 ・JSFiddle ・jsbin.com ・Codepen ・jsdo.it ・PHP系 ・PHPfiddle ・PHP Sandbox ・Write
橋本商会 » node-webkitでNHK Newsを連続自動再生するアプリ作った
あまりにも世情にうといので作った。 NHKのRSSを定期的にチェックして、新着ニュースの動画を連続自動再生する。 とてもテレビっぽい。おかげで4日後にオリンピックが開催されるという事を知れた。 ソースコード https://github.com/shokai/nhk-news-app zipでダウンロード https://github.com/shokai/nhk-news-app/releases node-webkitはネイティブアプリ作成のためにwebkitが改造されたwebブラウザで、HTML/JavaScript/CSSが実行できるだけでなくnode.jsのAPIもそのまま呼び出せる。 つまりjQueryでDOM操作すると同時にnodeのライブラリを使うような処理が、同じプログラムファイルにまとめて書ける。変にブリッジを書く事なくいつものnodeのように require(‘モジュ
node-webkitとは何か
Name : azu Twitter : @azu_re スライドをクリックでスタート、矢印キーでスライド移動、Escで一覧モードへ戻る
HTML5＋CSS3＋JSでネイティブGUIアプリが作れる、node-webkitを触ってみる
こんにちは、古見澤です。 アルバイト時代以来となるので、実に7年ぶりの投稿となります。今後共よろしくお願いします。 久しぶりに技術畑に帰ってきたためブランクを取り戻すのに苦労していますが、鉄板の技術から胡散臭い（褒め言葉）新技術まで、色々なことが体験できる環境は楽しいですね。 さて、今回はプライベートで少し node-webkit を触る機会があったので、その紹介記事となります。 node-webkitとは node-webkitはChromium と node.js ベースで作られた、GUIアプリを動作させるランタイムです。 アプリはHTMLやJavascriptで記述を行い、作ったアプリはLinux、Mac OS X、Windowsで動作が可能です。 配布元：https://github.com/rogerwang/node-webkit node-webkitを利用したアプリケーショ
可視化ライブラリD3.jsの設計が素晴らしすぎる。 | 三度の飯とエレクトロン
最近名前を聞くことが多くなってきたD3.jsを試してみています。 まだ使い始めたばかりですが、D3.jsの設計の素晴らしさに感動しています。 データを与えればグラフが表示されるというような単純なものではないので、敷居が高く感じていましたが、設計を知るほどによく出来ていて驚きます。 D3.jsとは何か？ そもそも、D3.jsとはなんでしょう？ D3.js – Data-Driven Documents D3.jsは、データをブラウザで可視化するためのライブラリです。 単なるグラフライブラリではなく、もっと抽象的な「可視化」を扱うのが特徴です。 抽象的なレイヤーを扱うので、ライブラリと言っても機能より設計が重要で、D3.jsが支持されている理由はその設計の素晴らしさにあります。実際に描画しながら、その設計の違いについて考えていきます。 企業の時価総額と営業利益の関係をプロット 例題として、企業
【初心者向け】GoogleChromeデベロッパーツールの使い方 | ネットマプラス
WEB系の開発をお仕事にしていると、不思議なことにブラウザのデベロッパーツールなしでjavascriptのエラーやデザイン崩れと格闘してるエンジニアの方を見かけることもあります。 しかし、そんな彼らにデベロッパーツールの使い方を簡単に教えると、すぐに使いこなして生産性を上げていきます。 当たり前のように使っている人からすれば「今までどうしてたん？」と思うところですが、そもそも、今までと違うやり方であったり、初めて使うものには強い抵抗を感じるものですよね。 そこで今回は、デベロッパーツールを使ったことのない方を対象に、GoogleChromeのデベロッパーツールを使ってエラーとデザインの確認を行う方法を紹介します。 デベロッパーツールにはいろいろな機能がてんこ盛りですが、全部覚えようとして参ってしまうより、まずはよく使う簡単なものから習得していきましょう。 デベロッパーツールを出す [表示]
Meteor
# Install Meteor npx meteor # Create a new Meteor + React App meteor create happy-chat --react # Navigate to your new project cd happy-chat # Start the development server meteor npm start import { Mongo } from 'meteor/mongo'; import { has, ID } from 'meteor/jam:easy-schema'; export const ALLOWED_EMOJIS = ['😊', '❤️', '😃', '⭐', '🎉']; const errorMessage = `Only emojis ${ALLOWED_EMOJIS.join(', ')}
Node.js チュートリアル | Node ビギナーズブック
本書について 本書は、Node.jsでのアプリケーション開発を始めようとする皆さんに、 ”高度な”JavaScriptについて知るべきあらゆることを解説します。 よくある”Hello World”チュートリアルの、はるか上をいくものです。 ステータス 貴方が読んでいるのは、本書のいわゆる最終版となります。 つまり本書は、間違いが見つかった場合や、 Node.jsの新バージョンにおえる変更点を反映する時のみ、改訂されます。 最終更新日は2012年2月12日です。 本書内のコードのサンプルは、Node.jsのバージョン0.6.10でテストしています。 ターゲット読者 本書は、Ruby、Python、PHP、Javaのような、少なくともひとつのオブジェクト指向言語を理解しており、 JavaScriptについてはあまり経験がなく、Node.jsについては全く経験がないという、 著者と同じようなバッ
「今このときからプログラミングを始めたい」と思った方へのgoogle apps scriptのススメその1 | Project name
先日ドットインストールへ遊びにいってみた。を書いてみたら、なんとドットインストールさんのメルマガにご紹介して頂き、寝ている間に実質開設してから3日とは思えないアクセスがあった。 ありがたしありがたし。 このチャンスを逃すものかと(貧乏根性発揮して)初心者向けにおすすめのgoogle apps scriptの魅力と実際の作成過程を説明するブログを書いてみたい。 ちなみに私もようやく入門したといえる程度の初心者レベルですので、他により効率よい方法があるとは思います。 が、初心者が目にするリアルな工程や面白さをご紹介して、ぜひ4月の自分のような知識まっさらだけど興味があってどうしようと悩んでいる方のためになる記事にできればと思っております。 GASは文系必須スキル。 さて、まずはGASがオススメである理由をその便利さ・気軽さ・習得しやすさの3つの側面から説明してみる。 便利：下手なライフハック
Chrome Dev Editor - フロントエンド開発ならお任せなChromeアプリなプログラミングエディタ MOONGIFT
Webアプリケーションを開発する際にはテキストエディタやIDEを使うのが一般的です。しかし開発してWebブラウザに表示を切り替えて再読み込みして…というのは手間がかかるものです。 そこでWebアプリケーションをWebブラウザ上で開発してしまおうというのがChrome Dev Editorです。JavaScriptだけでなくDartを使った開発にも対応したエディタになります。 Chrome Dev Editorの使い方 こちらがメイン画面です。Chrome Dev EditorはChromeアプリとしてインストールされます。 最初にプロジェクトを作成します。 エディタはハイライトがついたもので使いやすいです。 内部サーバ機能付きです。 GitやChrome Web Storeへのデプロイ機能があります。 Web Starter KitやPolymerをベースに生成することもできます。 Chr
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ReactとFluxのこと // Speaker Deck
Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.
まずは「gulp」を動かしてみよう！ ～セットアップとはじめてのタスク実行
