私たちはこのオープンソースプロジェクトを世界中の人々に提供したいと考えています。このチュートリアルの内容をあなたが知っている言語に翻訳するのを手伝ってください。
現代の JavaScript チュートリアル
私たちはこのオープンソースプロジェクトを世界中の人々に提供したいと考えています。このチュートリアルの内容をあなたが知っている言語に翻訳するのを手伝ってください。
ReactとVueのどちらを選ぶか - Qiita
主に非Web系のバックエンド開発者(C/C++, Java, Python等を使用)がReactとVueをそれぞれ簡単に触れて、感じたメリット、思ったことなどをまとめています。 色々と書いてますが、どちらも完成度の高いライブラリ/フレームワークですね。 結論 JavaScript等にあまり深入りせずにWebアプリを簡単に書きたい、あるいは効率的に書くことが目的であればVueの方がお勧めです。しかし開発者としてスキルや設計などについて中長期的にレベルアップを図りたいのであれば、Reactから学ぶことをお勧めします。 何故かと言うと、ReactとVueにはそれぞれの利用者に対するスタンスが明確に異なり、Reactの方が利用者を開発者であることを想定/期待しているからです。 Reactは利用者が「開発者」であることを想定/期待します。 What, Whyを重視する 利用者を厳しめに教育する Vu
【GAS + Vue.js】GASで作ったWebアプリにVue.jsを導入してみた
Vue.js 公式より引用すると、「Vue.jsはユーザーインターフェイスを構築するためのプログレッシブフレームワークです」とのこと。 中核となるライブラリはView層にだけ焦点を当てているため、他ライブラリとの併用も簡単に行うことができるのがいいところです。GASでもこの部分を使うだけでWebアプリ製作がとても楽になります。 後々コードでも書きますが、CDNで提供されているので、scriptタグを挿入するだけで導入できるところも、とっつきやすくてとてもいいと思います。 Vue.jsの詳しい使い方は公式のドキュメントにお任せしたいと思います。 早速使ってみる Webアプリケーションの基本を読んでいれば、導入は早いかと思います。 Hello Worldのコードは以下になります。 コード.gs function doGet(e) { return HtmlService.createTempl
JavaScriptのStreams APIで細切れのデータを読み書きする
近年、PCに搭載されるメモリは爆発的に増えました。16GBや32GBのメモリが搭載されているのが当たり前の時代です。性能の制限が強いスマートフォンですら4GBほど搭載していることがあります。ストレージの読み書き速度もどんどん加速し、昔では扱えなかったようなデータ量をリアルタイムで処理できます。インターネット回線も同様に大量のデータを扱えるようになりました。 しかし現実的な大きさのデータを一度に扱おうとすると、現代でもそれなりに処理時間がかかります。ユーザはレスポンスに対して敏感で、反応が0.1秒でも遅れるとストレスを感じます。しかし時間がかかるものはかかるのです。この問題は一見どうしようもないように思えます。 そこで登場するのが「データを細切れにして処理する」というコンピュータにおける万能の薬です。細切れにして逐次処理すれば、少しずつデータを処理することができ、素早いレスポンスを実現するこ
async/await地獄 - Qiita
地獄を抜けたらそこは地獄だった。 以下はHow to avoid (or escape) async/await hellという記事の日本語訳です。 How to avoid (or escape) async/await hell async/awaitはたしかに我々をコールバック地獄から解放してくれました。 しかし、それは恐るべき地獄の、ほんのプレリュードにすぎなかったのです。 そう、async/await地獄の誕生です。 この記事ではasync/await地獄が何であるか、そしてそれから逃れるためのヒントをいくつか紹介します。 What is async/await hell 非同期JavaScriptを使用する際、しばしば複数の関数呼び出しすべてにawaitをつけがちです。 これによってパフォーマンス上の問題が発生します。 あるステートメントは別に手前のステートメントに依存はしてい
もはや自前鯖はいらない！Node.jsで作ったシンプルなチャットを開発～デプロイまでをブラウザだけでやる - Qiita
もはや自前鯖はいらない！Node.jsで作ったシンプルなチャットを開発～デプロイまでをブラウザだけでやるNode.jsHerokuSocket.ioExpresscloud9 どうも、久しぶりの投稿になります。今回は最近はまっているNode.jsについて書こうと思います。 昔からリアルタイムチャットアプリを作るのは夢だったので、今回はそれをお題にしてみます。 どんなものを、どうやって作るか 今回はこんなものを作ります。 ルーム機能や、アカウント機能などない、シンプルなチャットです。ソケットの練習のために作ったみたいなものです。実際にデプロイしたものをこちらに公開しています。 どうやって作るの？ 今回の開発では、リアルタイム通信機能が不可欠です。そのため、Socket.ioというパッケージを使います。Socket.ioと言ってしまったのでもうお分かりかもしれませんが、バックエンドはNode.
JavaScriptグラフ描画ライブラリ比較 - Chart.jsをやめた理由 - WILLGATE TECH BLOG
はじめに 技術選定に至った背景 やりたかったこと なぜ、Chart.jsではできなかったのか 比較した結果 結論 選定候補のグラフ描画ライブラリ 比較 おわりに はじめに 新卒2年目（もうすぐ3年目！）のエンジニア、宮西です。 現在、私が開発に携わっているプロダクトでは、グラフを使ってさまざまなデータを表示しています。 グラフ化の利点は、一目で要点を伝えられるところ。 開発中のプロダクトは分析系のサービスであるため、「分かりやすいグラフ」はとても大切な要素です。 今までは、Chart.jsというグラフ描画ライブラリを使って、これらの画面を作っていました。 しかし、より分かりやすくするために、高度な機能・柔軟なデザイン性が求められるようになりました。 その中で、Chart.jsでは対応しきれない部分がでてきたため、ライブラリの再選定を行うことになりました。 今回はその結果をお知らせしたいと思
JavaScript製アニメーションライブラリの原理！ イージングとCSSフィルターを組み込む方法 - ICS MEDIA
この記事は、記事「JavaScript製アニメーションライブラリの原理を理解しよう」の続編となります。前回の記事ではアニメーションの基本的な仕組みと、基礎部分の実装について解説しました。 今回はより実践的に活用できる機能として、動きに深みを出す「イージング」と、演出にエフェクトを加える「CSSフィルター」のアニメーションを実装します。CSSコーダーの方であれば、イージングはCSS Transitionで、CSSフィルターもボタンなどの演出で馴染みがあると思います。 イージングとは 前回アニメーションとは、時間経過とともに「ある値を0（0%）〜1（100%）の間で連続して変化をさせる」と解説しましたが、たとえば「最初はゆっくりで、徐々に早く変化させる」といった具合に時間経過に応じて変化の速度を調整するのが「イージング」です。 イージングには色々な種類がありますが、一般的には「easeIn~」
[JS]一昔前と比べて、かなり簡単に！ページの機能を紹介するツアーを実装できる超軽量スクリプト -Driver
ページ上の任意の要素を目立つようにハイライトさせたり、ページの機能を紹介するツアーを実装できるスクリプトを紹介します。 一昔前までのは実装が少し面倒だったり、jQueryなど他のスクリプトに依存していましたが、ここで紹介するのは実装が非常に簡単で、超軽量の4kb！ しかも依存は一切無し！ 既存ページにもすぐに利用できると思います。 Driver -GitHub Driverの特徴 Driverのデモ Driverの使い方 Driverの特徴 ページ上の任意の要素をハイライト表示します。 Webアプリの機能を順番に紹介することもできます。 ユーザーにフォーカスシフターを追加します。 キーボードでも操作可能で、ユーザーフレンドリーです。 実装が簡単で、他のスクリプトやスタイルシートの依存はありません。 わずか4kbの超軽量バニラ スクリプト。 強力なAPIを備えており、高度なカスタマイズも可能
![[JS]一昔前と比べて、かなり簡単に！ページの機能を紹介するツアーを実装できる超軽量スクリプト -Driver](https://cdn-ak-scissors.b.st-hatena.com/image/square/22f66ab471ebdd64b5590aad13ac85273ede28f7/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201801%2F2018031401-01.png)
JavaScript でテキストをクリップボードへコピーする方法
document.execCommand('copy')ただしこの処理には前提条件があって、コピーされるのは「処理実行時に画面上で選択しているテキスト」に限られます。つまりこのメソッドだけでは、任意の文字列をコピーさせることはできないのです。 そこでこの機能を拡張して、引数で渡した文字列を擬似的に選択状態にしてコピーさせる関数を用意しました。 JavaScript で任意のテキストをクリップボードにコピーする関数この関数を実装する上でのポイントは、裏で文字列を選択するためのコピー用テキストエリアを一時的に作ることです。ここにコピー対象文字列を出力し、JavaScript で選択状態にすれば冒頭のコピーメソッドを実行することができます。 そしてコピーが完了したら、作成したテキストエリアを削除します。プログラム処理においては一瞬の出来事なので、画面上にテキストエリアが表示されるのを目視すること
Vue.js の基礎を学ぶために LearnCode.academy の学習動画を活用したら最高だった - kakakakakku blog
LearnCode.academy とは？ www.youtube.com LearnCode.academy という YouTube チャンネルがあり，Vue.js や React + Redux などを解説した，無料の学習動画が公開されている．今回受講したのは「Vue Tutorial」で，全9回となっている．合計しても「約1時間程度」なので，スキマ時間を活用して気軽に学ぶこともできる．「Vue.js は気になるけどまだ試したことがない」という人にオススメ！ Vue Tutorial #1 - Vue JS Tutorial for Beginners #1 setting up an app Vue Tutorial #2 - Vue.js filters and computed data Vue Tutorial #3 - Vue.js directives and event
“Web Componentsだけ” で新サービスを実装して見えたこと - Qiita
Double O というサービスを作りました。 フロントエンドはピュアな Web Components を採用していて、バックエンドは Lambda と DynamoDB のみで構成しました。 (厳密には CloudFront とか API Gateway とかもあるけどそこは省いていいよね？) REST API 以外の Util 系の Lambda 関数はすべて AWS Cloud9 で管理することで環境構築も不要な Lambda ができて楽でした。 TL;DR サーバーレスについてはごく普通のことしかしていないので、詳しくは触れないでおきます。 ピュアな Web Components だけでサービスを成立させることができた。 HTMLElement クラスを継承するだけなのでメジャーライブラリは不要になった。 Web Components の Custom Elements は標準仕様
JavaScript配列の空要素の話 - NullPointer's
gfx.hatenablog.com 配列の空要素の問題ですね。容量は確保されてるが値が（undefinedさえも）入っていない状態。 $ node -p -e "new Array(3)" [ <3 empty items> ] この配列のlengthは3になるのだが、forEachなどのイテレーション関数では空要素は列挙されない。 $ node -p -e "new Array(3).length" 3 $ node -e "new Array(3).forEach(i => console.log(i))" # 何も出力されない リンク先ではArray.fromやスプレッド演算子を使って、undefinedをセットするコードが紹介されているが、自分はこういうときはfillを使っている。 $ node -p -e "new Array(2).fill()" [ undefined, u
Bookmarklet という一番身近な自動化技術 | blog.jxck.io
Intro 「毎回やるなら bookmarklet にでもすれば?」と言ったら、後輩が「そんな便利なことできたんですね、知りませんでした」と言っていた。 そんな時代にこそ、今更だれも解説しないであろう、 bookmarklet という技術についてもう一度書いておく。 Bookmarklet 簡単に言えば、 JS を書き、それを Bookmark として登録すれば、クリックするだけで現在のページでそれが動くというものだ。 ブラウザ上で何かを自動化したいと思うなら、最も簡単に実現できる便利な技術だろう。 似たような手法ではブラウザの Extension などもあるが、 Bookmarklet の良いところは一切誰にも邪魔されないというところだ。 開発者登録も、ストアへのアップロードも、難解なドキュメントを忖度して煩雑な設定ファイルを書く必要もない。 開発者ツールで、「こんなことできないかな」と
2018 年は Hyperapp の年だ - Qiita
この投稿は Increments Advent Calendar 2017 の14日目の記事だよ。Hyperapp という JavaScript ビューライブラリを自作しているので、その説明と作った理由について話す。 Hyperapp ができるまでのプロセスや、どんな価値観で作ったかなどを書く。新しいフレームワークを作る時の参考になれば嬉しい。 Hyperapp とは？ Web アプリのフロントエンド用 JavaScript ライブラリ。React, Preact, Vue といった代表的なものよりもずっと小さく、1 KB という超軽量サイズ。他のライブラリに依存することなく使えて、さらにスピードもある Elmアーキテクチャーに基づいてて、アプリケーション設計はElmやReact、Reduxと似てるけど、ボイラープレートは少ないし、TypeScriptにも対応して、とにかくシンプル。 El
JavaScriptで大量のオブジェクトの当たり判定を効率的にとる - Subterranean Flower Blog
ゲームなどのコンテンツにおいて、「当たり判定」から逃れることはできません。オブジェクトとオブジェクトが衝突したかどうかという判定は、インタラクティブコンテンツにおいて最も重要な部分になるからです。 当たり判定の実装自体は難しくありません。ですが、素朴な実装ですと、対象となるオブジェクトが大量である場合に、十分なパフォーマンスが出ません。これはオブジェクトの多い、現代的なゲームでしたり、弾幕シューティングなどを作るときに大きな障害となります。 この記事では、大量のオブジェクトの当たり判定を処理する、効率的な方法について紹介します。 まずは素朴に実装してみる 当たり判定の処理を語るには、ある程度ゲームの骨組みのようなものが必要になってきます。もちろんクラスなどを使わないベタ書きでもよいのですが、大変読みにくくなってしまいます。ですので、今回は、まず簡易的なゲームエンジンのようなものを作って、そ
とにかく楽してVue.jsでTypeScriptを使いたい
This document provides an introduction and agenda for a session on migrating game server infrastructures to the cloud. It summarizes the experiences of Ubisoft and Behaviour Interactive in migrating their games Dead by Daylight and For Honor from peer-to-peer networking to using Amazon GameLift dedicated servers hosted on AWS. It also discusses how Gearbox Software developed online services for Bo
Vue.js + Electron でマークダウンエディタをサクッとつくってみた - dev.kokushin
最近話題の軽量フレームワーク「Vue.js」と簡単にアプリ化できる「Electron」を組み合わせて、練習がてらマークダウンエディタをつくってみました。 Vue.js + marked.js でマークダウンエディタ本体を作る 公式サイトのサンプルをそのまま引用します。 アプリ名は「MarkDown Visual Editor」にします。 jp.vuejs.org せっかくなので webpack を使ってみる せっかく覚えたので積極的に使っていくスタイル。 以下、現時点でのディレクトリ構造です。 mdve/ ├ app/ │ ├ app.js │ └ index.html ├ package.json └ webpack.config.js app.jsに「Vue.js」の処理を書きます。 Vue.js インストール $ npm install vue --save marked.js イン
差分検出アルゴリズム三種盛り - Object.create(null)
こんばんは. 気がつけばもうずいぶんと涼しくなってきました. 勢い余って凍ってしまったりせぬよう, くれぐれも普段の言動にはお気をつけください. はじめに さて, 我々人類にはどうしても二つの文字列 (あるいは行ごとに区切られたテキスト) 間の差分を求めなければいけない瞬間が発生します. 先人たちはそういった時のために diff のようなツールを開発し, それを利用することで文明はめざましい発展を遂げてきました. しかしながら, 使用するアルゴリズムを比較検討したい場合, 「差分」の定義を変えるなどして既存のアルゴリズムに変更を加えたい場合, diff のない異世界に飛ばされて自分で実装しなければいけない時などにおいては, 差分検出アルゴリズムについての理解が必要不可欠です. というわけで, この記事では文字列間の差分検出とは何かということと, 差分を求める三種類のアルゴリズムの紹介・解説
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
P'S CREATOR | ユーザー目線を大切にするWEB制作の会社
