Future Tech Blog
フューチャー技術ブログ

Frontend カテゴリの記事

124記事中の 101 ～ 124 を表示

Firebaseでお手軽！データ管理画面をつくる

Firebaseを使って画面を開発してみようと思います。下記を最短経路で作ってみます。システムアドミンの人が使うようなマスタデータ管理画面を想定して、限られたユーザーにアクセスを制限すべく、認証機能も入れました。

Slack×GASの日報テンプレBOTを実務に導入してみた

こんにちは。TIGメディアユニットの仁木です。Slackに投稿するための日報をBOT化・自動化したので自由研究企画に混ぜてもらい記事にすることにしました。毎日共通で書かなければいけないタイトルなどの固定項目やスケジュールの記載を自動化することで、作成時間を短縮し、重要な部分に時間を割けるようになりました

Redux-Toolkitに学ぶ、TypeScriptの型推論とこれからのAPIデザイン

TypeScriptは、JavaScriptのさまざまなフリーダムな書き方を受け入れ、漸進的な型付けを行えるようにするという~~狂った~~高難易度な目的のために作成されているのですが、そろそろ、TypeScriptファーストで、利用者にとって使いやすいAPIみたいな方向性で使われることも増えるのでは、という思いを強く持ちました。「

Chromeの拡張機能作ってみた！

現在業務では直接開発をする機会はないのですが、業務の合間を縫って日々プログラミングを勉強中です。 そんな中、お世話になっている先輩から手始めに、Google Chromeの拡張機能の作成方法を教えて頂いたので、拡張機能の作成方法入門を書いていこうと思います。

webpack入門

JavaScriptでの開発は実行結果が視覚的&ツール周りが充実しているのでプログラミング覚えたての人も楽しみながら進められると思います。一方、開発環境周りは充実しすぎているがゆえ難しいと思ったので記事にしました。

denoに触れてみよう

6月よりTIGに入社した伊藤真彦です。入社時点ですでに春の入門祭りは始まっていたのですが、この度飛び入り参加で技術ブログを書かせていただける運びとなりました。さて、初投稿として選んだテーマはdenoです。deno1.0のリリースからしばらくたちましたが、転職の合間に触って遊ぶことができましたので、体験記として紹介させていただきます。

日本製HeadlessCMSのmicroCMSを触ってみた

TIG DXチーム　アルバイターの三村です．今回はHeadlessCMSを利用したタスクをやることになりました．私自身HeadlessCMSどころかCMSを聞いたことすら無かったので，初めてCMS使ってみるにあたって感じたことを共有出来たらと思い本記事を作成させていただいております．

PJでUIデザインにAtomic Designを導入したらどうだったのか

今回はPJの現場でUXとUIのデザインを通して、Atomic Designの導入はどのような結果を生んだのか、Atomic Design導入に際しての課題や取り組み方のコツなんかをお伝えできればと思います。z

TypeScriptでReactをやるときは、小さいアプリでもReduxを最初から使ってもいいかもねというお話

プロダクションコードでたくさんRedux周りにもreducerなどを実装しなくてはいけなくなったときの次のステップとして、Redux Toolkitの紹介をします。

Reduxを分かりやすく解説してみた

はじめまして、2019年4月入社_FRX_DigitalLibraryチームの丸野です。研修修了後PJにアサインされて約4ヶ月ほどReact.jsを使って開発を行ってきましたが、Reduxの理解にとても苦しみました。そこで今回はReduxの概要を噛み砕いて説明していきます。同じ悩みを持つ人の理解の助けになればと思います。

Vue.jsのslotの機能を初心者にわかるように解説してみた

東郷さんによる「Vue.js最初の難関、「props down, event up」を初心者にわかるように解説してみた」はご覧になられましたでしょうか？おそらくVue.js最初の難関は無事乗り越えられたと思います！今回は「Vue.js初心者にわかるように解説してみた」第二弾として、props down,event up と同様に親子関係が肝となる、「slot」について、初心者に向けて説明していきたいと思います。

スキーマファースト開発のためのOpenAPI（Swagger）設計規約

みなさん、Swagger使ってますか？本記事では実際にSwaggerのスキーマ定義を設計していく上で取り決めた規約について書いてみたいと思います。

Vue.js最初の難関、「props down, event up」を初心者にわかるように解説してみた

今回はVue.jsの最初の難関（だと思っている）「props down, event up」について、初心者が読んでもわかるような資料を用意してみようと思います。 プロジェクトで独自のコンポーネントを作ったり、会社として用意しているコンポーネントの利用、改良ができるようになってもらいたいという思いから、その導入を解説しようということです。

