元フルスタックエンジニア(死語)をやらせていただいていたものです。 JavaScript(TS)周りの進歩が凄く、あまりにもついていけていなかったので、気になったワードを片っ端から整理してみました。 それぞれに対する説明の正しくないものが含まれてしまっている可能性があります。 そんなところを見つけたときは優しく教えてくださると助かります。 各ツールの詳細というよりは、それぞれがどんな役割のものなのかを記載しています。 この記事が誰かの助けになれば幸いです。 調査・分類した言葉(技術)たち Hono Bun Deno Biome Vite Webpack Turbopack esbuild Babel SWC Prisma まず上記に上げたものが、どういった機能を持つものなのかもわかりませんでした。 それを整理すると以下になるようです。 JavaScript Runtime Deno Bun
怠惰な人向け技術ブログの続け方ガイド
技術ブログの続け方ガイド こんにちは！ITベンチャー企業で半年間働いている駆け出しエンジニアです👨💻 今回はエンジニアで働く上でテックブログを続けるためのモチベーションの保ち方を記事にしてみました。 テックブログって敷居高いしめんどいよなぁ！？ 技術記事を発信する人材は重宝されるらしい。 ただ、僕は現段階で技術記事って面倒くさいし敷居が高いな〜書くネタもないな〜🐹 と思ってしまうのが事実としてあります。 僕だけなのかな？と思って調べてみたら… みんなめんどくさがってるやんけ！！！！！ そこで、めんどくさがりな僕たち向けにテックブログの続け方をノウハウとしてまとめてみました。 みなさんのモチベーション維持に貢献できれば嬉しいです👍 1. 初学的なところも書いてみる こんなの書いても誰のためにもならないんじゃないの…？😭 ということでも書いてみるのは大事である。 自身が悩んだり共感
スライドをデザインする時に気をつけていること
2024年2月29日 Webデザイン プレゼンをする時に必須なのがスライド。私も作成する機会がちょこちょこあります。基本的なデザインの原則はおさえつつ作っていくのですが、プレゼンテーションでの資料として参加者にみてもらうことを前提に考えた時に、特に気をつけているポイントを紹介します。 ↑私が10年以上利用している会計ソフト！ 背景色は暗くする？明るくする？ 最初に設定するのはスライドの背景色。会場での登壇の場合、会場内を暗くしていることが多く、それに合わせてスライドの背景色も黒にします。と言うのも、以前「Webサイトをダークモードに対応させよう」という記事でも書きましたが、どうも私、暗いところだと明るいディスプレイが眩しすぎて何も見えなくなっちゃうんですよね。そのため、会場が暗いならそれにあわせてスライドも暗くします。 逆に会場が明るいのであれば白い背景色にします。事前に主催側に確認をとる
フロントエンドの移り変わりは早すぎるのか
インターネットでは毎日のように言われることですが、私はそこまでではないと考えています。 ネットでよくそう言われる理由として考えられるものと、それを踏まえてどう向き合っていくとよさそうか、個人的な考えをまとめてみます。 なぜ言われるのか 言語が実質的にJavaScript一択 バックエンド、というかサーバサイドでは技術選定に「言語の選択」が入りますが、フロントエンドでは実質的にはJavaScriptにほぼ固定されます（TypeScriptも別言語ではないので、ここではJavaScriptに含めます） サーバサイドと比較して「技術の移り変わりが早すぎる」と評される場合、多くはその人の使用しているとある言語と比較されているように思われます。 実質的に言語が固定なので、比較するならすべてのサーバサイドの変化の総量と比較するのが妥当でしょう。 PHP + Python + Ruby + go + J
飛んでくる「マサカリ」をどう受け止めるか。鹿野壮が実践する「アウトプットを守る」3箇条 2024年1月17日 フロントエンドエンジニア 鹿野 壮 九州大学芸術工学部音響設計学科卒業。現在はUbie株式会社に勤務している。とくにTypeScript・CSSが好きで、暇があればコードを書いている。勉強会・技術SNS・Twitterなどで積極的に技術情報を発信中。 CSS Nite 2017〜2019ベストセッション受賞。 X（@tonkotsuboy_com） Github ホームページ アウトプットをするときの悩みとしてよく聞くのが、アウトプットをしたいが「マサカリ」が怖くてできない、ということです。 私自身も、アウトプットを始めたころは、そういった「マサカリ」に対して悩み、アウトプットや人間関係自体が怖くなることがありました。今でも「マサカリ」は怖いですが、アウトプットの品質や「マサカリ」
CTOの川口 (id:dmnlk) です。 これはBASE Advent Calendar25日目の記事です。 今年も僕は立候補してないのに勝手に日程が組み込まれてました。毎年書いてくれるメンバーが増えていってくれているのになぜ。 CTOについて 自分は2019年からBASE株式会社のCTOをやっています。 気づいたら4年近くやっていることになっていて驚いています。 たまに社外のエンジニアの方とお会いするとCTOになるにはどうすればいいかということを聞かれることがあります。 僕個人のサンプルではありますが、少し書いてみようかと思います。 なぜCTOが必要なのか 必ずしもCTOが必要なのでしょうか。 これに関しては僕は必要であると考えます。 自分がWeb企業にいるという前提条件はありますが、システムやテクノロジーが非常に重要な市場優位性となります。 ただプロダクト開発をするだけでなく最新の技
弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。 また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、こちらまで。 はじめに 英語での適切な命名は、コードの可読性や保守性を向上させるために重要です。適切な命名規則を守ることがコードの理解や共有において不可欠です。 英語での命名規則を学び、適切な命名を行うことで、コードの読みやすさや保守性を向上させ、チーム全体でのコードの理解を促進する手助けとなります。 この記事では、日本人エンジニアが英語での命名規則を理解し、適切な命名を行うための指針を提供します。 命名フローチャート 変数 関数 クラス 1. 変数 1-1. boolean 1-1-1. 存在するかどうかのフラグ 名詞 + exists
2023年、UIデザインで人気のツールを調査 -UIデザインやプロトタイプでよく使用されるツール、UIデザイナーがAIをどのように使用しているのか
デザインは新たな時代を迎え、デザインツールも新たな時代に入りました。UIデザインに使用されるツール、プロトタイプに使用されるツール、デザインシステム、ホワイトボード、ユーザーテストをはじめ、AIの登場によってどのような影響を与えたのか、2023年のデザインツールの調査結果を紹介します。 昨日、『アドビとFigma、合併契約の終了に両社間で合意』というニュースがありました。これによってどうなるかも注目ですね。
はじめに Creative Time 1という、ショップオーナーがクリエイティブな活動にもっと充実した時間を作れるように、あれやこれやをしているチームでマネージャをしています、bonです。 このbonって名前は、子供の時は受け入れられませんでしたが、大人になって都落ちした元ボンボンなので、もうネタにして自ら名乗っています。 本記事はBASE アドベントカレンダー 2023の6日目の記事です。前日のBASEアドベントカレンダー「Notion導入について（前編）」の続きとなります。前編が導入にあたっての技術的な困難をどう乗り越えたか、に対して、私の記事ではなぜ挑戦したのか、どこを目指しているのか、を記事にしています。 Notionと私 私自身、前職でNotionを使い始め、今では公私共に3年以上愛用しており、Notionのコミュニティやイベントにも参加しております。そのコミュニティ活動の中で、
株式会社ICSの池田・西原・松本の3人で『フロントエンドの知識地図 〜 一冊でHTML/CSS/JavaScriptの開発技術が学べる本』という書籍を執筆しました！ ICS MEDIAではHTML・CSS・JavaScriptにおける最新技術をテーマに取り扱っています。ウェブメディアの特性上、記事は断片的な情報となることが多く、体系的な発信が難しいと我々は課題感を持っていました。そこで、この書籍ではICS MEDIAでは発信の難しかった、フロントエンドの全容を一冊で伝えることを目指しています。 2023年11月24日の発売で、Amazonや書店や電子版で購入できます。 Amazon サポートページ 2023年4月に執筆を開始し、フロントエンドのトレンドをまとめてキャッチアップできるようテーマを選定しました。344ページで、紙面はフルカラー。内容の厚みにたいして、定価2,860円（本体2,6
こんにちは。Gaji-Labo で DevHR をしている関根です。エンジニア採用や組織作りを担当しています。 先日、Gaji-Labo が主催で『UI＋FE合流点』というトークイベントを開催しました。 ちなみに『UI＋FE合流点』と書いて、読み方は『ユーアイ・エフイー・ジャンクション』です。 名前の通り、UI デザインとフロントエンド開発の「合流点」を目指したイベントです。 イベント本編のトークセッションはもちろん、懇親会でも職種をまたいだ課題感の共有や相談などが活発に行われ、UI デザインとフロントエンド開発における合流の場として盛り上がりました！ 今回のイベントは、フロントエンド側にサイボウズの sakito さん、SmartHR の masuP9 さん、UIデザイン側で Chatwork の守谷絵美さんの3名をゲストにお迎えしました。 笑いあり、納得感ありの名言や迷言が 本編中で印
画像生成AI「DALL·E 3」の性能が凄まじい。これを無料で使わせるマイクロソフトは本気で競合をつぶしに来ている (1/3)
10月1日頃、OpenAIの新しい画像生成AI「DALL·E 3（ダリ３）」が徐々に使えるようになり、その性能の高さから話題になっています。まずサプライズで使えるようになったのがマイクロソフトのBingチャット。日本語で「猫の画像を作ってください」などと入れるだけでかわいい猫の画像が出てくると。これが無料で使えるのは衝撃的です。マイクロソフトが巨大資本で他の会社をつぶしに来たなという感じですね。どう考えても、今のところはサーバーコストが果てしなくかかる赤字サービスなのは間違いないので……。 「ラーメンを食べる女の子」が描ける！ なにより衝撃的だったのは、「アニメ風の少女と猫が遊んでいる姿を作ってください」というリクエストに対し、一発で完璧な正解を出してきたことです。Stable Diffusionだと苦手とされていた指も適切に描写されています。もうひとつの着目点はオブジェクト間の関係性です
一休.com サイトパフォーマンス改善 - 2023年 夏の振り返り - 一休.com Developers Blog
ヤフー株式会社より出向しております、卯田と申します。 主務で、一休.comおよびYahoo!トラベルのフロントエンド開発を担当しています。 兼務で、ヤフー株式会社の全社横断組織でWebパフォーマンス改善の推進を行っております。 本稿では、直近半年弱(2023年2月〜8月)で、断続的に行っていた一休.comのパフォーマンス改善について振り返ります。 開始が2023年2月となった理由は、Nuxt3バージョンアップ以降にパフォーマンス改善活動に着手したためです。 一休.com/Yahoo!トラベルのNuxt3バージョンアップ詳細については、以下のブログをご覧ください。 user-first.ikyu.co.jp サイトパフォーマンス改善の意義 改善の方針 方針1: Core Web Vitalsを改善する 方針2: 重要課題から優先的に対応する 改善の進め方 可視化 ブラウザサイド サーバーサイ
ローカル環境を汚さない構築ツール「Devbox」をクラウドですぐ使える「Devbox Cloud」β公開。ローカルでのファイル編集がクラウドに自動同期
ローカル環境を汚さない構築ツール「Devbox」をクラウドですぐ使える「Devbox Cloud」β公開。ローカルでのファイル編集がクラウドに自動同期 Linux環境上に独立した開発環境を簡単に構築できるオープンソースのツール「Devbox」の開発元であるJetpack.io社は、Devboxをクラウド上ですぐ利用できるクラウドサービス「Devbox Cloud」を2月1日に発表しています。 If you’ve been looking for a fresh take on Cloud Development environments; check out Devbox Cloud which we’re announcing today (https://t.co/eh2Laas2bu) Easily spin up low latency virtual machines on th
4/19 ソースコードのバグを修正しました 花粉症で午前二時に目が覚めた。 ふと 「ChatGPTの結果を組み合わせて物語を作ったり議論したりするのをPythonで書くの面倒臭くない?」 と思った。 誰かが作っていそうなので探したのだが、僕の観測範囲では世界のどこにもなかったので、とりあえずBlocklyで作ることにした。 今夜19時からは、日本ディープラーニング協会が主催する大々的なイベントがあり、connpassとPeatixであわせて6000人近い人が参加するらしい。 そこに登壇するときのネタとして、なんか作っておくか、と思った。 GPT Blocklyの基本的な構造 基本ブロックは三つ 基本ブロックテーマを設定するブロックと、話の流れに対し、ある「人物」として、「提案」もしくは「反論」などを行うブロック。 それと、複数の意見をまとめて要約するブロック である。 意見を述べるブロック
技術発信していますか？アウトプットをするのが嫌だったソフトウェアエンジニアが登壇中毒になるまでの話 - Findy Engineer Lab
みなさんはアウトプットをしていますか？ エンジニアにとって技術発信などのアウトプットを行うことは、成長していくために欠かせない活動のうちの一つです。しかし、「なかなか継続できない」「何を発信していいのかわからない」とハードルを感じている方が多いのも事実でしょう。 フロントエンド領域で積極的に技術発信をしている鹿野 壮（@tonkotsuboy_com）さんも、実は最初はアウトプットが苦手だったといいます。 鹿野さんは、 池田 泰延氏（clockmaker）率いる株式会社ICSでフロントエンドのリードエンジニアとして経験を積み、2021年に株式会社マネーフォワードに入社。現在はフロントエンドチームのリーダーを務めながら、会計開発部の副部長としても活躍中のエンジニアです。 今回は、鹿野さんが記事執筆や登壇などのアウトプット活動を続けている理由についてインタビューを実施しました。鹿野さんが語る、
今活用しているツールを紹介 古川陽介氏（以下、古川）：今、具体的にいくつかツールや考え方が出てきました。今聞いているみなさんはおそらく、「じゃあ、どれを使ったらいいんだろう？」とか「何をしたらいいんだろう？」となっているかもしれないですが、倉見さんにお聞きします。ずばり私たちは今何をやっているでしょうかというところで。例えば……。 倉見洋輔氏（以下、倉見）：すごく話を誘導されている感もありますが（笑）。 古川：そうですね（笑）。誘導しているんだけど。 例えば、先ほど言っていたHTMLとかそういうのをスナップショットでテストしているとか、もしくは、見た目の部分でテストをしているとか、そういうところでどういうことをやっていますかと聞いてもいいですか？ 倉見：宣伝の場をいただきありがとうございます（笑）。特に見た目に関する層のテストではいくつか活用しているツールがあります。 1つはやはり、「St
2022年、Web制作・デザインに役立つ記事の総まとめ
2022年、当サイトで公開した記事の中からPocketにたくさん登録された記事やツイートされた記事をジャンル別にまとめました。今年を振り返りつつ、来年のWeb制作にも役立つオススメです。 Web制作全般 UI/UX関連 デザインのテクニック・インスピレーション Photoshop, XD, Figmaなどの使いこなし術 フォント・タイポグラフィ カラー HTML CSS: 基礎知識 CSS: 実装テクニック JavaScript フレームワーク・ライブラリ 無料素材 便利ツール・サービス 当サイトの購読は、RSS Feedを利用すると便利です。 コリスのRSS Feed ※旧Feedに登録されている人がまだ多いので変更をお願いします。 Web制作全般 2022年のもっとも大きなニュースは、IEのサポートが終了したことではないでしょうか。IEに苦しめられていたWeb制作者は非常に多いと思いま
フロントエンドを高速化する第4のWeb言語――「WebAssembly」とは？：いろんな言語で試す、WebAssembly入門（1） 第1回では、第4のWeb言語とされ、W3Cで標準化されているWebAssemblyの概要を紹介します。WebAssemblyの仕組みと用途、Webブラウザをはじめとしたランタイム、非ブラウザAPIやプログラミング言語のサポートなどを紹介します。
正規表現は文字列の検索や置換を行うための強力で便利なツールです。基本をマスターすれば開発から日常の事務作業までさまざまな場面でラクをできる魔法の道具ですが、見た目がちょっと分かりづらいので、避けている方もいるのではないでしょうか？ 筆者の個人的観測ですが、とりわけフロントエンドのエンジニアには正規表現に苦手意識を感じている方が多いようです。 この記事では正規表現の基本と、正規表現がどこで使えてどれだけ便利になるのかを紹介します。 正規表現の基本：正規表現ってそもそも何？ 正規表現（regular expression）は、ごく簡単にいえば「さまざまな文字列のバリエーションをひとつの文字列で表現したもの」です。たとえば、郵便番号の7桁の数字には（実際に使われていないものも含めれば）一千万通りのバリエーションがありますが、正規表現を使えば次のようにひとつの文字列で表現できます。 ▼「7桁の数字
今ではサイト内に動画やアニメーションを利用することはそこまで特別なことではなくなりました。実はブラウザーや技術の進歩により最近は透明部分のある動画（アルファ付き動画）をサイト内に埋め込むことも可能になってきました。本記事では動画内容に応じた透過動画を、メリット・デメリットなどを交えながら、動画ファイルだけでなくさまざまな実装方法を紹介します。 記事前半では主に動画形式での実装方法を、後半ではアニメーション画像形式での実装方法を解説します。 サンプルを別ウインドウで開く コードを確認する ※デモの再生には通信量が多いため、モバイルデータ通信などを利用の方は注意ください。 コーデックとコンテナー まず、動画ファイルの仕組みである「コンテナー」と「コーデック」について簡単に説明します。 よく動画ファイルの拡張子に「.mp4」や「.mov」などを見たことがあると思います。これらはマルチメディアコン
挫折しないStorybookの始め方（前半）
僕自身初学者だった頃に（今もそうだけど）「Storybookいいよ！」と言われた使ってみたかったけど、使い方も良さもわからなくて3回くらい挫折したので、そんな人をこれ以上生みださないために書きました。 【内容】 [前半] - Storybookに作成したComponentを表示する - Storybookのaddonの使い方を掴む - Storybook上でのグローバルなCSSを対応させる - 画像ファイルをStorybookに反映させる [後半] - styled-componentsでStorybookを使う - TypeScriptでComponentsを作る - Next.jsでStorybookを使う - 作ったComponentを公開する
フロント学習の最高の教材集 - Qiita
はじめに 今回はフロント学習で重宝できる教材をまとめました。 軽く自己紹介として、自分は新卒でフロントエンジニアとして入社し2022年で2年目になります。 実際に実務を通す中で「この教材のおかげで実装がスムーズにできた」「この教材をやってたおかげで理解ができた」といったような場面が2年の間で多々ありました。 今回紹介する教材は自分自身が実際に使ってよかったものかつ、そのほとんどが無料で学べるor低価格の教材になっています。 「フロントエンドを網羅的に学べかつ実務の基礎作り」という目的で教材を紹介します。 この記事の主な対象者 フロントエンドの学習をこれからしていきたい人 何を学べばよいのかがわからない人 HTMLとCSSはある程度かける人 この記事の目標 フロント学習の指針が立てられる 実務現場でも活用できるスキルを学べる教材を知れる JavaScript ドットインストールのJavaSc
ウェブ業界の当たり前だと思っていることでも、他社の人には違う常識があるかもしれません。自分が業界多数の傾向と違うところはどこなのか・・・、この連載ではアンケートデータから国内のウェブ業界の傾向を分析します。 連載8回目となる本記事では「フロントエンドエンジニアの移り変わり」をテーマとしてアンケート結果を紹介します。 あなたが最近使っているJavaScriptライブラリ/フレームワークはどれ？（2022年版） 国内で最近人気のあるJavaScriptライブラリ/フレームワークはどれでしょうか。 5,168票の回答があり「React」が46.67%、「Vue」が23.9%、「Angular」が4.3%、「jQuery」が25.1%でした。 3年前の2019年にアンケートをしたとき（参照記事）は「React」が23%、「Vue」が37%、「Angular」が7%、「jQuery」が33%でした。
内容 ワークディレクトリーのセットアップ(10min) ワーク用リポジトリーの git clone 依存のインストール モブプログラミング準備(30min) VSCode Live Share を使い、参加者すべてが同じコードベースで作業できるようにする ドライバーの担当順の決定 仕様を確認する リファクタリング開始(6 * 15min) コードスメルを探す リファクタリングしてみる 発展課題 書籍リーダブルコードを読み、生じた疑問や質問について同期やエルダーと Slack 上で議論する 新卒メンバーからのフィードバック 良かった点 モブプログラミングでリファクタリングを体験できたことは良かった リファクタリングを意義を理解できた Next.js に触れられた リファクタリングの観点と方法を知ることができた やっていることを言語化しながら共有する練習になった 伸びしろ モブプログラミングは
Appleが独自開発したSoCシリーズ「Apple Silicon」の第1弾として発表された「M1」は、PC向けプロセッサとしては初めて5nmプロセスを採用したチップで、各メディアや専門家から「コンピューティング革命」「少なくとも過去10年でMacのハードウェアにおける最大の飛躍」とまで評されました。そんなM1は当然ながらmacOSの動作が最適化されていますが、このM1でWindowsを動かすことを目指すプロジェクト「M1 Windows」がスタートしました。 Welcome to the M1 Windows project | m1windowsproject https://amarioguy.github.io/m1windowsproject/ GitHub-amarioguy / m1windowsproject https://github.com/amarioguy/m1w
React大好き侍が、「もうSolidJSでいいじゃん...//」ってなったワケ。 - Qiita
Reactが好きです。 Reactが好きです。コンポーネントを関数として扱うのが好きです。 SolidJSはReactそっくりの書き心地(DX)を保ちつつ、Reactに足りない要素を兼ね備えた期待の新人です。 コードの比較 React const Counter = () => { const [count, setCount] = useState(0) useEffect(() => { console.log(`Count: ${count}`) }, [count]) return ( <div> <div>{count}</div> <button onClick={() => setCount(prev => prev + 1)}>Add</button> </div> ) } const Counter = () => { const [count, setCount] =
『Google Docs』や『Figma』といったリアルタイムな共同編集ツールの恩恵を受けている人は数多くいるでしょう。『Visual Studio Live Share』のようなエンジニアに嬉しいツールも生まれ、今日ではオンライン上でも円滑なコミュニケーションが可能になっています。 これらのツールの基礎にあるのが「共同編集」のテクノロジーです。本記事ではこの技術に焦点を当て、その仕組みと主にフロントエンドでの実用例について紹介します。 記事の前半では、リアルタイムな共同編集に用いられる技術やアルゴリズムについて、発展の歴史とあわせて紹介します。解説用のコードにはJavaScriptおよびTypeScriptを使用しますが、フロントエンドエンジニアに限らず共同編集の仕組みについて気になる読者が知識を深めるきっかけとなるはずです。 さらに後半ではフロントエンドの開発者目線で、前半で紹介した技
ICS MEDIAでは読みやすい文章作りの取り組みとして、自社で公開しているVS Code拡張機能の「テキスト校正くん」を使用して文章校正を行っています。スタッフの校正ルールを統一して、一定の品質と読みやすさを確保することを心がけています。 「テキスト校正くん」は、文章校正エンジンにtextlintというNode.jsのパッケージを使用しています。textlintは設定した校正ルールにもとづいて文章校正を行えるので、プロジェクトに適切なルールを設定して文章校正ができます。以下の記事で、textlintの活用事例が紹介されています。企業がtextlintを導入し、文章品質を高めるワークフローとして活用されていることがうかがえます。 『textlintを使っている企業の事例・ルールをまとめてみた - Zenn』 『よりよい文書を書くための校正ツール「textlint」のSmartHR用ルールプ
キャッシュは、CPUのバスやネットワークなど様々な情報伝達経路において、ある領域から他の領域へ情報を転送する際、その転送遅延を極力隠蔽し転送効率を向上するために考案された記憶階層の実現手段である。(引用: フリー百科事典『ウィキペディア（Wikipedia）』) こんにちは、@kaa_a_zu です。私たちエンジニアは、「キャッシュ」というワードをよく口にしています。それはインフラの設計をしている時かもしれないし、表示されるコンテンツが変わらない時かもしれないし、パフォーマンスの改善をしている時かもしれません。普段何気なく使っている「キャッシュ」とは一体何なのでしょうか。この記事は、そんな「(Webフロントエンドを触るエンジニアが知るべき)キャッシュ」について、どんなものがあるのかがちょっと分かったという状態になることを目的に書いています。
デザインとHTMLのズレを検出！ Node.jsとPuppeteer活用のビジュアル校正テストで実装時のケアレスミスを防ぐ ウェブ制作において、デザインとHTML実装の一致はエンジニアとして当然求められるものです。とはいえ、デザインツールとブラウザ画面をにらめっこしながら確認するのも大変です。本記事ではNode.jsで動くヘッドレスブラウザのPuppeteerパペティアーを使ってデザインとのズレを検知するビジュアル校正テストの方法を紹介します。 ウェブ業界ではデザイン制作とHTML制作が分業である場合がほとんどです。ビジュアル校正テストを導入することで、HTML制作の品質向上に役立てられます。デザインとHTML実装が別の会社のようなプロジェクトでは、HTML実装時の品質保証の担保になりますし、デザイナーとフロントエンドエンジニアが近い組織でもコミュニケーション円滑化に役立つでしょう。ICS
------------------------------------------------------ 2024 年 1 月更新 本書がきっかけで「なんとか Docker を使えるようになりたい」というプログラマの方向けの入門書を秀和システム様から出版させていただけることになりました 開発系エンジニアのためのDocker絵とき入門 https://www.amazon.co.jp/dp/4798071501 紙書籍と電子書籍、どちらもございます この書籍と執筆経験は、みなさまからの驚くほどの高評価があればこそ得られた機会でした いつも本当にありがとうございます 書籍化に際しまして、この場で次のとおり説明させていただきます 1️⃣ 本書 ( Zenn ) は有料化しません 2️⃣ 本書 ( Zenn ) は今後更新しません 3️⃣ 本書 ( Zenn ) と出版される絵とき入門の違い
なぜモダンフロントエンドを使いたいのか 宣言的な制御編｜食べログ フロントエンドエンジニアブログ
こんにちは。FEチームリーダーの辻です。 食べログには技術情報を発信する社内ブログがあります。エンジニアはもちろん企画やデザイナーなど技術者ではない職種の方とも、食べログを支える技術や今後食べログに取り入れたい技術について共有しています。 この記事はその社内ブログで投稿したものです。 エンジニアでなくても理解しやすいよう、わざと大雑把に説明している部分もありますが、ご容赦いただけると幸いです。 ----------------------- はじめに食べログでは、 モダンフロントエンド（React）へのリプレースプロジェクトが進行中です。 2014年頃以降、React,Angular,Vue.jsなどのフレームワークやライブラリが流行し、いまも続いています。これらフレームワークやライブラリとその周辺技術をモダンフロントエンドと呼んでいます。 この記事では、そもそもモダンフロントエンドとはな
HTMLなどのコードをブラウザ上で確認ができ、公開や共有もできるなど、世界中のデベロッパーが愛用するCodepen。 この記事は、2021年に特に人気の高かったHTMLスニペットをランキング形式でまとめた The Most Hearted of 2021 が発表されていたので、その中でも実用性の高いHTMLスニペットを中心にまとめて紹介しています。 CSSのみで表現されたお手軽なHTMLスニペットから、Three.jsをつかったインタラクティブな動きやアニメーションにも注目が集まっています。 HTML/CSSやJSなどのコードの確認や編集を行うことができるので、今後のデザイン制作に活用してみてはいかがでしょう。 2021年にCodepenで話題！コピペ可なHTMLスニペット ベスト100発表 97位 Metallic Bordered Text with CSS Photoshopで作成し
フロントエンドエンジニアの価値は どこから生まれるのか Front-End Lounge #2 bit.ly/3HZ5K7j Suguru Inatomi@laco2net
フロントエンドエンジニアたちが語る、Tips【23選】 - RAKUS Developers Blog | ラクス エンジニアブログ
こんにちは、技術広報のyayawowoです。 フロントエンドエンジニアの皆様、今のフロントエンドを楽しんでおりますでしょうか？ 変化の多いフロントエンド領域を楽しむために・・・ ラクスが開催している 「フロントエンド LT会」で発表された資料をご紹介します！ フレームワークや開発言語別にまとめておりますので、興味があるところだけを少し摘まむのも大歓迎です。 9月に開催した「フロントエンドLT会 - vol.4」は、参加者が500名越えとなるイベントなりました。 2022/1/19(水)に「フロントエンドLT会 - vol.5」を開催しますので、ご興味ある方は是非登壇/視聴申込よろしくお願いいたします！ rakus.connpass.com では、早速見ていきたいと思います！ イベント詳細はこちらからご確認ください。 ・フロントエンドLT会 vol.1 -2020夏祭り- ・フロントエンドL
アンケートなどを簡単に制作できるGoogleフォームをAPI経由で作成、編集できる「Google Forms API」が発表されました。 The #DeveloperCommunity has more power! Thanks to the new Google Forms API, you have the ability to build powerful integrations on top of forms. Check out automation use cases https://t.co/3rwg3qr5Vg — Google Developers (@googledevs) October 12, 2021 Googleフォームは、質問項目や選択肢が並んだフォーム画面を作り、公開すると、自動的に結果がGoogle Spreadsheetに集計され、容易にグラフ化など
QUERY関数の基本と簡単な応用例！意外と気づかない2つの注意点も紹介【Googleスプレッドシート】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
LIGのtetsuこと手塚です。情報システム室の室長をしています。 LIGでは主にGoogleのサービスを利用していることが多く、社内共有の利便性からGoogleの「スプレッドシート」を使う機会が多くあります。特に業務の中では、表計算やデータの集計などで多く使い、あらゆる関数を駆使して必要なシートを作成していきます。 今回はその関数の中でQUERY関数について、少し紹介していきます。QUERY関数はVLOOKUP関数より複雑な条件で出力したり、出力結果の並びを自由に変更できる関数です。 QUERY関数とは QUERY関数の説明でGoogleでは Google Visualization API のクエリ言語を使用して、データ全体に対するクエリを実行します。 参照元：Google とあります。 これはGoogleが提供するスプレッドシート内のデータに対する処理を、指定の書式で構成した命令文を
npm ERR! code 1 npm ERR! path /hoge/node_modules/node-sass LibSassとNodeSassが非推奨になったからです。 知っていました…わかっていてちょっと後回しにしてましたが、ついにNodeのバージョンアップでひっかかりました。 これを機にDart Sassへ移行しましたが、途中で Nodeのバージョンが16だとgulp-sassをインストールできない@importを@forwardにしたのでgulp-sass-globがきかない と、つまづきポイントがあったので、備忘録を残しておきたいと思います。 Dart Sass、gulp-sass、Node Sass node-sassは、sassをC/C++で実装したライブラリであるLibSassへ、Node.jsのバインディングを提供するライブラリです。 gulp-sassはnode-
entrykitがM1 mac(Apple Silicone)で実行できないときの対処法 - スペクトラム
現状 M1 macでDockerのApple M1 Tech preview 7 *1 を動かしています。 golang:1.15 imageがたまたま手元で動いていたのでこれで試します。 entrykitはv0.4.0のバイナリを配布していますが、これを実行しようとすると以下のようにgoレベルで落ちてしまい実行できません。 $ docker run --rm -it golang:1.15 bash root@aa08b9d02add:/go# wget https://github.com/progrium/entrykit/releases/download/v0.4.0/entrykit_0.4.0_Linux_x86_64.tgz root@aa08b9d02add:/go# tar -xvzf entrykit_0.4.0_Linux_x86_64.tgz root@aa08b
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フロントエンドのスピードに置いていかれたので、よく聞く技術を調べて分類してみた
飛んでくる「マサカリ」をどう受け止めるか。鹿野壮が実践する「アウトプットを守る」3箇条
CTOに必要なものとは - BASEプロダクトチームブログ
【日本人エンジニア必携】英語命名規則の決定版 - Qiita
Notion導入について（後編） - BASEプロダクトチームブログ
『フロントエンドの知識地図』出版のお知らせ - ICS MEDIA
「合流点はデザインシステム」フロントエンド開発者とUIデザイナーが合流点を語り合う『UI＋FE合流点』を開催しました。
ChatGPTをブロックでプログラミングできるようにしてみた(ソースコード付き)｜shi3z
「フロントエンドのテストは“不安定さ・壊れやすさ”との戦い」 和田卓人×倉見洋輔×古川陽介が語る、アクセシビリティの重要性
フロントエンドを高速化する第4のWeb言語――「WebAssembly」とは？
覚えれば一生もの！ ウェブエンジニアのための正規表現活用入門 - ICS MEDIA
ウェブサイトに透過動画を埋め込む方法 - ICS MEDIA
フロントエンドのトレンドは変化したか？ アンケート結果から分析する2022年のウェブ制作 - ICS MEDIA
2022 年度新卒研修で「読みやすいコード」の研修を担当しました | DevelopersIO
M1搭載MacでWindowsを動作させるプロジェクト「M1 Windows」がスタート
共同編集を支える技術とライブラリの活用 - ICS MEDIA
文章校正を行うためのtextlint入門 - ICS MEDIA
フロントエンドエンジニアが知るべきキャッシュを理解する
デザインとHTMLのズレを検出！ Node.jsとPuppeteer活用のビジュアル校正テストで実装時のケアレスミスを防ぐ - ICS MEDIA
実践 Docker - ソフトウェアエンジニアの「Docker よくわからない」を終わりにする本
2021年にCodepenで話題！コピペ可なHTMLスニペット ベスト100発表
フロントエンドエンジニアの価値はどこから生まれるのか（Front-End Lounge #2）
Google Forms API登場。プログラミングでGoogleフォームの作成や編集が可能に
Dart Sassに移行（Gulp / Node 16 / glob対応）| cumak