フロントエンド

巷には様々な日付入力フォームのライブラリが溢れていますが その中でも先日導入したflatpickrが個人的に気持ちよく動いてくれたので紹介したいと思います！

こんにちは。テクノロジー本部 第2開発部のYuto SAGAWAです。 現在 Salaries.jp というサービスの開発に携わっています。 今回はフロントエンドの実装から、componentsとAtomic Designについて紹介します 概要 近年のWebフロントエンド開発においてコンポーネントは当たり前な存在になってきました。 さらに、コンポーネント実装においてAtomic Designというデザイン手法も主流になりつつあるように思えます。 そこで本記事では、Salaries.jpでのcomponents実装とAtomic Designの実践方法について紹介していきます。 また、Stor…

こんにちは。 SaaS Product チームの板倉です。 SaaS Productチームでは開発運用しているサービスのマイクロサービス/マイクロフロントエンド化を進めています。 マイクロフロントエンドを実現する技術として採用しているフレームワークはAngular(TS, Dart)、Vue.js、Reactとなっています。 どれも素晴らしいフレームワークだと思いますが、私たちが進めているマイクロフロントエンドのやり方だと他にも良いフレームワークがあるんじゃないかと感じることがありました。 以前から気になっていたSvelteをブログにまとめながら自分でもキャッチアップしてみようと思ったのが今回…

iframeは実務でも趣味でも使う機会が全く無く、これに関しては無知だったのですが 先日Unity(WebGL)とiframeを組み合わせて自作ゲームを制作する機会があり、結果見事に頓挫したのでiframeについて調べた記録を残しておきたいと思います。 慣れた方にとってはアタリマエの話かもしれませんが…。

はじめに 初めまして！株式会社ハイヤールーの谷合（@posterkeisuke）です。 『HireRoo（ハイヤールー）』とは優秀なエンジニア採用に必須のコーディング試験サービスです。 そんなHireRooテックブログへの初投稿になります。よろしくお願いいたします！ 記念すべき初投稿では、今自分が主で担当開発しているフロントエンドの基盤を詳しくご紹介できればと思います。 バックエンドを含むHireRooの含む大まかな基盤に関しては、前回葛岡が投稿したブログをご参照ください。 tech.hireroo.io はじめに フロントエンドの構成詳細 全体構成 利用している技術スタック 技術選定の背景に…

こんにちは、フロントエンドエンジニアの松尾です。 Reactにはフック（Hooks）と呼ばれる機能があり、useState・useEffect・useCallbackといった様々な関数が用意されています。 その中の一つにuseReducerがありますが、useContextと併用して使うものとして認識されたり、useStateの影に隠れたりといった理由であまり活用されていない傾向があります。 しかし、useReducerは様々な場面で活用でき、可読性・パフォーマンス向上に大いに役立ちます。 本記事では、useReducerの基本的な使い方と様々な活用法について説明したいと思います。 useRe…

こんにちは、 @mugi_uno です。 Misocaがサービスローンチされたのは 2011年です。実は2021年は10年目ということで何気に節目の年だったりします。 10年もあれば世の中的にもさまざまな技術変遷があり、Misocaもその波に乗っていけるよう、日々改善を繰り返してきました。 というわけで今回は、私自身がフロントエンド側の作業を多くやってきたこともあり「この10年間でMisocaのアーキテクチャがどのように変わってきたのか？」をフロントエンド側に焦点を絞って振り返ってみたいと思います。 ※ 意思決定に関する資料が無いものも存在するため、一部は情報に基づく推察になる点をご承知おきく…

こんにちわ、やましろうです。 ビジネスや商売をやっていくうえで、ビジネスの本質や流れを知ることは大切になります。ビジネスの本質とは「集客」「教育」「販売」であり、そのなかでも特に重要なのは「教育」になります。 この本質や流れを知ることで、ビジネスに対する見方や考え方がガラリと変わります。 「メガヒット・マーケティングの法則」を読むことで次のことがわかります。 ビジネスの本質や流れ モノの売り方 マーケティングの法則 // リンク はじめに ビジネスにおける教育とは？ 何を教育していけば商品は売れるのか マーケティングファネル リサーチの重要性 計画を立てることの意味 計画は数値がないと意味がな…

ツイート 藤崎徹 @uzzrENq0OR8VHWN 3級。予想というより、注意点、 3級は第2問は必ず、飛ばしてください。 第2問は勘定記入想定ですが、ネックです。 実質、第1問の仕訳、第3問の決算で、勝負は決まります！ 第2問も解答する必要はありますが、第1問と第3問に時間かけま… https://twitter.com/i/web/status/1403520812280287234 19:08 LEC 簿記課 @BokiLec お待たせいたしました。#日商簿記 #簿記3級 #簿記2級 富田講師の感想動画公開いたしました！！ ご案内のとおり、今回からは解答・解説ができないため、受験しての感…

×96 Do You Need Redis? PostgreSQL Does Queuing, Locking, & Pub/Sub ×89 ユーザー アカウント、認証、パスワード管理に関する 13 のベスト プラクティス2021 年版 | Google Cloud Blog ×62 Excerpts from Coders At Work: Joe Armstrong Interview ×58 Vagrantが開発言語をRubyからGo言語へ切り替え、次のメジャーバージョンアップ「Vagrant 3.0」で。現バージョンとの互換性は維持 － Publickey ×54 Changes to…

