React Server Components に感じたフロントエンドの消失という記事に端を発する一連の議論だが、実際この記事で書かれていることはそうだろうなと思う。話の流れとして誤ってる部分はないと思うし同意する。 この記事ではフロントエンドエンジニアとして、この件についての僕の見解を書く。もちろんフロントエンド（とは？）の総意ではない。 元記事と重複する部分多いが、そこは同じ問題を取り扱う以上避けて通れないため、ご容赦いただきたい。 同じ領域を取り扱ってる以上、開発戦争は激しくなる 様々な理由によりユニバーサルが求められている ※この記事でいう「戦争」とは、お互いの領域を食い合う開発が、活発化することを「戦争」と称しているだけです。それ以上の意図は全くございません 領域がかぶっている 最近のフロントエンド系ユニバーサルエコシステムは、たしかに PHP や Rails の領分を侵そうとし

更新履歴 追加 2024/04/01 「Epic Easing」を掲載しました 2024/03/07 「Filter Blend」を掲載しました 2024/03/04 「Tooltips & Speech Bubbles」を掲載しました 2023 2023/07/04 「CSS Box Shadows Generator」を掲載しました 2023/06/29 「Regulex」を掲載しました 2023/04/05 「Colorable」を掲載しました 2023/03/09 「Scrollbar.app」を掲載しました 2022 2022/10/04 「CSS Shadow Palette Generator」を掲載しました 2022/09/07 「Wayback Machine」を掲載しました 2022/05/31 「Min-Max-Value Interpolation」を掲載しました

フロントエンドのデベロッパーが2021年に向けて何に注目すべきかを紹介します。 特に上級職や転職など、ステップアップを目指す人は要チェックです！ 10 Things Front-End Developers Should Learn in 2021 by Simon Holdorf 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. フレームワーク 2. 静的サイトジェネレーター（SSG） 3. JAMstack 4. プログレッシブウェブアプリ（PWA） 5. GraphQL 6. コードエディタ/IDE 7. テスト環境 8. クリーンなコード 9. Git 10. ソフトスキル 終わりに はじめに 2021年は、フロントエンドの開発がテクノロジー業界で最もホットなトレンドの1つになることは間違いないでしょう。フ

ウェブサイトなどを作る際、各メーカーで幅や大きさが異なるデバイスで、ウェブサイトが実際どんな風に表示されているかを全て網羅するのも難しいものです。しかし、「Sizzy」というソフトウェアを使えば歴代のiPhoneや各メーカーのタブレットなど、デバイスごとの表示を一度にチェックできるとのことで、実際にSizzyを使ってどんなことができるか確認してみました。 Sizzy https://sizzy.co/ 上記URLにアクセスすると、Sizzyのトップページが表示されるので「Try for Free」をクリックします。 Sizzyのプランは「Solo」「Trio」「Team」「Enterprise」の4種類で、それぞれ月額払いと年間払いを選択可能。今回は月額のSoloプランを利用するので、「Monthly」を選択してSoloの「Try for Free」をクリックします。 このプランには14日

最近のラインディングページで見かけるデザインやアイデア、コピーライティングがまとめられたSaaS Pagesを紹介します。 ヘッダやフッタのデザイン、ナビゲーションのアイデア、CTAや価格一覧やFAQのコンポーネントなど、インスピレーションが刺激されます。

はじめに ダミーデータを作成しなければならないときってありますよね？ テストデータやサンプル画面を作るときに値をどうするか困ったことありませんか？ そういった悩みを VS Code で解決するための拡張機能が vscode-random です。 https://marketplace.visualstudio.com/items?itemName=jrebocho.vscode-random デモ （GitHub リポジトリより引用） 拡張機能としてはカーソル位置にランダムな値を挿入するという単純なものなのですが、VS Code のマルチカーソル機能と組み合わせることで非常に強力な体験を得ることができます。 名前やメールアドレスの項目がある JSON や YAML に対し、複数の項目にまとめて値を挿入して作り上げるのは気持ちいいこと間違いなし！ 対応コマンド コマンド 説明 生成例

スマートキャンプで業務委託でエンジニアをしている佐藤です。BOXILの開発を1年3ヶ月前から、沖縄からフルリモートでやっています。 皆さんは、毎日楽しくお仕事できていますか？　エンジニアという職業は労働時間やストレスが多く、IT業界は他の業界と比べて精神疾患にかかりやすいと言われています。 私はもともと自己否定ばかりしてしまう思考の癖があることに加えて、7年前に起業に失敗してメンタルを壊してしまったことをいまだに引きずっていて、日々悩みながら生活をしています。 スマートキャンプは、過労とは無縁で、メンバー間のサポートもよく、これ以上ないくらい私に合った職場です。それでも自分の心の問題で不安になったり、絶望感に襲われたりすることがあります。今回はそうなるたびに書き綴ったメモを、開発中にネガティブな気持ちにならないための技術としてまとめようと思います。 メンタルが強くないエンジニアはこんな気持

