プログラミング実務未経験からWebエンジニアに転職した私が、様々な試行錯誤の末、行き着いたプログラミングの効率の良い勉強方法を解説したいと思います。 プログラミングと聞くと「なんか難しそう」とか「何から勉強すればいいのかわからない」とか...

「アプリケーションといえばネイティブアプリでしょ」という時代は終わって、今やブラウザアプリでもネットワーク環境さえあればサクサク使えるようになりました。 ブラウザアプリのメリットはブラウザ（ChromeやSafariなど）があればすぐに...

先日からのコロナの影響を受けて、不本意ながらリモートワークを行うことになりました。 私自身は、「他人の目線がない分、自己管理ができず怠けてしまうのではないか」という不安からどちらかというとリモート反対派でした。 しかし、実際に実施してみて...

私は「印刷業」、「貿易業」を経て、29歳でWebエンジニアに転職しました。今までのキャリアを捨て、「Webエンジニア」に転職して正解だったか。結論から言ってしまえば「正解」でした。こんなに将来性があって面白い職業は他にはないと思います。...

アドベントカレンダー私が担当する最後の記事は、アプリの品質を保つ上で最も重要なテストについてです。 以下の記事の続きという前提なので、React+AWSで作成したWebアプリ（SPA）に自動テストのフローを追加するという流れで今回の解説を行います。 AWS Amplify / AppSyncで画像投稿webアプリのサーバサイドを実装する テストと聞くと「あんまやる気でねー」となるかもしれませんが、テストがないとリリース時に常に肝を冷やしながら作業をするはめになるので、そんなリスクを犯すくらい...

アドベントカレンダーも中盤に差し掛かってきました。 今回は画像投稿アプリのサーバサイド（ユーザー認証・GraphQLによるAPI通信）をAWSのサービスAmplify・AppSyncを主に活用して実装していきます。 一応、以下記事の続編という形で投稿を行っていますが、途中まではAmplifyとAppSyncの概要説明を比較的シンプルな実装例を用いて行います。 React Hooks ✕ AtomicDesignで画像投稿webアプリのフロントエンドを実装する AWS Amplifyとは ...

FigmaとStorybookで作成したプロトタイプを実際にReactで実装していきます。 （プロトタイプ、アプリイメージについてはこちらの記事に詳細を投稿しています。） Figma ✕ React Storybook で作るプロトタイピング & スタイルガイド Reactに関しては、技術の入れ替わりが激しく「3ヶ月前に採用したモジュールがすでにdeplicatedになっている」なんてことはざらにあります。 そんななかReact 16.8から導入されたのが、Hooksです。公式曰く ...

アプリを開発する前に予め、開発の全体像を把握するためにプロトタイプを作成します。 プロトタイピングツールで作成したUIは、実際のアプリ開発にも流用できるため効率的です。 今回は簡単な写真共有Webブラウザアプリを制作すると仮定して、 プロトタイピングツールFigmaでプロトタイプ作成 Reactコンポーネントへの落とし込み Storybookでの管理 という一連の流れを実際に実装しながらFigmaやStorybookを導入することでどういったメリットがあるのか・どういったことができ...