はじめに こんにちは@Sicut_study (Watanabe Jin)です。 去年の10月頃にReactのロードマップを投稿しておかげさまで1000いいねもすぐそこになりました そこから私自身も状況がかなり変わり、大好きなReactを使ってプログラミングを教えるスクールを運営しております。 エンジニアになりたい完全未経験の方や、すでにエンジニアだけどもっと自由にプログラミングができるようになりたい人をたくさん教えてきました。 👇メンバーの記事はこちらにあります その中である程度この流れで学習をすすめていけば1-2ヶ月程度でReactで自由にサービスを作れるレベルに再現性をもってレベルアップすることができると確信がもてたので、 実際にやっているカリキュラム(React部分)をすべて紹介します ロードマップは完全未経験でもできるようなものになっていますのでわかる箇所は飛ばしてもOKです。
執筆 山内 直 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）に所属するテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に従事。屋号は「たまデジ。」。著書に『Bootstrap 5 フロントエンド開発の教科書』、『作って学べるHTML＋JavaScriptの基本』など。 監修 山田 祥寛 静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「独習」シリーズ、「これからはじめるReact実践入門」、「改訂3版 JavaScript本格入門」他、
テキストをホバーしたときの変化やアニメーションをつくることは、どのようなサイトをつくっていてもほぼ必ず行う工程ではないでしょうか。 テキストがリンクであることをユーザーに伝えるという点では、ブラウザのデフォルトスタイルのような下線のみで十分な場合もあると思います。 しかしそれだけではなく、変化をつけてよりわかりやすくしたい場合や、サイト全体の雰囲気に合わせたい場合にちょっとしたアニメーションが効果的です。 今回はHTMLとCSSのみで作成できる、シンプルながら少し目を引くアニメーションをテーマに実装例を紹介します。 ▼今回紹介する実装例一覧 とくに、以下のようなデザイナー／エンジニアにとって参考になれば嬉しいです。 HTMLとCSSのみでどのようなホバー時のアニメーションができるのか知りたい 透明度の変化や、下線のつけ外し以外の実装例の引き出しを増やしたい ※今回の実装例では主にヘッダー／
はじめに みなさんは何か新しいスキルを得るときにどのように学習するでしょうか？ 私はプログラミングコーチングJISOUで多くのジュニアエンジニアとカウンセリングをする中で8割以上の人がUdemyで学習すると言っていることに気づきました。 そこで今回は私がいままでやってきた35個の講座の中でこれはやってよかったと今でも思えるものを紹介していきます。Udemyはその人が学習している技術や興味のある技術でないと参考にはしづらいと思いますが、おすすめを学習することは時間の観点でものすごい価値があると考えているので参考にしてみてください！ Udemyの怖いところ Udemyはとても恐ろしいサービスです 以前にも以下の記事を投稿して話題になりました。 ぜひ読んでほしいのですが、ざっくり解説すると 「Udemyは1本終わらせるのに数十時間単位で時間を使うので、その使い方を間違えると時間の損失が大きい」
【エンジニアの日常】これが私の推しツール！〜日々の開発を豊かにするおすすめツール〜 Part1 - Findy Tech Blog
こんにちは。 Findy で Tech Lead をやらせてもらってる戸田です。 突然ですが皆さんは、開発をするうえで欠かせないツールやOSSはありますか？ キーボードやマウス、マイクといった物理的なツールは机を見ればわかりますが、他のエンジニアがどういったツールを使って効率化しているかは、その人の画面を見ないとわかりません。 そのため、他のエンジニアがどういったツールを使って効率化しているのか、実は意外と知らないということが多いのではないでしょうか？ そこで今回は 推しツール紹介 と題して、弊社エンジニア達が日々の開発業務で愛用しているツールやOSSを紹介していきます。 それでは見ていきましょう！ 推しツール紹介 戸田 git-cz git-cz-for-api-developer 新福 Nx vscode-spell-checker 森 Rectangle Hammerspoon Vi
本記事は AWSアワード記念！夏のアドベントカレンダー 7日目の記事です。 🎆🏆 6日目 ▶▶ 本記事 ▶▶ 8日目 🏆🎆 すっかり夏ですね、単純に嫌です。 日が落ちないと外に出るのも厳しい暑さですが皆様いかがお過ごしでしょうか。 西です。 今年は無事 2024 Japan AWS All Certifications Engineer に残れましたので AWSアワード記念！夏のアドベントカレンダー 7 番手です。 はたしていつまで All Certifications Engineer に残り続けられるのでしょうか。 さて、本題です。 今回も例によって Amazon CloudFront (CloudFront) についての記事です。 CloudFront はリクエストのあった Web コンテンツをキャッシュすることが主な役割です。 しかし、コンテンツにはキャッシュして良いものと
chrome拡張機能の『x-zombie-killer』を導入したらインプレゾンビ全員消え失せたのでガチ有能過ぎる→｢消したゾンビの数が討伐数みたいに表示されるの好き｣
セカヤサフリーランスエンジニア&Web制作者💻小林 秀樹 @hideki_climax フリーランス8年目 | 「世界一初心者に優しい」→セカヤサ 初心者が5年後も10年後も仕事を奪われない人になるための発信中。 HTML/CSSが一番得意。 JavaScriptﾁｮｯﾄﾃﾞｷﾙ 技術ブログ：itokoba.com セカヤサBooks：zenn.dev/hideki_climax?… tan-band-c66.notion.site/37abe7077b184b…
ChatGPT Artifactsができた？ GPT-4oでもClaudeみたいな楽しいプロンプト開発ができるのだ（CloseBox） | テクノエッジ TechnoEdge
この問題を解決するにはどうしたら良いか？ ChatGPTにもGeminiにも毎月お布施をしているし、彼らも同レベルの機能を持っているのだから、Claudeの休眠期間中はそっちを使えばいいのではないか。 そう考えていたところ、良い助け舟が。 ChatGPTにArtifacts機能を追加しますよ、というソフトの開発者からメンションが飛んできました。 このソフトはGitHubで公開されているので、普段使っているM1 iMacにインストールしてみました。git cloneしてNode.jsをインストールしてという、自分にとってはなかなかハードルの高いインストール方法でしたがなんとか動くようになりました。 使うにはOpenAIのAPI Keyが必要です。つまりChatGPT-Artifactsという名前ではありますが、実際はAPIで呼び出しているわけです。ChatGPTっぽいプロンプト操作でGPT-
真にチラつかないダークモードをついに実現したぞ。実現方法と気付きを書く2024/07/14 14:36 nextjsreact このサイトはダークモードに対応しています。なぜならダークモードは基本的人権だからです(要出典)。 しばらく、サイトに訪問した直後ライトモードとダークモードが切り替わってチラつく現象が発生していました。これを改善したので、実装方法と気付いたことを残しておきます。 ダークモードの実装方法一般に、ダークモードの実装方法は3タイプあります。 OSによるモード設定を反映する メディアクエリー@media (prefers-color-scheme: dark)を使うと、OS側でダークモードを指定している時だけ有効になるスタイルを書くことが出来ます。 JavaScriptでも判定が必要な場合はmatchMedia("(prefers-color-scheme: dark)")
6万5000人以上の開発者に「好きな言語」「好きなOS」「好きな開発環境」「好きなAI」を聞いた年次調査「2024 Stack Overflow Developer Survey」の結果が公開される
開発者のためのコミュニティ「Stack Overflow」が実施した年次調査「2024 Stack Overflow Developer Survey」の結果が公開されました。6万5000人を超える開発者が、コーディングやAI、使用および学習したいと考えるテクノロジーやツール、職場での体験などについて回答しています。 2024 Stack Overflow Developer Survey https://survey.stackoverflow.co/2024/ まず、回答者の最終学歴は以下の通りで、41％が学士号を、25.6％が修士号を取得しています。Stack Overflowは「開発者の66％が学士または修士の学位を持っているが、学校でコードを学んだ開発者は49％に過ぎない」とも指摘しています。 コードを学習するために最も優先する選択肢を問うた項目では、「その他のオンラインリソース
Webサイト制作において面倒で時間のかかる作業を効率化したい方へ。 この記事は、CSSコードを手軽に生成できる便利ツールをまとめた最新版リストで、Web制作を快適、楽にしてくれるツール68個が揃っています。 以前CSS便利ツールを集めた厳選リストの公開が2021年。あれからおよそ3年のあいだに話題となったツールを中心に紹介しています。 日頃のワークフローに活用して、ストレスのないクリエイティブな制作ライフを実現しましょう。 Web制作の面倒におさらば、CSS時短ツール厳選リスト CSS pattern backgrounds ジグザグやサークル円などシンプルな幾何学模様をつかったCSSパターンをコピペで利用できるオンラインツール。 CSS Polka Dot Generator ポルカドット柄を作成、カスタマイズできるCSSツールで、影を設定するとよりレトロな印象に仕上がります。 CSS
次世代Web BandlerのFarmが熱そう
はじめに 昨今、ビルドツールは様々なものが開発され、いかに高速化するか、開発者体験を上げられるかが注目されているように思います。2024年6月にState of JSが公開され、その中でBuild Toolsはwebpackが最も使用されており、次いでViteがランキングしています。 Viteの伸びがすごいですね...🔥 ビルドツールも様々ありますが、2024年4月にFarmというWeb Bandlerのv1.0がリリースされました。 気になってドキュメントサイトを覗いてみるとなんだか良さげな雰囲気を感じたので、Farmの特長と推せるポイントをまとめてみようと思います。 やること、やらないこと やること Farmの紹介 Farmの特長とおすすめポイントの紹介 やらないこと Farmの導入方法や詳細について （ドキュメントがわかりやすい） Farmとは？ Farmは、webpackやVit
HTMLで簡単に実装できるアニメーションで動くスピナー、カラー・サイズ・スピードのカスタマイズも簡単 -HTML-SpinnerElem
HTMLで簡単に実装でき、カスタマイズも可能なアニメーションで動くスピナーを紹介します。アニメーションGIFだと、カスタマイズはほぼ不可能ですが、このスピナーだとさまざまなカスタマイズができます。 外部ファイルとしてJavaScriptを記述し、あとはHTMLで簡単に実装でき、カスタマイズもHTMLで簡単にカラー・サイズ・スピードを変更できる優れものです。 HTML-SpinnerElem -GitHub HTML-SpinnerElemの特徴 HTML-SpinnerElemのデモ HTML-SpinnerElemの使い方 HTML-SpinnerElemの特徴 HTML-SpinnerElemは、スピナーにアニメーション画像を使用していることにうんざりして、画像なしでHTMLでカスタマイズ可能なスピナーを実現するために作成されたものです。 HTML-SpinnerElem HTMLでカ
技術部の小池です。 2024年7月19日に 北欧、暮らしの道具店 を運営している株式会社クラシコムさんと合同勉強会を開催しました。 クラシコムさんとは SRE と データ基盤 領域の協業によるご縁があり、2019年にも勉強会を開催しています。 クラシコムさんの新オフィス 今回の勉強会は2024年3月に移転したクラシコムさんの新オフィスで開催しました。 白を基調とした開放的で広々とした空間でとても居心地がよかったです。 勉強会の様子 はじめに乾杯をして軽くピザを食べ、穏やかな雰囲気で発表が始まりました。 OpenAI/Gemini APIを使って EPUBを翻訳するCLIツールをつくってみた OpenAI/Gemini APIを使って EPUBを翻訳するCLIツールをつくってみた クラシコム冨田さんの発表です。 speakerdeck.com EPUB のデータ構造や OpenAI API
未経験からフィヨルドブートキャンプを卒業して、エンジニアになりました！ - すずかのプログラミング勉強記
はじめに 6月半ばに自作サービスのリリースをもって、フィヨルドブートキャンプ（以下FBC）を卒業しました。 加えて並行して行なっていた就職活動で、第一志望の企業より内定をいただくことができ、7/1よりWebエンジニアとして働きはじめました。 この記事では、FBCでの生活や就職活動の振り返りを書きます。 FBCに入会を検討している方、現在学習中の方に読んでいただけると嬉しいです。 はじめに 自己紹介 フィヨルドブートキャンプとは？ 入会まで 入会時の状況 FBCに入った理由 プログラミング歴 卒業までにかかった期間 カリキュラムについて Linux Ruby データベース Sinatra Rails JavaScript React チーム開発について 自作サービスについて 楽しかったこと ブートキャンプの開発に関われた ブログやLTでアウトプットできた 仲間ができた 大変だったこと 学習内
Claude 3.5のSonnetは、これまでのClaude3の上位モデルであるOpusよりも高い性能を持ち、 AIの性能を評価する複数のベンチマークにおいてChat GPT-4oを超えています。 Claude 3.5 Sonnetのベンチマーク結果 GPQAやMMLUなどは、AIの性能評価を行うために用いているベンチマークです。 Graduate level reasoning（大学院レベルの推論） GPQA（Graduate Level Expert Reasoning）： 大学院レベルの専門的な知識と論理的思考を必要とする質問で評価するベンチマーク Undergraduate level knowledge（学部レベルの知識） MMLU(Massive Multi-task Language Understanding)： 大規模マルチタスク言語理解(Massive Multi-ta
sponsored by Qmonus Value Stream アプリケーション開発に注力するための工夫をシェアしよう！ 導入 何について話すのか 開発環境を改善して、効率化することでアプリケーション開発に注力するため行った（行っている）取り組みについてお話します。 本記事はQmonus Value Streamの投稿キャンペーン記事です。 想定読者 レガシーな環境を改善している（していきたい）人 開発環境改善のアイデアが欲しい人 CI/CDやDevOpsよりな仕事に関わる人 どんな人が書いているか(自己紹介) 3年目のエンジニアでバックエンドを中心に担当（最近インフラも担当するようになりました） メインで扱う技術はPHP・TypeScript・AWS アプリケーション開発とAWSインフラ構築を担当する 受託開発が中心の企業に従事 記事で触れる取り組み（取り組んだ順） Dockerの導入
*本 note は、Google がハヤカワ五味さんにインタビューした内容を編集して掲載しています。ハヤカワさんには、Gemini の改善や活用のための知見をいただくため、アドバイザーに就任いただいています。また、Gemini を含む生成 AI の利用に関する説明は例示を目的としています。実際の回答結果については、ご自身で正確性をご確認いただくようお願いいたします。 こんにちは。Google の AI「Gemini（ジェミニ）」の公式 note 編集部です。 今回は、Gemini アドバイザーのおひとり、ハヤカワ五味さんのインタビューをお届けします。女性をエンパワーメントするファッションデザイナーであり、実業家として活躍するハヤカワ五味さん。 ハヤカワさんはこれまで 18 歳で起業後、ランジェリーブランド「feast」、フェムテック事業「ILLUMINATE」など、多数の事業を展開。202
はじめに Hello World...!! 平（@tairanobuhiko）と申します。 プログラミングスクールを卒業し、もうすぐ早2ヶ月が経とうとしてます。 エンジニア転職に向けて、少しでも自己アピールすることができれば、という思いでポートフォリオサイト制作をしました。 この記事では GitHub Pages でホスティングを行い、カスタムドメインを設定するまでの流れを備忘録的に記していきます。 GitHub Pagesとは... 静的なサイト（データベースを伴わないHTML / CSS / JavaScriptのみで構成され、リクエストに対して常に同じコンテンツを返すサイト）を無料で公開できるサービスです。 GitHub の github.io ドメインまたは独自の カスタムドメイン でサイトを公開できます。 対象のリポジトリの設定画面から数クリックで公開できる超便利なホスティングサ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【2024年最新版】0からReactを勉強するならこのロードマップに従え！ - Qiita
「第4のブラウザ言語」WebAssemblyが変えるフロントエンド開発 | レバテックラボ（レバテックLAB）
HTMLとCSSでつくる！ リンクテキストのホバー時アニメーション11選 - ICS MEDIA
やらないと後悔するUdemy８選 - Qiita
キャッシュ制御の観点で見る CloudFront - NRIネットコムBlog
真にチラつかないダークモードをついに実現したぞ。実現方法と気付きを書く | stin's Blog
Web制作の面倒におさらば、便利すぎるCSS時短ツールまとめ【2024年版】
クラシコムさんと合同勉強会を開催しました！ - KAYAC Engineers' Blog
Claude 3.5の最新機能Artifacts：使い方と実際の活用例を紹介
開発環境を改善するためにチームに提案して実践したこと - Qiita
いまこそ生成 AI ！ ハヤカワ五味さんの活用術｜Gemini - Google の AI
ポートフォリオサイトの公開と公開手順【GitHub Pages】