TypeScript

1. 公式ドキュメントを読む 2. サンプルコードを読む 現在の状態は、ある程度 React, TypeScript の経験があるが Next.js は未経験。 目標は GitHub Pages を Next.js + TypeScript で書き換えること。 1. 公式ドキュメントを読む Next.js::Getting Started がエントリーポイントとして最適でした。 静的サイト生成を推してたり、公式ドキュメントからも Next.js 開発者自身が持っている思想みたいなのが読み取れるので必読です。 ゼロコンフィグで開発できることをメリットとする裏に、ディレクトリ構成がルーティングと対…

プロダクトエンジニアリング部の佐藤です。 今回はLIFULLの開発において実際に使われている技術スタックの一例としてLIFULL HOME’S 引越し手続きを紹介いたします。 LIFULL HOME'S 引越し手続きとは Nuxt.js TypeScript Context Nuxt Community 認証 Nuxt 3に向けて まとめ LIFULL HOME'S 引越し手続きとは 住み替えの際、各事業者(電気・ガス・水道)の住所変更手続きを一括で申請できるサービスです。 主なシステム構成はこちらです。 Nuxt.js GAE(Google App Engine) Firebase 今回はN…

はじめに 環境 キャッシュファイルの確認方法 キャッシュファイルの削除 カスタムプラグインの作成 動作確認 苦労した点 参考サイト はじめに ハイブリッドアプリフレームワークである、Ionic(Cordova)を使用してiOS/Androidのモバイルアプリを作成していたところ、下記のようなセキュリティに関する指摘を受けた。 ＜指摘内容＞ Android端末でアプリを実行すると、端末の下記フォルダに、個人情報が含まれたキャッシュファイルが作成される。 /data/data/<パッケージ名>/cache/Webview/Default/HTTP Cache 上記で受けた指摘の解消、具体的にはキャ…

要約 これは技術記事である。 ただし参照する際はこちらを確認してリスクを理解した上で扱うこと。 TypeScriptとReactで開発基礎環境を整える。 lint、test等は次の記事でする。 バックエンドも同じリポジトリにある。

qiita.com 上記の記事が参考になります。 qiita.com のように、高さ取得したかったらoffsetHeightとか使うと思いますが、これ丸めちゃって整数になるんですね。まあだいたい計算出来れば良いならそれで良いのですが、 tech.motoki-watanabe.net でparseFloatして得た値と計算して比較したいとかだと、小数点で高さを取得したい。 なのでそのような際は、 const height = elm.getBoundingClientRect().height; とすると、小数点まで含めて高さを取得できます。

useReducerを使ったjsxファイルをtsxファイルに変換したのでメモ的に残しておきます。 create-react-app+TypeScript内のコードにjsxファイルを追加したんですが、せっかくなのでTypeScriptに書き換えてみました。 追加したjsxは以下のブログの「sample2: stateが複数」のコードを参考にさせてもらいました。 React hooksを基礎から理解する (useReducer編) - Qiita 変換の流れ ファイル拡張子をjsxからtsxに変更 型推論用にinterfaceを追加 ActionTypeの定数を列挙型のenumで定義 関数や引数に…

