Gatsbyはどうやって静的サイトをジェネレートしているのか
GatsbyはReactベースの静的サイトジェネレーターです。 生成される静的サイトはシングルページアプリケーションでもあるため、優れたUXをユーザーに提供できます。 GatsbyはReactの公式サイトを始め、多くのサイトで採用されています。 弊社でもいくつかのGatsby案件が進行中です 😎 また、Gatsbyのユニークな特長として、静的サイトのリソースのデータ取得にGraphQLを使っているというところがあります。 ローカルのMarkdownファイルやContentful・WordPressといった外部CMSのWebAPIをデータソースとして、GraphQLを通じて一元的に扱うことができます。 ページごとに必要なデータをGraphQLのクエリを一発投げて取るだけになるので実装がクリアになります。 例えばこのような感じです。 しかし、GraphQLを使うということはSchemaを定義
Mastodon のタイムラインをターミナルに流す - 知らないけどきっとそう。
Mastodon の各種タイムラインは WebSocket でストリーミングされている Node.js の Stream の学習を兼ねて、これを様々なターミナルに出力できるようにする 「Stream を制するものは、 Node.js を制す」らしい WebSocket で接続して https://friends.nico/ の連合タイムラインを受信 $ node -e 'new (require("ws"))("ws://friends.nico/api/v1/streaming/?access_token=...&stream=public").on("message", (data, flags) => console.log(data))' {"event":"update","payload":"{\"id\":1920985,\"created_at\":\"2017-04-24
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
Node 学園祭 2016 個人的なまとめ - Qiita
Node 学園祭 2016 印象に残ったセッションのまとめ。 計画・実施されたみなさま、とても楽しかったです。ありがとうございました !! 動画も公開されたようです。 Demystifying JavaScript Engines http://slides.com/a0viedo/demystifying-js-engines#/ https://github.com/a0viedo/demystifying-js-engines http://togetter.com/li/1047918 JavaScript エンジンについてのセッション。 2006 年ごろの牧歌的なインタープリターのハナシからはじまって、 JIT のかけ方、各実装ごとの最適化のかけかた、 Garbage Collection の実装まとめまで。 最後の話題である GC について↓あたり読めばいいかも。 http:/
【入門向け】Node.js + Express4 + MongoDB + Vagrant + foreverでChatWorkと連動するCRUDアプリを開発する。(１)（導入編） - Qiita
【入門向け】Node.js + Express4 + MongoDB + Vagrant + foreverでChatWorkと連動するCRUDアプリを開発する。(１)（導入編）Node.jsMongoDBVagrantChatworkexpress4 この記事について Node.js + Express4 + MongoDB + Vagrant(開発環境) + foreverを利用して簡単なCRUD(Create, Read, Update, Delete)アプリを開発しました。開発にあたりPHP歴３年の著者が得られた知見をまとめます。 導入編、環境編、開発編の全３回を予定しています。皆様のこれからの開発の一助になれば幸いです。 対象読者 ある程度の開発経験があり、Node.jsを使ったアプリケーション開発に興味がある/これから実装する人。 ノンブロッキングI/Oを知りたい人。 node
Node.jsのMVCフレームワーク「Express」の基礎知識とインストール
連載目次 前回の「いまさら聞けないNode.jsの基礎知識とnpm、Gulpのインストール」において、サーバーサイドJavaScript実行環境であるNode.jsについて基本的な説明を行いました。また、その周辺ツールであるnpm、Gulpを含めた環境のセッティングも行い、Node.jsを用いてMEANスタックアプリ開発ができる状態になったと思います。 本記事では上記環境を用いて説明していくので、実際にサンプルを動かしたい場合には前回の記事を読んで環境を作成しておきましょう。 今回はサーバー側のMVCフレームワーク、「Express」について解説します。 MVCフレーワーク「Express」とは 「Express」とは、Node.js上で動作するWebアプリのフレームワークです。 Webアプリを構成する上で必要な機能がそろっており、ルーティングやビューヘルパー、セッション管理の機能もデフォ
無料のPOSレジアプリを作った話。名古屋クリエイターズマーケットで活用するまでの苦労話
冒頭でも触れましたが、レジアプリは名古屋で毎年2回開催されているなごやクリエーターズマーケット（通称クリマ）の写真販売ブースに向けに制作しました。 「写真好きのつどい」名古屋クリエイターズマーケット https://photo-love-gathering.tumblr.com/ オフィシャルページも、簡単ですがTumblr上で制作してみました。 解決したかったこと私の参加しているクリマのブースでは、複数の出展者で写真にまつわる商品を販売しています。出展者が複数いるため、販売価格や商品が多様で、商品の管理や売上の管理、また会計方法が年々複雑になりました。 そこで、商品管理や売上集計の複雑さや手間を取り除くために、できるかぎりの事は自動化してしまおうと考えました。これがレジアプリを作ろうと思った切欠です。 現在、巷ではレジアプリが沢山存在しますが、解消したかったニーズと一致しなかったので、頑
npm-scripts で Web フロントエンド開発を管理する - アカベコマイリ
gulp なしの Web フロントエンド開発から 1 年あまり。その間、特に問題もなく npm-scripts で Web フロントエンド開発を管理できているので、この間に得られた運用知見や所感などをまとめてみる。 npm-scrips とは？ 最近の Web フロントエンド開発では AltJS/AltCSSのビルドやリリース用イメージ作成などに Node.js + npm を利用することが一般化してきた。そのためプロジェクトは package.json で管理することになる。package.json の提供する代表的な機能として プロジェクト情報の定義 プロジェクトの成果物を npm として配布するための情報 プロジェクト名、バージョン、作者などのメタデータを定義する 依存モジュール管理 プロジェクトが依存する npm とバージョンを管理する この情報へ基づき npm install コ
インテグレーションテストを書き始めた話 | Tokyo Otaku Mode Blog
こんにちは。Tokyo Otaku Mode (以下TOM) エンジニアのシンバです。今期のアニメは「甘々と稲妻」が一番の楽しみになっています。特に飯田小鳥を演じる早見沙織さんの声を聴くのが楽しみです。早見さんは9月に公開される映画「聲の形」のヒロイン役も担当されるそうで、そちらも非常に楽しみにしています。ヒロインのビジュアルがすごくかわいい。 さて、TOMは現在、ECサイトやニュースサイトなどを http://otakumode.com/ で展開しています。このシステムの開発にはNode.jsが使用されており、Mochaを使用してモデル層などのテストを書いています。ただ、このテストは関数一つ一つの入出力をチェックするために書かれているので、例えば複数の関数を組み合わせた際の結果や、色々処理した結果、ページ上に何が表示されるのかといったテストは書いていませんでした。 そこでインテグレーショ
PHPアプリケーションでのReact.jsのサーバーレンダリング考える
PHPでReact.jsなアプリケーションを導入する時に眺めてみた時のメモ。 まず、ブラウザからのリクエストに対して、サーバー側でDOMをレンダリングする必要がある。 これは、ブラウザでDOMレンダリングする場合は、サーチエンジンのアクセスに対して、 空の要素を返してしまう。 そのため、その結果がインデックスされるとSEO的によろしくないからである。 そこで、どこでReact.jsを実行してDOMを生成するのかを考える必要がある。 PHPでJSを実行する React.jsをレンダリングする小さなアプリケーションに処理を委譲する の2つのパターンを考えられる。 例として簡単なView Classのテンプレートをレンダリングする。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 3
Node.js における Promise を使った例外処理 - from scratch
さて、 Node.js のエラーハンドリングは難しいと言われてますが、 2016年現在、つまりNodeの v4 とか v6 が主流になり、 Promise が基本的な処理として採用されている状況ではどうでしょうか。ちょっと考えてみます。 一応これの補足です。 qiita.com TL;DR 未だに難しい。ただし、 Promise で改善されている。async-await や zone まで来たらかなり楽になる。 あと、 unhandledRejection が uncaughtException よりも酷いことにならないので、大分マシになっている。 Node.js のエラーハンドリングの難しさ まず JavaScript には同期と非同期のエラーハンドリングのやり方があります。前者は所謂 try-catch による方法、後者は callback を使って第一引数で実現する方法や emit(
いまアツいJavaScript！ゼロから始めるNode.js入門〜5分で環境構築編〜
こんにちは、エンジニアなのにダンクができないのびすけです。今月から記事を書かせていただきます。 さてみなさん「Node.js」って知っていますか？ 僕も最近Node.jsの勉強を始めたので「Node.jsを使ったことがないけど使ってみたい」と思っている人に向けて、Node.jsの入門的な内容を紹介したいと思います。 ▼2020年最新版はこちら！ Node.jsとは 一言で言うとアツいJavaScriptです。 通常、JavaScriptはユーザーのブラウザで動作するプログラミング言語ですが、Node.jsはサーバー側で動作するJavaScriptであり、Web業界ではかなり注目されています。大量の処理に対応するために、ノンブロッキングI/Oというモデルを採用しています。 例えば、データベースから大量の情報を取得してWebページ上に表示をする処理をおこなう場合、通常はデータベースへアクセスし
AsyncとAwait : コールバック地獄を避けるための最新のやり方、そしてその未来 | POSTD
(2016/7/7、いただいたフィードバックを元に記事を修正いたしました。) JavaScript、特にNode.jsといえば、 コールバック地獄 がよく連想されます ^(1) 。たくさんの非同期I/Oを扱うコードを書いたことがある方には、おそらく以下のようなパターンはおなじみでしょう。 export default function getLikes () { getUsers((err, users) => { if (err) return fn(err); filterUsersWithFriends((err, usersWithFriends) => { if (err) return fn(err); getUsersLikes(usersWithFriends, (err, likes) => { if (err) return fn (err); fn(null, lik
Node.jsでMySQLを使うメモ - Qiita
JavaScriptとMySQLがつながる。そう Node.jsならね。 前置き node.js始めて3日目程度の知識で書いています。 また、MySQLもそんなに詳しいわけではないです。 この記事は本家のドキュメントを元に作成しました。 コードもほぼ本家のコピペです。 間違い等ありましたらコメントでおしえてください。 ここではnode-mysqlを使います。 インストール npm install mysql コネクション var mysql = require('mysql'); var connection = mysql.createConnection({ host : 'localhost', user : 'me', password : 'secret' }); //これは省略してもoK。 connection.connect(); connection.connect(fun
Node.jsでWebサイトの更新チェックを自動化する - ほんじゃらねっと
特定のWebサイトを定期的にチェックして特定のキーワードが含まれていたら 通知してくれる仕組みを1つ覚えておくと色々重宝する。 例えば 会社に社員用Webサイトがあるなら、 （そしてそのサイトがRSSもメール通知も提供してないなら） そこに「重要」とか「人事」とかのキーワードを含む記事が投稿された時に 通知を受け取れるようにしておけば、 いちいちサイトをチェックしにいかなくても 逃さず確認できる。 また、Webスクレイピングする方法を覚えておけば、 通知を受け取る以外にも、 画面キャプチャの撮影や画像やテキストの収集を 自動化したり、作成したWebシステムの画面テストを行う、 等の応用もしやすくなる。 今回は Node.js + Grunt + cheerio-httpcli を使用して 手軽にWebサイトのデータをチェックする方法を紹介する。 今週の「世界の果てまでイッテＱ！」で「QTu
Node.jsでスクレイピングするならば - プログラマでありたい
昔、Rubyでクローラー/Webスクレイピングの本を書きました。今でもちょくちょくとスクレイピングのコードを書いたりはするのですが、実行基盤についてはサーバの運用管理が面倒くさいのでAWS Lambdaを使うことが多いです。そうなると、Lambdaは基本的にはRubyが使えないので、言語はPythonかNode.jsを利用することになります。Pythonもいいけど、今後のことを考えるとNode.js力を高めておきたいと考えています。ということで、Node.js縛りでスクレイピングの仕方です。 スクレイピング対象のページの種類 私の中の勝手な定義ですが、スクレイピングには3種類あります。 1. 静的サイト／JavaScript不要なページに関するスクレイピング 2. 対話型サイト／JavaScript不要なページに関するスクレイピング 3. JavaScript前提のページに関するスクレイピ
Gopherの道を歩む – Node.jsからGo言語への移行 | POSTD
私は大学時代に、興味本位でJavaScriptを始めて、それ以来ウェブページを幾つか作成してきました。JavaScriptは常にC言語やJavaの合間の楽しい息抜きでしたが、アニメーションや、ユーザをあっと言わせるようなちょっとしたことを提供するといった、特殊な目的にかなり限られた言語だと考えていました。JavaScriptは覚えやすく、開発者に具体的な結果をすぐにもたらしてくれるので、コーディングする方法を学びたいと思っている人に私が教えた最初の言語でした。JavaScriptにHTMLとCSSを少し組み合わせれば、ウェブページが出来上がります。プログラミング初心者には喜ばれます。 その後、あることが2年前に起こりました。当時、私は、主にサーバーサイドのコードとAndroid用のアプリのプロトタイプに取り組む研究職に近い立場にいました。すぐにNode.jsの存在が目に留まりました。バック
MERN - Express/Reactを使ったWeb開発フレームワーク MOONGIFT
Linux + Apache + PHP + MySQLの組み合わせがWeb開発のスタンダード的な位置づけになっていた頃、それぞれの頭文字をとってLAMPスタックと言うのが流行りました。同様にフレームワークが変わるために名称も異なってきました。 今回はMERNスタックを標榜するソフトウェアを紹介します。MongoDB + Express + React + nodeという組み合わせのアーキテクチャになります。 MERNの使い方 MERNのディレクトリ構成は次のようになっています。サーバサイドはMVCに分かれており、Reactを使ったサーバサイドレンダリングを行っています。 テストのサーバを立ち上げたところです。ブログエンジンとなっています。右側にReactで持っているオブジェクトの内容が確認できるのがユニークです。 データの詳細も確認できます。 クリックで画面は変わりますが、サーバへのアク
npmの使い方の勉強メモ1(node.js=v0.11.16, npm=2.3.0) - msakamoto-sfのはてなブログ
2015-03-22 npmの使い方の勉強メモ1(node.js=v0.11.16, npm=2.3.0) Node.js npm npmの使い方の勉強メモ。 勉強環境： $ node --version v0.11.16 $ npm --version 2.3.0 参考： https://docs.npmjs.com/ https://docs.npmjs.com/misc/faq npm help install npm help root npm help bin npm help 5 folders npm help 7 config パッケージインストールの考え方： ローカルインストール カレントディレクトリの node_modules 以下にパッケージをインストール。 開発プロジェクト固有で依存するパッケージをインストールしたい時に使いやすそう。 グローバルインストール システ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Glitch