jQueryからTypeScript・Reactまで - Viteで始めるモダンで高速な開発環境構築 - ICS MEDIA
Vite（ヴィート＝フランス語で「速い」の意味）は2020年に発表された新しいフロントエンドのビルドツールです。 開発者がVue.jsの作者であるEvan You氏であるため、Vue.jsのツールであると誤解されることもありますが、プレーンなJavaScript（バニラJS）からVue.js・React・Svelteといった流行のフレームワークまで、さまざまな環境で利用できる汎用的なツールです。 位置付けとしてはwebpackのようなバンドラーと呼ばれるものに近い存在ですが、それだけではありません。この記事では、Viteを導入してプレーンなJavaScriptから、TypeScript+Vue.js・Reactといったフレームワークまで、快適な開発環境を手に入れる方法を紹介します。 この記事で紹介すること： Viteの特徴と基本の仕組み 基本の使い方 Vite + SCSS Vite +
VSCodeでTypeScript/Node.jsの開発環境を作る（UT・カバレッジ・ログ出力・リリース手順含む） - Qiita
Visual Studio CodeでTypeScriptの開発環境を作る手順を調べてみました。 Node.jsで動く簡単なCLIツールを作る前提で進めていきますが、他の開発にも応用できるかと思います。 なお、Visual Studio CodeとNode.jsはインストール済みの前提です。 Windows 10環境で以下のバージョンで確認しています。 C:\>node -v v8.10.0 C:\>npm -v 3.10.6 C:\>code -v 1.21.1 79b44aa704ce542d8ca4a3cc44cfca566e7720f1 x64 mkdir ts-sample cd ts-sample npm init -y mkdir .vscode src test config npm i -SEB config log4js npm i -DE typescript ts-
KubernetesでWeb-AP-DBの3層アプリケーションが動くまで - Qiita
このチュートリアルでは、Kubernetesクラスター上に、node.js、MySQLを使ったアプリケーション(koa-sample)をデプロイします。外部からのリクエストを受けるロードバランサーとして、KubernetesのIngressの機能を利用します。1 前提条件 Kubernetesクラスターがセットアップ済みであること 上記のクラスターに対してkubectlコマンドが実行可能であること 0 . 準備作業 アプリケーションの一連のmanifestファイルがこのリポジトリに保存されています。まずはこのリポジトリを適当なディレクトリにcloneして下さい。 以下は、コマンドラインツールのgitを使う例です。
Node.js quickstart | Google Sheets | Google for Developers
Send feedback Node.js quickstart Stay organized with collections Save and categorize content based on your preferences. Quickstarts explain how to set up and run an app that calls a Google Workspace API. Google Workspace quickstarts use the API client libraries to handle some details of the authentication and authorization flow. We recommend that you use the client libraries for your own apps. Thi
Web API フレームワーク LoopBack で遊んでみる - Qiita
LoopBack とは LoopBackは Web API フレームワークです。 最近は、よりリッチなユーザ体験を提供するために、Web アプリケーションをSPA化する流れが強くあるなーと思います。 それと同時に、バックエンドとしての API サーバ構築の需要もすごく高まってきていて、LoopBack はその API の生成がとても簡単にできるフレームワークです。 Node.js 製なので、フロントエンドとバックエンドを JavaScript のみで記述できます。Universal Web App！ Express がベースになっているのですが、大きな特徴として、モデルが生成されると同時に RESTful な API を自動で生成してくれます。 モデルの生成もジェネレータが用意されているので、一行もコードを書かずに API サーバを構築できます。 LoopBack の特徴 公式ドキュメント
ゼロから始めるJavaScript生活 - Qiita
（訳者注: これは、JavaScript Stack from Scratchを翻訳し、まとめて読めるように1ファイルにしたものです。元の翻訳と各種ファイルについては、日本語訳forkリポジトリを参照してください。また、原文が活発に更新されているため、訳文も追従して更新されます。ご了承ください。） モダンJavaScriptスタックチュートリアル、ゼロから始めるJavaScript生活へようこそ。 ⚠️️ このチュートリアルのメジャーアップデート版を3月初旬に公開する予定です。ご期待下さい! より詳しく(英語). これはJavaScriptスタックを使い始めるための最短最速のガイドです。このガイドは一般的なプログラミングの知識とJavaScriptの基礎を前提としています。これら全てのツールを一緒につなぎ合わせることにフォーカスしており、各ツールについて可能な限りシンプルな例を提供します。
step by stepで始めるwebpack - Qiita
※webpack1系の記事です。 1→2への移行ガイドを見る限り破壊的な変更点はそんなにありませんが、preLoadersやpostLoadersがなくなっていたり、差が出ていますのでご注意ください。 https://webpack.js.org/guides/migrating/ webpackを手を動かしつつ学べる初学者向け資料を作成しました。 公式のチュートリアルもあるのですが、webpackが使用されているOSSのボイラープレートを見る限り、世の中の使われ方に沿ってないかも？と思い書きました。 これから始める人の手助けになれば幸いです。 また最終形のソースをupしてあるので詰まったら見てください。 webpackとは webpack で始めるイマドキのフロントエンド開発の説明が良かったので引用させていただきます。m(_ _)m webpack は WebApp に必要なリソースの依
Node.jsのマイクロサービスの構築を通してDockerを学ぶ – 前編 | POSTD
あなたが真剣に Docker に取り組んで、その全てを学びたいと思っているのでしたら、もう探し回らなくても大丈夫です。 本稿では、Dockerがどのように機能するのか、どんな部分が話題になっているのか、そしてマイクロサービスを構築する際の基本的な開発作業にどのように役立つのかについて紹介したいと思います。 本稿では例として、ローカルで実行するコードからマイクロサービスやデータベースを実行するコンテナまで、バックエンドにMySQLを用いたシンプルなNode.jsのサービスの例を使います。 Dockerとは何か Dockerとは要するに、（仮想マシン用のテンプレートに非常によく似ている） イメージ を作成して、 コンテナ でイメージのインスタンスを実行できるソフトウェアです。 Dockerには、 Docker Hub と呼ばれる大量のイメージのリポジトリがあり、これを利用して作業を始めたり、無
Node.jsでのJavaScriptメモリリークを発見するための簡単ガイド | POSTD
目次 初めに 極小理論 ステップ1. 問題の再現と確認 ステップ2. 最低3回のヒートダンプ採取 ステップ3. 問題の発見 ステップ4. 問題解決の確認 他のリソースへのリンク まとめ Something you might want to bookmark: Simple Guide to Finding a JavaScript Memory Leak in Node.js by @akras14 https://t.co/oRyQboa8Uw — Node.js (@nodejs) January 6, 2016 注釈：お気に入りに登録してください。 Simple Guide to Finding a JavaScript Memory Leak in Node.js （Node.jsでのJavaScriptメモリリーク発見簡単ガイド） @akras14 http://www.ale
LINE Bot を AWSを使ってシステム構築してみた。 - Qiita
技術系の記事投稿先を自前のBlogに移しました。初心者向け,AWSなど幅広いTechジャンルで記事投稿がんばってますので、よろしかったらこちらも参照ください！ LINE Bot API が公開され一般のデベロッパにも公開されたので使ってみたメモ。 申し込みはこちらから. 先着10,000名ですがまだ申し込みを受付けている模様(2016/4/14現在) 上限に達したようです(2016/4/16) 追加受付が開始されたようです。(2016/4/26) https://business.line.me/services/products/4/introduction LINE Bot API BotはユーザがBotアカウントとお友達になり、Botに話しかければ(メッセージを送信すれば)、メッセージに応じてレスを返しくれるものです。LINE Bot API は LINE が Botを開発したいデベ
ES6 を学べる tower-of-babel を作りました。 (workshopper の作り方) - from scratch
さて、NodeSchool が開校された時に、ES6を学べるチュートリアル的なものがほしいと思い、tower-of-babelという名前のチュートリアルツールを作成しました。 github.com このツールはnpm/node.jsを使って作っています。実際に動かすときはnpmがあれば動きます。 npmのインストールは他の記事を参考にしてください。npmが入っていれば、以下のようにすれば実行可能です。 $ npm install tower-of-babel -g $ tower-of-babelそうすると下記のようなダイアログが起動するのでエクササイズを選択して各種問題を解いてください。 全ての問題を解き終わった頃にはなんとなく ES6 の構文が使いたくなってくるはずです。 なにか問題があれば気軽に tower-of-babel のリポジトリに連絡をください。 github.com 以下
Sails.js と Vue.js で API ファースト + リアルタイムな Web アプリケーションをさくっと作る - Qiita
概要 こんにちは nyamadori です。 Node.js には Rails のようなこれといった定番の Web フレームワークがありません。 「とりあえず Express でいいや」みたいな風潮がある気がします。 そう思っている方、Sails.js を使ってみましょう! Sails.js は API ファーストな Web アプリケーションがさくっと実装できるコンパクトな Web フレームワークです。 この記事では、簡単なチャットアプリを作りながら Sails.js を紹介します。 (一体何番煎じの内容だろうか…) チャットアプリを作る これから、以下のような簡単なチャットアプリを作っていきます。 2つのクライアント間でチャットができる アカウント管理はしない。どちらが投稿したメッセージかを区別できる必要はない 一方がメッセージを投稿すると、もう片方の側でもメッセージが同期される 以降の
Socket.IO, Redisを使用し各ゲーム間でプッシュ通知するシステム | 株式会社サイバーエージェント
2. システム概要 homingは、アメーバピグ関連サービスのいずれかにログインしているユーザに対して、各サービスの通知情報を横断的にプッシュ通知します。 システムの構成は以下の通りです。 図2-1. システム概要 2-1. APIサーバ ユーザへの通知要求を受け付けるREST fullなAPIを備えたWebサーバです。 Node.jsのClusterによる、master/worker構成で稼働します。 通知要求はワーカプロセスで処理します。 図2-2. APIサーバ 2-2. Redisサーバ（データストア用） 一時的なデータをストアするためのRedisサーバです。 sentinelプロセスによる、master/slave構成で稼働します。 ストアされたデータはメモリ上のみで管理し、ディスクへの書き込みは行いません。 以下の情報を管理します。 ユーザのオンライン情報 ユーザIDの索
gulpでJavaScriptの結合圧縮処理
gulpでJavaScriptの結合圧縮処理 gulpでJavaScriptの圧縮処理を設定してみました。ご想像の通りuglifyJSですが@readymadegogoに教えてもらったuseminというプラグインも合わせて利用します。 gulpの使い方は「タスクランナーgulp入門」を参照してください。 まずは圧縮用のgulp-uglifyとgulp-useminをインストール。 sudo npm install gulp-uglify gulp-usemin --save-dev 今回の設定の肝はgulp-usemin。これを利用するとHTML上に直接圧縮処理の設定を記述できます。 たとえばHTMLを以下のように設定した場合、useminを実行したらscript1.jsとscript2.jsを圧縮結合したscript.min.jsというファイルを生成しHTML上のscriptの呼び出しを
タスクランナーgulp入門
タスクランナーgulp入門 gulpはGruntと同じように様々なタスクを自動化してくれるツール(タスクランナー)です。 node.jsで開発されており、Sass/CompassやLess、StylusなどのCSSプリプロセッサーのコンパイルやCSS/JSの結合圧縮、JSHintによるバリデーションなど様々なタスクを自動で行ってくれます。 Gruntとできることはほとんど同じですが、Gruntよりタスクの流れがわかりやすく、JavaScript(node.js)で独自のタスクも簡単に記述することができます。 後発ということもありGruntよりプラグイン数は少ないですが、マニアックなタスク以外はそろっているので通常のWeb制作などでは問題なく利用できるでしょう。 node.jsのインストール node.jsが必要ですのでインストールしていない方はインストールしましょう。 公式サイトでインスト
コピペが出来るなら誰でも出来る、Web制作タスク自動化ツール「Grunt」導入手順
なんだか、Web制作の際に起こる様々な面倒くさいタスクを自動化してくれるGruntというツールがあるらしく、私の周りのWebデザイナーさんやコーダーさんがこぞって導入されておりました。 はじめは「へぇ…あちきは別に興味ないからいいでありんすよ」と指をくわえて傍観していたのですが、便利便利の声を聞くにつれやっぱり羨ましくなってきました。だから導入した。使った。良かった。 そんな訳で今回は、Grunt.jsの導入から簡単な使い方までを紹介したいと思います。私のような黒い画面に抵抗を持っている初心者の方でも導入できるよう、コピペさえ出来ればGruntが使えるようになる記事にしてあるつもりです。 なお、今回導入した私のPC環境はOS X 10.9.1です。Windowsでの導入手順は今更だけどやるgrunt入門編・インストールから基本的な使い方｜WEB Drawerをご覧下さい。 Gruntで何が
結婚式二次会用に Node.js x ブラウザでタイピング対決アプリを作ってみた - 凹みTips
はじめに 先月、友人の結婚式の二次会でタイピング対決をしたいとの企画を、幹事の友人から受けました。面白かった要件としては、 二人の顔を 2 台のカメラで映したい タイピングしてる様子をリアルタイムで見たい というものです。これをサーバは Node.js で、クライアントはブラウザで作成しました。エントリ書いてもいいよ、と許可を頂いたので、今後似たような依頼を受けた方のご参考になるように、エッセンス部分をご紹介します。 （追記：2013/11/20） 幹事さんも記事を公開されました： http://tjun.org/blog/2013/11/wedding-typing/ やったこと ホスト PC 側で新郎新婦それぞれの PC からのログインを待ち受けします。イイ感じに○で切り抜いてくれるような PNG をイラレで作っておきました。 それぞれの PC からログインしてもらいます。 ログインし
Not Found |ミレスポ！ - Millennials Sports Marketing
横浜F・マリノスユース同期6人による新たな挑戦「ROOTS.」。新時代に適応するアスリートに必要な素質とは。
node.jsとjQueryでスクレイピングするウェブアプリの作り方
やっぱ jQuery 便利ですよ(*´・ω・)(・ω・｀*)ﾈｰ セレクタ使って jQuery でダカダカやってると、DOM とか正規表現でネチネチやるのがバカらしくなっちゃいます。 と日頃から思ってたりしてまして、サーバサイド JavaScript がメインストリームになって、jQuery でウェブアプリをコーディングできれば超ラクできるかもと期待しています。 で、先日サーバサイドJavaScriptとjQueryでスクレイピングという記事をうpったところ、やっぱ Rhino じゃなくて node.js がえーんよ(´･ω･｀)というコメントを頂きましたので、node.js と jQuery でサーバサイド JavaScript スクレイピングしてみることにしました。 今回は node.js ですので、単にスクレイピングする（コマンドラインから実行する）スクリプトだけじゃなくて、スクレイ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TEST CORDING » node.js 怒濤の50サンプル!! – socket.io編