はてなブックマーク

概要 こんにちは、先日AWSのre:Inventで発表されたAWS Amplify DataStoreがめちゃくちゃ便利すぎて驚きを隠せない、都内でフロントエンドエンジニアをしていますかめぽんです。 今まで、VueやNuxtでの開発がメインでやってきておりましてReact、Nextでの開発経験が少なくまたTypescriptでなにか出来ないかなと探しておりました。 最近だとモバイル開発のためのAWSのサービスをインテグレートしたAWS版firebaseのようなAmplifyというサービスが出ています。内容をみてみると、何やら爆速でサーバーレスアプリケーションが出来そうだなと感じたので、Next.js + AmplifyでTodoアプリを作ってみました。巷では、Nuxt.js + firebaseの組み合わせの記事がかなり多かったですが、こちらのアーキテクチャでも実装出来たのでその方法を体系

概要・前置き どうも、都内でフロントエンドエンジニアをしてます、かめぽんです。以前、Nuxt.js + Netlifyで爆速構築するサーバーレス開発入門という記事を書きまして、その記事と同じNuxt.js + Netlifyのシンプルな構成で作った、以下のサイトを１年間と３ヶ月ほど運用してきました。撮影からデザイン、インタラクションの実装からデプロイまで一気通貫でやってみました。 https://www.brightanddizain.com/ Lighthouseの評価もよくサイトがきっかけでお仕事もちょくちょくいただいたりと、おかげさまでここまでくることができました。（PWA対応もしてます） しかしながら、フロントエンド技術の流れが非常に早く陳腐化してきたことやサステナビリティを高めたいとは思いつつも課題が多かったのでこの機にnuxtのtypescript移行とそれに伴う環境基盤の構築

概要 こんにちは、都内でフロントエンドエンジニアをやっております、かめぽんです。最近、typescriptの猛威がすごいわけですが、フロントエンドでは一般的になってきてて、そもそも型で品質担保ができることってサーバーサイドこそじゃね？と思いました。そこで、Typescript + Expressでサーバーを作るという僕にはあまり考えてなかった技術だったことと、typescriptってフロントエンドの印象が強かったこともあり、Typescript + Express + Webpackで環境を作ってみようと思います。 フロントエンドをやっていく中でサーバーサイドに関わることをちょくちょくあると思うので、この記事を読んでちょっとでもサーバーフレンドリーになれたら嬉しいなと思います。 ターゲット フロントエンドだけどサーバーサイドをちょっとやってみたい人 Webpack環境でExpressサーバ

概要 こんにちは、都内でフロントエンドエンジニアをしているかめぽんです。最近、Next.jsのバージョンアップにて対応したことで一層話題になっているAMPですが、僕自身AMPのことをそこまで注目していなくてたまたま調べてみたら割とおもしろうそうだったので、インプットした内容をまとめてみました。サンプルコードなども載せていますので、AMPの基礎的な情報の参考にしていただければと思います。 本題 AMPとは、メリット AMPとはAccelerated Mobile Pagesの略で、GoogleとTwitterが発足したモバイルページを高速に表示させるためのプロジェクト、またはAMP HTMLというフレームワークのことを指します。 AMP自体は以下の構成要素で成り立っています。 AMP HTML Custom Styling(CSS) AMP js AMP Cache(CDN) 静的なHTML

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 概要 こんにちは、アジアクエスト株式会社でフロントエンドエンジニアをやってます、かめぽんです。Nuxt advent calendarということで、今やもっとも勢いのあるFWのVuejsですが、Nuxt.jsもかなりのインパクトを与えているので、それについて思いの丈を伝えられればと思います。 そのインパクトはエンジニアリングはもちろんですが、組織レベルでも影響を与えているんじゃ無いかと僕は考えています。そこで、今回社内でフロントエンド組織を構築していくにあたり実験的にVue、Nuxtを導入するまで、Nuxtが組織にどんな良い影響を与えて

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 概要 こんにちは、アジアクエスト株式会社でフロントエンドエンジニアをやってます、かめぽんです。最近はエンジニアリングだけでなく Vue や Nuxt の導入支援などもしていたので、徐々に Vue を使ってくれる人が増えつつあり、組織的にもこれからどんどんフロントエンド技術を一層浸透させていきたいなと思っております。 最近、JAMstack やヘッドレス CMS という言葉を聞きますが、CMS と聞いて真っ先に思い浮かべるのは WordPress だと思います。人によっては好き嫌いあって僕もそんなに得意と言うか好きな技術ではありません。だ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 概要 こんにちは、アジアクエスト株式会社でフロントエンドエンジニア(以下、FE)をやっています、かめぽんです。 最近、VueもNuxtも勢いすごくないですか？？ すごいですよね？！？！ そんでもって、FirebaseやAWSを使ったサーバーレスアーキテクチャのアプリケーションも増えてきていますね！ だけど、「覚えること多くてよくわからん！けど、なんか動かしてみたい！」 と、思う方もいると思うのでぜひこの記事を参考にしていただけたらと思います。 サーバーレスSPAの構築方法はたくさんありますが、まずは手軽にモダンフロントエンド周りの知見を

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

概要 フロントエンド界隈ではReactやVueなどの開発を円滑に進めてくれる便利ツール（WebpackやLint、CLIなどなど）がたくさんあり開発がとてもしやすくなって来ていると思います。 とても便利な世の中になったな〜とCLIとかNext.jsなどを叩きながらサンプルばかり作ってたのは良いのですが、 開発環境そういえばどうやって作るん？？？、 それ管理しろ言われたら環境わかってないと死ぬんじゃないか、 フロントエンド界隈カオスすぎて結局何すればいいんだろうか？？？ という疑問や不安があったので、一度脳みその整理がてら開発環境をひと通り作ってみました。 開発環境周りの設定ってあまり進んでやりたくないのでスターターキット的な感じにまとめてGitHub ( https://github.com/isihigameKoudai/VuejsStarterKit )にあげてみました。また、最近はV