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

Frontend カテゴリの記事

131記事中の 101 ～ 125 を表示

Electronの使い方 Web開発の技術でデスクトップアプリを作ろう

Electronは、GitHubが開発したオープンソースのソフトウェアフレームワークです。ChromiumとNode.jsをコアとして採用する事で、Web開発と同じようにHTML,CSS,JavaScriptを用いて開発したものを..

Parcel 2.0 beta.1を試す

以前、TypeScriptのバンドラーとしてParcelの紹介をしました。* [今あえてTypeScriptのビルド＆バンドルツールを探してみる]その後、6月ぐらいに2.0のbeta.1がリリースされていましたので試してみました。ウェブサイトも公開されています。https://v2.parceljs.org/

2020年秋にVue.jsのアプリケーションを作るなら、押さえておきたい5つのポイント

ここ最近はVue.jsでのフロントエンド開発を行っています。ほぼ何もない状態からのスタート段階から始めたのですが、その際調査したことが学びになったので共有します。

CheetahGrid+Vue.jsをエンプラで使ってみた

こんにちは！今回は[CheetahGrid][cheetahgrid-hp]＋[Vue.js][vue-hp]でエンプラ系システムを構築した際の、採用した理由と実装のポイントのご紹介をしようと思います。[CheetahGrid][cheetahgrid-hp]について存じ上げないよーとか、触ったことがないよーという方は、[入門編][beginner-link]も御覧くださいね。初めての投稿ですが、最後までお付き合いいただければ嬉しいです。

親子でプログラミング学習　Alexaスキルを作ろう

こんにちは。TIG DXチームの村瀬です。今年から小学校でプログラミング教育が必修化になったとのことですが、プログラミングと聞くとまだまだ「難しい」、「私には無理」と言った苦手意識を持つ子供や親も多いのではないでしょうか？そこで今回は幼児～小学校低学年の子供とその親を対象として一家に一台はあるであろうスマートスピーカーのAlexaを使ったプログラミングをすることで、プログラミングが楽しいと思ってもらえるようにブログを書かせてもらいました。※あくまで楽しいと思ってもらえるところまでがゴールなので分岐や繰り返しの話はしません。

ANTLRを業務で活用した話

皆さんは[ANTLR]をご存知でしょうか？ANTLRとはparser(構文解析器)を生成するためのツール(パーサジェネレータ)で、以下のような特徴があります。

Vue.jsで最速に始めるCheetah Grid

2019年入社、TIG所属の吉野貴大です。今回、記事を投稿することになったきっかけは、フューチャー発のOSSであるCheetah Gridを使用した業務システム開発に携わったことです。また、現在、Cheetah Gridの[公式ドキュメント]は英語のみで公開されており、日本語で解説された記事などがあまり存在しないことも挙げられます。そこで、Cheetah Gridは機能も豊富で、業務システム開発で使いやすいため本記事で紹介します。※本記事は入門者対象です。

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の場合は容量と通信（と、キャパシティユニット）にしかお金がかからないモデルになっており、サーバーレスです。今回はかんたん化のためにストレージは扱いません。