ここのところ雑にWebサービスをリリースする機会が減って最近はFlutterでネイティブアプリばかり書いてるのでWebの最新に追いつけてない。 最近の流行りのWebサービス開発について自分の必要そうな範囲でちょっと調べてみる。 自分の場合、フロントエンドはTypeScript+(Vue or Nuxt)でやって、サーバーサイドはRailsで書いちゃうことがまだ多い。 これでもなんとかなるけど、もうどうせならJSで一気通貫でフロントエンドとサーバーサイドを書ければ楽なのにと思いつつある。 パッと思いつくのはTypeScriptでフロントエンドをNext,Nuxtあたりでやって、バックエンドAPIをexpressとかサーバーレスAPIを適当に書くとかだけど、今だともっと良い方法ありそう。 本当はDartでサーバーサイド、FlutterでwebまでいければDart統一時代になって願ったり叶ったり

この資料には宣伝が含まれます ライセンス Creative Commons — 表示 - 非営利 - 改変禁止 4.0 国際 — CC BY-NC-ND 4.0 内容 これから WebRTC を学ぶ人が何を学ぶべきで、何は学ばないべきなのかを書く。定期的に更新していく。 趣味で学びたい人はターゲットに入っていません、仕事で利用する場合のみがターゲット。 まとめ 急がば回れで、W3C の資料を理解できるまで読み込む。 下手にフレームワークに依存したりして簡単な仕組みを覚えてしまうと後からツライ。 Media Capture and Streams WebRTC 1.0: Real-Time Communication Between Browsers Identifiers for WebRTC's Statistics API 作って学ぶも良いが、まずは出てくる単語などの意味を理解できるの

Copyright (c) 2018-2021 the Deno authors. MIT License. 日本時間の今日（2021年1月20日）に Deno の v1.7.0 がリリースされました。 詳細なリリース内容は上記のリリースノートにまとまっていますが、いくつか日本語でご紹介したいと思います。 なお、v1.6.0 （2020年12月9日リリース）の紹介記事は以下になります。よろしければこちらもご覧ください。 今回は以下の点を紹介します。 deno compile コマンドの改善 Data URL 形式の import に対応 DNS 解決を行う Deno.resolveDns API の追加 Deno 内部の TypeScript コンパイラを使うための API を Deno.emit に統合 deno fmt コマンドが Markdown のフォーマットに対応 Web Str

オブジェクト指向には、カメラがやっとついたころのガラケーのイメージがある - きしだの Hatena の件。基本的には同意。ただちょっと切り口が違うので自分の意見を言っておく。ただ、このテーマで何度か書こうとして失敗していて、今回も成功しているとはいえない。 宣言的プログラミングの時代 現代の主流は「宣言的プログラミング」であると思っている。これはリソースの宣言と、その状態遷移の手続きや振る舞いの付与が中心にある。 宣言型プログラミング - Wikipedia その代表的な例がフロントエンドの React と、バックエンドの k8s で、どちらも時系列に基づいた状態の宣言と、フレームワーク側による状態遷移処理、 Reconcillation(調停) が基礎にある。 フロントエンドとバックエンドという両極端な世界で、この変化が起きたのがこの時代を反映したものであると思う。 例えば、jQuer

ライセンス Creative Commons — 表示 - 非営利 - 改変禁止 4.0 国際 — CC BY-NC-ND 4.0 前提 Session Initiation Protocol (SIP) 系は除きます Controlling Multiple Streams for Telepresence (CLUE) 系は除きます 定義 実装者 WebRTC スタック実装者 開発者 SDK などを利用したアプリ開発者 保留 RFC 8865: T.140 Real-Time Text Conversation over WebRTC Data Channels

... そして今に至る。つまりPHS人生の半分近くをHYBRID W-ZERO3で過ごしたことになる。会社徒歩10分とかに住んでるのでテスト機材以外に他の端末を持ってないってのも有るけど。。 他がフラグシップ端末なのに途中で nico. が挟まっているのは就職活動のため。コレを握りしめてmixiの面接に行ったら アンケートが携帯電話回答方式 で、それによって一発で落とされたのは思い出深い。。(当時は新卒の就職の状況があんまり良くなく、2桁の会社を受けて内定をくれた会社は今の会社の他にIIJとCRI・ミドルウェアだけだった。) 他の端末は基本的に持ち歩いていない。なので、iアプリとか公式サイトのような、いわゆる携帯電話の文化には殆ど触れることなく育ってしまった。 HYBRID W-ZERO3 自体は10年の使用に耐え、W-SIMやUSBポートの蓋が千切れちゃった以外は問題なく使えていた。特に

