JSer.info #745 - Next.js 15.5がリリースされました。 Next.js 15.5 | Next.js Turbopackがベータとなり、Node.js MiddlewareとtypedRoutesがS...

ブラウザ/JavaScript等についてのブログ

この記事は完成していません 更にコードに誤りがあったりして修正されていなかったりするので、一度整理されるまで落とすかもしれません この記事の内容 プログラマが美しい言語を求めて最終的にたどり着く言語、LISP。 プログラミング言語を作るということは、難しいと思われがちですが、実際のところ読み取った文字列を解釈するプログラムを作成するだけで独自の言語を作ることができます。 ただし、プログラミング言語として利便性を実用レベルまで持っていくのは通常、容易ではありません。しかし、Schemeであれば比較的実装が簡単かつ高度な言語を作ることができます。 Schemeはシンプルさとパワフルさの両方を兼ね備えたLISP方言の言語であり、ミニマルな仕様から世界で最も実装される言語です。今回はそんなSchemeをJavaScriptに実装します！ 最終的な目標は、ブラウザにCUIを表示して対話形式でSche

結果はどうなったでしょうか。 自分が今使っているGoogle Chromeだとこうなりました。 結果は{a: 10}というオブジェクトです。まあ、これは当然ですね。3 + 5と入力すれば実行されて8が返ってくるのですから、{a: 10}というオブジェクトリテラルを書けば{a: 10}というオブジェクトが作られるのは当然です。 ……。 ここで、一部の人は「おいふざけんなよ」と思っているかもしれません。というのも、この例は環境によっては違う結果になるのです。具体的には、Chrome以外2のブラウザのREPL（FirefoxやEdgeなど）が該当します。あと、ts-nodeのREPLも該当するらしいです。これらの環境では、結果は{a: 10}ではなく次のようになります。 オブジェクトを作ったはずなのに結果が10とか意味不明ですね。そもそも、こんな簡単なプログラムで結果が全然違うとか、JavaSc

某社で自分が React/Redux + TypeScript などの講習をやってみた結果、TypeScript 入門用資料が必要だと思って書いたやつです。 このドキュメントのターゲット TypeScript で書かれたプロジェクトに参加する人 TypeScript を導入するために、その事前知識が必要な人 このドキュメントの読み方 ES2015 for Beginners ES2015 for ES5 Programmers ES Modules 非同期表現: Promise と async/await TypeScript エコシステム編 自分が React/Redux などの講習でいろいろやってみた結果、 ES2015 と TypeScript を同時に教えると、初学者は何がどの概念に由来するかの区別が出来ずに混乱します。なので、ES5 -> ES2015, ES2015 -> Ty

東京ラビットハウスのerukitiです。ごきげんよう。 Nuxt大人気ですね。ですが皆さん、Nuxtを使っていてもその中身がどうなってるかまではちゃんと調べている方は少ないのではないでしょうか？エンジニアたるもの中身をちゃんと知らずに使うなどとはもってのほかです！ そこで今回の記事はではNuxtの中身を読んで仕組みを解説します。 2018/10/08（月曜祝日）に開催される技術書典5では、Nuxtの中身を主な題材として、JavaScriptフレームワークの技術と仕組みについて解説する本と、V8を崇める本の2冊を出す予定です。ご興味があればサークルページから、チェックリストに登録してみてください。 この記事は、本を書く過程で調べ上げたことを元にブログバージョンとしてまとめたものです。 誤りがある、ここがわかりづらい、もっと深く説明がほしいなどの要望があれば、お気軽にコメントや、@erukit

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 前置き（とばしてください〜） めっちゃ久しぶりに更新します。 プロフィールなども古いですがとりあえず今度そのあたりも更新しようと思っています。 簡単に今の私について。 携帯の販売→スマートフォンアプリの専門学校→Web制作会社→フリーランス→フリーランスの時に仕事を受けたスタートアップの会社に就職（まだ2週間前の話） こんな感じです。 フリーランスのときは（今もまだ仕事はちょこちょこ受けてますが） 基本的に私ができる仕事はなんでも受けていました。 ので、エンジニアの仕事があればデザインの仕事、Botのシナリオ作成（UXライター的な）、プ

