フロント学習の最高の教材集 - Qiita
はじめに 今回はフロント学習で重宝できる教材をまとめました。 軽く自己紹介として、自分は新卒でフロントエンジニアとして入社し2022年で2年目になります。 実際に実務を通す中で「この教材のおかげで実装がスムーズにできた」「この教材をやってたおかげで理解ができた」といったような場面が2年の間で多々ありました。 今回紹介する教材は自分自身が実際に使ってよかったものかつ、そのほとんどが無料で学べるor低価格の教材になっています。 「フロントエンドを網羅的に学べかつ実務の基礎作り」という目的で教材を紹介します。 この記事の主な対象者 フロントエンドの学習をこれからしていきたい人 何を学べばよいのかがわからない人 HTMLとCSSはある程度かける人 この記事の目標 フロント学習の指針が立てられる 実務現場でも活用できるスキルを学べる教材を知れる JavaScript ドットインストールのJavaSc
ライブラリゼロの20行でReduxもどきを実装して、Reduxを完全掌握しよう！！
はじめに Reduxは遠い昔に誕生したものなので、いまReduxを使っていない人も多いかもしれません。 Reduxは、出現当時はそれほど大きなソフトウェアではなかったのですが、ときが経つにつれて、いろいろな便利関数たちが現れてきて、そのせいで今からReduxを調べる人は、何が本質なのかを調べるのが難しくなっていると思います。 そこで3分でReduxもどきを実装しました。こちらです。20行！！ じゃーん！ JavaScriptでうごきます！！ // 実装 const createStore = (reducer) => { let state = 0; const listeners = []; const dispatch = (action) => { const newState = reducer(state, action); state = newState; listeners
個人的 Web フロントエンドスキルの獲得方法 - mizdra's blog
ここ2年くらいの話なのですが、仕事で「フロントエンド会」というチーム内委員会のようなものを立ち上げて運営しています。元々1人の Web フロントエンド職人がプロダクトの Web フロントエンドの面倒を見ていたのですが、その方が異動されることになったので、残った人で面倒を見ていける体制を作りましょう、というモチベーションで発足した会でした。この話については以前イベントで発表したので、詳しくはこのスライドをご覧下さい。 speakerdeck.com Web フロントエンド職人の異動とともに入社した id:mizdra が Web フロントエンドが得意だったので、ペアプロやペアオペ、定例会などを通じてどんどんスキルや知見を配っていく、という戦略で運営していました。実際に 2 年経過してみてメンバーも徐々にキャッチアップしていって、ちょっとしたパフォーマンス改善をやってみたり、最近 Gulp や
Remix という 考え方
こんにちは、@kaa_a_zu です。今日(11/23)の日本時間早朝に React Router の制作者である @Ryan氏 と @Michael が着想した Remix V1.0 が正式リリースされました🎉 RemixがWebの世界に及ぼす影響は大きいと思っており、実際のコードやドキュメントを見ながら既存のフレームワークと何が異なっているのかを中心に書いた紹介記事です。(正直、魂が震えています) より具体的な使い方はドキュメントを見て、手を動かしていただくのが良いかと思います。また、既に国内でも使ってみた系の記事がいくつかあるようです。 Remixの機能には様々なものがありますが、当記事では筆者がより注目しているものについて書いていきます。Remixに興味があるけど、あまり追えていないという方に読んでいただけると嬉しいです。 ※この記事はGatsbyやNext.jsよりもRemix
JavaScript ベスト・オブ・ザ・イヤー 2020 - Qiita
2021 / 2020 / 2019 JavaScriptライブラリのトレンドを紹介しているbestofjs.orgが、2020年に最もホットであったJavaScriptライブラリのランキングを発表しました。 選考基準は現在のスター数ではなく、『2020年の一年間で増えたスターの数』です。 過去流行っていたけど落ち目となった技術は出てこないので、最近注目されている技術がわかります。 ちなみに2016年の総合ランキング1位はVue.js、2017年の総合ランキング1位はVue.js、2018年の総合ランキング1位はVue.js、2019年の総合ランキング1位はVue.jsです。 以下は2020年のランキング、2020 JavaScript Rising Starsの日本語訳です。 JavaScript ライジングスター 2020 5回目のJavaScript ライジングスターにようこそ！ こ
【React+TypeScript】Netflixのクローンを作るチュートリアル
【注意！】 2024年4月末にこちらの本の内容を大幅リニューアルしました！ https://note.com/terry10/n/nf0674af97617 ※こちらのZennのBookも5/7を目安にリニューアル内容を反映する予定です 多くの人に手に取って欲しいので、リニューアル後は期間限定で無料配布も検討しています。 こちらのツイートで無料配布について告知しています！ ↓ https://x.com/teriteri_code/status/1783358352447414464 --- React+TypeScriptを使ったNetflixの映画一覧を表示するアプリケーションのチュートリアルです。 学べる事 - ReactのFunctionComponent（関数コンポーネント）とTypeScriptの使用 - React Hooksによるstate管理 - TypeScriptで外
チュートリアル：React の導入 – React
この記事は古くなっており、今後更新されません。新しい React 日本語ドキュメントである ja.react.dev をご利用ください。 新しくなったチュートリアルでは最新の React の使い方がライブサンプル付きで学べます。 このチュートリアルは React の事前知識ゼロでも読み進められます。 チュートリアルを始める前に このチュートリアルでは小さなゲームを作成します。自分はゲームを作りたいのではないから、と飛ばしたくなるかもしれませんが、是非目を通してみてください。このチュートリアルで学ぶ技法はどのような React のアプリにおいても基本的なものであり、マスターすることで React への深い理解が得られます。 ヒント このチュートリアルは実際に手を動かして学びたい人向けに構成されています。コンセプトを順番に学んでいきたい人は一段階ずつ学べるガイドを参照してください。このチュート
Promiseをthrowするのはなぜ天才的デザインなのか - Qiita
ReactのConcurrent Modeが最初に発表されたのはもう1年近くも前のことです（記事執筆時点1）。Concurrent Modeはたいへん奥深い機能で正式版がたいへん待ち遠しいですが、Concurrent Modeの代名詞として多くのReactユーザーに知られているのはPromiseをthrowするというAPIデザインです。Concurrent Modeでは、コンポーネントがレンダリング時にPromiseをthrowすることで、レンダリングをサスペンドした（Promiseが解決されるまでレンダリングできない）ことを表します。 Concurrent Modeに関しては筆者の既存記事Concurrent Mode時代のReact設計論 (1) Concurrent Modeにおける非同期処理などをご参照いただきたいのですが、ここではPromiseをthrowするということ自体に焦点
仮想DOMの作りかた - Qiita
どうもこんにちは、ウマシバ(@UMASHIBA)といいます！ 先日、仮想DOMを個人的に実装してみまして、その際に得た知見を記事という形で共有したいと思います。 仮想DOMを作成するという内容上とても長い記事になってしまっていました。時間がある時や何日かに分けたりして読んでくださるとうれしいです。 それでは記事本文です。どうぞ、 はじめに この記事はReactやVue, Angular等のモダンなフロントエンドフレームワークの基礎部分となっている仮想DOMを作ってみようという記事です。 形式は、先日私が作成した仮想DOMと同じモノを順を追って実装してみるという形でやります。 完成形はここ(https://github.com/UMASHIBA1/UMASHIBAVirtualDOM) にあります。 ※もしよければスターください。すごくよろこびます。 この記事を読むには TypeScript
Webフロントエンド パフォーマンス改善ハンドブックを公開しました - dwango on GitHub
パフォーマンス改善ハンドブック ウェブページにおけるパフォーマンスに関する問題の見つけ方や考え方の事例をまとめた Webフロントエンド パフォーマンス改善ハンドブックを公開しました。 URL: https://dwango-js.github.io/performance-handbook/ このハンドブックでは過去に行ったWebフロントエンドのパフォーマンス改善の事例を中心に紹介しています。 注意点としてWebフロントエンドは常に変化しているため、現在の最適な解決方法を提案するものではありません。 また、アプリケーションによっても最適な解決方法は異なります。 今回の事例ではViewライブラリにReactを用い、映像再生プレイヤーなどある程度複雑な機能を持ったウェブアプリケーションのWebフロントエンドを扱います。 具体的にはニコニコ生放送（以下「生放送」）で行った事例を中心に書かれていま
React+Electronアプリを作ってみよう
こんにちは。前置きは抜きにすぐ作ります。 Create Application 01: create-react-app まずはcreate-react-appです。なかったらnpm install -g create-react-appしてください。 うまくいったらyarn startで起動しましょう。しましたか？うまくいってるのを確認したら即刻ジョブ止めましょう。もう二度とyarn startを実行することはありません。 02: install Some Package 以下のパッケージをインストールしてください。最新ので問題はないはずです。すべてインストール時に--dev-dependenciesを付けることを忘れないでください。まあ忘れてもいいです。 electron npm-run-all 03: setting up Electron こちらのgistを参照してください。 次に
俺が考えた最強の Reactのステートレスコンポーネントの書き方 - Qiita
最近自分はこう書いてるという例。意見が欲しい。 この記事に redux は出てこない。 参考: https://qiita.com/mizchi/items/bcb1aef8d1f14f8d0b4a 構成要素 React flow styled-components recompose 以下 SFC = Stateless Functional Component /* @flow */ import React from "react" import styled from "styled-components" import pure from "recompose/pure" type Props = {| value: string |} export default pure(function Example(props: Props) { const { value } = p
webpack時代の終わりとparcel時代のはじまり - Qiita
設定不要のビルドツール parcelというビルドツールが空前の勢いでGitHubスターを集めており、リリース数日で5000スターを超えています。今日だけでも1000スター以上増えており、Googleなどの有名企業リポジトリ以外でこのスピードで人気がでるのは異例です。 https://github.com/parcel-bundler/parcel https://parceljs.org/ 実際に試してみたところ、これはwebpack一強時代を終わらせるレベルの使いやすさだと確信しました。 作者はAdobeのエンジニアで、その他著名エンジニアも続々と参加している様子です。 webpack疲れ webpackが出た当初、webエンジニアはgulp/grunt疲れの状態だったことを覚えている方もいるかと思います。 webpackの統合された設定ファイルは、タスクランナーで逐次処理していたものを
expo.ioを使ってリアルタイムにReact Nativeアプリを開発する - マルシテイア
1年ぶり3度目のReact Native入門してるんだけど、expo.ioっていうサービスがメッチャ便利そうだったので紹介します。 何がどう便利かっていうと、 ケーブルなしで、実機の動作確認ができる もちろんコード変更も即座に反映される 開発版アプリの配布がワンタッチでできる 便利なReactコンポーネントもついてくる youtu.be expo.io とは React Nativeでのアプリ開発を支援するサービスです。 公式サイトはこちら。めっちゃ素朴…… expo.io expoは create-react-native-app XDE expo client といったツールを公開しています。 create-react-native-app: アプリの雛形を作るCLIツール XDE: アプリ開発を支援するデスクトップアプリ。実機のログをみたり、アプリを再起動したりできる expo cl
katatema.js - ✘╹◡╹✘
次のようなコードを書いて、 import React from "react" export default () => <div>Hello!</div> 次のようなコマンドを叩くと、 katatema build 次のようなファイルが生成されるという、katatema というツールをつくった。 <!DOCTYPE html> <html> <head> </head> <body> <div>Hello!</div> </body> 最先端の消耗 前に キーボードショートカットをカスタマイズするブラウザ拡張 - ✘╹◡╹✘ で、こういうことを書いた。 id:moznion へ、寒い日が続きますがお元気ですか。ともあれChrome拡張を1つこさえれば、大の大人が寄ってたかってモダンと言い合う類のものが一通り学べるだろうと思います。 最近のJavaScriptの周辺環境は大変で、何をやるに
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Reactアプリケーションのテスト戦略
Webフロントエンド基礎研修 ~歴史から学ぶ、現場のスタンダードな開発~
Hotwire を 本番環境で使ってみた感想
TechCrunch | Startup and Technology News
React Kawaii