この文章について これは Front-End Study #3「『当たり前』をつくりだすWebアクセシビリティ」で基調講演をするにあたって、登壇内容を整理するために書いたものです。登壇内容とは一部に差異があります。 イベント映像 この文章はむちゃくちゃに長いので、登壇映像を見たほうがいいかもしれません。わたしの発表は13:23くらいから30分ちょっとです 登壇資料（内容は同一です） https://speakerdeck.com/ymrl/webenziniatosite-imazhi-tuteokitai-webakusesibiritei https://docs.google.com/presentation/d/1uhCvhh6sZCPUnReSBVDjvGfNAOTKbZ5Sxs8fYMlxMsI/edit?usp=sharing 目的 Web業界で「エンジニア」の肩書で仕事して

この記事は Front-End Study #3 で発表されたライブコーディングの内容を記事にしたものです。記事中のソースコードは GitHub でご覧いただけます。 この記事は、これまで一般的なフロントエンドエンジニアだった私が一年ほどアクセシビリティーについて勉強する上で 「最初に教えてくれればよかったのに〜！」と思った内容 を React と Next.js を用いて紹介するものとなっています。 読み終わった後に次にコードを書く際にふと意識できるようなアクセシビリティーの普遍的な事実を紹介し、最後に今後の React の動きについて軽く触れるものになっています。目次は次のとおりです： 基本事項 SPA のルーティングによる問題 リッチなコンポーネントでの例 Jest + React Testing Library でのテスト Reactとアクセシビリティーの今後の動き 役に立つweb

本記事は書きかけなので内容(タイトルすらも)は随時書き換わっていきます。ドラフトのうちは内容の正確性や文書全体としての整合性についても荒っぽい部分が多々あります。ご容赦ください。 はじめに 本記事はソフトウェア開発者がハードウェアに近い低レイヤといわれる領域に入門するとき、とくにアセンブリ言語に出会ったときにつまずきがちなことを紹介します。主な対象読者はJavaScriptやPythonなどのスクリプト言語などによるアプリ開発からソフトウェア開発に入った、それより下のレイヤになじみのない人です。 筆者は常々アセンブリ言語は技術的にものすごく難しいわけではないものの、学習につまずく人が非常に多いという印象を持っています。その主な原因の一つは、みなさんが普段慣れ親しんでいる人間に使いやすいように作られた高級プログラミング言語(以下高級言語)と、機械に解釈させやすいように作られているアセンブリ言

はじめに この記事は、いままで Docker を開発環境としてお気持ちで使っていた初心者が書いています。 玄人の方々におかれましては、暖かい目で見守って頂けますと幸いです。 （誤っている情報などありましたらディスカッションにてお願いします…！） 最初は下の記事で紹介されている Vercel + Heroku での運用を考えていたのですが、Free Dyno があまりよくなかったので（スリープしたり、時間枠の概念だったり）悩んでいました。 👇 Vercel + Heroku 構成の紹介 そこで知人が Docker ベースでの VPS 運用を勧めてくれて、その知人の手厚いサポートの末になんとか構築できました。本当にありがとうございます！ (単純比較できるものではないですが、Heroku Hobby は $7/月、Vultr は $5.5/月 なので自分で運用したほうが安い！) 完成図 Git

1.0 が先日リリースされた Wasmer で遊んでみよう！のスクラップ 今日はこのドキュメントをやる。 Wasmer とは Wasmer は WebAssembly のランタイムの一つ。この上で WebAssembly を実行することができる。 Docker 上でアプリケーションが動いていて、Docker をインストールした先なら本番環境とローカルが同じ環境で動かせるというのが今の時代は主流になっているが、それと似ている。 コンパイル後のターゲットを WebAssembly にすると WebAssembly ランタイムをインストールした OS ならどんな OS でもアプリケーションを動かせるようになる。 WebAssembly ランタイムは現時点でかなりの種類があり、代表的な例だと wasmtime や Lucet がある。 その他さまざまな WebAssembly ランタイムはこのペー

tl;dr API Route でクライアント用のコードも一緒に実装すると型安全に実装しやすい ただしセキュリティは気をつけてね 発想 Next.js から Prisma ORM を利用する という記事で、 Next.js の getServerSideProps で prisma のコードを使う例を紹介しました。 これは pages というユニバーサルなエンドポイントで、クライアントとサーバー用のコードを両方記述しています。 import type { GetServerSideProps } from "next"; import prisma from "../lib/prisma"; type Props = { count: number; }; export const getServerSideProps: GetServerSideProps<Props> = async

Next.js + React Server Component のリファレンス実装が出たので、手元で動かしながら理解したメモ。 vercel/next-server-components: Experimental demo of React Server Components with Next.js. Deployed serverlessly on Vercel. これを書いてるモチベーションとして、Twitter を見る限り React Server Component のことを 「ただのサーバーサイドへの先祖返り」とか「SSR 結果を dangerouslySetInnerHtml してるだけでは？」みたいな反応があったので、そのへんの誤解を解きたい。 Introducing Zero-Bundle-Size React Server Components – React Bl

