最近のモダンなWebサービス開発の構成について調べるメモ
ここのところ雑にWebサービスをリリースする機会が減って最近はFlutterでネイティブアプリばかり書いてるのでWebの最新に追いつけてない。 最近の流行りのWebサービス開発について自分の必要そうな範囲でちょっと調べてみる。 自分の場合、フロントエンドはTypeScript+(Vue or Nuxt)でやって、サーバーサイドはRailsで書いちゃうことがまだ多い。 これでもなんとかなるけど、もうどうせならJSで一気通貫でフロントエンドとサーバーサイドを書ければ楽なのにと思いつつある。 パッと思いつくのはTypeScriptでフロントエンドをNext,Nuxtあたりでやって、バックエンドAPIをexpressとかサーバーレスAPIを適当に書くとかだけど、今だともっと良い方法ありそう。 本当はDartでサーバーサイド、FlutterでwebまでいければDart統一時代になって願ったり叶ったり
イマドキのJavaScriptの書き方2018
PySpa統合思念体です。これからJavaScriptを覚えるなら、「この書き方はもう覚えなくていい」（よりよい代替がある）というものを集めてみました。 ES6以降の難しさは、旧来の書き方にプラスが増えただけではなく、大量の「旧来の書き方は間違いを誘発しやすいから非推奨」というものを作り出した点にあります。5年前、10年前の本やウェブがあまり役に立たちません。なお、書き方が複数あるものは、好き嫌いは当然あると思いますが、あえて過激に1つに絞っているところもあります。なお、これはこれから新規に学ぶ人が、過去のドキュメントやコードを見た時に古い情報を選別するためのまとめです。残念ながら、今時の書き方のみで構成された書籍などが存在しないからです。 たぶん明示的に書いていても読み飛ばす人はいると思いますが、すでに書いている人向けではありません。これから書くコードをこのスタイルにしていくのは別にいい
自分も開発したくなる！楽しすぎるJavaScriptライブラリ7選 - Findy
2016.06.06｜最終更新：2017.11.17 自分も開発したくなる！楽しすぎるJavaScriptライブラリ7選 JavaScriptを使ってユニークなサイトやアプリを制作したい！ そんな時に活用できるのがJavaScriptライブラリです。 本記事では楽しくWeb開発が可能なライブラリを厳選して7つご紹介します！ 顔の認識ができるようになる！ 【 jQuery Face Detection 】 JavaScriptだけで、画像内に映る顔を検出できちゃいます！ 顔の座標位置を検出し、データとして取得できます。 複数人が画像に含まれていても、それぞれ検出可能です。 Webカメラにリアルタイムに映る顔を検出できる「clmtrackr.js」もありますよ！ VR空間で絵が書けるブラウザアプリ！ 【 A-Painter 】 A-Frameはブラウザ上で仮想空間（VR）を実現するフレームワー
phiary
phi I'm a Game Programmer and Frontend Engineer passionate about programming education. Math / C / C++ / C# / JavaScript / HTML5 / CSS3 / Python はじめに 「webpack インストールしといてー」, 「gulp 導入して watch しながら開発してー」, 「React だから ES6 でコード書いてー」 最近こんな会話が当たり前のように現場で飛び交っています. フロントエンドの開発者には HTML, CSS に特化している人 (coder, markup engineer) JavaScript は得意だけど CSS はちょっと弱い人 (javascripter) HTML, CSS, JavaScript 全てを統べる者 (frontend
gulpで依存関係を考慮した自動コンパイル - Hatena Developer Blog
こんにちは、シニアアプリケーションエンジニアのid:taraoです。はてなエンジニアアドベントカレンダー2014の21日目として、依存先のファイルが更新されたらコンパイルしなおす処理をgulpで実現する方法について、とくにLessを例にとって紹介します。 はてなでは、JavaScriptやCSSなどの静的ファイルをTypeScriptやLessなどからコンパイルして生成することが増えています。CSS(Less)は主にデザイナが書くため、コンパイル手順はできる限り簡単にする必要があります。多くのチームでは、サーバアプリケーションをローカル環境で実行している最中はファイルの変更に応じて自動的にコンパイルしなおすようになっています。 ファイルの更新監視からコンパイルまでの処理にはGruntなどを使ってきましたが、コンパイル対象のファイルに依存関係がある場合、依存先のファイルの変更に応じて依存元の
Gulp 始めてみましたのメモ – 3 – JavaScriptをconcat, minify, source mapとYUIDoc
Gulp 始めてみましたのメモ – 1 – 導入からCompass Gulp 始めてみましたのメモ – 2 – CSSをminify の続き。 JavaScriptをconcat, minify, sourcemap 複数のファイルを結合し minify します。 gulp-uglify を使う "use strict"; var gulp = require( 'gulp' ); var plumber = require( 'gulp-plumber' ); var size = require('gulp-size'); var sourcemaps = require('gulp-sourcemaps'); var uglify = require( 'gulp-uglify' ); var rename = require( 'gulp-rename' ); gulp.task(
超簡単に3DCGできるJavaScriptライブラリ作った - aike’s blog
ブラウザでWebGLが使えるようになって3DCGプログラミングはずいぶん身近なものになりました。と書いてるそばから違和感を感じるくらい生のWebGLをJavaScriptで書くのは敷居が高かったりします。できなくはないけど前提となる知識がかなり必要な感じ。 three.jsが登場したときは、これで普通に3DCGができるということで一気にひろまりました。とはいえ、それでもまだやることは多く、画面に四角い箱を表示する場合以下のようなプログラムを書くことになります。 ・シーンを作成 ・ライトを作成、位置と向きを設定、シーンに追加 ・カメラを作成、位置と向きを設定、シーンに追加 ・マテリアルを作成、色を指定 ・BoxGeometryを作成、サイズを指定 ・メッシュを作成、位置と向きを設定、シーンに追加 ・レンダラーを作成 ・レンダリングループ処理 これらのひとつでも間違えたりパラメーターが適切でな
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を使用する方法を説明します。コード例を中心に理
自作オブジェクトのイベントのやりとりにはjQuery.triggerではなくjQuery.triggerHandlerを使うほうがよいと思った - hitode909の日記
DOMオブジェクトには昔からdispatchEventとか，addEventListenerとかあって，最近だと，node.jsのEventEmitterとか，jQueryのon, triggerを使って自作のオブジェクト間でアプリケーション的に定義されたイベントをやりとりできる． これまで，自作オブジェクトからイベントを発行するのに，jQueryのtriggerを使ってたけど，意図しない挙動をすることがあることが分かって，triggerHandlerを使うように変えた． jQuery.trigger()は，イベントタイプと一致する関数をレシーバが持ってるとき，その関数が呼ばれる． イベントのやりとりと，メソッドの呼び出しは独立しているというイメージがあったので，うっかり同名のメソッドを定義したときに，一見するとよく分からない挙動になって，難しい． なので，自作オブジェクトがイベントを発行
Tocify - Boostrap対応の目次生成ライブラリ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました お。これはプロジェクトサイトのヘルプや説明ページに使えそうですね。 BootstrapをベースにWebサイトを構築するメリットとして、多彩なプラグイン/ウィジェットの存在があります。こんなこと実現できるかな、と思って調べてみれば大抵そういったソフトウェアが存在するのが強みです。 例えばメインコンテンツの左側に見出しを目次として並べたい、そう思ったならばTocifyを使ってみましょう。Bootstrap + jQueryで格好いい目次表示を行ってくれます。 使い方としてはまずスタイルシートとJavaScriptを読み込みます。 <link type="text/css" rel="stylesheet" href="jquery.tocify.css" /> <link type="
D3.js
D3The JavaScript library for bespoke data visualization Create custom dynamic visualizations with unparalleled flexibility
IFrame内もレスポンシブ対応にするjQueryプラグイン「ResponsiveIframes.js」:phpspot開発日誌
IFrame内もレスポンシブ対応にするjQueryプラグイン「ResponsiveIframes.js」 2012年10月09日- ResponsiveIframes.js IFrame内もレスポンシブ対応にするjQueryプラグイン「ResponsiveIframes.js」 ページ内や画像をレスポンシブ対応にするものはありますが、ページ内に貼りつけたiframeでさえもブラウザサイズに応じて伸縮させることができます。 単にiframeのサイズを変えるだけじゃなくてiframeの中身のサイズも変えなくてはいけないため、結構大変そうですがライブラリで簡単に対応できそうですね 関連エントリ ブロック要素の高さを簡単に揃えられるjQueryプラグイン「equalize.js」 Gmailスタイルのemoticonを実装できるjQueryプラグイン クリックで水滴を落としたようにアニメーションさ
JavaScript MVCフレームワークはすでに十種類以上、その比較や最新情報などのまとめ
グーグルが開発したJavaScript MVCフレームワーク「AngularJS」を紹介した1つ前の記事の反応が予想以上に大きく、1日たたずにブックマークが500以上もつきました。 本記事では、AngularJS以外にもすでにたくさん存在するJavaScript MVCフレームワークに関する情報をまとめて紹介したいと思います。 JavaScript MVCフレームワークの比較記事 既存のJavaScript MVCフレームワークを比較した記事が「The Top 10 Javascript MVC Frameworks Reviewed」です。Top10と書いてありますが、12種類のフレームワークの比較です。これは公開当時は10種類だったものが、その後11種類になり、今回のAngularJSの公開で12種類になったためです。 上記のような比較表を載せた上で、12種類すべての利点と欠点を説明し
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue.js いろいろまとめ - Qiita
GitHub - coresmart/persistencejs: persistence.js is an asynchronous Javascript database mapper library. You can use it in the browser, as well on the server (and you can share data models between them).