Reactの勉強によいと評判の「りあクト！」シリーズを購入してみました。 booth.pm booth.pm booth.pm 昨年改定され、全3巻になったらしい。ボリュームはかなりあります。 2巻の基礎編まで読み終わりました。ここまで読んだ感想を簡単に。 とにかくわかりやすい！ 一言でいうとこれにつきます。いいなと思ったポイントをまとめると、 対話形式で進行しており、読みやすい 最悪JavaScriptを知らなくても読み進められ、JSで躓きやすいポイントがコンパクトにまとまっている TypeScriptの事前知識不要 Reactの特徴や、今の仕様（関数コンポーネント、Hooks）に至った経緯…

テクニカルディレクターというのは技術領域に精通したディレクターです。Web業界でのテクニカルディレクターはWebディレクターと同じくクライアントの要望と向き合いつつ制作チームの指揮をとる必要があります。そこで今回は私なりに気をつけているディレクションのポイントについて書いてみたいと思います。 社内会議は最低限 キックオフなどで関わるメンバーの顔合わせという意味で関係者全員が最初に集まる事はありますが、それ以降は全員集まったところで一部のメンバーしか話さない事になりがちなので、個々のメンバーと1on1で対話するのがといいと思います。集めたとしても3人程度で十分ですし、少ない方が会話が弾むものです…

note.com 先日のマナブさんの放送が印象的だったのでシェアします。 私は息抜き回のほうがゆるくて好きですね^^ また、ちきりんさん同様、まとまった考えではなくて、今考えているナマの情報に触れられるというのはリスナーからするととても幸せなことだと思います。 尊敬する人と、同じ問題というか、テーマを考えられる幸せ。 出した結論の差異も検証できますしね。 今マナブさんは、ブログとかで稼ぐ数百万より、FXで稼いだ4000円のほうが嬉しいとのこと。 私も、本業で稼ぐ20万より、ブログで稼ぐ400円の方が嬉しいのと同じ感覚ですかね? 桁が違うけど・・・(；・∀・) もう一つ気になったのは、相乗効果を…

１．はじめに 現在の社会環境を考えると、AI（人工知能）が急速なスピードで進化し、 新型コロナウイルスの影響を受け、今までの働き方が一変し、 それに伴う人事制度の変更（成果主義）など、 今までとは違った働き方が求められる時代に入りました。 そのような環境変化が激しい中、 就職を考えるうえで大切なことは、 どこの企業で働くかではなく、世界の情勢を先読みしたうえで、 今後、どの分野（企業）が成長していくのか、 自分がいきいきと働くことができる会社は どこかが重要であり、 いくら大企業に入社しても、 １０年後には会社が倒産していたり、 １０年間働いても何も専門性が身についていなければ、 これからの時…

ゆるくはじめよう＠あさひかわ - connpass に参加したので感想などを書きます。 asahikawa.connpass.com 緊急事態宣言中のためzoomでオンライン開催。自宅に自分の部屋がなく生活音というか騒音丸聞こえになるのでやむなくマイクもカメラもオフで参加。それでもzoom内のchatやtwitterにハッシュタグ 付けてつぶやいた内容拾ってもらえて何とか輪に入れてよかった。 13:00に本編が始まったタイミングと昼食のタイミングが重なってしまい、1人目の発表を半分以上聞き逃してしまった。twitterのログ追っかけたら出欠自動化とか危険な香り（技術的にはいい意味で）のする面白…

シンプルなマーケティングの基本原則 シンプルにわかりやすく、顧客にモノやサービスを買ってもらうための鉄則が書かれていて、うまくいっているビジネスモデルに共通するマーケティングの法則を「メガヒット・マーケティングの法則」著者：中島 徹 氏から学ぶことができます。 次のような方に向けて書きました ●濃い顧客を増やしたいと思っている方●ビジネスを軌道にのせたい方●黒字化のポイントを知りたい方 ▼記事の目次 シンプルなマーケティングの基本原則 顧客の望む未来を提示 最も重要度が高いのは教育 重要度が高いのは事前教育 濃い顧客を増加させる ビジネスを軌道に乗せる 無料オファーの必要性 バックエンドで黒字…

・コンポーネントはクラスコンポーネントではなく、関数コンポーネントを使用する。 ・Atomic Designをベースにコンポーネントを管理する 自分はとりあえずこの構成でやる。 - src - pages (only container: データ取得、APIアクセス、ロジック) - components - templates (only presentational) - organisms (container or presentational) - list - container.tsx (ロジックのみ。データ取得やAPIアクセスはここではしない) - presentational.…

はじめまして！ 某シミュレーションRPGが2021年で25周年とか。 リメイクがなかなか出ないことにしびれを切らし、理想的なシステムを実現したSRPGを作ろうと決めました。 とはいえ、筆者自身は40オーバーのおじさん。ユーザー系IT子会社の管理職です。 思いっきりJava1.4＋Oracle9i世代のため最新のフロントエンドについていけておらず、 typescriptの勉強がてら、ゲームエンジンPhaser3を使って、作り始めました。 どこまで続くかわかりませんが、よろしくお願いします。 一応、すでにマップが表示されたり、カーソルが動いたり、ユニットのキャラが表示されること、 このくらいまでは…

昨日運動したから早く起きた。 喫茶店もまだ空いてないので、家でやる。 ちょっと鍵盤で遊んで練習してから、Next.jsの続き。 移していく中、ちょこちょこわからないとこがあるのでメモ content={`https://og-image.now.sh/${encodeURI( siteTitle )}.png?theme=light&md=0&fontSize=75px&images=https%3A%2F%2Fassets.zeit.co%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg`} なんかどっかから…