GASでスプレッドシートから値を読むときに getValue とか getValues とか使うけど、 @types/google-apps-script の定義だと戻り値の型が any になっていて扱いにくい。 公式のドキュメントには戻り値の型について The value may be of type Number, Boolean, Date, or String depending on the value of the cell. と書いてあるので、型がこの4つのどれかになってるかどうか判定する関数を用意するといい感じになる。 type TypeMap = { string: stri…

最近、JavaScript / TypeScriptの学習に取り組んでいるので、これを機会にCloud Formationのテンプレートを書く方法もYAMLからAWS CDKに移行しようと思う。 AWS CDKを学ぶにあたり、AWS CDK Workshopをオススメされたので、やってみた。 AWS CDK Workshopでは、最初はAPI Gateway + Lambdaの簡単なところから、中盤にテスト、後半はCodePiplineを使ったCDを学ぶことができる。 今までYAMLで書いていたところを、if文やクラス、関数を使って書くことができるのは、新鮮に感じることができた。 今後は、可能…

なんか話題になってて、なんかおみこしwasshoiする流れになってたのでお気持ちを書き残したくなった。 先に結論 こういうのを作って公開するのは誉れある組織 ですが 内容的にはfor TypeScriptというよりはfor ES nextといった感じで、特に型周りに関する言及が少なめ eslintのルールが用意されていないので使いたいなら人力運用になる ゆえにGoogle社員以外がわざわざプロジェクトに導入するのはどうなんでしょうか。手間に見合う価値があるんでしょうか。 だからこれをデファクトにしよう！みんなこれ使えよな！みたいな勇み足はちょっと…… これが言いたかっただけです。 スタイルガイ…

（訂正） 書いたはいいが、 よくよく確認したら repository の last commit が2年前と全くメンテナンスされてない状態だったので、 こちらのほうがむしろ推奨されない方法となっていました。 なにかの参考になるかもしれないので、記事は残しておきます。 不便な記事２連発で申し訳ありません。 広告 (adsbygoogle = window.adsbygoogle || []).push({}); tl; dr 一部の場合を除いて、このコマンドでプロジェクトを作るのは避けて serverless-plugin-typescript を使おう sls create -t aws-no…

こんにちは。レバレジーズ株式会社のテックリードの竹下です。 2021/1/13に、KARTEのサービスを運営しているプレイド社とマイクロサービスに関して、合同勉強会を開催しました。 今回は、クローズドかつ、リモートで勉強会を開催したため、リアル開催やリモート一般公開と比べてどのようなメリットがあったかをご紹介していきます。 目次 目次 開催の経緯 勉強会の内容 クローズドで内容が充実する 業務に密接に関係する話ができる 踏み込んだ話ができる 懇親会も濃密 開催者も参加者も楽できる 周知や参加者管理が楽 リモートなので参加者が楽 初めての発表の人も気が楽 まとめ レバレジーズと勉強会しませんか？…

npm packをする際に、src下に配置したテストファイルを除外する方法です。ググってもあんまりいい回答がヒットしなかったので記事にします。 2021/02/08 更新：npm v7 に対応しました。

ともやん🐓（🐦） ツイートURL:https://twitter.com/92534674/status/1365719038437941248 ツイート:つまり、お子様でも間違えないようにも使えるし、大きくなったらArduino IDEで大人の様にも使える設計なmicro:bit氏です。さらに、センサーやらスピーカー、マトリクスLEDなど、標準で機能が満載なマイコンです🥰 ともやん🐓（🐦） ツイートURL:https://twitter.com/92534674/status/1365717809104216065 ツイート:そもそも、micro:bitとしてプログラミングするなら、コードを…

React + Next.js + Redux + TypeScript の勉強をしています． 過去に React（クラスコンポーネント） + JavaScript + Next.js + Redux で作成したアプリを React（関数コンポーネント）+ TypeScript + Next.js + Redux で改修しています． css は普通に import "sample.css"; で動作させています． semantic-ui-react も導入しています 今日取り組んだこと React React（関数コンポーネント）+ TypeScript + Next.js + Redux で…

エラー内容 error Type string trivially inferred from a string literal, remove type annotation @typescript-eslint/no-inferrable-types エラーが出たコード import { Component, Prop, Vue } from 'vue-property-decorator'; @Component({}) export default class MyComponent extends Vue{ @Prop() private firstProperty: string …

要約 これは技術記事である。 ただし参照する際はこちらを確認してリスクを理解した上で扱うこと。 TypeScriptとReactで開発基礎環境を整える。 lint、test等は次の記事でする。 バックエンドも同じリポジトリにある。

basictomonokai（🐦） ツイートURL:https://twitter.com/1919301649/status/1365269346197544965 ツイート:◆micro:bit情報毎日更新◆ micro:bit情報 https://t.co/sCq6gMuGq7 齋藤淳@元JI8GRX（🐦） ツイートURL:https://twitter.com/701351987380551700/status/1365254712308629505 ツイート:RT @KSY_RasPi_Shop: 新規取扱品 micro:bit V1・V2どちらでも使用できるmicro:bit用拡張…

ForkwellさんのオンラインイベントFront-End Study #4「いま考えるユーザー体験とデザインの世界」を視聴しました。 フロントエンドエンジニアがデザインとどう向き合うべきかという興味のあるテーマの中で各セッションを聞けたので、メモと感想を残しておきます。 セッション 基調講演「フロントエンドエンジニアが今学ぶべきデザイン」 セッション1「共創するためのデザイン批評」 セッション2「サービス横断デザインシステムのフロントエンド開発に携わって学んだこと」 基調講演「フロントエンドエンジニアが今学ぶべきデザイン」 サイバーエージェント 谷さん 発表Figma： https://ww…

プラハチャレンジとは praha-challenge.com 参加者がペアやチームを組んで実践的な課題に挑む、ピアラーニングを中心としたプログラミング・ブートキャンプです。設立に至った背景： praha-inc.hatenablog.com なぜやるのか Web エンジニアの成長は「環境」と「本人の努力」の掛け合わせだと考えています。良い環境（良いメンター、適度に挑戦的な案件、学習意欲の高い仲間など）に恵まれ、そこに当人の努力が加わった時、最も効率的にエンジニアとしての知識や経験が蓄積されると考えています しかし必ずしも良い環境に身を置ける人ばかりではありませんし、環境を変えるためには転職する…

■ はじめに https://dk521123.hatenablog.com/entry/2021/01/23/000000 の続き。 Lodash を使う機会がでてきて、新たに仕入れた知識がでてきたので メモしておく。 目次 【１】Lodash の個別インストール 【２】サンプル １）lodash.uniqby - 重複排除 【３】トラブル １）エラー「TypeError: lodash_xxxx_1.default is not a function」表示 【１】Lodash の個別インストール https://dk521123.hatenablog.com/entry/2021/01/2…

React + Next.js + Redux + TypeScript の勉強をしています． 過去に React（クラスコンポーネント） + JavaScript + Next.js + Redux で作成したアプリを React（関数コンポーネント）+ TypeScript + Next.js + Redux で改修しています． 状態の扱いが異なるのでそこでちょっと詰まっています． CSS-in-JS から CSS Modules に置き換えているのでそこでも，ちょっと引っかかっていますね 今日取り組んだこと React React（関数コンポーネント）+ TypeScript + Nex…

こんにちは、スタイル・エッジLABOのONです。 LABOに入社してGAS(Google Apps Script)に初めて触れる機会を得られました。 触ってみると、「ブラウザ上のスクリプトエディターで書くのをどうにかしたい...」 「ただ、ローカルで書いてブラウザにペーストは違う...」という悩みがでてきました。 GAS自体有名だし、なんか解決策あるでしょ!と調べてみたら ご本家Googleさんが出されているではありませんか。 今回はそんな便利なclaspというライブラリのお話です。

useReducerを使ったjsxファイルをtsxファイルに変換したのでメモ的に残しておきます。 create-react-app+TypeScript内のコードにjsxファイルを追加したんですが、せっかくなのでTypeScriptに書き換えてみました。 追加したjsxは以下のブログの「sample2: stateが複数」のコードを参考にさせてもらいました。 React hooksを基礎から理解する (useReducer編) - Qiita 変換の流れ ファイル拡張子をjsxからtsxに変更 型推論用にinterfaceを追加 ActionTypeの定数を列挙型のenumで定義 関数や引数に…