はじめに 私は、不完全な人間です。 人より劣っているところ、弱みもたくさんあります。 しかしながら、なんとか、今日までエンジニアとして生きていくことができました。 私がこれまで、劣等感とどう折り合いをつけてエンジニアとして生きてきたか、説明したいと思います。 この記事で最も言いたいことは「不完全な自分を認めながら、でも、自分の成長の可能性を失わない」ということを伝えたいです。 劣等感にまみれたエンジニア人生 ふりかえると、劣等感にまみれたエンジニア人生でした。 「自分はダメなエンジニアなんだ…」 という想いが、思考の隅につきまといながら、なんとか生きています。 思い返せば、この想いの最初のきっかけは、新人時代に先輩社員にコードレビューの指摘で、叱咤された事でした。 「こんなことも知らないの」 「コードを書く才能がないんじゃない」 「…あぁ、もう、いいから、こっちで修正しとく。いいよ。さわら

ウェブアプリケーション開発における、現代的なCSSの基礎技術についてまとめました。 ちまたには「CSSとは何か」を学ぶ教材はたくさんあっても、「CSSをどうやってうまく使うか」についてはあまり詳しく触れられません。 仕様をたくさん記憶したところで、いつになっても開発力はあがらないのです。 本記事は「CSSをうまく使う技術」に焦点をあてて、実際に現代的なウェブアプリケーションに求められるレベルのCSSを書くための知識を紹介します。 特に プログラミング経験はあるもののウェブフロントエンドの経験が浅い方 初級レベルのCSSはある程度理解したものの、次にどうしたらいいかわからない方 にお勧めです。 プロローグ CSSの書き方は一通りではありません。 好きな書き方を自由に選ぶことができます。 これは一見すると良いことですが、裏を返すと最適ではない書き方がたくさんあるということです。 この場において

本書『サバイバルTypeScript』は実務でTypeScriptを使う開発者のための入門書です。そして、このページはTypeScriptの特徴を最速で把握できるよう、数百ページからなる本書のコンテンツをつまみ食いした要約です。 » 本書ついて詳しく知る » とにかく今すぐTypeScriptを書いてみたい TypeScriptとは​JavaScriptのスーパーセットとなるプログラミング言語。静的型付け言語であり、プログラムの正しさが静的に検査できる。ライブラリやIDEなどの開発環境が充実しており、大きなエコシステムを持っている。Microsoftが2012年に開発し、オープンソースで公開した。» TypeScriptの特徴について詳しく知る » TypeScript誕生の背景について詳しく知る TypeScriptはJavaScriptのスーパーセット​スーパーセットとは、元の言語との

このあいだ、GAFA数社のコーディング面接を受けて全落ちしました。後続のため、オンサイト面接がこんな感じだったよ、というのをストーリー風に仕立てて公開します。問題と会話はダミーですが、雰囲気はかなり近くできたと思います。なお実際の会話はすべて英語で、バーチャルでの実施でした。 メイン問題はLeetCodeのNo.1472をもとに作成。 https://leetcode.com/contest/weekly-contest-192/problems/design-browser-history/ ちなみに「ぼく」はIQ+30くらいの設定です。それではどうぞ。 入室と自己紹介 面接官「やあ！わたしはシンディ。会えて嬉しいよ！」 ぼく「こんにちは、シンディ。ぼくはyambe2002。調子はどう？」 面「超いい感じだよ。きみは？」 ぼ「ぼくも超いい感じさ」 面「それはよかった。わたしは部署Aのソフ

前回、Webデザイナーの求人件数を地域別に調べました。今回は求人情報にあるスキルを職種別に集計して、傾向をグラフ化しました。「Webデザイナー」「Webディレクター」「UI/UXデザイナー」「フロントエンドエンジニア」「サーバサイドエンジニア」の5職種です。それではどうぞ！ 【目次】 対象職種 Webデザイナー Webディレクター UI/UXデザイナー フロントエンドエンジニア サーバサイドエンジニア 最後に ※参考：【indeed】Webデザイナー求人件数を都道府県別に調べてグラフにした（2019年3月版） - クモのようにコツコツと 対象職種 Webデザイナーだけでなく、「Webデザイナーのキャリアパス 」の記事で触れたWebデザイナーのネクストキャリア「Webディレクター」「UIデザイナー」「フロントエンドエンジニア」を対象にしました。 ※参考：Webデザイナーに必要なスキルと代表的