V 言語について 一時期話題になった V 言語ですが、みなさまは覚えているでしょうか。 Go にインスパイアされたシンプルな構文、NoGC かつ Rust のような難しさもないメモリ管理。小さいバイナリサイズと高速なコンパイル、ホットリロードなど、様々な目玉機能を謳って登場した言語でした。 発表するが公開しない。バイナリは公開するがオープンソースにはしないなど、期待感をあおる情報の出し方をしたのもあって、当初こそそれなりに話題になりましたが、今となっては誰も話題にしなくなった感は否めません。 ところで、会社が消滅して無職になった私は数か月前から V 言語の開発に参加しており、執筆時点では全体で 23番目、直近1か月で 7番目の Contributor です。 私が知る限り、アクティブに活動している日本人の開発者はほとんどいません。 そこで、コミュニティにも慣れ V 言語のことが少しづつわか

2020年も残すところわずかとなりました。本年もお疲れ様でした。 今は2020年12月31日大晦日の夜です。本当は2021年1月1日0時0分にドヤ顔で公開しようと思ったのですが、力尽きたのでもう公開します。 この記事は「イエソド アウトプット筋 トレーニング Advent Calendar 2020 無限列車編」のXX日目です。縮退しているたけうちさんがお送りいたします。 TL;DR Apple M1は、Intel Core i7と比べて、KotlinやTypeScriptを使った実プロダクト開発で、倍近く速い。 ただし、まだ自分でトラブルシューティング出来る玄人向け(僕はサポートしたくありません)。 前振り 2020年11月末に、開発機として使用していたMacBook Proの液晶が壊れてしまったのですが、色々大事なデータが入っているのと、忙しいのもあって年を越してもまだ修理に出せていま

このページの内容は古くなっています。 最新の情報については、以下のページを参照いただければと思います。 https://zenn.dev/uki00a/books/effective-deno/viewer/how-to-use-npm-packages DenoはJavaScript/TypeScriptランタイムであるため、既存のNode.jsやブラウザの資産をある程度活かすことができます。 この記事では、Denoからnpmパッケージを使用する際のノウハウについて、パッケージの種別ごとに解説します。 DenoとNode.jsの両方をサポートするパッケージ Node.jsとブラウザの両方で動作するパッケージ CommonJS形式で配布されているパッケージ Node.jsのAPIに依存するパッケージ DenoとNode.jsの両方をサポートするパッケージ npmパッケージの中にはDenoと

追記) v10.2からデフォルトでGoogle Fontsの最適化が行われるように Next.js v10.2から自動でWebフォントの最適化が行われるようになりました。v10.2時点ではGoogle Fontsにのみ対応しているとのことです。特に設定は不要で、いつも通りGoogle Fontsを読み込めばOKです。 ↓ 詳細 これより下の解説は古い内容になります。実装の参考にしないようお願いします。 以前、Next.jsのリポジトリを眺めていたときにFont Optimizationsというプルリクエストを見つけました。 2020年12月時点ではExperimantalな機能のようですが、v10.0.4で既に使えるようになっていたので試してみました。 :::message alertz Next.js v10.0.4でのドキュメントに則っていない記録になります。 ::: Font Opt

コミュニティ抽出とは簡単に言えばグラフにおけるノードのクラスタリング手法です。具体的なアルゴリズムとしてはGirvan–Newman法をはじめ様々なアルゴリズムが存在しますが、この記事では去年（2019年）提案された新しい手法について解説したいと思います[1]。 [1907.03993] Community Detection on Networks with Ricci Flow 話の元になっているのはこちらの論文で、グラフをリッチフローによって変形し、伸びたエッジを切断していくことでクラスタを求めるというアルゴリズムです。リッチフローという聞き慣れない言葉が出てきましたが、ちゃんと後で説明するので気にせず進めましょう。 まずは実際にグラフのクラスタリングを行う様子をアニメーションで見てみてください。 アルゴリズム自体はそれほど難しくありませんが、背景を含めて理解するためには2つの理論

本資料について 本資料は日本大学文理学部情報科学科の開講科目「Web プログラミング」の教材として作成されました。本資料は下記のライセンスの範囲内で、当授業以外でも自由にご利用いただけます。 対象読者 本資料は、以下の教材を学習済み、もしくはそれと同等以上の知識を持っていることを前提としています。 React チュートリアル：犬画像ギャラリーを作ろう 基本情報技術者試験レベルの関係データベースの知識 本資料で学ぶこと 本資料では以下の内容を学びます。 Express と Sequelize による API サーバー開発 React と API サーバーの連携 Cross-Origin Resourcer Sharing React によるルーティング Auth0 によるユーザー認証 Heroku による API サーバーの公開 ライセンス この作品はクリエイティブ・コモンズ 表示 4.0

自作プログラミング言語でコード補完やタグジャンプをしたり、ソースコードに色をつけたりする。