Node.js の原罪 - from scratch
Intro ちょうどタコピーの原罪が流行ってるのでこのタイトルにしたけど結構気に入ってる。 d.potato4d.me この話を読んでの感想とここまで大きくなった Node.js の振り返りをしようと思う。 どんなプログラミング言語であってもみんなから使ってもらって開発者をハッピーにしたいと思ってる。ただ最初は良かったと思ってた機能がなんか古臭くなったり、他にクールな機能を持ったものが登場したことによって徐々に飽きられていき、最終的に他の言語に乗り換えられる。 まぁどんな言語も同じだと思う。C言語だって生まれた当初はすごくクールでみんなをハッピーにしてた。今丁度「戦うプログラマー」を読んでるが、C++が出てきて、周りのエンジニアが C++ を使おうとするシーンが出てくる。そこで、「あんなの使って何が良いんだ、Cで十分だろ」とWindows NT 開発リーダーのデーブカトラーが言ってたりする
Deno x React の Aleph.js を触ってみる & Vercelにデプロイしてみる
はじめに タイトル通りのやってみた系の記事なのですが、まず簡単に利用している技術の紹介です！ Aleph.js ... DenoにおけるReactフレームワーク Nextjsに強くインスパイアされている(公式ドキュメント内でもNext.jsへのリンクがあったりします) alpha版で、denoとaleph.jsのバージョンの掛け合わせによっては初期生成したアプリの起動もできなかったりします 既にzenn.devでも他のユーザーさんによって紹介されています Denoのフロントエンド開発の動向【2021年春】 2021年 は Fullstack Next.js 元年なので、有望な Next.js 系フレームワークを全部試した Deno 製フレームワーク Aleph.js を使ってみる Vercel ... 静的サイト/サーバレス機能のホスティングサービスプラットフォーム ご存知の通りNextj
React, TypescriptでChrome Extensionを開発する(ホットリロード対応) - ハイパーマッスルエンジニア
死ぬほど参考にさせていただいたサイト 基本的には下記のサイトを参考に進めればいけます。(最高の記事ありがとうございます、大感謝祭) code-log.hatenablog.com 本記事では上記で紹介されていたホットリロードがエラーで動かなかったため、別の方法でホットリロードできたので紹介したい。 環境 typescript 4.3.2 webpack 5.38.1 node 15.13.0 yarn 1.22.10 最終形 先に最終形を載せておく。 github.com content_scriptsのみ対応としたため、かなりミニマムになっている。 ディレクトリ構造 . ├── dist │ ├── background.js │ ├── main.js │ └── manifest.json ├── manifest.json ├── package.json ├── sr
LaravelでReact/VueをSSRする
ReactやVueのサーバーサイドレンダリングといえばExpressなどを使ってNode.jsベースでやるのが一般的かと思います。LaravelでSSRまでカバーしようとすれば、通常は回りくどいやり方が必要になるのでハードルが上がってしまいます。 ですがこのたびlaravel-server-side-renderingを試してみたところ、とても簡単にSSRが実現できてしまいました。JavaScript処理系としてPHP拡張のV8Jsを使った場合や、Windowsでの実行も試してたので、導入の簡単な流れと、そこでわかったことをまとめてみます。 Laravelを準備 $ composer create-project --prefer-dist laravel/laravel ssr-app "5.5.*" $ cd ssr-app $ php artisan preset react //
React Context（useContext）入門
以前解説したReact ContextのHook版チュートリアルになります。ステートレスコンポーネントにおいては、こちらを使う方がシンプルになります。 React Contextとは Reactコンテキストを使用すると、親コンポーネントの状態変数をpropsを経由させずに引き渡すことが可能となります。シンプルかつ標準APIのため好まれています。 詳細を更に知りたい場合は、過去のContext記事を参照してください。 ベースとなるコード 例を作り上げていく形式で解説します。フォームに入力した数値がフォントサイズとして適用される例を考えてみます。 // index.js import React, { useState, createContext } from 'react'; import ReactDOM from 'react-dom'; function App() { const
state とライフサイクル – React
この記事は古くなっており、今後更新されません。新しい React 日本語ドキュメントである ja.react.dev をご利用ください。 以下の新しいドキュメントで最新の React の使い方がライブサンプル付きで学べます。 state：コンポーネントのメモリ エフェクトを使って同期を行う このページでは React コンポーネントにおける state とライフサイクルについての導入を行います。詳細なコンポーネントの API リファレンスはこちらにあります。 以前の章のひとつにあった秒刻みの時計の例を考えてみましょう。要素のレンダーの章にて、UI を更新するための方法をひとつだけ学びました。それはレンダーされた出力を更新するために root.render() を呼び出す、というものでした。 const root = ReactDOM.createRoot(document.getEleme
React Context / Hooks 入門
Context は「状態」と「状態を変更するメソッド」を、アプリケーション全体で取り回せるようにさせるために用いる Context.Provider を用いて値を渡す Contect.Consumer を用いて値を受け取る Hooks.useContext を用いれば、Contect.Consumer 相当の役割を果たすことができる 原理的には恐らく、Functional Component が持ち得ない、もしくは持ってはいけない、副作用を差し込む = Hook させるためにある 主要なユースケースとしては、Class Component にしかなく、Functional Component にはなかった state, lifecycleMethod といった機能を Functional Component に持たせるために用いる（useState, useEffect） Context
Reactで作ったWebアプリをGitHubで管理してS3に自動デプロイする | 綺麗に死ぬITエンジニア
Reactで作成したフロントエンドのWebアプリを、GitHub上で管理して、masterブランチにコミットされた変更を自動でAmazon S3にデプロイ（適用）させる方法を解説します。 本記事では、S3をCloudFront経由でインターネット上へ公開し、名前解決をRoute 53で行う形とし、開発者はGitHub上のmasterブランチに変更をマージさえしてしまえば、後は勝手に公開されているソースコードが変更される仕組みにする方法を紹介します。 最も手間が少ない（と思われる）シンプルな構成を解説しますので、参考にしていただいて、後は自分のアプリケーションに合わせて自由に応用してもらえれば、と思います。 本記事で使うサービスGitHubAWS CodePipelineAWS CodeBuildAmazon S3Amazon CloudFront（使わない人は読み飛ばしてください）Amaz
ReactとVueの比較、全く同じアプリを作成してみて分かった相違点 2019年Edition
日常的にVueを使用している開発者が、ReactとVueで全く同じアプリを作成した時のそれぞれの工程を比較して分かった相違点を紹介します。 特に、Reactのフックについて具体的な使い方が解説されています。 I created the exact same app in React and Vue. Here are the differences. [2019 Edition] by Sunil Sandhu 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 本記事は以前翻訳した記事の2019年Editionで、Reactのフックが追加されています。以前の記事は下記をご覧ください。 ReactとVueってどう違う？全く同じアプリをReactとVueで作成してみて分かった相違点 隣の家の芝生は青く見える ReactとVueで作成し
「JSX キモい」に反論してみる - Qiita
《2020 年 10 月 1 日追記》 この記事の内容をさらに練った上で総括したものを『りあクト！ TypeScriptで始めるつらくないReact開発 第3版【Ⅱ. React基礎編】』の「第5章 JSX で UI を表現する」に収録しています。 ほぼ 3 年越しのセルフアンサー本です。リンク先の無料サンプルで読めます。 プロローグ 本来「キモい」という主観の表明に正しいも間違っているもないので反論などは成り立たないとは思うのですが、世界での DL数では他のフロントエンドフレームワークを圧倒し、もはや jQuery さえ凌駕する React に対して、食わず嫌いの正当化のための言説に用いられている感すらあるので、一度ちゃんと論じておきたいテーマでした。 なお想定する対象読者は React を本格的に使ったことのないエンジニアですので、バリバリ React を使っている人には当たり前すぎ
生のReactを知ろう – JSX、Flux、ES6、Webpackを使わず… | POSTD
(編注：2016/07/29、いただいたフィードバックをもとに記事を修正いたしました。) 免責事項： 私はJSX、Flux、 ES6 、そして webpack を非常に気に入っています。これらのツールについては他のシリーズで話します。 React.jsが騒ぎを起こしているのはご存知の通りです。確かに、 XMLHttpRequest 以来の良いツールです。しかし、調査に数時間を費やした挙句、あまりに多くの用語に 圧倒された だけで終わっていないでしょうか。JSX、flux、ES6、webpack、react-routerが使える今、 *他に必要なのは React の使い方を説明してくれる人だけです。* 喜んでください、それがまさに当シリーズでやろうとしていることです。信じられませんか？大丈夫、 2分後、 初めてのReactアプリを作った後には納得いただけるでしょう。何もダウンロードせずに、で
jQuery学習者にReactも学習してほしい3つの理由と学習方法まとめ
jQueryの初版が登場して10年が経ちました。 jQueryの登場により、これまでJavaScriptで書いていた複雑なコードがよりシンプルになりました。CSS操作やDOM操作、Ajaxなどの拡張性も非常に便利なものでした。 時が経つにつれ、さまざまな特徴を持ったJavaScriptライブラリ・JavaScriptフレームワークが登場し、jQeuryに触れることなく大規模なアプリケーション開発をすることも珍しいことではなくなりました。 そうした中、昨今注目されているのがReact.js(React)です。 今回は、jQueryを学習した人に、Reactも学習してほしい理由とその学習方法についてまとめてみました。 Reactとは？ Reactとは、ユーザーインターフェイス(UI)を構築するためのオープンソースのJavaScriptライブラリです。 Facebookが開発の主導となっており、
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://codeday.me/jp/qa/20190713/1250245.html
Greative.jp has closed