【初心者】React,Next.jsの門をたたくために利用した教材の共有【JavaScript~Next.js】 - Qiita
【初心者】React,Next.jsの門をたたくために利用した教材の共有【JavaScript~Next.js】JavaScript初心者ReactUdemy記事投稿キャンペーン_Udemyで最新技術 はじめに 業務ではバックエンドでPHP(Laravel)を利用して開発しています。 技術のキャッチアップのため、自分でアプリを開発してみたりしますが、バックエンドオンリーの技術スタックでは開発していて面白さが感じられませんでした。 自分の技術の幅を広げるためにも無理のない範囲で、フロントエンドの技術を学んでみようと思い、簡単なものならなんとなく読める、触れるくらいのレベルになってきたので、その学習のステップを共有します。 概要 自分の技術の幅を広げるために行ったフロントエンドのキャッチアップ方法を紹介 レベル感のあった教材選びが大切 自分が使った教材の紹介 学んだ技術について Javascr
How We Got to LiveView Author Name Chris McCord @chris_mccord @chris_mccord Image by Annie Ruygt I’m Chris McCord. I work at Fly.io and created Phoenix, an Elixir web framework. Phoenix provides features out-of-the-box that are difficult in other languages and frameworks. This is a post about how we created LiveView, our flagship feature. LiveView strips away layers of abstraction, because it solv
転職とこれからのこと。｜su-
2019年12月31日を以って、クックパッド株式会社を退職します。今日12月20日が最終出社日でした。 気づけば入社してから2年4ヶ月ほど経過していて、本当にあっという間でした。 アイキャッチ画像は綺麗な恵比寿ガーデンプレイスの写真が撮れなかったので、代わりに昔チームランチでタコパをしたときの写真にしました。特に意味はないです。 やったこと・経験したこと実は入社してからほとんど、クックパッドのレシピサービスの開発には携わっておらず...(笑) 色々紆余曲折があり、新規事業開発を行う部署に配属され、 そこから「Komerco」というサービスの立ち上げから運用、今日までずっと携わってきました。 エンジニアとしての成長を振り返ると...、 クックパッドに入社する前までは、iOS/Swiftだけできる普通のiOSエンジニアという感じだったのですが、 この2年余りの間に、Firebase、フロントエ
前回の記事では同期的なTODOアプリを例としてReact + Reduxの基本的な使い方を学びなおしました。 今回は非同期処理の扱い方を勉強してサンプルのアプリケーションを作ったので、要点などをメモしておきます。 Reduxでの非同期処理について 実際のアプリケーションではAPI通信など非同期処理が必ずと言っていいほど入ってくると思います。 たとえば fetch() を使って何かデータを取ってくる Action creator を定義したいとします。 const fetchSomeThing = (url) => { return fetch(url) .then(res => res.json()) .then(json => { return { type: 'FETCH_DATA', payload: { response: json } } }); }; fetchSomeThin
note・グッドパッチ・STUDIO・オープンエイトの開発事例に学ぶSPA/PWA活用と最新トレンド - TECH PLAY Magazine
トレンドの移り変わりが激しいフロントエンドのトレンドや、気になるスタートアップの開発事例が知りたい！ということで、今回はnote、グッドパッチ、STUDIO、オープンエイト4社のフロントエンドエンジニアに、アーキテクチャ、技術スタック、フレームワーク、技術的チャレンジなどについて語っていただくイベントを開催。その模様をお伝えする。 ■登壇者プロフィール note株式会社 山形 孝造氏 受託開発会社、フリーランスを経てフロントエンドエンジニアとして2020年3月にnoteへ入社。コーヒーを自宅で焙煎したり、農園に行ったりするくらいに大好き。 株式会社グッドパッチ エンジニア 古家 佳武氏 Androidエンジニアとして2016年にグッドパッチ入社。自社サービスのアプリ開発を経て、2019年よりStrapのフロントエンドを中心に担当中。 STUDIO株式会社 CPO / Founder 甲斐
Lit とは Lit は、任意のフレームワークで動作する高速で軽量なコンポーネントの開発に役立つ Google のオープンソース ライブラリで、共有可能なコンポーネントやアプリケーション、設計システムなどの構築に使用できます。 演習内容 以下について、React のコンセプトを Lit に変換する方法を学びます。 JSX とテンプレート コンポーネントとプロパティ 状態とライフサイクル フック 子 参照 状態の仲介 達成目標 この Codelab を完了すると、React コンポーネントのコンセプトを Lit の対応するコンポーネントに変換できるようになります。 必要なもの Chrome、Safari、Firefox、または Edge の最新バージョン。 HTML、CSS、JavaScript、Chrome DevTools に関する知識。 React に関する知識。 （上級者向け）最適な
はじめまして、人事労務freeeのアプリケーションエンジニアをしている19新卒のスポーンです。 去年は内定者のアドベントカレンダーを企画したので、よかったらそちらも読んでみてください。 この記事はfreee Developers Advent Calendarの13日目です アクセシビリティという概念を知った 新卒研修の中に「アクセシビリティ研修」というスケジュールがあり、当時何をやるんだろうとぼんやり考えていました。 全盲エンジニアのMaxさんがアクセシビリティとは何か、freeeでやる意義とは何かを伝えてくれる研修で、そこで初めてアクセシビリティという概念を知りました。 研修の様子 僕は今まで全盲の人が身近にいなかったので、彼らがどうやってPCやスマホを扱っているかもそれを支えるWebアクセシビリティという概念もすべてが新鮮でワクワクしたものでした。 誰もがプロダクトを使えるようにする
【JavaScript】Angular, React, Vue.js とフロントエンドの本まとめ - Qiita
JSフレームワークの本まとめ まだJavaScriptがHTMLページのオマケ扱いでセキュリティ面からも忌み嫌われていた不遇の時代、2005年にGoogle Mapの衝撃が走りAjaxのワードが流行ったフロントエンド元年。その後徐々にJavaScriptの復権が始まりました。 jQueryなどのフレームワーク未満のライブラリが流行ったのが第1世代。その後サーバーサイドのMVCアーキテクチャの思想をクライアントサイドに適用しようとしたり様々なフレームワークが試行錯誤し、そして結局は滅んでいったのが第2世代。 その後表舞台に立ったJavaScriptフレームワークがAngular, React, Vue.js。この3大フレームワークが第3世代と呼ばれており現在の主役となっています。なお他にも話題のフレームワークやライブラリはありますが、第4世代と呼ばれるほどに大きなビッグウェーブはまだキていな
react.js(next.js)とvue.js(nuxt.js)の違いをソースで確認してみましょう - Qiita
概要 最近人気のフロントエンドの言語であるreact.js, vue.js, augular.jsがあります angular.jsは下落傾向で、react.jsとvue.jsはほぼ同じように人気があります この記事では、react.jsとvue.jsに対する違いと next.jsとnuxt.jsに対する違いをソースで確認してみましょう next.jsとnuxt.jsって何？ next.jsはreact.jsのSSR(ServerSideRender)フレームワークです nuxt.jsはvue.jsのSSR(ServerSideRender)フレームワークです react.jsとvue.jsは、基本的にCSR(Client Side Render)です CSR(Client Side Render)の場合、検索エンジンに露出できない短所があり、 最初のスクリプトロード時間が長いという短所があ
ドラッグ&ドロップでHTMLメールを作れるオープンソースのHTMLメールエディタ・「Unlayer email-editor」
Unlayer email-editorはドラッグ&ドロップでHTMLメールを作れるオープンソースのHTMLメールエディタです。Vue.js、Angular.js、React.js向けがそれぞれ用意されています。 正式名称では無いんですが便宜上名付けました。UnlayerというHTMLメール管理アプリを提供している開発者がエディタのみをOSSとして公開したものになります。 HTMLメールのプレビューはデスクトップとモバイルにスイッチ可能で、各コンテンツやブロックを追加、編集しエクスポートするという簡単な流れで作成できるよう設計されています。日々作成に時間を取られている担当者の方はご覧になってみては如何でしょうか。ライセンスはそれぞれMITとの事です。 Unlayer email-editor動作サンプル
JSer.info #484 - Headless Chromeを扱うライブラリであるpuppeteer 3.0.0がリリースされました。 Release v3.0.0 · puppeteer/puppeteer Chromium 81.0.4044.0へアップデートされています。 また、v2.1.0でFirefoxをサポートしていますが、インストール時にPUPPETEER_PRODUCT=firefox npm installとすることでFirefox Nightlyのバイナリをダウンロードできるようになっています。 その他にはNode.js 8のサポート終了やコードベースをTypeScriptへマイグレーションしていくなどの変更が含まれています。 Chrome 83 Betaがリリースされました。 Chromium Blog: Chrome 83 Beta: Cross-site Sc
こんにちは。PR TIMES の開発本部でフロントエンドエンジニアをしている鈴木雄大(@szkyudi)です。 2021年10月に2020年新卒の僕と2021年新卒の2人の計3人で企業ページのフロントエンドをレガシーなコードから React.js にリプレイスしたものをリリースしたので、そのお話をしようと思います。 企業ページがどういったページかについては下記の PR TIMES MAGAZINE の記事をご覧ください。 リプレイスに至った背景 リプレイス前の企業ページのフロントエンドの技術スタックは以下のようになっていました。 jQueryJavaScript (ES5以前)JavaScript (ES6以降)Vue.jsSCSS このようにひとつのページの中でも複数の技術が混在していました。また、ディレクトリ構造や記述ルールも整備されていませんでした。 そのために、コードのキャッチアッ
条件によってレンダーするコンポーネントを出し分ける際は条件付きレンダーを利用します。 今回は条件付きレンダーの記述方法について紹介します。 条件付きレンダーの記述方法 条件付きレンダーの記述方法について紹介します。 条件分岐を実装したメソッドを定義し、JSX内でメソッドを呼び出す 条件付きレンダーをコンポーネントのメソッドで定義し、JSX内でメソッドを呼び出す方法です。 JSXからメソッドを呼び出す、つまりJSX内に式を埋め込む場合は中括弧（{}）で式を囲む必要があります。1 以下のコードはisMorningがtrueなら<GoodMorning />、falseなら<GoodEvening />をレンダーする例です。 import React from "react"; import GoodEvening from "./GoodEvening"; import GoodMorning
【週刊 Ask An Expert #48】本番環境に “kube-controller” がない？なくていいんです！先週の #AWSLoft で受けた質問をざっくり紹介！ | Amazon Web Services
AWS Startup ブログ 【週刊 Ask An Expert #48】本番環境に “kube-controller” がない？なくていいんです！先週の #AWSLoft で受けた質問をざっくり紹介！ こんにちは、スタートアップ ソリューションアーキテクトの塚田 (Twitter: @akitsukada) です。 さてさて 2021/03/02, 日本で2つめのリージョンとなる大阪リージョンが一般提供開始しましたね！ AWS Asia Pacific (Osaka) Region Now Open to All, with Three AZs and More Services | AWS Blog https://twitter.com/awscloud_jp/status/1366645920826339330 実は、AWS の東京リージョンがローンチされたのも十年前の同じ日、2
Streams in Node.js have a reputation for being hard to work with, and even harder to understand. In the words of Dominic Tarr: “Streams are Node’s best and most misunderstood idea.” Even Dan Abramov, creator of Redux and core team member of React.js is afraid of Node streams. This article will help you understand streams and how to work with them. So, don’t be afraid. We can figure this out! What
Front-end frameworks popularity (React, Vue, Angular and Svelte)
FrontendFrameworksPopularity.md Charts are from different sources and thus colors are inconsistent, please carefully read the chart's legends. Like this? Check React Native vs Flutter: https://gist.github.com/tkrotoff/93f5278a4e8df7e5f6928eff98684979 Stack Overflow trends https://insights.stackoverflow.com/trends?tags=reactjs%2Cvue.js%2Cangular%2Csvelte%2Cangularjs%2Cvuejs3 Stack Overflow survey h
はじめまして、ウェブ開発室で室長とフロントエンド業務を担当している髙山です。 気がつけばもう9月ですね。いやぁ早い。学生の皆さんは夏休みも終え、授業も始まっているのでしょうか？夏休みと言えば、宿題ですよね。夏休み始まったら直ぐに終わらせようと思って、終わらせたことは一度もありません。どうやら、私は夏休みの宿題は最後まで溜め込んでしまうタイプの様です。 今回の記事に関しても、去年辺りから「書きます。書きます。」言いながら、時は流れてしまい、すっかりこんな時期になってしまい、やっとこさ重い腰を立ち上げ書いている始末です。 と言う訳で、そんなこんなで色々ありましたが、今回は、ウェブ開発室が行っている業務と、Vue.jsを用いたWebゲームの作り方をご紹介できればと思っております。 cocone株式会社のプロダクト まず、cocone株式会社ですが、1600万人以上（2020年9月現在）のお客様に
Update December 2023: Added a HUGE new section (incl. a completely new demo project) that covers NextJS 14 & the "App Router" in-depth! Covers React Server Components, Server Actions & more Covers file upload & storage on S3 Completely updated the "React Refresher" section No prior NextJS knowledge is required - I'll introduce you to what the "App Router" is in this course! Join this bestselling N
こちらの記事は、Mahesh Haldar 氏により2019年 01月に公開された『 Why and How to use TypeScript in your React App? 』の和訳です。 本記事は原著者から許可を得た上で記事を公開しています。 かなり前にTypescriptについて知ったとき、私はあまり諸手を挙げてそれを歓迎はしませんでした。私はJavaScriptの世界でまた一つ新たなレイヤーを探求したくはありませんでした。もしあなたもTypeScriptに対してそのような印象を持っていたとしても、私は驚きません。 TypeScriptはJavascriptに欠けているピースだ。 私はもう1年以上TypeScriptを書くのを楽しんできましたが、今となってはそれなしでは苦労しそうだと感じています。 長期にわたってメンテナンスしたいプロジェクトで作業するのなら、TypeScri
こんにちは、AIQ株式会社のフロントエンドエンジニアのまさぴょんです！ 今回は、DBeaverの特徴や、DBeaverの導入方法について解説していきます。 DBeaverとは？ DBeaverの特徴まとめ DBeaverは、SQLクライアントソフトウェアアプリケーションであり、データベース管理ツールです。 DBeaverには、CE(無料版)とEE(有料版)がありますが、無料版で十分過ぎる性能を持っています。 特徴をまとめると、次のとおり。 特徴1: マルチプラットフォームで対応OSが豊富 Windows / Mac / Linux でアプリケーションが提供されています。 特徴2: 対応DBが豊富 MySQL、PostgreSQL、SQLite、Oracle、DB2、SQL Server、Sybase、MS Access、Teradata、Firebird、Apache Hive、Phoen
Laravel8でTypeScript版Reactを使う方法 Laravel8でTypeScript環境のReact.jsを使用する方法をご紹介します。 投稿日2021年03月14日 更新日2022年05月10日 Laravelのインストール 最初にコンポーザーでLaravelのインストールをします。 $ composer create-project laravel/laravel typescript-react $ cd typescript-react Laravel Mixの設定 Laravelではwebpack的な設定はwebpack.mix.jsファイルに書くことになります。 デフォルトではJavaScriptをコンパイルするようになっているので、TypeScriptがコンパイルできるように編集しましょう。 CSSもPostCssになっているので、SASSを使用する場合は変更
A former front-end student of mine (Zoe*) recently emailed me, and honestly wanted to understand why is it that I chose to code Swimm, with Vue.Js and not React: “I just have one question for you: Why Vue?[…] I hope you’re not rolling your eyes thinking – “ah no, another question about Vue”. Although knowing you and your passion, I’m sure you have a pretty strong opinion that could swallow me into
2017 年、私は React.js および ECMAScript のキャッチアップをしていました。 スタートアップに転職してすぐのタイミング。転職先で React.js を使ったマークダウンエディタを開発していました。それまで Android や Node.js を中心として開発していたので、React.js をはじめとする View フレームワークは全く素人。かなりの時間をかけてキャッチアップしました。 一年後には、draft.js を始めとする OSS のコードも読めるようになりましたし、小規模のコンポーネントであれば自身で開発して GitHub で公開するようにもなりました。 正直、React.js で学んだ技術なぞ、すぐに枯れると思っていました。当時は View フレームワーク戦乱時代。React.js 以外にも Ember.js や Vue.js、Angular などさまざまな
mobx-reactとmobx-react-liteと、それぞれのobserver APIの違い - console.lealog();
わかってる側からすると無意識に選んでたけど、わかってない側からすると混乱するよなこれ・・。 と思ったので、今さらではあるが言語化の意味も込めてメモ。 mobx-reactファミリー MobXを使ってReactのコンポーネントをよしなに描画するためにはライブラリが必要。 で、それらはReactのバージョンによって、いくつか選択肢がある。 `mobx-react-lite` `mobx-react@6` `mobx-react@5` 選び方としては、 `react@16.8.0`以上で、Classコンポーネントは使わず、FunctionalコンポーネントとHooksベースで書いてる `mobx-react-lite` `react@16.8.0`以上だが、Classコンポーネントも使ってるし、Functionalコンポーネントも混在してる `mobx-react@6` それ以外 `mobx-r
Introducing the MDN Web Docs Front-end developer learning pathway – Mozilla Hacks - the Web developer blog
Thanks! Please check your inbox to confirm your subscription. If you haven’t previously confirmed a subscription to a Mozilla-related newsletter you may have to do so. Please check your inbox or your spam filter for an email from us. Saboya Gustavo Great initiative! Never coded before 2020, and I intend to become a front-end developer since the beginning of this year. Sometimes, my path has slowed
React.js Boilerplate
[React] よーし! いっちょReactやってみっか! #3 基本キーワード編 | DevelopersIO
はじめに CX事業本部の中安です。まいどです。 モバイルアプリエンジニアな自分がReactを始めてみることにした 「よーし! いっちょReactやってみっか!」シリーズの続きです。 今回もよろしくお願いします。 前回は作成されたプロジェクトの中身をサラッと見ていきました。 今回は、Reactでよく使われる基本キーワードを抑えていくことにします。 React独自なものやJavaScriptのものが混ざっていますが、 頭が混乱しないように言葉の定義を覚えておくのも大事ですね。 React 初回のブログでも「Reactとは」については書きましたが、あらためてこちらでもまとめようと思います。 React ReactはFacebook社によって開発されたJavaScriptのためのユーザインターフェイス構築用のライブラリで、 VueやAngularなどのWEBフロント用ライブラリに並ぶ人気のライブラ
![[React] よーし! いっちょReactやってみっか! #3 基本キーワード編 | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/ee41023e6f390843baace34a303c74b1767c52d0/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2019%2F07%2Freact.jpg)
はじめまして！飲むヨーグルト飲みすぎてお腹壊してる系エンジニアの ryt_kwzacky です！！ flintチームに加わってから、クラウドリンクスのフロントエンド開発をしたりチームのビジネス課題をエンジニアリングで解決したり飲むヨーグルトを飲んだりしています。 現在flintではハイエンド向け副業プラットフォームクラウドリンクスという事業を作っています。 2020年1月に正式ローンチした本サービスですが、実際にプラットフォーム上でマッチングする例が多々出てきました。 そこで、発生したマッチング事例を取りまとめメディアとして発信していくことになり、そのメディアを開発する上で採用したHeadlessCMSであるContentfulについて紹介させていただきます。 最終的な結論としては、Contentful + Nuxt.js + Firebaseの構成で自由度の高いメディアをすぐに立ち上げら
先週、「Jetpack Compose, React, Flutter, SwiftUIを比較する」という記事で宣言的UIの各ツールの比較を行いました。 その中で、Jetpack Compose特有の特徴としてコンポーネントに返り値がないことを紹介しました。 @Composable fun Greeting(name: String) { Text("Hello $name") }これは、React等で遵守されてきたコンポーネントは純粋関数として扱うというルールから逸脱したものとなります。 その理由について、Jetpack Composeの開発に携わるJim SprochさんからTwitterで以下のようにリプライを頂きました。SwiftUI Four reasons: (1) more natural for conditionals and loops, where coalescin
Source: reactjs.orgYesterday, the React team announced a new feature: Server Components. The feature is still experimental; there is no real documentation yet. What it’s about is simply put: data & component fetching in React.js. Server Components allow us to load components from the backend. The components have already been rendered in the backend and can be seamlessly integrated into the running
Reactアプリのビルドプロダクションを作成する方法 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
Reactのプロジェクトを実行するには、開発モードと Production buildの2つのモードを使用できます。 開発段階では、Reactがアプリコードの問題を簡単に検出して修正し、バグを排除するための多くの役立つ警告とツールを提供する開発モードを使用して、コードをローカルで実行します。 ただし、これらの余分なコードによってバンドルサイズが大きくなるため、アプリの実行が遅くなります。 つまり、開発モードでは、バグが発生する前に問題を見つけるのに役立つ多くの警告がReactに含まれていまが、そうすることでバンドルのサイズが大きくなり、アプリの実行が遅くなります。 アプリをローカルで作業している間はスローダウンを受け入れることができますが、デプロイではこれを許容できません。 Reactアプリケーションの本番ビルドを行う方法を学んでいきましょう。 プロダクションモードとは？ 開発モードの作成
The React JS or React is an open-source, front end, JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies. It has grown as one of the best libraries in recent years for component-based GUI development. Although, there are other front-end frameworks like Angular and Vue.js available, what sets React apar
この記事の主題 元々大学時代に個人開発で、VueやNuxt.jsを使っていたんですけど、 社会人になってサーバーサイドの言語である「Java」をやり始めて、 「本業でJava、個人開発でサーバレスのモダンなやつで開発できたら、なんかめっちゃかっこよくね？」ってなったので、 最近のサーバレスの開発記事でよく目にする+モバイルアプリ開発のReactNativeにも拡張できる、 Reactを学習しようという運びになりました。 ただ、最初はwebアプリも作ってみたいと思ったため、Next.jsを学習するために、 なる早でReactを終わらせたかったのです。 留意事項 この学習のゴールを、「フレームワークを使う際に困らないようにする」というところに置いており、 複雑な概念はそこまで熱心にやっておりません。 また、基本的に遅延評価勉強法をベースとした学習をしています。 そのため、ある程度のことは、何か
Nuxt3のNitroでどれくらい早くなったか検証してみた - SMARTCAMP Engineer Blog
初めに こんにちは、スマートキャンプ エンジニアの林です。 前回は私の自己紹介記事でしたが、今回は技術的な話をしたいと思います。 現在、Webフロントエンドを書くならNuxt.jsかNext.jsが選択される事が多いですが、皆さんはどちらがお好きですか？ 私はVue.jsを使用したフロントエンド開発の経験が長いので、Nuxt.jsに親和性が高く、Next.js(React.js)の時代とされる今でも積極的にVue.jsを追いかけています。 そこで今回は旬なフレームワークであるNuxt3について書いていこうと思います。 TL;DR Nuxt3のNitroによってどれくらい早くなったか検証をしてみた。 サーバー側からのAPIへのレスポンス速度がNuxt2に比べて良くなったことが観測できた。 クライアント側からのAPIへのレスポンス速度の上昇は観測できなかった。 Nuxt3とは 今年の12月にN
プログラマーが実践する、ブログのSEO対策に役立つ便利ツールを紹介 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
前回の記事では、「 React.js専用の便利ツール」を紹介しましたが、それではReactや開発者以外の方にとっては役に立たないものでした。 また、さらに以前は「Googleでの検索方法」、「Google Chrome拡張機能」を紹介しましたが、本日はさらに幅広い範囲でお役立ちのツールをご紹介します。 プログラマーの方にはもちろん、ブロガーとしても役立つ情報を提供できるように心がけます。 今回は、Webアプリ開発エンジニアとして、幅広い読者の方々がブログ時に活用できる便利ツールを紹介していきたいと思います。 Testmysite Pagespeed Insights SEMrush Check My Links BuzzSumo Ubersuggest 最後に ※利用者が海外のも含めますのでご了承下さい。 Testmysite www.thinkwithgoogle.com 「Testmy
単体テストと結合テストガイドライン - HIKKYフロントエンドガイドラインより 本稿では、弊社HIKKYのフロントエンドチームプロジェクトで主に使われる、フロントエンドのテストの概要についての案内をします。 対象読者: JavaScript・TypeScriptわかる テストってよくわからない テストってなに？ どんなのがあるの？ どうやるの？ なお本稿は株式会社HIKKYフロントエンドチーム向けのガイドラインであるものの、内容については筆者に一任されており、株式会社HIKKY及びその意向等とは無関係です。 テストの種類 テストは主に、次の2種類に分けることができます。 手動テスト 自動テスト 本稿では自動テストを主題にします！ 手動テストの概要 その名の通り、テストをする人が実際のテスト対象（サイトや関数）を手動で確認していくものが、手動テストです。 例えば、サイトが 1 フォームのバ
React-leafletとは Open Source Mapを表示するJavaScriptライブラリであるleafletを、React.js上で使えるように拡張するライブラリです。 React Leaflet公式 https://react-leaflet.js.org/ 本記事は公式のチュートリアルを順番にやっていくだけですので詳しくは公式サイトを参照してください https://react-leaflet.js.org/docs/start-introduction 1. プロジェクトの作成
【VSCode + Git Bash】Windows に Node.js や AWS CLI の環境を構築する方法 - シー・エス・エス イノベーションラボ（ブログ）
みなさん、こんにちは。イノベーションLABのハヤシです。 今回は私の開発環境をご紹介したいと思います。 ここで構築した環境を前提に、簡易的な API + SPA を SAM と AWS Amplify ライブラリを利用して構築する記事も書く予定です！ 私は開発端末を Windows 一筋でやってきました。 とはいえ AWS 上の EC2 で操作をすることも多いので、 Linux コマンドをメインに使用したいと思っています。 WSL（Windows Subsystem for Linux）は出始めた時に試してはみたのですが、 まだ動作が安定していないこともあって相性がよくありませんでした。 その時に VSCode + Git Bash に出会って、それ以来の付き合いです。 今では WSL2 や Docker Desktop for Windows とも触れ合うことはありますが、メインは今回の
こんにちは。HRBrain でフロントエンドエンジニアをしている山本です。 今回は git commit の commit type についての考えを紹介します。 refactor や feat など、果たして誰に向けた commit type なのか、分からなくなってしまうことがよくあります。 多数の人間が介在するプロジェクトにおいて、ここの考えがまとまらないと、feat なのに refactor といった自体になってしまいます。 今回は commit type のおさらいと、誰に向けて書けば良いのかの整理をします。 git commit message にフォーマットを設定する commit message をあるフォーマットで統一すると、 見やすさの向上 外部ツールとの連携（commit message を元に document を生成するなど） などが可能ではないかという声が上がり
React is a JavaScript library for building user interfaces. This is the official definition of React. But what if you are not familiar with JavaScript? What if you are not a developer? Would you still be able to make sense of (and learn) React? My answer is a firm YES. That's why I wrote this article: what is React exactly? What is React.js (or ReactJS)? What is React used for? Why is React so pop
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
How We Got to LiveView
Redux-thunkを使ったReduxの非同期処理 - KDE BLOG
React デベロッパー向け Lit | Google Codelabs
「アクセシビリティ」にワクワクした - freee Developers Hub
2020-04-20のJS: puppeteer 3.0.0、Chrome 83 Beta、Vue.js 3.0 Beta
レガシーなフロントエンドを捨ててReact.jsでリプレイスした話 | PR TIMES 開発者ブログ
【React】JSXでif文を利用して要素を出し分ける（条件付きレンダー）方法 | Enjoy IT Life
Understanding Streams in Node.js
Vue.jsを用いたWebゲームの作り方 - coconeのフロントエンド業務
Next.js 14 & React - The Complete Guide
なぜReactアプリにTypeScriptを使うべきなのか - baby-degu - Medium
DBeaverとは？DBeaverの特徴と環境構築・導入方法まとめ
Laravel8でTypeScript版Reactを使う方法
Vue vs React: best choice for startups - Swimm
"死にゆく" 技術と "流行る" 技術の狭間で｜Ken Wagatsuma
新規事業のメディア開発にContentfulを採用した話 - クラウドワークス エンジニアブログ
Jetpack Composeのコンポーネントはなぜ返り値がないのか - Blog - Mori Atsushi
A First Look at React’s New Server Components
ReactJS Roadmap 🗺 For Developers 💻
【React】個人開発で使うために爆速でReactを勉強したい - Qiita
単体テストと結合テストガイドライン - HIKKYフロントエンドガイドラインより
React-leafletの使い方メモ - Qiita
commit typeは誰に向けたものなのか - HRBrain Blog
What is React: A Visual Introduction For Beginners