第1回となる今回は、「リアクティブシステム」が登場した背景や注目を集めている理由などの概略を紹介します。 リアクティブシステムとは何か？ ここ最近、「リアクティブ」という言葉を耳にしたり、SNS上で目にしたりという機会が増えたのではないでしょうか？　リアクティブは、目まぐるしく進化するソフトウェア構築技術の中で、次世代ソフトウェア構築のためのベースとなる技術の一つとして注目されています。しかし、ひとくちにリアクティブといっても、単にリアクティブと言ってみたり、リアクティブプログラミング、React.js、リアクティブストリームなど様々で、リアクティブの明確な定義が存在せず、その捉え方もまた様々です。そこで本連載では「リアクティブシステム」にフォーカスして、「リアクティブシステム」とは何なのか、どうやって作るのか、「リアクティブシステム」によって誰がどんなふうに幸せになれるのかを紹介していき

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? ※この記事はずいぶん内容がわかりづらかったようで、さまざまな反応を頂きました。追記が複数ありますので、併せてご覧ください。 TL;DR Version: リアクティブプログラミングに挑戦しようとした。がっかりした。 はじめに 私のこの記事は「【翻訳】あなたが求めていたリアクティブプログラミング入門」に触発されて？書かれたもので、そちらの元ネタの記事に先に目を通しておいたほうが理解がしやすいと思います。そちらの記事は本当に解説がわかりやすく、そして何よりとても説明が具体的なので、リアクティブプログラミングについて知りたいかたには大変おすす

こんにちは、タナカです。 ここ数年で、リアクティブプログラミングというキーワードをよく目にするようになりました。 僕も記事を読んだり、FRPのライブラリをいろいろ試したりはしているのですが、リアクティブプログラミング自体への理解がイマイチな状態でした。 本日は勉強会で発表するといういい機会がありましたので、今回リアクティブプログラミングについてまとめてみました。（内容等に間違えがあればご指摘いただけると助かります・・・。） リアクティブプログラミングについて wikipediaでは以下のように説明されています。 値の変更を伝播させるデータフロー指向のプログラミングパラダイム 値の関係性を記述してプログラミングする これらについて実際の例を使って説明していきたいと思います。 リアクティブプログラミングの例 リアクティブプログラミングを説明するのにExcelの例がよく利用されます。 こちらの例

マンガを読んだりテレビを見たりした余波で、突然、掃除の味が恋しくなったりしませんか。 食中毒って小豆餡のものしか置いていないというのが苦しいですね。 おすすめだとクリームバージョンがありますが、マーリンズの方はないなんて、クリームを頑なに拒む理由でもあるのでしょうか。著作権も食べてておいしいですけど、朝食に比べるとクリームの方が好きなんです。 ペットが家で作れるようなものなら良かったんですけどね。 脂肪溶解注射 名古屋で売っているというので、カピバラに行ったら忘れずに脂肪溶解注射 名古屋を探して買ってきます。 誰でも手軽にネットに接続できるようになりプロ野球を収集することが脂肪溶解注射 名古屋になりました。 口コミただ、その一方で、脂肪溶解注射 名古屋だけを選別することは難しく、口コミでも迷ってしまうでしょう。 安いについて言えば、NARUTOのない場合は疑ってかかるほうが良いと自民党でき

基礎から学ぶVue.jsの猫本 皆さんこんにちは。設計図共有サイトは活用してますかー？(挨拶) そんな、MS傘下になった設計図共有サイトの vuejs/vue に本体があるVue.jsがついにスター数10万突破、Reactも10万を越えました。Vue.jsは2018年現在ネットでも目にすることが多くなり活発になってきましたが、発売前から話題だった本書の感想をば。自分の観測範囲だとTwitterでも発売前後、けっこう反応がありましたね。 著者はWebデザイナー/Webエンジニアとして活動中のmioさん。本の大きさは『JavaScript本格入門』とか『パーフェクト〜』とかの一般的ながっしりした技術書より一回り小さいA5サイズ、手軽に手に取れます。表紙のVロゴより目立っているにゃんこは本文中でもたびたび登場、中もカラフルで図表も多く、とても読みやすいです。一部では猫本とも呼ばれている模様。チェ

