react

みなさん、こんにちは。イノベーションLABのハヤシです。今回は、以下の構成の Web アプリをさくっと作る手順をご紹介します。 バックエンド：Node.js の REST API（Amazon API Gateway / AWS Lambda） フロントエンド：TypeScript の React今回は全 3 回のうちの 1 回です。 必要な部分だけでも、ぜひ参考にしてみてください。環境構築手順はこちらで紹介しています blog.css-net.co.jp 1. 前提条件 1-1. 想定読者 1-2. 作成するもの 1-3. 前提条件 2. 事前準備 2-1. 作業ディレクトリ作成 2-2. …

夏休みの宿題的な感じで、以前挫折した Gatsby.js リベンジしてみます。 環境 Node.js：v16.16.0 Gatsby, Gatsby CLI：4.20.0 なぜ Gatsby か JavaScript で書きたかったから 人気だから（身もふたもない） 使っていた Gridsome の更新が止まってしまった 以前はブログを WordPress で作ってみたりもしましたが、やっぱりセキュリティの問題もありますし個人サイトは静的サイトが良いと思いますよ！自分は幸い乗っ取られこそなかったですが、いろいろな国から大量のアクセスあったりしてめちゃくちゃこわかった思い出があります。 その時の…

はじめに こんにちは！ RECJob開発チームの福山(@posion_404)です。 社内ではpoisonって呼ばれております。 今回は、プロダクトを作成している際に共通処理をモジュール化して管理することを実施したのでそのことについて書いていきます！ なぜモジュール化を分けようと思ったのか 今チームで開発している、RECJobというプロダクトはReact/Next.js+TypeScriptをmonorepoで構築されています。 そこで、各アプリにまたがって同じ処理を書くことが増えてきたので、いっそのこと共通ディレクトリを作成してそこで管理しようということになりました。 同じ処理を書く際にアプ…

photo at Rebun island JSXとは props を使用して引数をコンポーネントに渡す JSXとは JSX とはなんでしょうか。JSX とは、JavaScript + XML の略で、JavaScript の拡張構文です。UI がどのような見た目かを記述するために、React で JSX を使用することは必須と言って良いでしょう。基本的な形式は、function コンポーネント名(引数) { /* JavaScript */ return ( HTML文 )} となります。 それでは、簡単な JSX 構文のプログラムを作成してみましょう。プロジェクト名は jsx としましょう…

はじめに こんにちは、ACS事業部の奥山です。 フロントエンド回りの検証をおこなっていて、React.js に Admin LTE 3 というテンプレートが簡単に導入でき利用しやすそうだったのでブログにしておきます。 アプリのUIはシステムの中で唯一利用者が直接触れるもっとも重要な部分です。最近は異なる画面サイズ(PC/スマートフォン)の両方に対応することが一般的になっていますが、Bootstrap(CSSのフレームワーク)などを利用してもデザイン性などを考えるとナカナカ大変です。 今回、紹介するようなテンプレートを活用することで工数をかけずに一定の品質のものが作成できます。 オフィシャルサイ…

vite React プロジェクトで .env に書いた環境変数を使うメモ 環境変数は VITE_ prefix を使う VITE_ から始まる変数名でないと vite アプリからアクセスできない 環境変数が誤ってクライアントに漏れてしまうことを防ぐために、VITE_ から始まる変数のみが Vite で処理されたコードに公開されます。 cf. 環境変数とモード | Vite .env DB_PASSWORD=foobar VITE_SOME_KEY=123 アプリからは import.meta.env.変数名 でアクセスする const key = import.meta.env.VITE_S…

挫折せずにReactに入門しよう 2021年9月に発売された最新のReactの本です。作者はUdemyのReact講座がベストセラーとなっているじゃけぇさん。「じゃけぇ本」と呼んでいる界隈もあるようです。内容もフルカラーで入門者に読みやすい本となっています。 僕は本書のターゲット層よりは先に進んでいる(はず)なのですが、とてもオトクなKindleポイント50%還元キャンペーン(実質半額！)をやっていたので復習も兼ねて読みました。

@1000ch (id:hc0001) です。掲題の通り、少し前にドクターズプライムの Frontend プロジェクトで使う lint ツールとして ESLint ではなく XO を使っていく方針に切り替えました。最近その振り返りを行ったので、その備忘録として文字に起こします。 github.com 経緯と課題 これまでは Create React App に付属する ESLint に加えてルールを少しカスタマイズして、それをいくつかのプロジェクトで使っていました。これにはいくつかの課題が存在しています。 ESLint およびその周辺プラグインの依存関係を含めたバージョンアップをケアし続ける必…

エンジニア・プログラマーの学習に約立つコンテンツのセール情報を集めました 1位 現役シリコンバレーエンジニアが教えるPython 3 入門 + 応用 +アメリカのシリコンバレー流コードスタイル ¥24,000 → ¥1,840 92%OFF!! ⭐ ⭐ ⭐ ⭐ ⭐ （18,132件） 現役シリコンバレーエンジニアが教えるPython入門！応用では、データ解析、データーベース、ネットワーク、暗号化、並列化、テスト、インフラ自動化、キューイングシステム、非同期処理など盛り沢山の内容です！ 2位 【キカガク流】人工知能・機械学習 脱ブラックボックス講座 - 初級編 - ¥15,000 → ¥2,08…

