WebSocket
WebSocket プロトコルは仕様 RFC 6455 で説明されており、これは永続的な接続を介してブラウザとサーバ間でデータを交換する方法を提供します。接続の切断や追加のHTTPリクエストをすることなく、データを “パケット” として双方向に渡すことができます。 WebSocket は継続的にデータ交換を必要とするようなサービスに特に適しています。例えば、オンラインゲームやリアルタイムの取引システムなどです。 簡単な例websocket の接続を開くには、url の特別なプロトコル ws を使用した new WebSocket を作る必要があります:
日付と時刻をTで繋ぐ表記方法 - MEMO:はてな支店
日付と時刻を両方表現したい場合は2008-05-16T11:25:30+09:00 つまり日付と時刻をTでつなげる。 これが世界的スタンダードとしてISO8601とRFC3339に定められた日付と時刻の表現方法。 有名どころの言語やらデータベースその他ミドルウェアはすべてこれに沿った表記を解釈し入出力できるようになっている。 プログラマのみなさんは覚えておいて損はないというか絶対覚えておいたほうがいい。 日付がスラッシュ区切り（YYYY/MM/DD）だったりするソフトやらライブラリやらが巷に散見されるが、まったくおすすめできない。 http://neta.ywcafe.net/000851.html というわけで普段使っている言語でどの程度対応しているか調べてみた。 ISO8601とRFC3339があがってるけどW3CDTFも検索キーワードに入れた方が良さそう。 ちなみに、HTTP,SMT
Rails7時代のJS/CSSバンドルの新常識 – <hazm.jp />
Rails7では、jsをバンドルせずにimportmapでjsを直接読み込む方式がデフォルトとなりました。しかしwebpack等でのバンドル方式の選択肢を完全に失ったわけではありません。特定のターゲット（ES5など）にトランスパイルすることができます。レガシーブラウザをサポートする要件下ではバンドル方式を選択することもあるでしょう。そこで来たるRails7時代に、我々アプリケーションエンジニアにとってどのような手段があるのか、Railsの基礎知識をアップデートしていくのがこの記事の目的になります。早速始めましょう！ JSの読み込ませ方 かつてのRailsではSprocketsでバンドルして単一のjsファイルとして配信する方法が常識でした。Sprocketsはトランスパイルはしないものの、minifyする仕組みを持っていました。 Rails7からは、importmapまたはwebpack/e
WebAssembly入門 ─ Webフロントエンドの現実的なユースケースを知り、Wasm製アプリケーションを体験してみよう！｜ハイクラス転職・求人情報サイト AMBI（アンビ）
ハイクラス求人TOPIT記事一覧WebAssembly入門 ─ Webフロントエンドの現実的なユースケースを知り、Wasm製アプリケーションを体験してみよう！ WebAssembly入門 ─ Webフロントエンドの現実的なユースケースを知り、Wasm製アプリケーションを体験してみよう！ WebAssembly（Wasm）は、ブラウザー上で直接動くプログラミング言語として、JavaScriptを置き換える期待が寄せられますが、実際にWasmが果たすべき役割や適したユースケースとはどういったものでしょうか？ Wasmの動作を体験するチュートリアルとあわせて、山本悠滋（igrep）さんが解説します。 WebAssembly（以下、略称の「Wasm」と呼びます。「キャズム」や「～イズム」などからの類推なのか「ワズム」と発音するようです）とは、ブラウザーをはじめとするさまざまな環境で動作する、仮想マ
RedwoodJS を Ruby on Rails と比較してみる
RedwoodJS RedwoodJS は JavaScript/TypeScript で構築されたフルスタック Web アプリケーションフレームワークです。RedwoodJS プロジェクト自体は Tom Preston-Werner 氏 (GitHub 創設者であり Gravatar や Jekyll などの作成者) が中心となり始まりました。 私自身もつい最近になって同じ職場の @sakitoさんに存在を教えてもらったばかりです。 RedwoodJS は、READMEから抜粋するだけでも、次のような機能を持ちます。 フォーマット・ディレクトリ・ビルドなどに関するデフォルト構成 単一ファイルによるルーティング定義 GraphQL Client / API (with Serverless deploy) の構築 ページ・レイアウトなどのジェネレータ CRUD 操作に特化した Scaffo
JavaScriptのバンドルとトランスパイルが不要なモダンWebアプリ | POSTD
筆者はES6以前のVanilla JSがあまり好きではありませんでした。 そこで、バニラJavaScriptをなるべく書かなくていいように、2000年代を通じてさまざまなアプローチを追求してきました。最初はRJS（Ruby-to-JavaScript）、次はCoffeeScriptでした。どちらのアプローチも、バニラJavaScriptより楽しく書けるソースコードを、ブラウザが実行できるバージョンのJavaScriptへトランスパイルするものです。ある程度は、うまくいっていました。 とはいえ、これは明らかにその場しのぎの手段に過ぎず、ブラウザがより洗練されたJavaScriptを理解できる日を待ちわびていたのです。ただ、そんな日が来ることはなく、永久にその場しのぎでやり過ごすのかと思われる時期がしばらく続きました。 しかし、幸いなことにJavaScriptは改善を続け、2015年にはES6
HotwireからDHHが考えるこれからのRailsとJSの付き合い方を知る
「iCARE Dev Meetup #18」�で発表した資料です https://icare.connpass.com/event/201662/
現場のエンジニアが解説！令和最新版プログラミング独習方法。質の悪いプログラミングスクールの毒牙にかかる前に実践すべきマッチョな学習フロー
mizchi @mizchi プログラミング独習: 令和最新版 - 月額1000円のN予備校のウェブプログラミングコースでフロントエンドと Node の基本をやる nnn.ed.nico/pages/programm… - jsprimer.net を上から順になぞる - 日大尾上准教授の「Web プログラミング」のReact チュートリアルをやる zenn.dev/likr/articles/… 2021-01-05 13:27:22 リンク N予備校 プログラミングコース 初めてのプログラミングから 現場のプログラミングまで学ぶ | N予備校 N予備校 プログラミングコースは、ドワンゴの現役エンジニアが教えるプログラミング学習サービスです。プログラミング完全未経験者でも前提知識なく始められて、開発現場で活躍できるほどのスキルが身につくカリキュラムを、自分に合ったペースで学ぶことができま
blograils.com - このウェブサイトは販売用です！ - blograils リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
mrubyをWebAssemblyで動かす（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Tom Black — Ruby on WebAssembly 原文公開日: 2018/04/28 著者: Tom Black 日本語タイトルは内容に即したものにしました。 要約: WebAssemblyがやってきました！やってみたい方は本記事のwasm gemをお試しください。 2018年の世界へようこそ。最も興奮を呼び起こすイノベーションがコンパイラ界隈にも巻き起こりつつあります。ARやVRや機械学習など先端を行く話題はいくつもありますが、ソースコードを機械が実際に理解できる形に変換する役割を担うコンパイラの歴史に比べればまだまだ新顔です。コンパイラの復権は主にLLVMのおかげです（LLVMはモジュール形式のコンパイラインフラストラクチャプロジェクトです）。LLVMの重要性については、Wiredの2013年の記事に的確な指摘が
javascriptのWebWorkerを使ってみた - Qiita
WebWorkerとは？ 初心者です。 WebWorkerとはjavascriptでマルチスレッドを行うための仕組みです。 マルチスレッドとは、複数の処理を同時に行うことです。 例えば、描画処理などで ・データ取得処理 ・取得したデータの描画処理 を同時に行うと描画が滞りなく行われます。 処理を同時に行わない場合は、 の様に処理A、Bを同時に行ってスムーズに描画するという機能です。 （あくまで一例。処理が軽い場合は普通に記述して問題ない） 非同期処理は？ javascriptは非同期処理でpromiseなどありますが、 あれは処理の順番を変えているだけで同時に処理を行うものではありません（でした）。 非同期処理 ＝ 並行して処理を行ってくれる と考えがちですが、javascriptは（原則）違います。 概要とか特徴 概要 ・メインスレッド(main.js) ←メイン処理 ・サブスレッド(d
JavaScript Primer - 迷わないための入門書
ユースケース: Node.jsでCLIアプリケーション ここではNode.jsでCLI（コマンドラインインターフェース）アプリケーションを開発します。 CLIのユースケースとしてMarkdown形式のテキストファイルをHTMLテキストに変換するツールを作成します。 作成するアプリケーションは次の要件を満たすものとします。 コマンドライン引数として変換対象のファイルパスを受け取る Markdown形式のファイルを読み込み、変換したHTMLを標準出力に表示する 変換の設定をコマンドライン引数でオプションとして与えられる 目次 Node.jsでHello World Hello Worldアプリケーションを通じてNode.jsのCLIアプリケーションの基本を学びます。 コマンドライン引数を処理する コマンドライン引数を受け取り、アプリケーションから使いやすい形にパースする方法を学びます。 ファイ
経産省発の npm モジュール！住所や電話番号の正規化、ジオコーディングなどができる IMI コンポーネントツールを試した！
経産省発の npm モジュール！住所や電話番号の正規化、ジオコーディングなどができる IMI コンポーネントツールを試した！ Code for Japan の関さんが SNS でシェアしてて知ったのですが、経産省さんがなにやらオープンソースで住所や電話番号の正規化などなどをするツールを公開したとのこと。 https://info.gbiz.go.jp/tools/imi_tools/ 経産省が住所変換や法人種別名、電話番号の正規化に使えるIMIコンポーネントツールを公開しました。 ソースコードも公開。README にも使い方が丁寧に書かれていました。https://t.co/fPbV00EgZP 素晴らしい動き。こういう... #NewsPicks https://t.co/bew0qGKMFE — Hal Seki (@hal_sk) May 28, 2020 ぶっちゃけ当初はあまり期待
JSフレームワーク事情2020年始め｜erukiti
この記事では面倒なので名前に .js が付いているものは省きます。例えばNext.js は Next と表記します。 まず結論から日本ではVueはReactと二分する人気があるように観測されますが、世界的な数字で人気・シェアを見るとReactが圧倒的です。 シェアだけで見るとAngularとAngularJS（Angular系の1.x系）の合計値はVueよりも高いですが、「今後はもう採用したくない」と考える率が高く、Angular/AngularJSの人気が低下しているということは間違いありません。 ※追記: Angularのシェア、人気度に関しては、Angular及びAngularJS両方を含む数値であり、AngularJSとAngularは別物であるものが混ざってカウントされているため、Angularのシェア及び人気度はあやふやかもしれません。他の数値に関して信頼性を疑うべきかどうかは
2020年のフロントエンドマスターになりたければこの9プロジェクトを作れ - Qiita
以下はSimon Holdorf( dev.to/ Twitter / GitHub )による記事、9 Projects you can do to become a Frontend Master in 2020の日本語訳です。 9 Projects you can do to become a Frontend Master in 2020 Introduction あなたがプログラミングの初心者であるか、既に経験豊富な開発者であるかにかかわらず、この業界では、急速な変化に追いつくために新しい概念と言語・フレームワークを学び続けることが必要です。 たとえばFacebookが4年前にオープンソース化したReactは、既に世界中のJavaScript開発者にとって第一の選択肢になっています。 もちろんVueとAngularにも多くのフォロアーがついています。 さらにはSvelte、Next
Vueのライフサイクルを完全に理解した - Qiita
Vueのライフサイクルについて 今回はVueのライフサイクルについて説明したいと思います。 Vueのライフサイクルは以下のようになっております https://jp.vuejs.org/v2/guide/instance.html#ライフサイクルダイアグラム このようにVueではインスタンスが作られてから、削除されるまでの間で、ライフサイクルフックを実行することができます。 ここでは、インスタンスのライフサイクルごとに説明したいと思います。 インスタンス作成時 インスタンス作成時には以下の2つのフックを実行されます beforeCreate <script> export default { data(){ return{ hoge:"a" } }, beforeCreate () { console.log('hoge is: ' + this.hoge) } } </script> /
Vue.jsの書き方実例集(随時追加)※逆引きリファレンス的な - Qiita
Vue.jsで色々書き方のルールがあるようで、備忘録として実際に使ったものをここにまとめていきます。 最初は少ないですが随時追加していく予定です。 1.propsで受け取った変数の中身を表示 {{ }}を使う <template lang="html"> <div> <p>{{ message.message }}</p> <small>{{ message.user.name }}</small> </div> </template> <script> export default { props:["message"] } </script> <template lang="html"> <div> <img v-bind:src="message.user.img_path"> <!--<img :src="message.user.img_path">--> </div> </te
Vue.jsでビューの変更がされないときに疑うこと+主な解決策方法 - Qiita
これはcloudpack あら便利カレンダー 2018 の記事です。 Vue.jsでDOMが更新されない問題はわりとよくあたります。 ちょうど昨日社内で相談されたので、せっかくなので記事にまとめてみました。 ビューが更新されないあるある 配列、オブジェクトの更新が検出できない 配列のケース インデックスでアイテムを直接設定するとき 例: vm.items[indexOfItem] = newValue 配列の長さを変更するとき 例: vm.items.length = newLength 解決方法 1. $setを使う 2. Vueが監視出来る配列のメソッドを使う push(), pop(), shift(), unshift(), splice(), sort(), reverse() 参考リンク => https://jp.vuejs.org/v2/guide/reactivity.h
【html】画像内の特定部分のみにリンクを貼りたい（クリッカブルマップ） - Qiita
開始タグ 複雑なレイアウトをページに載せたい時は画像にして対応することが多いと思いますが、フロアマップなどの場合だとページ内リンクをつけることもあったので、今回メモ。 やりたいこと ・画像内の特定箇所にリンクを貼りたい ・レスポンシブしても同じ箇所（領域）にリンクを貼っておきたい。 方法 「クリッカブルマップ」と呼ばれるものを使います。 HTMLソースだとこんな感じ。 <figure><img src="asset/img/img_sample.jpg" alt="" usemap="#link"></figure> <map name="link"> <area shape="rect" coords="46,0,1034,456" href="#place01" alt="" /> </map> 仕組みとしては、紐付けした画像の上にareaタグで領域を指定してリンクを設定している、とい
【javascript】レスポンシブ対応のクリッカブルマップをプラグインを使わないで実装する
どうも、今回はタイトルの通りですが、クリッカブルマップをレスポンシブ対応させる必要がある時って意外とありますよね。特に地図系とか。 それで、「クリッカブルマップ レスポンシブ」とかで検索すると大体jQueryのプラグインを使って対応するという記事がずらーっと出てくるわけです。。ただ、最近はvue.jsやangularとか脱jQueryの動きも活発なわけで、そんなjQueryのプラグインなんか使いたくないという需要が少しはあるのかなと思うので、プラグインなしでレスポンシブ対応のクリッカブルマップの実装方法を紹介したいと思います。 実装概要 まず、今回の実装方法の概要を簡単にまとめます。 日本地図をクリッカブル 今回はこちらの日本地図の画像をサンプルとして、それぞれの地域をクリッカブルエリアにしていきたいと思います。 多角形（poly）パスを使用 クリッカブルマップには「rect」、「circ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
