表側のこと。 ⇔バックエンド
第2回LT会レポ JSモジュールバンドラのこれからについて考える メモリーを認識したプログラム PHPのInterfaceの使いどころ TypeScript導入のススメ 第2回LT会レポ 今回のLT会の内容は 発表者: 4名 制限時間: 発表時間 5分 + 質問時間 10分 テーマ: 自由 で行いました。 また今回はCommentScreenというツールを使用し、 リアルタイムで参加者のコメント確認できるようにしました。 comment screen CommentScreenを使用するとこのように画面にコメントが流れるようになります それでは1つずつ発表を紹介していきます。 JSモジュールバ…
システム開発本部フロントエンドエンジニアの工藤です。 マイクロアドの WEB アプリケーションのフロントエンドは、大半を Vue.js を用いて開発しています。 そこで、フロントエンドエンジニアとして効率の良いVue.jsの開発を目指し、日々奮闘しています。 今回は、Vue.jsでのグローバル定数管理についてお話していこうと思います。 はじめに マイクロアドには様々なプロダクトがありますが、私の担当しているUNIVERSEというプロダクトについては、 フロントエンドフレームワークにVue.jsを利用し、SFCを採用しています。 Vue.jsやSFCについては、以前の記事を参考にするとより詳しく…
この記事の目的 Angularでアプリによくある開閉式のメニュー(この名称が正しいのか微妙ですが...)を作成する方法を紹介します。 Angular-materialを利用することで、簡単に実装することが可能です。本記事ではAngular11をベースに実装を行っております。 実装スタート 実装といってもモジュールをインポート、テンプレートを追加していくのみです。 まず、対象のモジュールに下記モジュールをimportしておきます。 また今回は、ヘッダーに開閉メニューボタンを置く為、ヘッダーデザイン用のモジュールも一緒にimportしておきます。 import { MatToolbarModule…
こんにちは、フロントエンドエンジニアの松尾です。 2020年10月27日にNext.js10がリリースされ、パフォーマンスを改善するための20個を超える新しい機能が追加されました。 nextjs.org 私たちフロントエンドチームでも、プロジェクトにNext.js10を導入しており様々な恩恵を得ています。 本記事では、その中でも最も便利だと感じたnext/imageについてご紹介したいと思います。 next/imageとは next/imageとは、画像の表示を自動で最適化してくれるコンポーネントです。 主に以下の最適化を行います。 WebPフォーマット*1変換（対応ブラウザのみ） 画像遅延読…
皆さんこんにちは、フロントエンドエンジニアの高野です。 皆さんはJSのバンドラーは何を使われていますか？ 私たちフロントエンドチームでは主にwebpack、一部browserifyを使用しています。 最近はReactやVueをブイブイ使いビジネスロジックをもつことも多くなっており、そのためJSのバンドルサイズは嵩む一方です。 そうなってくると気になるのはビルド時間です。 私の担当しているプロジェクトでもwebpackのビルドが34秒かかっており、今後さらにプロジェクトが大きくなれば1分越えも夢ではないです... そこで、Snowpack v3をにチャレンジしてみました。 Snowpackとは …
こんにちは。フロントエンド の仲本です。 今回はHTML要素に関する型推論について、一般的な型推論からデファルトでは型推論できない場合の対応方法までを紹介いたします。 要素に対する型推論 まずはHTML要素の一般的な型推論を紹介いたします。 <!DOCTYPE html> <html lang='ja'> <head> <meta charset='utf-8'> <title>sample htmlelement typescript</title> </head> <body> <div class='example'>divタグです</div> <a id='exampleId' hre…
サマリ Vue.js入門のため、APIへのPOSTを行う簡単な画面を作った ズブの素人スタートの速習だが、色々と学ぶところがあり面白かった
最近、マイクロフロントエンドという技術を知っていろいろ調べていたら以下のような記事を見つけました。 martinfowler.com マイクロフロントエンドとは何か、非常に分かりやすくまとまっています。 なので日本語で要約・加筆して後で読み返しやすくしていこうと思います。 マイクロフロントエンドとは マイクロフロントエンドとは、 単体で実行可能な、サイトから切り出された特定のUI領域 であり、Webフロントエンドの新たなアーキテクチャです。 この特徴から以下のようなメリットがあります。 インクリメンタルアップグレード シンプルで分離されたコードベース 独立したデプロイ 自立したチーム インクリ…
はじめに みなさんこんにちは。フジサワです。 「フロントエンド」や「フロントエンドエンジニア」という単語を耳にするようになって久しいですが、自他共に認めるバックエンドエンジニアを出自に持つ私にとって フロントエンド界隈の移り変わりは激しく、追いかけるのもなかなか大変です。 そこで今回は、改めてフロントエンドとは、またフロントエンドエンジニアに必要なスキルとは、といったあたりを整理してみたいと思います。 フロントエンドエンジニアに興味を持ったものの、あまりよくわかっていないと言う方の参考になれば幸いです。
こんにちは！ Web アプリケーションエンジニアの id:KGA です。 2020年12月23日（水）に Hatena Engineer Seminar #15 を開催しました。今回も前回に引き続きオンライン配信による開催になりました。参加してくださったみなさま、ありがとうございます！ このエントリーでは当日配信された動画のアーカイブとともに、それぞれの発表の概要や公開資料をお届けします。 #15は2020年新卒入社メンバーによるトーク Webフロントエンドの秩序を維持する体制を作る はてなブログのフロントエンドに秩序はもたらされたのか はてなブログチームでの働き方 さいごに #15は2020…
初投稿になります。システム事業部の金城です。 私は普段Vue.jsでのフロントエンド開発を行っています。 今回は最近知ったJavascriptのフレームワーク「svelte」についてチュートリアルを実施してみたので、一部紹介致します。 Svelteとは Svelteはjavascriptを使用するフロントエンドフレームワークです。 Svelte独自の特徴として以下が挙げられます。 ・UIライブラリではなくコンパイラに分類されている。(Vue.jsはUIライブラリ) ・仮想DOMを使用していない。 svelteはコードをコンパイルし、ライブラリを使用していない純粋なJavascript,CSSに…
年の瀬ですが、今年はコロナの影響で帰省も旅行もせずと普段と異なる状況の方が多いのでは無いでしょうか。 私も例年と異なり、花粉症の症状が前倒しに出てきました。謎理論でコロナウィルスがスギ花粉を倒してくれないかと祈っています。 MSよ、お前もか 土壇場の救世主 リアル（元）GAFAエンジニア クォータって久々に聞いた ARMベースAuroraインスタンス AWS CloudShell Amazon Location 東京リージョンに来た Auth0 React Server Component Vercel使ったフルスタックアプリケーションの例 ISR活用事例 成功しているネットの一人ビジネス S…
この記事はテックタッチアドベントカレンダー24 日目の記事です。 テックタッチのフロントエンドエンジニアの taka です。 クリスマス・イブを満喫してしまったため投稿するのが遅れてしまいました（嘘） 今回は最もメジャーな React の UI ライブラリの一つであるMaterial-UIの次期バージョンである v5 を先取りしてみようと思います。 v5 は 来年 2021 年 4 月頃リリースされるようで、特にスタイリングに関して大きな変更があるようでした。 注）v5 はまだ α 版であるため、実際のリリース時には本記事の内容とは異なる可能性があることをご理解ください。 Material-U…
はじめに この記事は Vue Advent Calendar 2020 の 25 日目の記事です。 Vue.jsを使ったアプリケーション開発とは少し趣旨を変えて、Vue.jsをベースにしたWebフロントエンドのアーキテクチャとその実行環境について整理します。 スクエア free セミナー 第118回 Ｗｅｂサイト構築の新潮流 - YouTube で話した内容を整理してまとめたものです。 Webフロントエンドのアーキテクチャ Webフロントエンドのアーキテクチャとしては、Single Page Application、Server Side Rendering、Static Site Gener…
なにがしかの方法で要素のスタイルを取得したはいいものの、px のついた文字列だった場合の対処。 数値部分だけを取り出すには、 parseInt が使える。 const txt = '120px' parseInt(txt, 10) // 120 もちろん、 em でも rem でも % でも同じことができる。parseFloat でもOK。 参照: parseInt() - JavaScript | MDN
こんにちは、初めまして、フロントエンドエンジニアの八木です。 普段、モノタロウのECサイト開発を行っています。 エンジニアだとシステム構成図やシーケンス図など、何かと図を作る機会が仕事柄たくさんあります。その多くは要件定義や詳細設計などのフェーズで、人に何かを伝えるために使われます。 最近では、テック系のイベントやセッション登壇などでも使われる機会が多く見られるようになってきましたね。 エンジニアが図を用いる理由 図を用いる理由は文字だけでは直感的に伝わりづらいなど様々ですが、共通して言えることはビジュアライズすることによって皆が同じ認識を持つことにあります。 しかし、人によって描き方が異なっ…
皆さんこんにちは！WESEEK戦略企画室インターンの太田です。 先日、高田馬場オフィス勤務のエンジニア・企画室のインターン生の募集を開始しました！ 今回のブログでは、WESEEKエンジニアインターン生の大和田健太さんへインタビューを行った模様をお届けします。 大和田さんがインターンを始めた当初の話や仕事内容、先日開催されたITSの話など、弊社へ応募を検討されている皆さんの参考になるような情報をたっぷり引き出してきました！ 大和田健太さん 今回のブログ初稿から良い感じ！と太田さんに伝えたら、胸をトントンと叩くジェスチャーでした！ご期待ください！ WESEEKとの出会い ITSについて WESEE…
はてなブログ独自の集計による人気記事のランキング。2月21日（日）から2月27日（土）〔2021年2月第4週〕のトップ30です*1。 # タイトル／著者とブックマーク 1 オッパイは尻の代替品という解像度の低い説 - 本しゃぶり by id:honeshabri 2 文系パパエンジニアが放送大学等でコンピュータサイエンス・数学を学んで理系学士を取りに行く話 - とあるCS学徒のブログ by id:wbspr 3 日本で活動する中国公安関係者 - 黒色中国BLOG by id:blackchinainfo 4 従業員の給与が上がらなかったのは「株主への配当より大事ではなかった」だけ - 銀行員の…
プログラマーは、Javaからキャリアをスタートする人は少なくありません。そのままJavaプログラマーとして働き続ける選択肢もありますが、働ける場所を広げるために、Java以外のプログラミング言語を選ぶ人もいます。そこで、Javaプログラマーに人気の高いプログラミング言語にはどんなものがあるのでしょうか。 まず挙げられるのは、PHPとRubyです。プログラマーを目指す場合、一般的な企業でJavaプログラマーとして働くことからスタートする人が大半と言えます。それに対してベンチャー企業では、小規模開発に向いているRubyやPHPが中心に使われているため、そうしたWeb系開発に強い企業への転職に向けて…
どうも。株）WIREBASEの中村です。 本日もテクニカルな話になるのですが、無限にスクロールできるウェブサイトをVue.jsで作ってみたいと思います。今回はWikipediaのAPIを使った非常にシンプルな検索ページ（英語）を作成してみます。 早速、vur-clieを使って新しいプロジェクトを立てます。 このプロジェクトでは主に以下3つのコンポーネントが必要となります。 ・検索ページとリスト化のコンポーネント・検索結果のコンポーネント・ローダーコンポーネント 簡易的な設計が終わったところでHTMLを書き出します。 HTMLの部分では、検索エンジン、検索ボックス内のデフォルトメッセージ、仮想ス…
2021年2月4日（木）ファインディが主催するエンジニア向けイベント「【エンジニア職種徹底分析～EM入門編～】EMって実際なにしているの？」がオンライン上で開催されました。 昨今注目を浴びているにも関わらず、何をやっているのかイメージしづらいエンジニアマネージャー(以下、EM)という仕事。企業側では卓越したエンジニア組織を作るため、優秀なEMの需要が高くなっています。本イベントでは株式会社アンドパッドの土方さん、株式会社あしたのチームの堀之内さんをお呼びして、EMのキャリアについて語っていただきました。具体的な業務内容から、お二人の今後のキャリアまでをお届けします。 チームのパフォーマンスを最…
2月、1月よりなかったな…。多分転職活動とコミュニティ活動が本格化してやる事やっていたら終了、って感じか。正直思ったより転職活動の負荷が大きかった。日本語の履歴書や職務履歴書を作るのも骨が折れたし、今1次面接結果待ちの企業のWebテストの準備・勉強や面接の準備も大変だった。毎日四六時中向き合っていたと思う。 コミュニティ活動は加速し、内外含めてミーティングが増えたり、コンタクトをとったり、サービスの仕様を話し合って…など、半分スタートアップ的な動きをしている。 毎日充実している、という感じではなく、空白の時間が無かった感じ。言い換えれば常に追われていた。僕は追われているくらいがちょうど良いのか…
今すぐ登録したい方へ このブログから登録の多いエージェントは下記の３つです★ （リンクをクリックすると公式サイトに飛びます） ✅【ダントツの１位】フォスターフリーランス【案件保有数５０００件以上。業界２５年の超老舗】 ✅【僅差で２位】エミリーエンジニア【４人に１人が初めてのフリーランス】 ✅【惜しくも３位】Midworks(ミッドワークス) 【リモート案件が超豊富。正社員並みの保障アリ】 こんにちは、mah(@RailsRubyMah6h)です。 このブログでは、 僕がIT未経験から約1年でフリーランスエンジニアになるまでの過程、 ノウハウなどを書いていきます。 今回は、 【Vue.js Nu…
elm-typedというパッケージを作った。詳しくは以下のGithubのREADMEに書いている。 github.com パッケージ自体が根本的に実現したいことはPunie/elm-idとかjoneshf/elm-taggedあたりとほぼほぼ同じ。プリミティブ型をそのまま使わず型エイリアスでもなく、プリミティブ型をラップしたカスタム型を使うことで仕様をもっと型に表現したいというモチベーションから来ている。 実際に使う場合には、以下のようにelm-typedが提供している Typed 型に対して、タグとなる型（MemberIdTypeとかAgeTypeあたり）とその型が内部的に持つプリミティブ型…
オーディオプログラミングは速度との戦い。特にリアルタイム処理となると常にパフォーマンスを気にしていないとすぐに死んでしまう。 なぜなら、再生に間に合うようにデータを用意しないと音が途切れてしまうから。例えば、サンプリング周波数が 48000Hz だとすると１サンプルあたり 0.02ms で処理しないと再生速度に負ける。ステレオにして沢山エフェクトをくっつけて同時発音数を増やしてとやっているとすぐに超えてしまう。 このパフォーマンスチューニングが個人的には結構面白い。 お仕事は Web の主にフロントエンドなので、パフォーマンスを気にせず富豪的に処理しても大体なんとかなってしまう。例えば Rea…
2 月が終わります． 2021 年の目標を元に今月の振り返りをしていきたいと思います． 生活習慣 早寝早起き生活を継続中．土日もいい感じに起きれたらいのですが．．． 筋トレも継続中です．背筋のトレーニングも追加しました． プログラミング関連 フロントエンド React，Next.js，TypeScript でアプリ制作中です． Redux 不要論がありますが，今後はどうなるのでしょうか． バックエンド 会社で使うため，今月の前半は Java の勉強をしていましたが，データベースや API について全く触れていないのであまり意味がないですね．．． 仕事で GraphQL を使う機会が多いので，そ…
React + Next.js + Redux + TypeScript の勉強をしています． Redux を導入している矢先に，「Redux 不要論」について知りました まだ決着はついていないみたいですが，実状はどうなんでしょうか? フロントエンドは移り変わりが激しすぎます． 今日取り組んだこと React React（関数コンポーネント）+ TypeScript + Next.js + Redux で過去のアプリを改修 Redux
Reactの続きです。以前作成したReact + CSS in JS + TypeScript環境にReact Routerを使ってルーティング設定をして複数ページを遷移できるSPAにします。helmetを使ってコンテンツだけでなくheadタグも動的に変更。さらに下層ページに直接アクセスすると404になる対策も行いました。それではいきましょう！
まずは公式ドキュメントを読む サンプルコードを読んで実行してみる WIP: わからないポイント デプロイどうするの？ 現状、ある程度 React, TypeScript の経験がありますが Next.js は未経験な状態ではありますが、 モダンなフロントエンドを一つマスターして、シンプルなブログシステムを構築できるようにしておきたくなり、 Next.js + TypeScript でブログシステムを構築するまでにしたことをまとめます。 まぁはじめの一歩としては、公式ドキュメント一択ってだけです。 フロントエンドに関わる機会といえば、自分の場合自前でブログシステム構築するくらいですが、 Gats…
今すぐ登録したい方へ このブログから登録の多いエージェントは下記の３つです★ （リンクをクリックすると公式サイトに飛びます） ✅【ダントツの１位】フォスターフリーランス【案件保有数５０００件以上。業界２５年の超老舗】 ✅【僅差で２位】エミリーエンジニア【４人に１人が初めてのフリーランス】 ✅【惜しくも３位】Midworks(ミッドワークス) 【リモート案件が超豊富。正社員並みの保障アリ】 こんにちは、mah(@RailsRubyMah6h)です。 このブログでは、 僕がIT未経験から約1年でフリーランスエンジニアになるまでの過程、 ノウハウなどを書いていきます。 今回は、 【Vue.js】v-…
note.com
qiita.com
qiita.com
qiita.com
qiita.com
dwango.github.io
morizyun.github.io
qiita.com
qiita.com
