WebPackを使ってJavaScriptを効率的に書くチュートリアル【入門編】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
先日Developers Summitデビューしました。こんにちは、先生です。 前回公開した記事「エンジニアがいい感じにフロントエンド開発を爆速化できる環境構築の手順」の反響が大きかったので、そこで使われているWebPackというModule Bundlerをもう少し深く掘り下げていきたいと思います。 WebPackとは WebPackは静的なファイルの依存関係を解決しつつ結合したり分割したりするツールです。非常に多機能でカスタマイズの幅が広いのが特徴です。 http://webpack.github.io/docs/ 個人的な経緯ですが、require.js -> Browserifyを経てWebPackに落ち着いたところです。 WebPackはnpmを使ってインストールします。 npm install webpack -g ※ npmが使えない方はまずNode.jsをインストールしてく
Front-end with Node.js - Node学園祭 2014
Node学園祭・初参加 初参加だったんですが、ビギナー＆フロントエンド向けのNode.jsツール系セッションを担当させていただきました。なんかめっちゃ緊張した･･･。 参考リンク集 1. Package manager npm Bower npm とフロントエンドのパッケージ管理の未来 ::ハブろぐ The npm Blog — npm and front-end packaging Npm Tips · fiveisprime npmのあまり知られてない機能 10選 - from scratch npm-shrinkwrap Bower Resolutions - Jake Trent 2. Task runner Grunt: The JavaScript Task Runner gulp.js - the streaming build system Node.js の Stream
Node.js良記事まとめ(随時更新) - Qiita
2015/09/25 追記 2014/10/08 チュートリアル追記 2015/08/24 大幅加筆修正 はじめてのかたに http://ameblo.jp/ca-1pixel/entry-11476850674.html 特徴、「なぜいま注目されているのか」など 背景がわかりやすく書いている。とてもわかりやすい。 デメリット、問題点など http://qiita.com/hshimo/items/156249ec8e6dbf75205a Qiitaの記事です。 環境構築なら http://liginc.co.jp/web/programming/node-js/85318 nvmのインストールから簡単な使い方まで。 環境構築の良記事はたくさんあるけど、とりあえず ここみておけば問題ない。 使い方やノウハウ http://blog.asial.co.jp/1231 Node.jsでこんなこ
Node.jsエンジニアなら2014年内に知っておきたいPromise入門 | Tokyo Otaku Mode Blog
Promiseは非同期処理をベースにした並列処理の実装方法の一種です。Promiseでは並列処理の各タスクが必ず1回実行されることが保証され、タスクとタスクからの結果を取得する処理を分離することできます。また、タスクの並列処理／直列処理をユーザーが自由に制御することができます。 ECMAScript Language Specification 6th EditionにPromiseが追加されたことから、しばらくの間JavaScriptの非同期処理に関する話題の中心はPromiseになると思われます。 Node.jsでも既にPromise対応したモジュールも多く、Promiseでのみ非同期処理を提供しているモジュールも存在します。Promiseを使用する機会は今後必然的に増えていくでしょう。 今回のエントリーでは、Node.jsでPromiseを使用する方法を説明します。コード例を中心に理
やさしいnode.jsアプリケーション - Qiita
はじめに Webアプリケーションを作る手段はLAMPだけではありません。 ちょっとしたものであればnode.js + express + SQLite3を使えば驚くほど簡単に作ることができます。 ここでは例として簡易版twitterのようなミニブログを作ります。 必要となる知識 コマンドラインツールの扱い方 HTML, JavaScript SQL このエントリを読んでできること node.jsを使って短時間でWebアプリケーションを作る このエントリを読んでもできないこと 小規模でないWebサービスを作って運用する WebSocketを使ってリアルタイムWebアプリケーションを作る アウトライン 1.node.jsをインストールする 2.アプリケーションを作って動かしてみる 3.フォームから受け取ったデータを表示する 4.SQLite3を使ってデータを永続化する 1.node.jsをイン
初めてのWebサービスを3日でつくってみた（Node.jsで） - Think Big Act Local
Node.jsを触って勉強してたらWebサイトができました。 結婚式の余興.jp - 結婚式の余興を考えるときに参考になる動画を集めました Youtubeから結婚式の余興の動画を集めてくるサイトです。Web開発は初めてだったので、つくった流れや勉強の方法などをまとめてみます。 9/14追記）スマホ対応をやりました！ 普段はiOSアプリを書いています 普段はiOSアプリ開発者をやっていて、仕事と趣味でObjective-Cを書いてます。とても楽しくて2年くらい続けてるのですが、サーバーサイド書けたら幅が広がっていいな、とずっと思ってました。 普段の週末は個人アプリを作ったりしてるのですが、夏休みだし新しいことやろうと思ってNode.jsを触ってみました。 つくったもの 結婚式の余興.jp - 結婚式の余興を考えるときに参考になる動画を集めました 結婚式の余興動画がまとまっていて、だら見できる
[JavaScript] 非同期処理のコールバック地獄から抜け出す方法 - Qiita
JavaScript (Node.js) で開発する上で避けては通れない 非同期処理、コールバックについて考えてみたい。 自分なりのお勧めの方式を書いてみた。 いろいろなものを試した結果である。 ※この記事でのお勧めの方法は ES2015 (ES6) で実装された generators (yield) の技術を使用しています。 実はまだ Babel(6to5) 等を利用するか Node.js v4～v8 でしか 実質的に使用できない技術だと思います。悪しからず。 (早く全てのブラウザに広く普及する事を祈っています) まだブラウザでは独自ライブラリか Promise (Deferred) 等を使っています。 ※2015/10/15: 記事の内容を npm aa (async-await) に対応させました。 ※2015/04/19: 記事の内容を npm co@4 に対応させました。 ※20
![[JavaScript] 非同期処理のコールバック地獄から抜け出す方法 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/e0736f4c646b8f826f3a7e96cf06a4b5ed1bef5a/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCSmF2YVNjcmlwdCU1RCUyMCVFOSU5RCU5RSVFNSU5MCU4QyVFNiU5QyU5RiVFNSU4NyVBNiVFNyU5MCU4NiVFMyU4MSVBRSVFMyU4MiVCMyVFMyU4MyVCQyVFMyU4MyVBQiVFMyU4MyU5MCVFMyU4MyU4MyVFMyU4MiVBRiVFNSU5QyVCMCVFNyU4RCU4NCVFMyU4MSU4QiVFMyU4MiU4OSVFNiU4QSU5QyVFMyU4MSU5MSVFNSU4NyVCQSVFMyU4MSU5OSVFNiU5NiVCOSVFNiVCMyU5NSZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9NTFlYTcyZWZhYjZhODQwZGUyMjA3Y2NkMTY4MDk5NTg%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBMaWdodFNwZWVkQyZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NjY2NmFkYzg2ZjMzMDllZmRjYzI3NWRjYjhhNTBjMDQ%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3De472d49ed6c6d76c0c2d6c64996ace03)
プログラミングやったこと無い奴はJavaScriptから始めろ : IT速報
1: 以下、名無しにかわりましてVIPがお送りします 投稿日：2014/03/09(日) 16:42:04.45 ID:ZsWrBm0M0 まずはNode.jsをインストールしろ話はそれからだ Download：http://nodejs.org/ 2: 以下、名無しにかわりましてVIPがお送りします 投稿日：2014/03/09(日) 16:42:26.57 ID:hzAFYxvI0 一方俺はコボルから始めた 3: 以下、名無しにかわりましてVIPがお送りします 投稿日：2014/03/09(日) 16:57:50.90 ID:ZsWrBm0M0 インストールしたかてめぇら 4: 以下、名無しにかわりましてVIPがお送りします 投稿日：2014/03/09(日) 16:59:13.96 ID:2B5lF2zi0 javaでいい？ 5: 以下、名無しにかわりましてVIPがお送りします 投稿
ブラックなWeb開発現場の救世主、Gruntのインストールと使い方
連載目次 一昔前であれば、HTML／JavaScript／CSSを使用してWebアプリを作成する場合、（筆者の経験では）所定の位置にファイルを置くだけでした。最近はHTML／JavaScript／CSS関連の技術も複雑化／多様化し、いろいろなことを考慮しなければなりません。 例えばJavaScriptファイルの場合は、以下の作業を行うこともあるでしょう。 minify（圧縮）や結合 単体テストの実行 JSLint（構文チェック）の実行 さらに、CoffeeScriptやTypeScriptを使用している場合にはコンパイル（JavaScript変換）を行う必要もあります。 また、SCSS（Sass）やLESSなどのCSS拡張メタ言語を使用している場合にも、コンパイル（CSS変換）作業が必要です。 ファイルを修正してビルドするたびに、これらの作業をいちいち手作業で行っていては非常に面倒でしょう
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
Gruntで始めるWeb制作の自動化
Gruntで始めるWeb制作の自動化 Grunt.jsとはWeb制作の様々なタスクを自動化してくれるツールです。 node.jsで開発されており、Sass/CompassやLessなどのCSSプリプロセッサーのコンパイルやCSS/JSの結合圧縮、JSHintによるバリデーションなど様々なタスクを自動で行ってくれます。 インストール まずはnode.jsをインストールします。公式サイトでインストーラーが配布されていますので簡単にインストールが可能です。 次にMacではターミナルを開いてgrunt-cliをインストールしましょう。cliとはCommon Language Infrastructureの略でコマンドラインからGruntを利用するためのツールです。 sudo npm install -g grunt-cli パスワードが聞かれるので入力してください。成功すればgrunt-cliのイ
TEST CORDING » node.js 怒濤の50サンプル!! – socket.io編
This domain may be for sale!
Re* Programming » c#
xs-dev インストール npm i -g xs-dev 初期設定 xs-dev setup --target-branch public helloworld xs-dev run --example helloworld エラーが出るようになるが... /Users/weizen/.local/share/xs-dev-export.sh:source:5: no such file or directory: /export.sh IDF_PATH のパスがないことによるエラーだった ESP32のセットアップをすると解消されるらしい => ならなかった xs-dev info で表示される ESP32 IDF Directory のパスを IDF_PATH に指定 source $HOME/ 今回、中国出身の Designer 王雅さんと一緒に制作した 「寄席の箱」 を SNACK
ファイル編集したら即ブラウザー再読込させる LiveReloadX を作った
Web 開発してると、ソースを編集して、ブラウザーをリロードして、という作業の繰り返しになりがちだ。ソースを編集したら、自動でブラウザーをリロードしてくれるような夢のツールがあれば便利そうだ。 この分野では CodeKit や LiveReload などが有名なんだけど、もれなく有料だったり GUI だったりする。そこで、LiveReload のオープンソースな部分を参考にしつつ、コマンドラインで使える LiveReloadX というものを作ってみた。 特長はこんなところ。 Node.js を使ってるので Windows/Mac/Linux 問わずに動かせる 開発環境のブラウザーだけでなくスマートフォンのブラウザーもリロードできる 無料 インストール方法 インストールは超簡単！ Node.js をインストールする。 コマンドラインで npm install -g livereloadx を
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
それでもNode.jsをやる
Node-OS