Future Tech Blog
フューチャー技術ブログ
Home
Tags
フロントエンド
フロントエンド
タグの記事
52
投稿
21
著者数
21583
総シェア数
14867
Twitter
1
Facebook
4021
はてブ
2694
Pocket
JavaScriptのコレクション操作入門
この記事ではこのフューチャー技術ブログを機能拡張する過程で学んだコレクション操作で利用頻度が高い順にまとめます。ブログ運営(?)の保守運用な雰囲気が少しでも伝わればなと思います。
2021.06.23
JavaScript
TechBlog
フロントエンド
5
シェア
3
6
Svelteに入門した
今年のゴールデンウィーク(STAY HOME週間)に最近話題のSvelteに入門したので紹介を書きます。Svelteは主にブラウザ上で動作するユーザーインタフェースを作るフレームワークで、ReactやVue.jsの対抗馬的な存在です。
2021.06.22
入門
フロントエンド
Svelte
30
シェア
70
56
どうしてHTML5が廃止されたのか
HTML5が2021年の1月に廃止されました。Webエンジニアとしてバリバリ活躍されてる方やエグゼクティブテックリードのような肩書きを持つ方にとっては「何をいまさら」という話題かと思います。しかしながら、今年も新人さん入ってきてくださったので、プログラミングを学習中にHTML5という文字列に悩まされないように...
2021.06.21
Web
フロントエンド
HTML
13442
シェア
1894
922
ES2021/ES2022を知ろう
少し前にES2021にて変更される新機能が発表されました。JavaScriptを扱う上では知っとくべき!と意気込んだもののECMAScriptが何者なのかすら曖昧な理解だったので、この機会に学んだことをまとめてみようと思います。* ECMAScriptがJavaScriptにとってどのような役割を持つのかを知る
2021.06.17
JavaScript
フロントエンド
72
シェア
8
21
「リアクティブコントローラ」導入がもたらすかもしれないウェブフロントエンド設計の変化
フロントエンド連載2日目のエントリーです。あまり話題になっていないような気がしますが、Web Componentsを実装するためのフレームワークのLit-Element v3がバージョンアップして、ついでにリブランディングしてLit v2.0となりました。ロゴも変わり、ウェブサイトも新しくなりました。
2021.06.15
WebComponents
フロントエンド
設計
リアクティブプログラミング
38
シェア
60
48
Jest + TypeScript + Vue 3環境で Vue Testing Library(@testing-library/vue) を動かす
フロントエンド記事連載の1記事目です。Vue Testing LibraryはVue.js公式のライブラリであるvue-test-utilをベースとする、DOM Testing LibraryのVue.js用拡張です。Vue Testing Libraryを用いると、Vue.js公式ライブラリであるvue-test-utilと比較して内部構造を意識せずにテストを作成できます。
2021.06.14
フロントエンド
テスト
Vue.js
14
シェア
7
3
フロントエンド連載2021
2021の06.14~6.24にかけてフロントエンド技術をテーマにしたブログ連載を始めます。ES2021/TS/Node/Vue/Reactなどなど、ざっくりとフロントエンド界隈で話されるような技術をテーマにします。
2021.06.14
インデックス
フロントエンド
12
シェア
2
6
Go 1.16のembedとgo-swaggerを組み合わせてフルスタック自動生成フレームワークを作る
Go 1.16のembedとchiとSingle Page Application、Go 1.16のgo:embedとNext.jsの相性が悪い問題と戦うに近い感じの研究記事です。
2021.04.26
Go言語
フロントエンド
Vue.js
Go1.16
go:embed
ツイート
シェア
35
22
Service Worker開発で起きた不具合を振り返る
Service Worker開発で起きた不具合と対応方法を記載します。Service Workerは、ブラウザがWebページとは別にバックグラウンドで実行するJavaScriptになります。
2021.02.16
JavaScript
フロントエンド
トラブルシュート
Vue.js
1
シェア
4
5
Parcel 2.0 beta.1を試す
以前、TypeScriptのバンドラーとしてParcelの紹介をしました。* [今あえてTypeScriptのビルド&バンドルツールを探してみる]その後、6月ぐらいに2.0のbeta.1がリリースされていましたので試してみました。ウェブサイトも公開されています。https://v2.parceljs.org/
2020.11.11
TypeScript
フロントエンド
Parcel
ツイート
シェア
1
4
2020年秋にVue.jsのアプリケーションを作るなら、押さえておきたい5つのポイント
TIGの伊藤真彦です。ここ最近はVue.jsでのフロントエンド開発を行っています。ほぼ何もない状態からのスタート段階から始めたのですが、その際調査したことが学びになったので共有します。
2020.10.13
JavaScript
フロントエンド
Vue.js
ESLint
ツイート
シェア
251
141
デスクトップWebアプリのモバイル化における考え方・Tips
こんにちは、2019年入社、TIGメディアユニット所属の中村立基です。今回はメディア業界向けクラウドサービスGlyphFeedsCMSのモバイル化を例に、Webアプリケーションをモバイル化する際の考え方や手法について書きます。Webアプリケーションをモバイル化する際の参考になれば幸いです。昨今「モバイルファースト」という言葉が広まる中、スマートフォンを始めとするモバイル端末利用の風潮は強まっています。それに伴いWebアプリケーションもモバイル端末での利用シーンが拡大しています。
2020.09.17
UI/UX
フロントエンド
設計
Tips
モバイルアプリ
GlyphFeeds
ツイート
シェア
はてな
1
Firebaseでお手軽!データ管理画面をつくる
Firebaseを使って画面を開発してみようと思います。下記を最短経路で作ってみます。システムアドミンの人が使うようなマスタデータ管理画面を想定して、限られたユーザーにアクセスを制限すべく、認証機能も入れました。
2020.08.19
TypeScript
入門
フロントエンド
React
Firebase
2
シェア
10
24
webpack入門
JavaScriptでの開発は実行結果が視覚的&ツール周りが充実しているのでプログラミング覚えたての人も楽しみながら進められると思います。一方、開発環境周りは充実しすぎているがゆえ難しいと思ったので記事にしました。
2020.06.19
JavaScript
初心者向け
フロントエンド
webpack
Node.js
ツイート
シェア
1
7
denoに触れてみよう
6月よりTIGに入社した伊藤真彦です。入社時点ですでに春の入門祭りは始まっていたのですが、この度飛び入り参加で技術ブログを書かせていただける運びとなりました。さて、初投稿として選んだテーマはdenoです。deno1.0のリリースからしばらくたちましたが、転職の合間に触って遊ぶことができましたので、体験記として紹介させていただきます。
2020.06.12
JavaScript
フロントエンド
Node.js
deno
ツイート
シェア
2
5
日本製HeadlessCMSのmicroCMSを触ってみた
TIG DXチーム アルバイターの三村です.今回はHeadlessCMSを利用したタスクをやることになりました.私自身HeadlessCMSどころかCMSを聞いたことすら無かったので,初めてCMS使ってみるにあたって感じたことを共有出来たらと思い本記事を作成させていただいております.
2020.05.12
フロントエンド
Vue.js
CMS
HeadlessCMS
4
シェア
5
11
PJでUIデザインにAtomic Designを導入したらどうだったのか
今回はPJの現場でUXとUIのデザインを通して、Atomic Designの導入はどのような結果を生んだのか、Atomic Design導入に際しての課題や取り組み方のコツなんかをお伝えできればと思います。z
2020.05.11
UI/UX
フロントエンド
Figma
ツイート
シェア
36
27
TypeScriptでReactをやるときは、小さいアプリでもReduxを最初から使ってもいいかもねというお話
プロダクションコードでたくさんRedux周りにもreducerなどを実装しなくてはいけなくなったときの次のステップとして、Redux Toolkitの紹介をします。
2020.05.01
TypeScript
フロントエンド
React
Redux
3
シェア
340
229
Reduxを分かりやすく解説してみた
はじめまして、2019年4月入社_FRX_DigitalLibraryチームの丸野です。研修修了後PJにアサインされて約4ヶ月ほどReact.jsを使って開発を行ってきましたが、Reduxの理解にとても苦しみました。そこで今回はReduxの概要を噛み砕いて説明していきます。同じ悩みを持つ人の理解の助けになればと思います。
2020.04.29
初心者向け
フロントエンド
React
Redux
44
シェア
18
63
Vue.jsのslotの機能を初心者にわかるように解説してみた
東郷さんによる「Vue.js最初の難関、「props down, event up」を初心者にわかるように解説してみた」はご覧になられましたでしょうか?おそらくVue.js最初の難関は無事乗り越えられたと思います!今回は「Vue.js初心者にわかるように解説してみた」第二弾として、props down,event up と同様に親子関係が肝となる、「slot」について、初心者に向けて説明していきたいと思います。
2020.04.28
初心者向け
フロントエンド
Vue.js
12
シェア
11
33
Vue.js最初の難関、「props down, event up」を初心者にわかるように解説してみた
今回はVue.jsの最初の難関(だと思っている)「props down, event up」について、初心者が読んでもわかるような資料を用意してみようと思います。 プロジェクトで独自のコンポーネントを作ったり、会社として用意しているコンポーネントの利用、改良ができるようになってもらいたいという思いから、その導入を解説しようということです。
2020.04.01
初心者向け
フロントエンド
Vue.js
2
シェア
13
32
今あえてTypeScriptのビルド&バンドルツールを探してみる
ちょっとしたフロントエンドの開発で、TypeScriptに最初から対応していて、簡単に使えるものは何かないかな、と調べてみたメモです。React/Vue/Angularの場合はそれぞれの初期化コマンドで何から何まで用意してくれます。Next.js、Nuxt.js、Gatsbyなども、これらのビルドのステップを簡略化するコマンドを提供しています。基本的にこれらのウェブフロントエンドを開発するときには、小規模・中規模ぐらいならあんまり気にしなくておまかせでもいいと思います。今回は、それらのフレームワーク固有のビルドツールとは別に環境を作りたい人で、TypeScriptの環境が欲しい、ウェブの開発がしたい、という前提でいろいろ探してみました。
2020.03.19
JavaScript
TypeScript
フロントエンド
webpack
Node.js
Parcel
ツイート
シェア
61
46
【Figma】を使ってチームでUI/UX設計するといいこと
Figmaとは何か、何ができるのか、チームでシステムデザイン設計するときにFigmaを使うと何がいいのかを初心者向けにざっくり紹介していきます。Figmaはユーザーインターフェース(UI)のデザインをブラウザ上で簡単に作れるデザインツールです。デザインツールといえばデスクトップアプリのAdobe XDやSketchが有名どころですが、Figmaも負けず劣らずの操作性と利便性を兼ね備えています
2020.03.18
UI/UX
フロントエンド
Figma
ツイート
シェア
11
34
SPA + Tableau Online + Auth0 SSO
プロジェクトでTableauダッシュボードを組み込んだSPAを開発しています。その際にPoCを実施したので、こちらで簡単にお試しできる手順を共有させていただきます。
2020.03.17
JavaScript
フロントエンド
Auth0
Tableau
SSO
ツイート
シェア
2
Pocket
その値、Vue.jsは監視していますか?~Vue.jsで値が更新されないときに気をつけるところ~
私が所属するコアテクノロジーチームでは、Futureの各プロジェクトでの生産性・品質向上および設計開発プロセスの標準化を目標に、内製ライブラリ・フレームワーク・インフラ等の提供を行っております。そんな内製フレームワークの一部として採用されているのがVue.jsです。フレームワーク自体の設計開発を行う一方、顧客・プロジェクト向け画面の開発を行うために、自分たちもそのフレームワークを用いた開発を行う機会がありました。今回はそんなとある画面開発をするにあたって、私がVue.jsをキャッチアップしていく過程の中で遭遇したトラブルに関する解決方法を共有します。
2020.03.16
初心者向け
フロントエンド
Vue.js
ツイート
シェア
1
5
Prev
1
2
3
Next