はじめに この記事は、エンジニアがどのように技術を学べば良いのかということについて、おもに西尾泰和氏の書籍・記事で主張されている内容を元に、特定の問題を対象として自分の考えを加えて考察したものです。特定の問題としては、以下の3つを設定しています。 何を学べば良いのか分からない 技術書を読んでもすぐ忘れる 学習する時間がない もちろん、学ぶ上で考えるべきことは上記の問題にとどまりませんが、ここでは、比較的身近で耳にすることが多いと感じるものを問題として設定します。 定義 この記事ではスコープを特定の範囲に限定しているため、一般的な用語について、一部を以下のようにローカル定義しています。そのため、一般的な用語そのままの意味においては、この記事の内容はコンテキストを維持できないことがある点に注意してください。 エンジニア Web 系企業に勤めており、主にプログラミングをはじめとしたコンピュータサ

およそ出てきた順番に並べてみました。（多少の違いはあるかと思います。） Gruntはもうなくなってきていますが、他の環境構築は現役かと思います。 基本的にフロントエンドエンジニアが覚えるべきはHTML、CSS、JavaScriptの3つなのですが、環境構築は数多くあります。 環境構築の何がしんどいかというとバージョンによる違い、Windows、MacのOSの差などによりエラーが出ることがあるということです。 これに消耗する人が多いです。 現に自分もnodeモジュールのバージョンの差が原因でエラーを吐いてしまいググりまくったり、業務委託先がほぼMacでwindowsの環境構築の知見や整備が用意されておらず数日環境構築に時間がとられたりと大変な思いをしています。 Dockerを作ってしまえばどんな環境でも環境構築が容易になりますが、そのDockerの作成はまた別の専門知識が必要なためすぐ作れる

これからフリーランスになろうと考えていて、単価の決め方が分からない方へ。 初めて決める単価は、ほどんどの人が低い設定をしてしまいます。 理由として、これからフリーランスなって仕事が来るのかどうか、そういった不安から安い価格にしてしまいがちです。 私自身フリーランス当初、単価づけに失敗して低い価格で馬車馬のごとく働いていましたが、 その後2年で月100万稼げるようになった経験からお話していきます。 自分で勝手に計算して単価を決めてはダメ 単価の決め方で一番アウトなのは、自分の欲しい金額などで決めることです。 ネットみてると、「自分の欲しい額」「生活に必要な額」「会社員の頃の給料から」など出てきますが、こういった決め方はダメです。 このような決め方をすると大抵相場よりも低い金額になります。 私が20代前半のころ一度フリーランスに挑戦して失敗した時の金額を例にしてみます。 という計算ですが、これ

CSS section divider descriptionWith this CSS Section Separator Generator, you can choose between 6 different dividers. Each of them can be customized by using the controls in the preview field. The tool includes a skewed divider, a semi-circle divider, a wave divider, a spikes divider, a triangle divider and a curved divider. Most of these dividers are pure CSS and using the ::before and ::after p

Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back useful informationYou can use dark themeWhat you can do with signing up

先日、ウェブフロントエンドについて理解するためのただ一つの方法を記事にしました。それは「古い知識に頼るな。公式を読め」でした。たった一つの方法です。これをできない人は必ず行き詰まります。公式をひたすら読み込むことができる人は、たぶん大丈夫でしょう。 今回の記事は、その先にあるものです。 モダンフロントエンドの重要性ここでは少し前回の記事のおさらいをしておきます。 2020年のソフトウェアエンジニアリングの世界ではウェブ技術の重要度は増すばかりです。もちろんウェブ技術というのは広い分野です。ウェブ（HTTP/HTML/JS/CSSその他）によるサーバー・クライアント型のソフトウェアは、莫大な市場を背景にどんどか技術が投入されています。 ウェブ技術の中でも、ここ数年はフロントエンド技術の比重がとても大きくなりました。前回の記事にも書いた通り、少なくとも50%以上の影響力を持っています。 ソフト

はじめまして、昨年の12月に入社しました根岸です。 UZABASEに入社する前はフロントエンドエンジニアとして働いており、ここ1年間くらいはReactとTypeScriptの開発ばかりやっていました。 今回はフロントエンドのコンポーネントを設計するときに気をつけていることについてまとめます。 対象読者 Propsの名前に一貫性をもたせる 標準DOM要素と同様の役割を持つコンポーネントのpropsは標準DOM要素に合わせる レイアウトをコンポーネントに切り出す インタラクティブな部分もコンポーネント切り出す 単一責任を意識してコンポーネントを作る propsを増やすことでコンポーネントのバリエーションを増やさない まとめ 対象読者 ReactやVueなどフロントエンドフレームワークで開発している人 コンポーネントの設計に自信がない人 拡張性の高いコンポーネントを作りたいと思っている人 Pro