「Reactハンズオンラーニング 第2版」を参考にしながらReactの設計思想を理解する。 www.oreilly.co.jp 開発環境づくり Vite + React + TypeScript 速さは正義。Viteのreact-tsを使用。 またReact Developer ToolsのChrome拡張機能もデバッグ用にインストールしておく。 chrome.google.com 関数型プログラミング 第一級オブジェクト：ざっくりいうとあるオブジェクトを変数として扱えること。関数の引数として渡したり、戻り値として受け取ることができる。 const someFunc = (msg: strin…

音樂 無し 考察 fortuna (運命) 運命 : 受命・宿命・使命 - .｡oO(さっちゃんですよヾ(〃l _ l)ﾉﾞ☆) 増補 讀書會の方法 - .｡oO(さっちゃんですよヾ(〃l _ l)ﾉﾞ☆) 増補 適切さの論理 - .｡oO(さっちゃんですよヾ(〃l _ l)ﾉﾞ☆) 増補 Kripke frame - .｡oO(さっちゃんですよヾ(〃l _ l)ﾉﾞ☆) 増補 圈論に於ける代數 - .｡oO(さっちゃんですよヾ(〃l _ l)ﾉﾞ☆) 凄いね 三角形の中心 - .｡oO(さっちゃんですよヾ(〃l _ l)ﾉﾞ☆) s/層/層/ 増補 算術 (arithmetic) も色々 -…

今後触っておきたいタスク R（データ分析） https://comicalcommet.github.io/r-training-2022/ Google Kubernetes Engine https://cloud.google.com/kubernetes-engine TimeTree API プラグイン（予定ボタン） https://developers.timetreeapp.com/ja/plugin プラグインをreactに落とし込めないか （続き）カレンダーリストの取得 https://developers.timetreeapp.com/ja/docs/api/oauth-…

2017年から個人で開発しているTrickleというサービスがある。最近、これのバックエンド構成を変えたり、新機能追加などをした。技術的に目新しいものや凄いものはないけど、頑張ったのでその時の話を残しておく。 バックエンド Express → Next.js Multer → BusBoy Web版 GAE → Cloud Run クライアントアプリ React Nativeのアップグレード react-native-image-crop-picker → react-native-image-picker ソーシャルログイン アイコン変更 バックエンド Express → Next.js こ…

pixivではNext.jsを用いたフロントエンドのリプレイスプロジェクトを2022年3月末より行っており、現時点(2022年8月)でリクエスト機能をNext.jsにてリプレイスしました。 今回のpixiv insideではピクシブ株式会社で働くエンジニアの取り組みとして、pixivのフロントエンドをNext.jsでリプレイスする取り組みについて実際に取り組んだメンバーからご紹介します。 まずは皆さんの自己紹介をお願いします namazu:pixivのウェブ領域に関するテックリードを担当しているnamazuです。今回のNext.js化プロジェクトではPjMやNext.jsのホスティング回りの実…

承前*1Ramon Antonio Vargas “Salman Rushdie ‘road to recovery has begun’ but ‘will be long,’ agent says” https://www.theguardian.com/books/2022/aug/14/salman-rushdie-is-off-ventilator-and-able-to-talk-agent-says サルマン・ラシュディは、人工呼吸器が外され、話すことが再び可能になったという。但し、重傷であることには変わりない。また、目も刺されているので、片目の失明は確実であるという。A fam…

Ruby界隈にチェリー本あらばTS界隈にはブルーベリー本誕生！ 2022/4/22に発売された新刊です。物理本はなんと965ページのボリューム、TypeScriptを基本からみっちり解説した本となっています。 インパクトのある表紙も時々ある技術書関連では、Ruby界隈ではご高名な伊藤 淳一さん【give IT a try】の『プロを目指す人のためのRuby入門』が「チェリー本」という愛称がついているのは割と有名な話。 瑞々しいブルーベリーがどどんと載っている本書『プロを目指す人のためのTypeScript入門』は、習って「ブルーベリー本」もしくは「ベリー本」という愛称がついたそうです。Type…

状態管理方法がよく分からないのと下手にやると再描画されまくるのとで React に興味はありつつも手が出せない (思うように書けない) 勢だったけど、Jotai でようやくなんとかなりそう。 Chrome 拡張の React Developer Tools で見ても期待した範囲だけが描画されてるし、状態管理もやりやすそう (理解できる) でよい。zenn に本家サイトベース？の紹介記事があったのでありがたく読み込み中。 これが四連休の成果。最初の二日は仕事疲れの反動で動けず、ゴロゴロしつつゲーム三昧。三日目も半分ゲームしてたけどようやく手を動かし始めて今(四日目の夜)に至る。

すでに8月も半ばになってしまったが7月に買った書籍たちを紹介していく。7月はAmazonのプライムデーに関連してKindle本のセールが多かったので購入したものも比較的多かったと思う。 こういうセールのときには今必要なもの、興味のあるものだけでなく将来的に必要になったときのために定番本を安くなっているうちに購入しておくってこともよくする。 あと7月に買ったものではなく随分前のセールで全巻大人買いをしたものの、途中で読むのが止まってた『金色のガッシュ』をようやく一気に読み終えた。 書籍 はじめてのAndroidプログラミング 第5版 パケットキャプチャの教科書 今いるメンバーで「大金星」を挙げる…