今あえてTypeScriptのビルド＆バンドルツールを探してみる

ちょっとしたフロントエンドの開発で、TypeScriptに最初から対応していて、簡単に使えるものは何かないかな、と調べてみたメモです。React/Vue/Angularの場合はそれぞれの初期化コマンドで何から何まで用意してくれます。Next.js、Nuxt.js、Gatsbyなども、これらのビルドのステップを簡略化するコマンドを提供しています。基本的にこれらのウェブフロントエンドを開発するときには、小規模・中規模ぐらいならあんまり気にしなくておまかせでもいいと思います。今回は、それらのフレームワーク固有のビルドツールとは別に環境を作りたい人で、TypeScriptの環境が欲しい、ウェブの開発がしたい、という前提でいろいろ探してみました。

【Figma】を使ってチームでUI/UX設計するといいこと

Figmaとは何か、何ができるのか、チームでシステムデザイン設計するときにFigmaを使うと何がいいのかを初心者向けにざっくり紹介していきます。Figmaはユーザーインターフェース（UI）のデザインをブラウザ上で簡単に作れるデザインツールです。デザインツールといえばデスクトップアプリのAdobe XDやSketchが有名どころですが、Figmaも負けず劣らずの操作性と利便性を兼ね備えています

SPA + Tableau Online + Auth0 SSO

プロジェクトでTableauダッシュボードを組み込んだSPAを開発しています。その際にPoCを実施したので、こちらで簡単にお試しできる手順を共有させていただきます。

その値、Vue.jsは監視していますか？～Vue.jsで値が更新されないときに気をつけるところ～

私がVue.jsをキャッチアップしていく過程の中で遭遇したトラブルに関する解決方法を共有します。

GCP連載#3 Goでサーバーレスな管理画面アプリを作る

Go + Vue + Cloud Runでかんたんな管理画面を作ろうと思います。ストレージ側にもサーバーレスがあります。MySQLやPostgreSQLのクラウドサービス（Cloud SQLとかRDS）は、サーバーマシンを可動させて、その上にDBMSが稼働しますので、起動している時間だけお金がかかってしまします。一方、FirestoreやDynamoDBの場合は容量と通信（と、キャパシティユニット）にしかお金がかからないモデルになっており、サーバーレスです。今回はかんたん化のためにストレージは扱いません。

Auth0のRulesを使って認証認可を自在にカスタマイズする

Auth0をカスタマイズして使うに当たって必要になるRulesについて、概要と開発に関するTipsを説明します。Auth0のRulesの使い方については、Auth0公式のRules Best Practicesに様々な役立ち情報が載っているのですが、分量が多くてしんどい(全て英語な上に印刷するとA4で18ページ分...)です。 この記事ではRules Best Practicesの中でも特に役に立つと思われる情報と、その他Rules開発で得られた知見について書いていきます。

Auth0 EmailまたはSMSを使ったパスワードレス認証を設定する

Auth0が提供するVue.jsのサンプル実装をベースに説明します。手元で動作確認をする場合は、下記を事前にcloneしてください。このリポジトリにある01-Loginのディレクトリにあるアプリケーションを使います。

Auth0 導入編

様々なシステムを構築する中で必ず発生する要素「ログイン」。そのログインを支える技術要素「認証・認可」。しかし、認証認可の壁は無駄に高く、調べ始めるとまずは数々の専門用語に阻まれ 「BASIC認証・Oatuh・OpenID・Jwt・Jwk・Jwe…」、 次に認証Flowに阻まれます。「Implicit Flow、Client Credentials Flow...etc」。これらを比較的容易に実装する、Auth0を紹介していきます。

フロントエンドでシステム開発を2年半続けてハマったことから得た教訓3つ

React、Next.js を触り始めて２年半ほど経ちました。これまでによくつまずいたポイントから、自分なりのノウハウを言語化してみます。

TypeScript教育用コンテンツ公開のお知らせ

2019年頭より少しずつ書いていたTypeScriptの教育コンテンツを[クリエイティブ・コモンズ4.0の表示 - 継承 （CC BY-SA 4.0）]で公開します。といっても完成版ではなく、アーリーアクセス版のような品質であることをご了承ください。

ES2015 Web componentsと国産Web componentsフレームワークUrushi

ES2015 Web componentsと国産Web componentsフレームワークUrushi