2020年のフロントエンドエンジニアの技術スタックの一例
年の瀬なので、私自身が今年利用した技術をベースに技術スタックをまとめてみようと思います。 とはいえ Web Standard といった広い対象から、フレームワークやライブラリまで、粒度の違うものを全て言及するのは無理があるというもの。特に強く言及できるものは個別で説明しつつ、最後に利用する機会がなかったものも最後に記載する形で。 以下常体。 追記: マイナー企業のようなので一応書いておきますが、筆者は本業ではLINE株式会社という組織でいわゆるエンジニアリングマネージャーと言われるような業務とその採用に関わる仕事をしています。 利用した技術一覧 HTML/CSS/JS みたいなことを書いてるとキリがないので、独断と偏見で区分けして適宜漉いています。特に利用する機会が多かったものは太字でピックアップ。 Frontend Language/Platform TypeScript JavaScr
コーポレートサイトを誰にも気づかれず静的化したときの技術選択について - Hatena Developer Blog
こんにちは〜。チーフエンジニアのid:cockscombです。 最近、同僚のid:yashigani_wとともに、はてなのコーポレートサイトを静的サイトとして再構築しました。ちょっとした仕事ではありますが、経験によって得られた暗黙知を形式知へ昇華するため、ここに紹介します。 はてなのコーポレートサイトとは サイトを静的化するメリット どのようにサイトの静的化を進めたか 1. 静的ファイルをNext.jsで生成 2. 運用を自動化したい 3. ホスティングサービスを選択する 4. 動的なコンテンツを表示する リリースと振り返り ホスティングサービスに関する補足 はてなのコーポレートサイトとは 弊社のコーポレートサイトは一般的なそれと同様に、株式会社としての「はてな」に関心を持っていただいた方々とコミュニケーションするための窓口です。会社情報を提供したり、あるいはプレスリリースなどの情報を公開
AWS Amplify と Vue.js を使って、基本的な認証と CRUD 操作ができる Web アプリケーションを作る- builders.flash☆ - 変化を求めるデベロッパーを応援するウェブマガジン | AWS
こんにちは、JAWS-UG 浜松支部の松井です。 普段からモノリシックな環境やそれに準じる環境での Web アプリケーションの開発、保守に取り組んでいますが、継続的にサービスを運用していく上では様々な悩みが尽きません。 OS のバージョンアップ、セキュリティパッチはどうするか ? 言語やミドルウェアのバージョンはどうするか ? ステージング、本番等の環境のデプロイはどうするか ? コスト最適化はどうするか ? etc・・・ そこで、サーバーレスアーキテクチャを採用することにより、こう言ったホストマシンやネットワークの管理に起因する悩みを軽減することができます。 とはいえ、いきなりサーバーレスに着手するとしても、 本当にちゃんと動くのか ? 設計、構築が難しいのではないか ? コストはどのくらいかかるのか ? まずどこから手をつければ良いのか ? と言った疑問があると思います。 今回はそう言
Talked at "AWS Dev Day Online Japan" 2020.
［速報］AWS、ローコードでWebのフロントエンドを開発できる「AWS Amplify Studio」発表。バックエンド管理機能も統合。AWS re:Invent 2021
Amazon Web Services（AWS）は、Webアプリケーションのフロントエンドを短時間で容易に開発できる機能と、バックエンドのクラウドサービスの運用管理などを統合した新ツール「AWS Amplify Studio」を発表しました。 AWSは以前から、Webアプリケーションやモバイルアプリケーションのバックエンドの迅速な構築と運用をするフレームワーク「AWS Amplify」を提供していました。 AWS Amplifyによって開発者は簡単にAWSのサービス群を組み合わせてスケーラブルなバックエンドを構築できます。 そしてAWS Amplifyに含まれているクライアントライブラリを利用することで、そのバックエンドに接続するフロントエンドの開発に注力することが可能でした。 今回発表された「AWS Amplify Studio」は、このAWS Amplifyに対応したフロントエンドをロ
フロントエンド初心者が無事に Hugo のブログを Gatsby で一から作り直すことができた。その振り返り。 歴史 インターネットを小中学生(もはや 25 年以上前)に触り初めた頃に、HTML で文章の構造を作り CSS でデザインする、ということができるのを知って感動したけど、結局自分には何かが合わなくてそれを突き詰めることができなかった。というか、それを知ったが故にテーブルレイアウトとかがどうしても気に入らず、かといって CSS は float が難しすぎて、結局ウェブサイトを作る、という根本的な営みをずっと避けてきてしまった。 時は過ぎ、Wordpress の様なブログエンジンや Hugo の様な仕組みがあったおかげでブログを初めて続けることはできた。13 年前にレンタルサーバに Wordpress を置いて始めたこのブログも 9 年前には VPS での Wordpress 運用に
【爆速】React+Amplify+AppSyncでリアルタイム掲示板アプリを15分で作り上げる 〜これが最高のDeveloper Experienceだ〜 - Qiita
【爆速】React+Amplify+AppSyncでリアルタイム掲示板アプリを15分で作り上げる 〜これが最高のDeveloper Experienceだ〜JavaScriptAWSReactamplifyAppSync Railsを使って15分でブログアプリを作り上げる動画が一斉を風靡したのはもう何年前でしょうか。 私はまだその頃Developerですらいなかったですが、いまその動画を見ても感動してしまいますね。 Webのアーキテクチャは進化し、API非同期通信、フロントエンドとバックエンドの分離、仮想DOMによるフロントエンド描画、GraphQLバックエンドの台頭といった具合に圧倒的な進化を遂げてきました。 では、この技術スタックを使ってRailsを使ってブログアプリを作り上げることと同様のことがどれだけの開発効率で実装できるのでしょうか？ 今回はAmplifyCLIとReactを使っ
Next.js + TypeScript + AWS Amplify でアプリケーション開発 - 虎の穴開発室ブログ
こんにちは、虎の穴ラボのNSSです。 最近ReactやTypeScriptを勉強中なのですが、Reactで作ったアプリケーションを簡単にデプロイして公開できるツールとして、AWS Amplifyがあります。 AWS Amplifyとは、AWSが提供するモバイルやWEBのアプリケーションを素早く開発することができるプラットフォームです。 AWS Amplifyは、たった数クリックでアプリケーションをデプロイできる他、 コマンドラインツールを使ってユーザー認証やAPIなど、あらゆる機能を簡単にアプリケーションに追加することができます。 今回は、ReactベースのフレームワークであるNext.js と AWS Amplifyを使ったアプリ開発をご紹介します。 環境 Node.js (v16.4.1) Next.js (v10.2.0) TypeScript Node.jsはインストール済みである
好きだったSlideSha○eが悲しいUXになっていたので、その怒りを糧にSlideの作成・共有サービスを爆誕させた話
概要 スライド形式の資料が好きな筆者が、Markdownでおしゃれなスライドをつくって、即座にシェアできるようなサービス、Slidevookを開発したので、紹介します。 この記事自体には、あまり技術的な話はでてきませんが、技術的な話は、別途記事にしていきたいと考えています。 書き起こしました。→ Wasmやモダンフロントエンドを駆使してMarkdownでLT資料を作ってシェアするアプリを作る技術の裏側 対象読者 よくLTで発表をする方 MarkdownでLT資料を作成するのが好きな方 つくったLT資料を公開するのに、いちいちPDF化してというのが大変という方 はじめに・動機 筆者は、いろいろな媒体から、技術やマネジメントや組織運営に関する情報を収集をしています。 その中でも、Slide形式は、記憶に残りやすく、好んで参照する癖があります。（もちろんZenn・Qiitaのようなブログ形式の情
フルスタックのチャットアプリケーションをAWSとNext.jsで構築する | Amazon Web Services
Amazon Web Services ブログ フルスタックのチャットアプリケーションをAWSとNext.jsで構築する モダンなチャットアプリはリッチな機能を必要とします。これらの機能はファイルストレージ・リアルタイムの更新、そしてクライアントとサーバーの両方からデータを取得する能力が必要です。 従来、これは多くのサードパーティサービスをつなぎ合わせるか、カスタムソリューションの作成に開発時間を費やすことを意味していました。そして、この方法では市場投入までの時間が遅くなり、複数の障害点が発生します。 チャットアプリに必要な機能と、AWS が従来の問題点をどのように解決しているかを紹介するために、我々はリアルタイムチャットアプリケーションのサンプルを更新しました。このバージョンは、ローカルと AWS の両方でアプリケーションを完全に管理・制御することがいかに簡単かを強調するために再設計され
AWSのローコード開発ツール「Amplify Studio」が正式リリース。Figmaと連携してプロトタイプからコードを自動生成
AWSのローコード開発ツール「Amplify Studio」が正式リリース。Figmaと連携してプロトタイプからコードを自動生成 Amazon Web Services（AWS）は、Webアプリケーションを最小限のコーディングで開発できる、いわゆるローコード開発ツール「Amplify Studio」の正式リリースを発表しました。 Announcing AWS Amplify Studio is in general availability: FREE pixel-perfect Figma-to-React conversion Bind UI components to data Extend React components in code Works seamlessly with Amplify backends Check out the launch blog!https:/
実質無料で使える Hosting Service の比較や使い分けの紹介 2021 (Firebase Hosting, Cloudflare Pages, Vercel, Netlify, GitHub Pages, Amplify, CloudRun)
実質無料で使える Hosting Service の比較や使い分けの紹介 2021 (Firebase Hosting, Cloudflare Pages, Vercel, Netlify, GitHub Pages, Amplify, CloudRun)2021-10-04 ホスティングサービスに何を使えばいいのか分からないという話はよく目にしますし、僕もたまに思います。 そこでこれまで自分が使ったサービスの特徴や for me, not for me な点を紹介します。 静的ページ、および NextJS を前提としたサービス選定で、Firebase Hosting, Cloudflare Pages, Vercel, Netlify, GitHub Pages, Amplify, CloudRun を紹介します。 また、それらはフリープラン前提の話であり、not for me な点は課
AWS Amplifyが変えた世界
筆者の技術スタック AWSに出会う前 筆者の技術スタックは以下のとおりです。 Webに関するフルスタックエンジニアエンジニアというのがわかりやすいのかもしれません。 フロントエンドからバックエンドまでいっしょくたに提供してた時代からのエンジニア その名残で今もフロントエンド、バックエンド、インフラ構築までおしなべて行ういわゆるフルスタックエンジニア 前職にて社内のインフラ整備だったりお客様の環境構築を任されることが多かった 現在の会社からAWSを学び始める とりあえずやってみよう！という精神を生かして 何でも手を出してた事から、アプリケーションを構築する会社で絶対数が少なくなりがちな インフラ部分を任されることが多かったと思います。 さくらのVPSなどに対して すべてのアプリケーションが整うお手製のシェルをメンテナンスしながら、 一発で環境を整えることに快感を覚えておりました。 Ansib
AWSを用いたフロントエンド開発
ZennにみるCloudRunとBigQueryによるアプリケーション構築 / zenn-cloudrun-bigquery-serverless
こんにちは。ウェルスナビでソフトウェアエンジニアをしています水馬(@mizuma_t)です. 今回のテーマはフロントエンドモニタリングです。 みなさんフロントエンドのモニタリングは正しく行えているでしょうか？ 各ユーザの端末内で生した事象を正しくモニタリングするためにはサーバサイドとは異なる知見が求められます。今回は、AWS上でフロントエンドアプリケーション(Next.js)を運用するにあたってのモニタリングの知見をお伝えしたいと思います！ フロントエンドの「何を」モニタリングするのか？ ひとえにモニタリングといっても目的やサービスの特性に応じて期待されるモニタリングの範囲と意味合いが異なることが一般的です。 本記事では以下の項目に焦点を当ててAWSを用いたモニタリング手法について解説しています。 ユーザの端末内で発生したエラーを正しく検知できているか？ レンダリングサーバで発生したエラー
GitHub - aws-amplify-jp/awesome-aws-amplify-ja: 日本語で書かれているAWS Amplifyのツール、チュートリアル、記事などのリンク集
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
概要 こんにちは。 KDDIアジャイル開発センターの小板橋です。 この記事は、KDDI Engineer&Designer Advent Calendar 2021の11日目の記事です。 先日(2021/12/3)、re:Invent2021でAWS Amplify Studioが発表されました。 今回は、そのAWS Amplify Studioについてまとめ、検証していこうと思います。 AWS Amplify Studio AWS Amplify Studioの機能を要約すると、フロントエンド開発者に最小限のコーディングでフロントの開発ができる Amplifyのバックエンド構成およびそれらを管理する機能を統合した開発環境 ちなみに、amplify admin uiとの違いは？？ 昨年のアップデートでamplify admin uiというものが出ています。 実は今回のAWS Amplify
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フロントエンドエンジニアのためのAWSアーキテクチャ
フロントエンド初心者がGatsbyでブログを作り直した話 - As a Futurist...
AWSを用いたフロントエンドモニタリング入門 ~Next.js編~ - ウェルスナビ開発者ブログ
AWS Amplify Studioが変えるフロントエンド開発の未来とは