DestroyRef は Angular 16 で追加された機能の1つで、 Component 等のスコープが破棄される際に呼び出されるコールバックを登録することができます。本記事では DestroyRef について簡単に紹介します。 はじめに 環境情報 DestroyRef を活用しよう Angular 15 までお世話になったリソース破棄コード Angular 16 からのリソース破棄コード DestroyRef を受け取る処理をテストする おわりに はじめに 2023年5月に様々な新機能が実装された Angular 16 がリリースされました。 DestroyRef は Angular 16 で追加された新機能の1つで、冒頭にも記載した通り Component や Directive などのライフサイクルを持つスコープが破棄される際に呼び出されるコールバックを登録することができる機能
コードを書くための社内スタイルガイドは、開発チームがある時点、理想としてはプロジェクトの初期段階で定義し、合意すべき重要な決定事項です。 はじめに プロとしてコードを書いたことがあるなら、多くの、多くの開発者にとってスタイルがどれほど重要であるかをよく知っているはずです。私のキャリアの中でも、スタイルの議論に数え切れないほどの時間を費やしてきました。 しかし、なぜそれがそれほど重要なのでしょうか？プログラマはコードを書くことより読むことの方がはるかに多いのです。自分のためにも、特に仲間のためにも、このタスクをできるだけ単純化することが極めて重要です。 スタイルガイドは、最初のコードを書く前に定義するのが一般的ですが、だからと言ってプロジェクトのライフサイクル全体にわたり固定するべきではありません。実験と経験の積み重ねで得られる学びです。 また、毎日考えを変える必要があるという意味でもありま
【オライリー本感想】Reactハンズオンラーニング 第2版 はReact Hooksを学ぶのに最適な技術書 - nobu blog
書籍概要 どんな本？ Facebookが開発したJavaScriptライブラリ「React」の解説書。 2013年にオープンソース化されたReactですが、ここ数年で大きな変更が加えられ、またReactを取り巻くエコシステムも大きく変化しました。 本書では実際に動くコンポーネントを作りながら、最新のReactの記法について解説しつつ、最新のツールやライブラリも紹介します。初心者から中上級者まで、Reactの今をすばやく学習することができます。 Alex Banks、Eve Porcello 著、宮崎 空 訳 2021年08月 発行 368ページ 定価3,740円(税込) スポンサーリンク 内容のまとめと感想 SPA (Single Page Application) のフレームワークにおいて、１番メジャーであるReactに関してまとめた入門書です。 Javascirptの説明などもあり初学
React/Next.jsでAtomic Designを導入する初心者がとりあえず読む記事(ボイラーテンプレートあり
この記事で得れる情報 これからReact/Next.jsとAtomic Dsignで何か作るってなった時にとりあえず多分必要なものがさらっと集約して学べる 参考にしたサイトのまとめ・噛み砕き 私の所感 上記を既に入れたいと思ってる人は、入れ済みのすぐ使えるボイラーテンプレート とりあえず作るもの先出し こーんな感じの、いくつかのコンポーネントでできた簡単すぎるログイン画面を例に作られています。 ボイラープレート っていうかサンプルソースレベルです。あまり時間をかけずにさっと作ってるのでクレームは受け付けてません笑 動機 こんにちは、地方在住のフルリモート開発リーダー、ひさちーと申します。 私は仕事では10人くらいの受託開発を行うチームのマネージャーやってまして、プロジェクト単位ではPMやスクラムマスターをすることが多いのですが… しばらくフロントエンドのコードをあまり書かないうちに、Rea
「りあクト！ TypeScriptで始めるつらくないReact開発」を読んだ - asmsuechan’s blog
電子版で読みました。 booth.pm 本の情報 項目 情報 ページ数 188P 章数 全10章 著者 @oukayukaさん 全体的な感想 Webフロントエンドのとても良い教科書です。歴史的背景や思想に関してもしっかり触れられているので、これからWebフロントエンドを触る人は必読と言っても過言ではないのでしょうか。研修として使うのにも非常に有用だと思います。 Railsなどのフルスタックなフレームワークでよく使われるテンプレートエンジンを使ったフロントエンドの構築の限界と、その問題へ対処するためにReactを使うという選択肢に関して説明してあります。なお、RubyやRailsとの対比表現が多かったので、Ruby on Railsを使ったことがある人には読みやすいと思います。 こんな人が読むと良さそう 以下に挙げるキーワードに気になるものがある人は買うと楽しめると思います。 Reactの思
Vue.js使いの自分がReact + TypeScriptにコンバートするためにやったこと（まだ途中） - Qiita
タイトル通りの話で, 今まで2年ちょいVue.js（含むNuxt.js）使いだった自分がReact + TypeScriptの組み合わせを覚えて仕事にしよう！...という目標に向けて何をしたかについてまとめました. React + TypeScriptの組み合わせでちゃんと開発したい&覚えたい人 Vue.js等, 他のJavaScriptライブラリ・フレームワークと二刀流を目指している人 SPA(Single Page Application)開発をちゃんとやりたい人 の参考になれば幸いです. なおコードスニペット的なのは一切ないです. が, これから学習する方の役に立つと嬉しいです. わたし（shinyorke）のJavaScript/SPA歴 昔から仕事や趣味⚾️開発でJavaScript, JQuery, Bootstrapは触っていました. JavaScriptは自力で調べながらど
はじめまして、エンジニアスタイル編集部です！ コラムページでは、ITフリーランスに向けてお役立ち情報を発信します。Twitterではホットな案件を紹介してまいりますので、ぜひフォローをお願いいたします！ 本記事が、皆様の参考になれば幸いです。 経験がまだ少ない方にもわかりやすく説明するために、初歩的な内容も記載しております。記事も長いので、実務経験豊富な方は、ぜひ目次から関心のある項目を選択してください。 エンジニアスタイルは、最高単価390万円、国内最大級のITフリーランス・副業案件検索サービスです。jQueryのフリーランス・副業案件一覧を以下からご覧いただけますのであわせてご確認ください。 jQueryのフリーランス・副業案件 jQueryとは？ エンジニアであればjQueryという言葉は聞いたことがあるかもしれませんが、そうでない方にとっては聞き馴染みのない言葉かもしれません。 j
はじめに 今回は、Azure上でWebアプリを公開するための新しいサービスである「Azure Static Web Apps」について紹介します。Azure Static Web Appsの機能およびユースケースや、実際にWebサイトを公開する方法について説明していきます。なお、Azure Static Web Appsは執筆時点ではプレビュー版となっています。プレビュー期間は無料で利用することができます。 Azure Static Web Appsとは Azure Static Web Appsとは、サービス名にある通りStatic Web App（静的Webアプリ）と呼ばれる種類のWebアプリを公開するためのAzureのサービスです。このサービスにおける静的Webアプリとは、HTML・CSS・JavaScriptからなる静的コンテンツと、静的コンテンツから呼び出されるAPIをまとめた呼
こちらの記事は、Jonathan Saring 氏により2019年12月に公開された『 11 Must-Know FrontEnd Trends for 2020 』の和訳です。 本記事は原著者から許可を得た上で記事を公開しています。 ランチ中のフロントエンドトークでスマートに見られる方法！ チームのランチトークでスマートに見られることは、最新のフロントエンドのトレンドを常に把握しておくための大きな理由であることは言うまでもない。 それは、あなたがより良い開発者になり、より良い技術とより良い製品を作るのに役にたつかもしれない。 たぶんね。 だから、いくつかの興味深い方向を示すことで、この名誉あるクエストを君が簡単に達成できるように少し時間をもらいたい。 すべてのコンセプトについて1から10まで説明するのではなく、そのコンセプトとそれがどのように有用であるか紹介しよう。最後にはさらなるリソー
Salesforce Lightning Web Componentとkintone JavaScript カスタマイズの比較 - Qiita
Salesforce Lightning Web Componentとkintone JavaScript カスタマイズの比較Salesforcekintone kintoneは当初よりJavaScriptでのカスタマイズを機能の一部として提供しています。 Salesforceも2019年にLightning Web ComponentsというWeb ComponentsベースでJavaScriptによるカスタマイズができるという機能も提供しています。 kintoneのJavaScript開発の経験はもともとありますが、最近仕事でLightning Web Componentsにも触れる機会があったので、JavaScriptでカスタマイズしてみた感想を述べます。 SalesforceとLightning Web Components 公式で概要についてはここにまとめられています。 Ligh
【感想】『りあクト！ TypeScriptで始めるつらくないReact開発 第3.1版』【Ⅱ. React基礎編】： #りあクト で深くReact入門 - Rのつく財団入り口
りあクト！ 技術同人誌のりあクト！、【Ⅱ. React基礎編】の読書記録と感想です。 りあクト！ 【Ⅱ. React基礎編】 第5章 JSX で UI を表現する 第6章 Linter とフォーマッタでコード美人に 第7章 React をめぐるフロントエンドの歴史 第8章 何はなくともコンポーネント 第9章 Hooks、関数コンポーネントの合体強化パーツ まとめ：IIでディープにReact入門できる書 関係書籍など oukayuka.booth.pm 【Ⅱ. React基礎編】 りあクト！【Ⅱ. React基礎編】 第5章 JSX で UI を表現する 5-1. なぜ React は JSX を使うのか 表面的には「JSXキモい」とか言われがちでもあるこのあたりの本質が、本章でしっかり解説されています。 JSX の本質を理解する： Rails思想が根本にある秋谷さんはERB(Embedde
React入門 未経験から1週間でReactをマスターする #01. プロジェクトの作成と立ち上げ - Qiita
この入門は、 Reactの技術要素を圧倒的効率で学ぶ ことを目的にしています。 Reactの技術要素を散りばめたWebアプリを1から作っていくことでReactを学んでいきます。 すべての動くコードを公開しています。 目次 1. Reactの新規プロジェクトの立ち上げ ←今ここ 2. コンポーネントの書き方とイベントハンドラ 3.Class Components と Function Components 4. 条件分岐 (if) と繰り返し (loop) 5. フォームと親子間のデータのやり取り 6. コンポーネントのライフサイクル 7. スタイル (準備中) 8. Higher-Order Component (準備中) 9. Portalを利用したモーダル (準備中) 10. refによるエレメントの取得 (準備中) 11. Contextを利用したテーマの変更 (準備中) この入門の
この記事はフューチャー Advent Calendar 2019 12日目の記事となります。 概要 ここ2年ほどWEBフロントエンド界隈で仕事をすることが多く、Backbone.js, Vue.js, Angularといったフーレームワークを渡り歩いてきましたが、2019年は React + Redux での開発を初めてリードすることになりました。 本記事では実際に React + Redux で開発を推進するに当たって悩ましかった部分や勘所について整理出来ればと思います。特に各種ライブラリの選定やRedux構成要素の責務や分割単位にフォーカスしてご説明します。 本記事でご紹介する内容はあくまで一事例であり、個人的な見解も多分に含まれることをご了承ください。 様々なご意見をコメントでお待ちしております。 対象読者 React + Redux の概要レベルの知識がある方 React + Re
$ ng version _ _ ____ _ ___ / \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _| / △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | | / ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | | /_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___| |___/ Angular CLI: 11.0.5 Node: 12.18.3 OS: darwin x64 Angular: 11.0.5 ... animations, cli, common, compiler, compiler-cli, core, forms ... platform-browser, platform-b
![[Angular] 子コンポーネントや外部コンテンツの参照を取得する - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/d3e33b5e57b8f9e678e9d0c47792865257eb4cb9/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCQW5ndWxhciU1RCUyMCVFNSVBRCU5MCVFMyU4MiVCMyVFMyU4MyVCMyVFMyU4MyU5RCVFMyU4MyVCQyVFMyU4MyU4RCVFMyU4MyVCMyVFMyU4MyU4OCVFMyU4MiU4NCVFNSVBNCU5NiVFOSU4MyVBOCVFMyU4MiVCMyVFMyU4MyVCMyVFMyU4MyU4NiVFMyU4MyVCMyVFMyU4MyU4NCVFMyU4MSVBRSVFNSU4RiU4MiVFNyU4NSVBNyVFMyU4MiU5MiVFNSU4RiU5NiVFNSVCRSU5NyVFMyU4MSU5OSVFMyU4MiU4QiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9NzcxNTY2MDJkMDRkNTA0ZmI2MmFmNWM2NzFkNjQ5OTY%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBrc2gtZnRociZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NDNjMTJmZTZhODgxMDQ1M2UwNDljMGMxOWJhOTMxOGY%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Dbe2fe3ecf6eb557eda6cb8074309f6f2)
Reactの続きです。以前作成したReact + CSS in JS + TypeScript環境にReact Routerを使ってルーティング設定をして複数ページを遷移できるSPAにします。helmetを使ってコンテンツだけでなくheadタグも動的に変更。さらに下層ページに直接アクセスすると404になる対策も行いました。それではいきましょう！ 【目次】 前回のおさらい SPAで複数ページ構成を再現したい react-routerをインストール 「data.json」に別ページの内容を追加 APPコンポーネントでheadタグのルーティング設定 react-routerのBrowserRouter、Switch、Routeをインポート メインページ、別ページのtitle、descriptionを設定 GitHub Pages用にルートパスを設定 headタグのルーティング設定 Headerコ
Solidjs vs. React Comparison – Complete Guide 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 JavaScriptの旅路の岐路に立ち、どのフロントエンドフレームワークを選ぶべきか迷っていませんか? 「どのフレームワークが最も高速なのか」、「どれが最も広く使われているのか」、「どれが学習しやすいのか」、さらには「どのフレームワークが収入アップの可能性があるのか」といった疑問を抱えていませんか? それなら、この場所が最適な場所です。この包括的なガイドでは、JavaScriptの世界で有力な2つのプレーヤー、SolidJSとReactを比較・対比します。 ウェブ開発は常に進化し続けています。適切なフレームワークを選ぶことは、書いたコードと同様に重要です。SolidJSとReactは近年、大きな注目を
非同期処理後に動的に生成される DOM にアクセスする
Angular では、親コンポーネントクラスから DOM にアクセスする場合、 ViewChild というデコレーターが利用できます。 色々実装していく中で、非同期処理後に動的に生成された DOM にアクセスしたいケースがありました。 @if(isFetched) { // <-- 非同期処理が終わった後に表示される <div>fetched from API!</div> // <-- この要素にアクセスしたい } 今回のようなユースケースでの DOM へのアクセスするにはいくつかポイントがあるので、この記事でまとめています。 ViewChild の使い方のおさらい まず基本的な ViewChild の利用方法について、おさらいします。 ViewChild は selector で指定した名前を、取得したい HTML に #selector名 で渡すことで、その要素にアクセスできます。
Angular v19: resource() の解説
この記事ではAngular v19で新たに追加されるSignal関連の実験的API resource() について解説する。なお、書いている時点で最新の v19.0.0-next.11 をベースにしているため、正式リリースまでに変更される可能性はある。また、そもそも実験的APIなのでリリース後にも変更されている可能性はあることに注意してほしい。 Angular v19についての他の記事 resource() とは何か？ resource() は、非同期的に読み込まれるデータをシグナルとして扱えるようにするAPIである。 具体的なコードを見ればわかりやすい。次のコードは、resource()を使ってHTTP通信を行い、サーバーAPIから製品情報を取得している。リクエストのパラメータには親コンポーネントから受け取ったproductIdが使われている。productIdの値が変更されたらデータの
[Angular] ライフサイクルメソッドをみる(ngAfterContentInit と ngAfterContentChecked) - Qiita
$ ng version _ _ ____ _ ___ / \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _| / △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | | / ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | | /_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___| |___/ Angular CLI: 11.0.5 Node: 12.18.3 OS: darwin x64 Angular: 11.0.5 ... animations, cli, common, compiler, compiler-cli, core, forms ... platform-browser, platform-b
![[Angular] ライフサイクルメソッドをみる(ngAfterContentInit と ngAfterContentChecked) - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/4b8615e39f1552c03c57367c3bdc66d28dd9f310/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCQW5ndWxhciU1RCUyMCVFMyU4MyVBOSVFMyU4MiVBNCVFMyU4MyU5NSVFMyU4MiVCNSVFMyU4MiVBNCVFMyU4MiVBRiVFMyU4MyVBQiVFMyU4MyVBMSVFMyU4MiVCRCVFMyU4MyU4MyVFMyU4MyU4OSVFMyU4MiU5MiVFMyU4MSVCRiVFMyU4MiU4QiUyOG5nQWZ0ZXJDb250ZW50SW5pdCUyMCVFMyU4MSVBOCUyMG5nQWZ0ZXJDb250ZW50Q2hlY2tlZCUyOSZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9MzBlYjljMTEyZTM0ZTgzYzViMmE3ZjE3Y2FkNWNhYWE%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBrc2gtZnRociZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NDNjMTJmZTZhODgxMDQ1M2UwNDljMGMxOWJhOTMxOGY%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D8a8aa6fd034a27c4d5230c832d60b968)
もくじ なぜVue.jsで作るのかどんなサイトにVue.jsは使われているのかどういうコンテンツを作るのに適しているのかみておくべきサイト・ブログおわりに Vue.jsとは Vue.jsとは、JavaScriptのフレームワークの1種です。JavaScriptはほぼ全てのブラウザで動作するプログラミング言語で、フロントエンドアプリケーションの開発でも主として使用されています。 中でも Vue.js は比較的容易に使い始めることができるため、既存のアプリケーションへの組み込みなどにも向いています。 Vue.jsとは何かを現役エンジニアが解説【初心者向け】 なぜVue.jsで作るのか 1. 日本ではVue.js大人気 React、Angular、Vue.jsの３つのフレームワークの中で一番使われているのはどれ何だろう？と気になる人もいると思います。その答えを出すために必死な人もいるようで、とあ
前提: CSVファイルの出力にあたって バックエンドは CSV データとファイル名を返却するに留め、CSVファイルの出力処理そのものは フロントエンド で行った。 このときの 流れは次のとおり。 フロントエンドからバックエンドへ CSV データを返却してもらう REST-API を実行する バックエンドからフロントエンドへ CSV データとファイル名をプロパティとした JSON を返却する フロントエンドで CSV ファイルを出力する バックエンドから返却された CSV データを Blob 型のオブジェクトにする CSVファイルのファイル名はバックエンドから返却されたファイル名とする CSVファイルの文字コードは UTF-8 BOMあり とする すごく簡単な図だが、以下のイメージ 結論から フロントエンド、バックエンドともに次の処理で実現できた。 フロントエンド テンプレート import
![[Angular] CSV ファイルを出力したときにやったこと - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/736e3dfec993e29a6c580e4ea864c64855aee60c/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCQW5ndWxhciU1RCUyMENTViUyMCVFMyU4MyU5NSVFMyU4MiVBMSVFMyU4MiVBNCVFMyU4MyVBQiVFMyU4MiU5MiVFNSU4NyVCQSVFNSU4QSU5QiVFMyU4MSU5NyVFMyU4MSU5RiVFMyU4MSVBOCVFMyU4MSU4RCVFMyU4MSVBQiVFMyU4MiU4NCVFMyU4MSVBMyVFMyU4MSU5RiVFMyU4MSU5MyVFMyU4MSVBOCZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9OWE4M2M2Y2Y1N2FjMTQzZDc5ODAxODg4ZWI0YjZmMGY%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBrc2gtZnRociZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NWNiYmU4YzBkNjRjZGNhMDdjM2NmOWE0Y2I3MDQ3ZTY%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Ddae7a55129b87b9b6e6f20b5b7d6a1b0)
統合ソフトウェア開発サービスである Amazon CodeCatalyst (プレビュー) の発表 | Amazon Web Services
Amazon Web Services ブログ 統合ソフトウェア開発サービスである Amazon CodeCatalyst (プレビュー) の発表 2022/12/01に、Amazon CodeCatalyst のプレビューリリースを発表しました。ソフトウェア開発および配信の統合サービスである Amazon CodeCatalyst を使用すると、ソフトウェア開発チームは AWS 上でアプリケーションを迅速かつ簡単に計画、開発、コラボレーション、構築、および配信できるため、開発ライフサイクル全体でフリクションが軽減されます。 私がデベロッパーだった頃、最も興奮したのは、ソフトウェアをユーザーにお届けすること以外に、新しいプロジェクトを開始したり、プロジェクトに招待されたりしたことでした。どちらの場合にも、何かクールなものを構築し、新しいコードを記述すること、つまり、アイデアが形になるのを目
こちらの記事は、Jonathan Saring 氏により2019年12月に公開された『 11 Must-Know FrontEnd Trends for 2020 』の和訳です。 本記事は原著者から許可を得た上で記事を公開しています。 ランチ中のフロントエンドトークでスマートに見られる方法！ チームのランチトークでスマートに見られることは、最新のフロントエンドのトレンドを常に把握しておくための大きな理由であることは言うまでもない。 それは、あなたがより良い開発者になり、より良い技術とより良い製品を作るのに役にたつかもしれない。 たぶんね。 だから、いくつかの興味深い方向を示すことで、この名誉あるクエストを君が簡単に達成できるように少し時間をもらいたい。 すべてのコンセプトについて1から10まで説明するのではなく、そのコンセプトとそれがどのように有用であるか紹介しよう。最後にはさらなるリソー
フックの導入 – React
この記事は古くなっており、今後更新されません。新しい React 日本語ドキュメントである ja.react.dev をご利用ください。 以下の新しいドキュメントでフックを用いた最新の React の使い方が学べます。 クイックスタート チュートリアル react: フック フック (hook) は React 16.8 で追加された新機能です。state などの React の機能を、クラスを書かずに使えるようになります。 import React, { useState } from 'react'; function Example() { // Declare a new state variable, which we'll call "count" const [count, setCount] = useState(0); return ( <div> <p>You clic
モバイルクロスプラットフォームの技術検証 - RAKUS Developers Blog | ラクス エンジニアブログ
こんにちは、株式会社ラクスで先行技術検証を行っている技術推進課のt_okkanです。 技術推進課では、新サービス立ち上げ時の開発速度アップを目的に、現在ラクスでは採用されていない新しい技術の検証を行う、技術推進プロジェクトがあります。 今回はその技術推進プロジェクトで、モバイルクロスプラットフォームについて検証を行いましたので、その結果の報告を行います。 なお、別テーマの取り組みや、過去の取り組みに関しては、こちらからご覧ください。 tech-blog.rakus.co.jp モバイルクロスプラットフォーム 検証の目的 検証で使用したツール 省力化の定義 検証方法 検証結果 実装できなかった機能 NFC WebView クロスプラットフォームは開発を省力化できるか ライブラリについて 各フレームワークの所感 Ionic Framework 長所 短所 React Native 長所 短所
はじめに Reactでフォーム作るのってどうするのがいいんだっけと思い調べるとFormikに関する情報がたくさん出てきたので触ってみました。 ↓Formik知らない方はこちら。これちゃんと見るだけで雰囲気は完全に把握できます！！ 参考：https://www.youtube.com/watch?v=yNiJkjEwmpw&t=2005s たしかに便利なんですが、SPAのフォームって結局なんだかんだめっっっっっっちゃいっぱい書かなきゃいけなくないですか。。Angularやってたときもいまいち美しい方法を見いだせず。。。 せめてViewとロジックをきれいに分離したいなぁと思い、汎用性のありそうなコンポーネント作ってみました。 カスタムコンポーネントを使うとこうなる ユーザーの登録・編集フォームという想定。 まずはViewの部分から。 import { Form } from 'formik';
我がFirebaseアプリケーションを不正アクセスから守るFirebase App Check | ブログ一覧 | DATUM STUDIO株式会社
App CheckとはFirebaseの正式ドキュメント(https://firebase.google.com/docs/app-check)から引用しますと以下の通りになります。 App Check は、承認されていないクライアントがバックエンド リソースにアクセスするのを防ぐことで、API リソースを悪用から保護するのに役立ちます。 Firebase サービス、Google Cloud サービス、および独自の API の両方と連携して、リソースを安全に保ちます。 つまり、ボットによるサイトスクレイピング、ハッキング攻撃等を検知して防ぐのに役立つということです。 ※App Checkだけに頼るのではなく、しっかりした情報管理と認証設計を意識してアプリケーションを作りましょう！ App Checkはどうやって不正アクセスを検知するのかApp Checkは以下のいずれかもしくは両方の条件を
こちらの記事は、Jonathan Saring 氏により2019年12月に公開された『 11 Must-Know FrontEnd Trends for 2020 』の和訳です。 本記事は原著者から許可を得た上で記事を公開しています。 ランチ中のフロントエンドトークでスマートに見られる方法！ チームのランチトークでスマートに見られることは、最新のフロントエンドのトレンドを常に把握しておくための大きな理由であることは言うまでもない。 それは、あなたがより良い開発者になり、より良い技術とより良い製品を作るのに役にたつかもしれない。 たぶんね。 だから、いくつかの興味深い方向を示すことで、この名誉あるクエストを君が簡単に達成できるように少し時間をもらいたい。 すべてのコンセプトについて1から10まで説明するのではなく、そのコンセプトとそれがどのように有用であるか紹介しよう。最後にはさらなるリソー
React入門 未経験から1週間でReactをマスターする #01. プロジェクトの作成と立ち上げ - Qiita
この入門は、 Reactの技術要素を圧倒的効率で学ぶ ことを目的にしています。 Reactの技術要素を散りばめたWebアプリを1から作っていくことでReactを学んでいきます。 すべての動くコードを公開しています。 目次 1. Reactの新規プロジェクトの立ち上げ ←今ここ 2. コンポーネントの書き方とイベントハンドラ 3.Class Components と Function Components 4. 条件分岐 (if) と繰り返し (loop) 5. フォームと親子間のデータのやり取り 6. コンポーネントのライフサイクル 7. スタイル (準備中) 8. Higher-Order Component (準備中) 9. Portalを利用したモーダル (準備中) 10. refによるエレメントの取得 (準備中) 11. Contextを利用したテーマの変更 (準備中) この入門の
こんにちは！23新卒のフロントエンドエンジニアの一氏です。 新卒エンジニアの研修の一環として、社内課題の解決をテーマに企画から実装まで行う自由度の高いチーム開発研修を実施しました。 チーム開発研修を行う過程で私たち5人の新卒エンジニアはどんなことを考えていたか、何を学んだかをまとめました。 研修概要 目的 課題 チーム開発研修 研修の流れ アイディア出し 開発初期にしたこと 開発 成果物詳細 こだわりポイント 学びが深かったこと どの機能をどこまで作り込むか フロントエンド開発 アジャイル開発 もっとこうすればよかったこと 報連相の重要性 APIの仕様のすり合わせ 最後に 研修概要 目的 今回のチーム開発研修を行うにあたって、初めに以下の3つの目的が共有されました。 セーフィーで取り扱っているカメラの内部構造についてエンジニアとして理解しておく システム開発で補助をもらいながら自走可能な状
この記事は、React Advent Calendar 2019の第一日目です。 IonicでReactが使えるようになってしばらく経ちました。まだちゃんと触ったりドキュメントを終えていなかったので、ざっと動かして調べてみたまとめです。 事前準備 Node.jsのバージョンを以下のいずれか以上にしましょう。ionic startで立ち上げるテンプレートに@typescript-eslint/eslint-pluginが入っていることがあります。 こいつがNode.jsのバージョン指定をしているため、以下のバージョン以下のNode.jsを使っているとセットアップが落ちます。 8.10.0以上 10.13.0以上 11.10.1以上 IonicのCLIを（記事執筆時点の）最新版にします。 $ npm i -g ionic@latest updated 1 package in 15.206s
こちらの記事は、Jonathan Saring 氏により2019年12月に公開された『 11 Must-Know FrontEnd Trends for 2020 』の和訳です。 本記事は原著者から許可を得た上で記事を公開しています。 ランチ中のフロントエンドトークでスマートに見られる方法！ チームのランチトークでスマートに見られることは、最新のフロントエンドのトレンドを常に把握しておくための大きな理由であることは言うまでもない。 それは、あなたがより良い開発者になり、より良い技術とより良い製品を作るのに役にたつかもしれない。 たぶんね。 だから、いくつかの興味深い方向を示すことで、この名誉あるクエストを君が簡単に達成できるように少し時間をもらいたい。 すべてのコンセプトについて1から10まで説明するのではなく、そのコンセプトとそれがどのように有用であるか紹介しよう。最後にはさらなるリソー
目的 Webアプリケーションを作りたい。 どうせなら収益化も考えたい。 マーケティングリサーチしたら競合アプリは月間1億アクセスあった。 これらを踏まえて、月間1億アクセスに耐えうるWebアプリの技術選定をしてみようとなった。 （ちなみに私はWebアプリ開発は初心者であるので、正確性は保証できない。） 現在記事執筆途中。（徐々に追記予定） 目次 目的 目次 競合・市場・収益性リサーチ マーケティングリサーチ 収益化のための分析（軽めに） 開発技術リサーチ 技術選定 インフラ クラウドとCDN その他CDNツール AWSとCloudFlare インフラ利用技術確定 フロントエンド 一般的なフレームワーク選定を考える 各フレームワークの難易度 競合からフレームワーク選定 自身のスキルからのフレームワーク選定 フロントエンド技術選定確定 バックエンド 収益化 マーケティング モバイル 競合・市場
こんにちは。木村（@atskimura）です。 先日の以下の記事の続きです。「おうちさんぽ（仮）」とはなんなのかについてはこの記事をお読みください。 Salesforce開発ばかりしていて最近のフロントエンド事情に疎くなってきたので（Salesforce上でVueやAngular動かしてはいますが）、開発するにあたって最近の流行りの技術を使いたいなーと思いまして、その方針で技術選定から始めました。ちなみに所詮個人のお遊び開発用なので、選定というほど比較していません。めぼしいのを調べて大丈夫そうなら採用って感じです。 Next.js使ってみたい実のところNext.js使ったことなくて（Nuxt.jsも）、でも流行ってそうだから使ってみたいなーと思っていました。 しかし、SSRのためのフレームワークという印象のままだったので今回の用途には合わないんじゃないかと思い、まずそこの確認をしようと読ん
こちらの記事は、Jonathan Saring 氏により2019年12月に公開された『 11 Must-Know FrontEnd Trends for 2020 』の和訳です。 本記事は原著者から許可を得た上で記事を公開しています。 ランチ中のフロントエンドトークでスマートに見られる方法！ チームのランチトークでスマートに見られることは、最新のフロントエンドのトレンドを常に把握しておくための大きな理由であることは言うまでもない。 それは、あなたがより良い開発者になり、より良い技術とより良い製品を作るのに役にたつかもしれない。 たぶんね。 だから、いくつかの興味深い方向を示すことで、この名誉あるクエストを君が簡単に達成できるように少し時間をもらいたい。 すべてのコンセプトについて1から10まで説明するのではなく、そのコンセプトとそれがどのように有用であるか紹介しよう。最後にはさらなるリソー
こちらの記事は、Jonathan Saring 氏により2019年12月に公開された『 11 Must-Know FrontEnd Trends for 2020 』の和訳です。 本記事は原著者から許可を得た上で記事を公開しています。 ランチ中のフロントエンドトークでスマートに見られる方法！ チームのランチトークでスマートに見られることは、最新のフロントエンドのトレンドを常に把握しておくための大きな理由であることは言うまでもない。 それは、あなたがより良い開発者になり、より良い技術とより良い製品を作るのに役にたつかもしれない。 たぶんね。 だから、いくつかの興味深い方向を示すことで、この名誉あるクエストを君が簡単に達成できるように少し時間をもらいたい。 すべてのコンセプトについて1から10まで説明するのではなく、そのコンセプトとそれがどのように有用であるか紹介しよう。最後にはさらなるリソー
研究室内のサークル活動として、初学者も経験者も混ぜてのプログラミング勉強会をすることになりました。そこで、設計担当の私が良いと思った記事をピックアップし、資料として勉強に活用させて頂きました。また、進行中のプロジェクトが React(Next.js) + Typescript 構成であるため、これらに関連する記事を本記事では取り上げさせて頂きます。そして、勝手ながら以下のように分類の基準を設けました。 ●：初学者向け ☆：特にオススメ｜設計思想に関わる重要なもの 未分類：一度は読んでおきたいもの ●Hooks useEffect useContext① useContext② useRef① useRef② useRefの仕組み アーキテクチャ ☆UIとロジック分離＆最適化 ☆依存性注入 アーキテクチャ比較（データフロー） ☆カスタムフック ☆ディレクトリ構成 ディレクトリ構成（Redux
はじめに 今まで、ReactやVueやAngularなどのフロントエンドFWを色々使ってきましたが、最近話題のSolidJSを勉強がてら触ってみようかと思います。 作ったもの SolidJSを使って、Markdownを書けるEditorを作りました。 リポジトリはこちらです。 https://github.com/eda-yoshizaki/learn-solidjs SolidJSとは？ ReactやVue.jsと同様にコンポーネント指向のアプローチを採用し、仮想DOMを使用する代わりにテンプレートを実際のDOMノードにコンパイルすることで高速なリアルタイムレンダリングを実現するJavaScriptのUIライブラリです TypeScriptをサポートし、拡張性や再利用性も高く、状態管理や副作用の処理が容易になるフックシステムを持っています また、Svelteに似たイミュータブルなステート
こちらの記事は、Jonathan Saring 氏により2019年12月に公開された『 11 Must-Know FrontEnd Trends for 2020 』の和訳です。 本記事は原著者から許可を得た上で記事を公開しています。 ランチ中のフロントエンドトークでスマートに見られる方法！ チームのランチトークでスマートに見られることは、最新のフロントエンドのトレンドを常に把握しておくための大きな理由であることは言うまでもない。 それは、あなたがより良い開発者になり、より良い技術とより良い製品を作るのに役にたつかもしれない。 たぶんね。 だから、いくつかの興味深い方向を示すことで、この名誉あるクエストを君が簡単に達成できるように少し時間をもらいたい。 すべてのコンセプトについて1から10まで説明するのではなく、そのコンセプトとそれがどのように有用であるか紹介しよう。最後にはさらなるリソー
これは、Lancers（ランサーズ）Advent Calendar 2021 の6日目の記事です。 はじめまして、ランサーズでフロントエンドエンジニアとして従事している谷です。 この記事では、CakePHP ＋ jQueryで作成されていたUIを元に、Reactで作成した際に、学びや気付きがあったので、それを共有できればと思います。 また、記事の内容自体は、世間一般では、「それ、何回目やねん！」とツッコミが来そうな程、割とありふれた内容なのですが、ランサーズがリリースされた2008年当時、jsがまだまだおもちゃ扱いされていた時代を経て、Ajaxが流行となり、YUI、Prototype.js、jQueryが出現し、その後、Angular.js、 Backbone.jsをはじめ、いくつものjsフレームワークが出現し、jsフレームワーク戦争状態となり、React, Vueが出現した結果、その戦争
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
リソースの破棄にDestroyRefを使用しよう - JBS Tech Blog
Angularコーディングスタイルガイド【個人的方法】 - Qiita
jQueryは終わったといわれる3つの背景と学ぶべきフレームワークとは | エンジニアスタイル
ゼロからはじめるAzure(37) 「Azure Static Web Apps」を使って静的サイトを公開しよう
2020年の11の必見のフロントエンドトレンド - Qiita
初学者必見！React + Reduxで本格的に開発を行うにあたっての勘所 - Qiita
[Angular] 子コンポーネントや外部コンテンツの参照を取得する - Qiita
【React】React RouterでSPAのルーティング設定（下層ページの404対策も） - クモのようにコツコツと
SolidJSとReactの徹底比較：パフォーマンス、学習のしやすさ、人気度から選ぶべきフレームワークは？ - コハム
Vue.jsのことをもっと知ろう | 東京・新宿のWEB制作会社・ホームページ制作会社 | 有限会社Bit Beans
[Angular] CSV ファイルを出力したときにやったこと - Qiita
2020年の11の必見のフロントエンドトレンド - Qiita
ReactとFormikでフォーム爆速開発！最強のカスタムコンポーネントを5つ作ってみた！ - Qiita
2020年の11の必見のフロントエンドトレンド - Qiita
チーム開発研修で新卒エンジニアが学んだこと - Safie Engineers' Blog!
ionic-reactことはじめとIonicでのReactライフサイクルなど | WP-kyoto
2020年の11の必見のフロントエンドトレンド - Qiita
【収益化と技術選定】月間１億アクセスのWebアプリケーションの技術選定してみた
おうちさんぽ（仮）を作るにあたっての技術選定｜コピペテック
2020年の11の必見のフロントエンドトレンド - Qiita
2020年の11の必見のフロントエンドトレンド - Qiita
React初学者のための勉強会用おすすめドキュメント集 - Qiita
SolidJSを使って、開発をしてみた - Qiita
2020年の11の必見のフロントエンドトレンド - Qiita
CakePHP+jQuery製UIをReactでシンプルにした件 - Qiita