React Server Component の Isomorphism について解説する
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
レガシーおじさん、SPAを始めてみた。そして限界を知る
はじめに 最近、Webの記事を見てるとReactだVue.jsばかりが上がっていてJSPやERBの話をしてる人は誰もいません。jQueryの記事ももちろん見ない。 つまり、Webだけ見る限りではほとんどの人がSPAを使ってるように見えます。 私はWeb界隈には居るもののどちらかというとバックエンド寄り、もっというとそもそもWebとか関係ない領域を見る事が多いので、ちょっとキャッチアップを兼ねていくつかの個人プロダクトにVue.jsを採用してみました。 jQueryくらいで頭が止まってたので。サーバサイドもマイクロサービスでAPI化が進んでるのでフロントもそれに合った技術を選ばないとですしね。 というわけで、今回はその中で得た知見というか、従来型のサーバサイドでのWeb開発をしていた人の視点でVue.jsをキャッチアップする流れで書いていきたいと思います。 まあ最終的な結論は正直「これすごく
The Modern JavaScript Tutorial
We plan to improve the tutorial. Your feedback is important! What do you want to see? More features? New content? Let us know here! Table of contentsMain course contains 2 parts which cover JavaScript as a programming language and working with a browser. There are also additional series of thematic articles.
イマドキのJavaScriptの書き方2018
PySpa統合思念体です。これからJavaScriptを覚えるなら、「この書き方はもう覚えなくていい」（よりよい代替がある）というものを集めてみました。 ES6以降の難しさは、旧来の書き方にプラスが増えただけではなく、大量の「旧来の書き方は間違いを誘発しやすいから非推奨」というものを作り出した点にあります。5年前、10年前の本やウェブがあまり役に立たちません。なお、書き方が複数あるものは、好き嫌いは当然あると思いますが、あえて過激に1つに絞っているところもあります。なお、これはこれから新規に学ぶ人が、過去のドキュメントやコードを見た時に古い情報を選別するためのまとめです。残念ながら、今時の書き方のみで構成された書籍などが存在しないからです。 たぶん明示的に書いていても読み飛ばす人はいると思いますが、すでに書いている人向けではありません。これから書くコードをこのスタイルにしていくのは別にいい
フロントエンド開発の概要について
ここでは、フロントエンド開発の概要について説明していきます。 ＊元記事はこちらです。(英語) この記事でカバーしているものについてSingle-page Apps (SPAs)New-age JavaScriptUser InterfaceState ManagementCoding with StyleTestingLinting JavaScriptLinting CSSTypesBuild SystemPackage ManagementContinuous IntegrationHostingDeploymentSingle-page Apps (SPAs)かつてはサーバーサイドレンダリングという、別のURLを開くごとにページをリフレッシュしてサーバーから新たなHTMLページを送る手法が主流でしたが、最近のSPAsではクライアントサイドレンダリングというものが主流になっています。
JavaScriptフレームワーク選定の議論 - Qiita
相談内容 既存の管理ツールを新しく作り直すために新しいJSフレームワーク/言語使いたいのですが、何を選んだらよいでしょうか？ ここで選んだものは今後新しく作る時にも使用していく予定のため、学習コストよりメンテナンスしやすいものを選びたいと考えています。 利用者は社内外で特定の権限を持った人のみであるため、サーバサイドレンダリングはしない予定です。 言語は型があるものを利用したいのですが、TypeScriptとFlowのどちらがよろしいでしょうか？ 時間に余裕があれば、テストフレームワークやビルドツールについてもお聞きしたいです。 現在のページ/チーム jQueryなどで書かれている部分が多いですが、変更を加えることが難しくメンテナンスコストが高いです。 サーバサイドをやってる人が片手間で書くJavaScriptといった状況です。 今回新規で数ページを追加する必要があるため、何を利用すれば良
JavaScript における文字コードと「文字数」の数え方 | blog.jxck.io
Intro textarea などに入力された文字数を、 JS で数えたい場合がある。 ここで .length を数えるだけではダメな理由は、文字コードや JS の内部表現の話を理解する必要がある。 多言語や絵文字対応なども踏まえた上で、どう処理するべきなのか。 それ自体は枯れた話題ではあるが、近年 ECMAScript に追加された機能などを交えて解説する。 なお、文字コードの仕組みを詳解すること自体が目的では無いため、 BOM, UCS-2, Endian, 歴史的経緯など、この手の話題につき物な話の一部は省くこととする。 1 文字とは何か Unicode は全ての文字に ID を振ることを目的としている。 例えば 😭 (loudly crying face) なら 0x1F62D だ。 1 つの文字に 1 つの ID が割り当てられているのだから、文字の数を数える場合は、この ID
JSフレームワーク選定の勘所
大づかみなお話です 結論: 課題を知ったらなんでもいいから手を出してみよう！ （細かいところは犠牲にしてます。React でもステートフルコンポーネントつくれるよねとか）
JavaScript ベスト・オブ・ザ・イヤー 2016
JavaScriptコミュニティは日々進化しています。今日のトレンドも数か月後には陳腐化しているなんてことは日常茶飯事です。 2016年は終わってしまいましたが、何か重要なことを見逃したのではないかと感じているそこのあなた！ 2016年の主要なトレンドをおさらいして、そんな不安を払拭しちゃいましょう。 過去12か月に獲得された Github のスター数を比較して、2016年に支持を集めたプロジェクトを数値に基づいて評価していきます。 2015年はなんといっても React でした。そして、Flux 実装を席巻したのは Redux でしたね。 2016年、JavaScript の人気プロジェクトはどのようなものだったのでしょうか？
はてな教科書 JavaScript編
はてな教科書JavaScript編 講義の目的 JavaScriptについて、自分で調べて学習するための基礎知識を身につける リファレンスをひけば良い部分は覚えない 話の流れ JavaScriptの言語コア部分 構文とか WebとJSにまつわるあれこれ DOM 非同期プログラミング Ajax jQuery フロントエンド設計 Node.js 駆け足で進めるので、速すぎるなら遠慮せず言ってください！ LICENSE この作品は クリエイティブ・コモンズ表示 - 非営利 - 継承2.1日本ライセンス の下に提供されています。
20160930 フロントエンド高速化 業務編 (社内勉強会)
スタートアップやプロダクトの成功に必要な「アイデア×プロダクト×実行×チーム×運」の 5 つの項目について解説した概要のスライドです。急成長するプロダクトの初期に役立てていただければと思います。 プロダクトマネージャーやスタートアップの CEO の方向けにどうぞ。 ※ Japan Product Manager Conference 2016 の登壇資料です
console.logまとめ 2016年夏 - Qiita
console.log関連についてまとめました。 モダンブラウザであればどれも使用できると思いますが、基本出力結果等はchromeで確認したものです。 console.hogehogeのいろいろ 基本 引数を入れることで出力結果をカスタマイズできます console.info、console.warn、console.error それぞれで見た目を変えることができます。 console.assert 式を評価してfalseの場合にログ出力します。 console.count ログの出力結果が同じ場合にカウント数が自動的に増えていきます。 console.dir オブジェクトのプロパティの中身をログに出力します。 console.dirxml HTMLとかXMLの要素を渡すと、下の要素が全部見れるようになります。 console.group、conosle.groupCollapsed co
イベントの作成と起動 - 開発者ガイド | MDN
この記事では、 DOM イベントを作成して処理する方法を説明します。このようなイベントは、一般に、ブラウザー自体によって起動されたイベントとは対照的に、合成イベントと呼ばれます。 イベントは、次のように Event コンストラクターを使用して作成できます。 var event = new Event('build'); // Listen for the event. elem.addEventListener('build', function (e) { /* ... */ }, false); // Dispatch the event. elem.dispatchEvent(event); 上記のコード例は EventTarget.dispatchEvent() メソッドを使用します。 このコンストラクターは、ほとんどの最新のブラウザーでサポートされています (Internet E
JavaScriptでjQueryを使わずにイベントをtriggerする - Qiita
基本的なことなのですが、すぐ忘れるので。。。 JavaScriptでDOMノードの任意のイベントを発火するには以下の様にします。 function triggerEvent(element, event) { if (document.createEvent) { // IE以外 var evt = document.createEvent("HTMLEvents"); evt.initEvent(event, true, true ); // event type, bubbling, cancelable return element.dispatchEvent(evt); } else { // IE var evt = document.createEventObject(); return element.fireEvent("on"+event, evt) } }
moment().endOf(‘term’)
Five years ago, inspired by the simplicity and utility of underscore.js and underscore.string, I cobbled together a date formatter and timeago plugin and called it underscore.date. After a few choppy iterations, it became moment.js. With the help of over 400 committers and countless other contributors opening issues and answering questions, it has grown far beyond what I ever imagined it could be
フロントエンドにテストを導入 - Qiita
2016-8-8 ※webpack単体の記事を書きました。よろしければこちらもどうぞ step by stepで始めるwebpack 2016-5-16 ※karma単体の記事を書きました。よろしければこちらもどうぞ step by stepで始めるKarma 本記事は画面のJavaScriptのテストとかまったくやったことない方 Mocha？webpack？karma？それぞれの解説記事はよく見るけど全体像がよくわからんという方向けです。（数日前の自分です） 全体を通して導入の流れを解説した記事があると全体像が理解しやすいのではと思い書いてみました。 前提 Nodejs,npm,chromeが導入済みであること 流れ Step 表題 目的
あのライブラリは何故誕生したの?のまとめ - Qiita
はじめに 最近、フロントエンドのライブラリ乱立問題について盛り上がってました。 自分はnobkzさんの以下の文に全てがまとまっていると思います。 僕の最初の違和感は、「技術的な流行り」に乗ることに何の価値があるのだろうか?ということである。もちろん、最新のツールやフレームワークはより何かが良くなってるかもしれない。しかし、 それをあなたのプロジェクトで採用するには何の価値があるだろうか? 「最近のフロントエンドへの違和感 - nobkzのブログ」より 裏を返せば、新しいライブラリの内容、特に「どのような問題を解決するためにこのライブラリが生まれたのか」という思想を把握しておくことは重要だと言えます。 つまりは、 "How?(ライブラリの使い方)" よりも "Why?(なぜそのライブラリが必要なのか)" を学んでおこう ということです。この記事では どのような既存の問題・要求を どう解決して
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Bitmelo
サーバーサイドエンジニアも知っておくべきフロントエンドの今
GitHub - tristen/tablesort: :arrow_up_down: A small tablesorter in plain JavaScript
