NRIさん主催の勉強会 Netadashi Meetup で LT をしてきました。 今回は「フロントエンド関連技術」がテーマだったので、「OCaml/Reasonで始めるフロントエンド開発」をお題にしました。 スライドはこちら BuckleScript が ReScript にリブランドされて以来、勢いのなくなってしまった感のある Reason でしたが、Melange という新しい OCaml to JS コンパイラが登場したことで Reason が再始動している感があります。 静的な型システムと型推論、Variant、Option / Result 型、Pipe 演算子、パターンマッチン...
結論: T extends Array を用いる あけましておめでとうございます（半年遅れ） 最近業務で Headless CMS を触ったのですが、技術調査の際に候補に上がった Strapi がずっと気になって最近ので最近遊んでいるのですが、その際に API レスポンスの型を TypeScript で表現するときに利用した手法が面白かったので共有します REST API Strapi の公式ドキュメントを例にとると、扱う entry（ドメイン・データ）は下記の interface で表現できます interface Restaurant { title: string descr...
Tagbangers では新しい取り組みとして Web アプリケーションの構築の際に Headless CMS を用いたサイトデータ構築を行っています デザインとデータを分けることで責務を分散させる他に開発者以外にもお客様が文言を直したり新しい項目を増やすことが可能になるので運用上のメリットを得られることができます Headless CMS のサービスの中で弊社では Contentful を利用しており、現在も目下使い方や運用を考えながらアプリケーションの開発に携わっています 今回は Contentful で利用できる Rich Text とその拡張方法を試してみました Contenful の...
最近のプロジェクトではフロントエンドは TypeScript を用いたプロジェクトがデファクトスタンダードとなっています いくつか定番のライブラリも入れていますが、その中で今回はユーティリティライブラリとして Ramda.js をご紹介します Ramda.js https://ramdajs.com ユーティリティライブラリの一つで類似するものとして、弊社では以前 Lodash.js を使用していました https://lodash.com Ramda.js の特徴としては、全ての関数が純粋関数型でカリー化が行われているという点です 純粋関数型 全ての関数は副作用を持たず、引数として渡した値自...
最近のプロジェクトではフロントエンド開発のフレームワークとして Next.js を採用しています フロントエンドの成果物は静的ビルドを行いサーバに配置 or バックエンドの成果物に含めることが基本ですが、Kubernetes 上に展開する場合はフロントエンド用に個別に Pod を用意してアプリケーションを立ち上げています Next.js プロジェクトの Docker Image の作成 Next.js は開発環境以外にも本番稼働向けの Node.js サーバをスクリプトを用意しています # プロジェクトの依存パッケージのインストール yarn install # プロジェクトのビルド ...
styled-components でスタイリングしたコンポーネントがあります const StyledButton = styled.button` border-radius: 6px; padding: 16px; background-color: coral; color: white; font-size: 1.5rem; font-weight: bold; ` export default StyledButton あらかわいい このコンポーネントを styled の引数に入れることでスタイルの上書きができます import Styl...
こんばんわ、FE 側の JK です 業務で使用するちょっとしたツールを Deno で作ってみたかったので調べてみました Deno とは Deno - A secure runtime for JavaScript and TypeScript Node.js の作者によって作られた新しいランタイム環境で 2020 年にリリースされたばかりです TypeScript がゼロコンフィグで使用できるのが嬉しい点です node の文字を入れ替えると deno になる話は有名だそうです node -e "console.log('node'.split('').sort().join(''))" 準備 ...
こんにちは、久しぶり、シルベスターです。 最近デザインのタスクが多く、Figma しか触っていない日々が結構多かったんですね笑 デザイン、またはワイヤーフレームを作ってる時って画面が増えていくと修正するのも面倒くさくなるのが自分だけじゃないと思います、 だけど Figma は便利な機能がいっぱいあってすごく助かります笑 そして今日紹介したいのは auto layout です！ 目次 Auto Layout とは なぜ Auto Layout を使うのか Auto Layout はどうやって作るの？ Auto Layout とは アイテムの間のスペースを保ってくれるグループ的な？笑 アイテムの位...
先月から Tagbangers にジョインした生粋のハマっ子こと JK です（元インターン生） 私の好きなプログラミング言語の1つは Kotlin です Kotlin は JetBrains 社が開発した言語で主に Android アプリ開発で使用できる言語として有名です JK ≒ JetBrains Kotlin 今回はそんな Kotlin を用いて簡単な Web アプリを1から作成していこうと思います！ GitHub 今回作成するプロジェクトの完成形は下記のリポジトリにプッシュしています koyama-tagbangers/kotlin-react-spring-sample What's...
こんにちは、フロントエンドチームのシルベスターです。 React で custom marker を作りたいなーと思っていろいろ調べた結果、 uber の react-map-gl と styled-components を使うと簡単に作れるねってことがわかりました なぜかと言うと、react component として import できて、必要な props を渡すだけでできるから？笑 早速やってみましょう Getting Started React-map-gl npm i react-map-gl Styled-components npm i styled-components マッ...
