SPA が、ウェブ開発のベストプラクティスになる時代 - mizchi's blog
最近のフロントエンドに関するお気持ち。正直まとまってはない。 最近、こんな感じのツイートや記事が増えた。 web 技術をキャリアの中心にしない シングルページアプリケーション (以下SPA) の台頭により、私の観測範囲ではモダンな Web サイトは SPA で作られるようになった。サーバーサイドは JSON を返す API サーバーとなり、DB やバックエンドシステムのプロキシのような存在になりつつある。 私はサーバーサイドエンジニアとしてキャリアを積んできた。SPA が流行りだした頃、いずれサーバーサイドエンジニアは不要になって自分のキャリアを考え直さなくてはいけない時期がくるのではないかと戦々恐々としていた。 自分も元々、SPA を他サイトとの「差別化技術」と定義していた。ブラウザのタブページのライフサイクルにおいて、初期化プロセスを一回にまとめてシームレスな遷移を実現する技術。たとえ
Sequelizeを使用してデータベースを操作するための基本的な情報(2020.09更新） - Qiita
Sequelizeとは SequelizeはMYSQL,MariaDB,SQLite,Postgresに簡単にアクセスするためのNode.jsのライブラリである。 以下の機能を有している。 オブジェクトとDBの関連を取り持ってくれる。これは１テーブルだけの関係ではなく、複数のテーブルの関連を定義することができる。 入力されたデータが適切かどうかのバリデーションチェックを行う。 トランザクションのサポートしている。 マイグレーションの機能をサポートしている。これにより、データベースのスキーマの更新が容易になる。 ロックの機能をサポートしている。 導入方法 SQLiteを操作する場合 その他DBについては下記を参照 https://sequelize.org/master/manual/getting-started.html 下記のDBを操作するためのサンプルが乗っている。 Postgres
ecmascript-paper
ECMAScriptのカンペ ECMAScript関係についてざっとみるカンニングペーパー。 2015年10月18日の次世代 Web カンファレンスでstandardizationのセッションで議論に参加するらしいのでそれのカンペです。 ここに書かれている情報は2015年10月17日現在のものです。 追記: 縦に長い記事読むのが面倒な人向けにスライド形式にしたものも置いておきます。 Introduction | ECMAScriptとは何か？ ECMAScriptとは? Ecma Internationalによって標準化されてるJavaScriptの仕様の事。 仕様: ECMAScript 実装: JavaScript 2015年10月18日のStableな最新版はECMAScript 2015(aka. ES6)。 ECMAScript® 2015 Language Specificat
さよなら CoffeeScript - mizchi's blog
prototype.js が jQuery に置き換えられた時、開発者が気づいたのは、自分に本当に必要だったのはprototypeのメソッド拡張などではなく、クエリエンジンだったということ。 coffeescriptが当初、熱狂的に支持された背景はなんだっただろう。今思えば、それはアロー記法とクラス構文だったと思う。 javascriptの関数型への憧れ、prototypeベースの限界 javascript は断じて関数型言語ではないが、他の言語と同じぐらい関数型言語に憧れていたのも、また事実だろう。しかしビルトイン関数が高階関数を要求するデザインにしては function というキーワードはながすぎたし、その function が暗黙に作り出す this スコープの複雑な振る舞いも開発者の悩みの種だった。「あらゆる関数スコープで状態を持つことが"できすぎる"」という割れ窓だった。 ES5
JavaScript初学者へ向けて 【Goodpatch Advent Calendar 2015 4日目】 - it's an endless world.
この記事はグッドパッチのエンジニア陣がお届けするGoodpatch Advent Calendar 2015の4日目の記事です。 昨日はsagarayaのSwiftについての記事でした。 qiita.com 本日は表題の通り、JavaScript初学者に向けてのお話ができればと。 お前だれよ？ 株式会社グッドパッチで、グロースデザイナー/フロントエンドエンジニアという肩書きで働いています。 今年はメインの仕事以外にも、幸いなことにschooさんにお声がけいただいてJavaScriptの初学者向けの授業を作ったり、(まだ刊行されてはいませんが)JavaScript初学者向けの本を執筆する機会をいただけたりと実りの多い一年でした。 schoo.jp 実は私がJavaScriptを書きはじめたのはほんの数年前だったりします。 そんな自分が初学者にものを教えるのもどうかとは最初は思ったのですが、自
どうしてこうなった？ Node.jsとio.jsの分裂と統合の行方。これからどう進化していくのか？
7 principles for rich web apps And how next.js achieves these principles
iTunesで聴いている曲をSlackに通知するアプリをElectronで作った - Qiita
PCアプリ開発者はWeb技術を見くびらないほうがいい、あなたの仕事は今にも失われつつある。 会社のチャットにサーバーアラートを流している部屋があるのだけど、最近ノイズが激しくて見ているだけで心が荒れてくる。そこで、全然関係ない情報を流したらかえって良くなるのではないかと思って、iTunesの曲の情報を流すようにしてみたら案外評判が良かった。スクリプトをNode.jsで書いていたので、Electronでアプリ化すれば簡単に他の人でも使えると思って作った。 Last.fmでもいいのだけど、アートワークがアイコンとして表示されたり、iTunesのURLがリンクになっていたりするところをこだわってる。 使いかた SlackでIncoming Webhookを追加して、WebhookのURLを手に入れます。 https://slack.com/services/new/incoming-webhoo
JavaScriptのループはどれが一番高速なのか - Qiita
JavaScriptで画像処理などの重い計算をしているとどうしても気になるのがループの部分。実際の処理に加えてループの部分でのロスが気になり始めたので実際にどのループ方法が速いのか試してみました。 概要 0~9999999の長さ1000万の配列のすべてを足し合わせるという単純な計算を行います 配列は、各ループの前で常に初期化を行います。 ループはforまたはwhileを用います。foreachやforinは使いません。 v8（Node.js）、Chrome、Firefox、Safariで実験を行います 筆者が噂で聞いた５つのポイント（後述）を加味した計32種類のコードを自動生成し、実行します。 各プラットフォームで５回実行し、平均をとります。 ウェブブラウザではWebWorkerを用いて実行します。 結果は実行環境に左右されている可能性があります 環境 MacBook Air (11-in
ipselon/react-ui-builder · GitHub
README.md Description This tool is a visual builder of React JS components for your web application. In builder you can easily combine available components with each other, and see how they look and feel right on a web page. Then you can generate a source code of new component from the combination, and builder will include all children and dependencies. Moreover you can generate Reflux actions/sto
「JSオジサン #5」 イベントレポート | Goodpatch Blog
6/25(木)に21cafeにて開催されたグッドパッチ協賛のイベント「JSオジサン #5」のレポートをお届けします。 JSオジサンとは？ JSオジサンはJavaScriptにまつわるLT(ライトニングトーク)を、気軽にアルコールも入れつつ、普段の勉強会とは一味違う感じで楽しむイベントです。 LTの内容はオジサンらしく濃い話ばかりで、普段の仕事への活用の意味でもネタの意味でも好評をいただいております。 こんな名前のイベントですが若い方はもちろんのこと、多くの女性にも参加・登壇いただいています。 昨年3月に行われた第1回から数えて、ついに第5回目。今回も定員80名のところに200名あまりから参加希望をいただきありがとうございました！ 残念ながら参加できなかった方も、この記事をで少しでも雰囲気がつたわればと思います。 LT紹介 それでは、各登壇者さんたちがどのようなLTをされたのかを紹介していき
Safari 9.0の新機能の概要 - console.lealog();
以下の機能がSafari 9.0から追加されるそうです。 ホヤホヤ情報なのとざーっくり訳なので、間違ってたらごめんなさい！ developer.apple.com Secure Extension Distribution OS XのSafariの機能拡張が、すべてAppleでホストされるようになって(Safari Extensions Galleryっていうらしい)、より安全に使えるようになります。 Safari Extensions Galleryで公開された拡張は自動アップデートされて、 以下の2行を拡張のマニフェストに追加することでその恩恵が得られるとのこと。 <key>Update From Gallery</key> <true/>Safari Extensions Galleryに置かず、独自に拡張を公開することも引き続き可能だが、そっちは自動アップデート対象外。 ただし、S
Window.prompt() - Web API | MDN
WindowインスタンスプロパティclosedconsolecookieStore (en-US) Experimental credentialless (en-US) Experimental customElementsdevicePixelRatiodocumentdocumentPictureInPicture (en-US) Experimental event 非推奨 external (en-US) 非推奨 fence (en-US) Experimental frameElementframesfullScreen Non-standard historyindexedDBinnerHeightinnerWidthlaunchQueue (en-US) Experimental lengthlocalStoragelocationlocationbarmenubarmoz
5minで分かるpower-assert
power-assert 5分ぐらいでわかるpower assert power-assert power assert assert(a === b); のような単純なアサーションのみ必要十分 Assert失敗時(テストが通らなかった時)に分かりやすい情報を表示 沢山のアサーションを使い分けしなくていいというメリット そもそも何故アサーションの種類が豊富なのか? 例) Chaiのexpect 33コもアサーションメソッドが存在 expect('foobar').to.contain('foo'); contain 含んでないから失敗した 失敗した時に何故失敗したのかを表示することが出来る どうやって動いてるの? power assert !== アサーションライブラリ コードを変換したりするのでツールに近いテストツール Work flow テストコードをpower-assert用に変換し
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webアプリケーションで 60fpsを(極力)目指す
React Native - ネイティブ開発の覚醒 -
Electroknit！ - Node.jsでセーターを編む方法
フロントエンドに秩序を取り戻す方法 〜はてなブログ編集画面をリニューアルするためにやったこと〜 // Speaker Deck
Atomをもっと使いやすくする方法
Dynamics.js
Hello, ES6 ~これから迎えるJSのミライ~ - @yoshiko_pg