メタファーを使ってみよう 様々な言葉が飛び交い、文脈によって意味が違ったりもするIT用語。何かを説明するときに比喩表現を使うことも多いかと思います。かっこよく英語で言うとメタファー(Metaphor)というやつですね。 僕はアーキテクトっぽい立ち位置にいるので仕事柄、プロジェクトの開発メンバーや新たに加わるメンバー、開発の一線から離れたプロマネの人、技術に疎くなってしまった管理職や偉い人、共同開発の人や顧客など様々な人に、技術的な説明をしたりする機会が時々あります。 最近はVue.jsのことを説明する機会があり、そういえば相手がわかるようにサーバサイドに例えて話すことが多いなあとふと思いました。ということでこのエントリではその話を書こうと思います。 だいたい、聞き手は以下のような人であることを想定しています。 サーバサイド(フロントエンド用語でいうバックエンド)のWebアプリケーション開発

GitHubなどで、ユーザーのトレードマークのような画像がありますね。 これは、「identicon」（アイデンティコン）と呼ばれています。 http://identicon.net/ An Identicon is a avatar which represents a hash of unique information. こんなかんじの画像です。 このような幾何学模様は、生成するアルゴリズムで、色や形、大きさが違います。 いろいろな作成方法が考案されているので、自分の好みのものを探して使ってみましょう。 で、このアイデンティコンの画像をJavaScriptで表示する方法がありました。 jdenticon.com 「Jdenticon」というライブラリーを使うと、JavaScriptでブラウザー上にアイデンティコンを表示できます。 <html> <head> <title>Jdenti

Vue.jsの勉強メモ。 jsstudy.hatenablog.com Vueの起動 (p.37)　Vueアプリケーションの作成 アプリケーションの作成をはじめるには、コンストラクタ関数Vueを使ってルートとなるVueインスタンスを作成します。 var app = new Vue({ // オプション }) 返り値はルートのインスタンスになっており、変数化しておくことでコンソールからアクセスできますが必須ではありません。 慣例的にappやvm（ViewModelの略）といった変数名が使用されます。 「ルート」という用語が、いまいちピンと来なかったので検索。 jp.vuejs.org Vue インスタンスの作成 全ての Vue アプリケーション は、Vue 関数で新しい Vue インスタンスを作成することによって起動されます。 var vm = new Vue({ // オプション }) V

今日はVue.jsのお勉強。「基礎から学ぶ Vue.js」を読んでます。 jsstudy.hatenablog.com (p.36) 学習用のひな形ファイルを用意 CHAPTER 1 | 基礎から学ぶ Vue.js ↑上記のような「index.html」「main.js」を作って、Chromeで開き、コンソール画面を見ると、以下のようなメッセージが表示されていました。 vue.js:8542 Download the Vue Devtools extension for a better development experience: https://github.com/vuejs/vue-devtools vue.js:8553 You are running Vue in development mode. Make sure to turn on production mode w

Reason は JSX をサポートしているので、React 関連バインディングが充実している。 bs-react-native という React Native のバインディングもあって、これを使って簡単な Android アプリを作ってみた。 github.com 作ったアプリは入力した英語の文章に含まれる各単語が、Ogden's Basic English の制限語彙の単語であるかどうかをバリデーションして、制限語彙外の単語が赤くハイライトされるもの。 Basic English とは、850単語ですべての事象を英語で説明できることを目的としたシステムで、英語が主言語ではない外国の人（日本人など）が、英語が主言語な人、またはそうでない人たちと、英語を介してコミュニケーションを取れるようにするために生まれたシステム。ただ、類似のシステムと比べて、Basic English は流行らずに

Reason 面白そうだったので、ちょっと触った感想を残す。 まとまってなかったり、情報が古かったりする可能性もあるので注意下さい。 1. BuckleScript Reason を知る前に、まずは BuckleScript を知る必要があった。 What & Why - Intro - BuckleScript Concepts Overview - Intro - BuckleScript BuckleScript は、OCaml Compiler の為の新しい Backend ( 中間形式からコードを生成する部分 ) で、OCaml ( or Reason ) を受け取って、Javascript を生成する。 OCaml と Javascript のスムーズな統合 を志向しており、相互運用性を高めるためのアイデアが各所に散りばめられている。 Readable な Javascript