はじめに さいきんのWebはSPA技術を中心としたフロントエンドが賑わっていますね💪 従来サーバーサイドを扱っていた人もフロントを触る機会が増えていたり、これからプログラミングを学んでいく人も、フロントエンド領域に興味を持っているのではと思います。 そこで、フロントエンドの経験が浅い方や初学者向けに、おすすめのドキュメントや勉強すべき領域をまとめました。 とりあえず動けば良い段階から一歩進んで、フロントエンドエンジニアとして、良いアプリケーションを作るために必要な知識を浅く広く紹介します。 ※補足 新米と表記しましたが、実際には新卒や未経験でなく、新卒2~3年目の若手フロントエンドエンジニアやフロント分野に苦手意識のあるバックエンドエンジニアの方を対象としています。 数日で目を通せるような内容ではないため、マイルストーンやスキルセットの一つの参考にして頂けると幸いです。 フロントエンド入
まとめ 住所フォームの作り方 住所フォームを作るときには以下の4つを押さえましょう。 オートコンプリート機能に最適化する 郵便番号フィールドは1フィールドにしてハイフン有無どちらも対応する モバイルUX優先なら郵便番号が入力されたら即座に補完。精度優先なら郵便番号補完ボタンを設置 住所フィールドは「都道府県」「市区町村」「町名以下」の3フィールドが基本。「建物」フィールドはオプション 本文 地域SNSのユーザー登録、ECサイトの配送先入力、資料請求、自治体サイトでの電子申請など、ウェブサービスを活用する上で住所入力は欠かすことができません。 住所入力をシンプルかつ正確に行えるような入力インタフェース（住所フォーム）は、離脱率を減らし、コンバージョン率を向上させる上で重要です。 郵便番号を入力すると対応する住所を自動入力する機能（郵便番号による住所補完）は、住所フォームの改善方法として最も効
勉強について エンジニアの皆さん。エンジニア以外の皆さん。 ・勉強しようと思っているけど、何を勉強したらいいかわからない ・ネットを漁っても良質な教材が出てこない ・他人がどんなことをしているか気になる こんなお悩みありませんか？ 今回は、有名企業の研修資料をまとめましたので、勉強のネタにしてみてはいかがでしょうか？ 新人、ベテラン関係ありません！ GWに暇を持て余したら、こちらをご覧くださいね サイボウズ サイボウズです。 22年度の内容が公開されていました。 ■モバイルアプリ開発 ■サイボウズのアジャイル・クオリティ ■MySQL - テストデータが偏るということ ■モブに早く慣れたい人のためのガイド ■テクニカルライティングの基本 ■ソフトウェアテスト ■セキュリティ ■ソフトウェアライセンス 講義資料と講義動画まで公開されています。 資料が苦手な人でも学習が捗りますね。 ラクス こ
シリコンバレーから失意の帰国をした十年選手のITエンジニア、生き残るため大学院で情報科学を学ぶ - Findy Engineer Lab
はじめまして、白山文彦（@fushiroyama）と申します。 インフラエンジニアとして5年、ソフトウェアエンジニアとして7年ほど働いて、現在は多国籍企業でクラウド関連の仕事に従事しています。 今年に入ってから、会社員としてフルタイムで勤務しながら、大学院の博士前期課程（修士課程）で情報科学を学んでいます。 この記事では、ITエンジニアとして10年以上もご飯を食べていながら、どうして今になって大学院生という道を選んだのか。業務で身についたものと、大学でしか学べないものとの違いは何なのか。そして最後に、それをどのように今後のキャリアにつなげていこうと考えているのか。そのあたりの葛藤や心の動きをシェアできたらなと考えています。 社会人大学院について 理系技術者は米国で圧倒的に尊敬されている 米国のエンジニアと日本のエンジニアの違い 学位と職業に強い関連がある米国 年齢に関係なく学位を目指すのが
Webサーバーアーキテクチャ進化論2023
はじめに 最近プログラマーとしてのキャリアに一区切りつけようと思っており、これまでのプログラミングの勉強の集大成となるブログを書きたくなったので書く。初めてプログラミングをして、フロントエンド開発をして、サーバーから値が返ってきたときは「どういう仕組みで値が返ってきたんだ？」と疑問に思っていた。ずっと理解したくて理解できていなかった。だからずっと勉強していた。そして最近になってようやく自分の言葉で説明できるようになった気がしたのでブログを書きたい。 2015 年版が自分の原点であり、この記事を書くモチベーションになった このような記事は実は過去に存在している。 FYI: https://blog.yuuk.io/entry/2015-webserver-architecture その記事はサーバーがどういう仕組みで動いていて、どのように進化し、2015 年に至るかを解説してくれた記事だ。自
本記事は、Engineering Manager Advent Calenderの１日目です。 はじめに エンジニアリングマネージャ(EM)と呼ばれる職務を設置する企業が増えてきました。 私たちの主催したイベントEOF2019でも700名近い方に参加していだき、また多くの方にご協力いただき成功裏に終わることができました。 EM Meetup/EM.FMなどのムーブメントの中心の一翼を担わせていただき、その高まりを感じる一方で不安も感じます。このエンジニアリングマネージャという職務は非常に多岐にわたるケースが存在していますし、必要だとされるスキルもまちまちです。そして、多くの場合、その企業のステージや状況ごとに求めるものは違います。また、求めていることを明文化することすらされていないケースも存在します。 このことから、エンジニアリングマネージメント自体が一時的な潮流として消費され、消えていっ
仕事力と技術力と不安に関する雑文
先日「育児など家庭の色々があって自分の時間が確保できなくなった。技術力を高めるための勉強ができなくて不安。」みたいな話を聞いた この悩みの直接的な解決方法としては先人の様々な体験談および対策みたいなものが世に出回っているからご家庭の状況に応じて参照すればいい思う 子育てと開発を両立するコツは「無理をしないこと」。パパ／ママエンジニアの働き方とは 子育てを支える技術 ─ フルスタックお父さんとエンジニアとしての成長を両立させるには ITエンジニアと子育てと勉強と それよりも「技術力を高めるための勉強ができなくて不安」という点が個人的には気になった 技術力とは何か？技術力が高くないとなぜ不安なのか？みたいな話 技術力は特に明確な定義があるわけではない 例えば著名なOSSにコミットしているとか低レイヤーのプロトコルやインフラをバリバリ実装してるとか競プロで上位勢だとか、挙げ始めたらキリがなく、そ
HTML5のLocal Storageを使ってはいけない（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Randall Degges - Please Stop Using Local Storage 原文公開日: 2018/01/26 著者: Randall Degges 日本語タイトルは内容に即したものにしました。 画像は元記事からの引用です。 初版公開: 2019/10/19 追記更新: 2024/04/05 -- リンク情報を記事末尾に移動しました 本気で申し上げます。local storageを使わないでください。 local storageにセッション情報を保存する開発者がこれほど多い理由について、私にはさっぱり見当がつきません。しかしどんな理由であれ、その手法は地上から消えてなくなってもらう必要がありますが、明らかに手に負えなくなりつつあります。 私は毎日のように、重要なユーザー情報をlocal storageに保存す
TypeScript入門『サバイバルTypeScript』〜実務で使うなら最低限ここだけはおさえておきたいこと〜
本書『サバイバルTypeScript』は実務でTypeScriptを使う開発者のための入門書です。そして、このページはTypeScriptの特徴を最速で把握できるよう、数百ページからなる本書のコンテンツをつまみ食いした要約です。 » 本書ついて詳しく知る » とにかく今すぐTypeScriptを書いてみたい TypeScriptとはJavaScriptのスーパーセットとなるプログラミング言語。静的型付け言語であり、プログラムの正しさが静的に検査できる。ライブラリやIDEなどの開発環境が充実しており、大きなエコシステムを持っている。Microsoftが2012年に開発し、オープンソースで公開した。» TypeScriptの特徴について詳しく知る » TypeScript誕生の背景について詳しく知る TypeScriptはJavaScriptのスーパーセットスーパーセットとは、元の言語との
日々権限設計で頭を抱えてます。この苦悩が終わることは無いと思ってますが、新しい課題にぶつかっていくうちに最初のころの課題を忘れていきそうなので、現時点での自分の中でぐちゃぐちゃになっている情報をまとめようと思い、記事にしました。 所々で「メリット」「デメリット」に関連する情報がありますが、そのときそのときには色々と感じることがあっても、いざ記事にまとめるときに思い出せないものが多々ありました。フィードバックや自分の経験を思い出しながら随時更新する予定です。 TL;DR（長すぎて読みたくない） 想定する読者や前提知識 この記事での権限とは 権限の種類 ACL(Access Control List) RBAC(Role-Based Access Control) ABAC(Attribute-Based Access Control) どの権限モデルを採用するべきか 権限を適用する場面 機能
プログラミング初心者のための JavaScript と Node.js の歴史、それを踏まえた勉強方法 2020年でJavaScript学ぶならきっとブラウザ向けJSガン無視していきなり初手node.js（ただし暫く何も足さない）がいいんじゃないかというメモ - min.t (ミント) Node.js を教えることについて、自分は賛成なんですが、その学習パスが整理されてないなと思っていたのと、学習パスがなぜ整理されていないかについて書きます。 はじめに 問題意識として、今のプログラミングスクールや独学勢が Ruby on Rails に偏っていて、 Node.js の人間としては、歯がゆく感じているんですが、実際 Node.js を教えるとしても問題も多いと認識しています。 歴史の話は、当時の実情や政治を省いて結果だけを書きます。具体的には第一次ブラウザ戦争、第二次ブラウザ戦争を言及しませ
この記事は、ウェブ技術の開発者（Java, PHP, Ruby, Go... 全て含む）のうち、少しでもJavaScriptを触ったことがあるけど、現代ウェブフロントエンドというか、特にウェブアプリケーション —— React, Vue, Angular など—— が分からない人に向けて、たったひとつの理解方法を提示するものです。 追記: ちなみに果てしなくどうでもいいですが、今回の記事が記念すべき100記事目らしいです。（Noteさん！その手のヤツはいっそ自動で記事にバッヂを表示するとかしてくれるとうれしいです！） 対象読者は、Java, PH(以下略）などのコードと一緒に、ほんの少しでもJSのコードを触った、見たことがあるというレベル感の人なので、既にReact, Vue, Angular などでガリガリコードを書いている人は対象ではありません。 あとホームページ屋さんとかウェブコーダ
はじめに 最近、Webの記事を見てるとReactだVue.jsばかりが上がっていてJSPやERBの話をしてる人は誰もいません。jQueryの記事ももちろん見ない。 つまり、Webだけ見る限りではほとんどの人がSPAを使ってるように見えます。 私はWeb界隈には居るもののどちらかというとバックエンド寄り、もっというとそもそもWebとか関係ない領域を見る事が多いので、ちょっとキャッチアップを兼ねていくつかの個人プロダクトにVue.jsを採用してみました。 jQueryくらいで頭が止まってたので。サーバサイドもマイクロサービスでAPI化が進んでるのでフロントもそれに合った技術を選ばないとですしね。 というわけで、今回はその中で得た知見というか、従来型のサーバサイドでのWeb開発をしていた人の視点でVue.jsをキャッチアップする流れで書いていきたいと思います。 まあ最終的な結論は正直「これすごく
ウェブサイトを閲覧していると「画像の読み込みが遅い」という場面に遭遇したことがある人は多いはず。画像はウェブサイトのパフォーマンスを左右する要素のひとつであり、ウェブ開発において取り扱いに注意すべきものです。そんな画像をウェブサイトで扱う際の最適化方法について、GoogleのエンジニアであるMalte Ubl氏が解説しています。 Maximally optimizing image loading for the web in 2021 https://www.industrialempathy.com/posts/image-optimizations/ ◆img要素にwidthとheightを指定する アスペクト比を維持したまま画像サイズを変更するには、「style」要素に「max-width: 100%」や「height: auto」と指定しておく手法がよく用いられます。この手法に加
10年モノのサービスをアーキテクチャから再設計─はてなブックマークがScalaとDDDを使う理由｜ハイクラス転職・求人情報サイト AMBI（アンビ）
10年モノのサービスをアーキテクチャから再設計─はてなブックマークがScalaとDDDを使う理由 10年以上運用されているサービスには、さまざまな技術的な負債が発生しています。今後の継続的な改善のため、いったん新規開発を止めて4年かけて全面的なリニューアルを実施した「はてなブックマーク」の開発者に、プロジェクトの課題や解決する手法などを聞きました。 改善1つに数カ月かかるなら全てを書き換えられないか 2000年代にトレンドだった開発手法の負債 過去の開発意図を探る考古学的手法 データセンター移行も見据えて刷新しよう ドメインモデル設計とScalaとマイクロサービス化 コアロジックにはScalaを採用 きちんとしたドメインモデルによる設計と実装を継続したい 段階的なリリースとデータの移行という2つの大きな課題 求められる機能に沿ったデータベーススキーマに再構築 新旧の2システムを維持しながら
このエントリは、2018年、2019年に公開したAWS全サービスまとめの2020年版です。これまではいくつかに分割して公開していましたが、1エントリにまとめてほしいという要望をもらっていたため、今年は1エントリに集約してみました。 こんにちは。サービスグループの武田です。 このエントリは、2018年、2019年に公開した AWS全サービスまとめの2020年版 です。これまではいくつかに分割して公開していましたが、1エントリにまとめてほしいという要望をもらっていたため、今年は1エントリに集約してみました。どちらがいいのか正直わからないので、フィードバックなどあれば参考にさせていただきます。 2020-01-08 リクエストがあったためAmazon Mechanical Turkを追加。 2018年まとめ 【2018年】AWS全サービスまとめ その1（コンピューティング、ストレージ、データベー
【150部突破🎉】最速で未経験からエンジニアになる！学習から転職までの完全ロードマップ【限定特典あり】｜苦しんでプログラミングを学んだ柴犬（くるしば）
【150部突破🎉】最速で未経験からエンジニアになる！学習から転職までの完全ロードマップ【限定特典あり】 ※はてなブックマークの総合人気エントリと、noteの「今日の注目記事」「先週もっとも多く読まれた記事」に入りました！ ※ただいま期間限定で1000円キャッシュバックのキャンペーンをしております はじめまして。 苦しんでプログラミングを学んだ柴犬こと、「くるしば」と申します。 このnoteでは、僕自身が挫折を繰り返しながらプログラミングを学習しエンジニアになったり、実務未経験の人たちを指導した経験から考えた0から最速でエンジニアになるための手法を公開します。 僕自身、プログラミング学習には2回の挫折経験があります。 ・何を勉強したらいいのか分からない ・勉強してることが理解できない ・この方法、教材で本当にいいのか分からない こんな状態を何度も繰り返し、挫折しては自己嫌悪に陥る日々からの
はじめに 本稿は、ソフトウェア開発を進める際に直面する様々な技術的な意思決定やライブラリ・フレームワーク・XaaS等を選択し正しく活用していくのかについての考え方をサポートすることを目的としています。「すべてにおいてこのようなワークフローを通じて検討すべきである」という主張ではありません。読者の抱える問題領域に応じて、必要な箇所を取捨選択するための１種の考え方を提供するものです。 そもそもアーキテクチャ・技術選定に時間をかけるべきか まず第一に伝えておきたいことは、技術選定やアーキテクチャ設計に常に慎重であるべきではないということです。ソフトウェアの規模やライフサイクルに応じて、そもそも時間をさく必要がないということも多くあります。書き捨てのシェルスクリプトにも読みやすいコードを求めて書くことは非常に重要ですが、だからといって組織だって議論・検討するようなものでもないのです。一方で、５年も
個人開発を学べる記事 23選
本記事で紹介されている記事はあくまで個人の独断・偏見に基づいたものであることは予め述べておきます。今回の記事で紹介する記事は、いいねの数がQiitaであれば4桁、Zennであれば3桁であるものを中心に紹介していきます。 開設後３週間で収益１０万円を得た個人開発サイトでやったことの全部を公開する 個人開発の面白さ、アイデアの作り方、個人開発でやってはいけないことや個人開発で収益を得るための具体的なテクニックまで解説されている。これから個人開発をやりたい人は絶対にこの記事を読むべき。 【夫婦で開発】1年かけて1週間を振り返えるアプリを本気で開発してみた 夫婦でReact NativeとFirebaseで開発したタスク管理アプリをリリースした体験談。モックの作り方、役割分担などの方法を実例を踏まえて丁寧に解説されている。ただ単に自分が開発したアプリの特徴や使用した技術を書いているだけではなく、開
パーフェクトRails著者が解説するdeviseの現代的なユーザー認証のモデル構成について - joker1007’s diary
最近、パーフェクトRuby on Railsの増補改訂版をリリースさせていただいた身なので、久しぶりにRailsについて書いてみようと思う。 まあ、書籍の宣伝みたいなものです。 数日前に、noteというサービスでWebフロント側に投稿者のIPアドレスが露出するという漏洩事故が起きました。これがどれぐらい問題かは一旦置いておいて、何故こういうことになるのか、そしてRailsでよく使われるdeviseという認証機構作成ライブラリのより良い使い方について話をしていきます。 (noteがRailsを使っているか、ここで話をするdeviseを採用しているかは定かではないので、ここから先の話はその事故とは直接関係ありません。Railsだったとしても恐らく使ってないか変な使い方してると思うんですが、理由は後述) 何故こんなことが起きるのか そもそも、フロント側に何故IPアドレスを送ってんだ、という話です
OSSで世界と戦うために - ゆーすけべー日記
「日本人」を理由にしたくないし、「コードは全世界共通語」なのは分かっているけど、自分が日本人で日本語を母国語としていることはOSSにおいて不利になる。 この2年間のHonoの開発をしてきた経験で分かったことだ。 そこに目を瞑ってはいけないし、自覚することで世界と戦えるかもしれない。今回はそのことについて書こうと思う。 8k 現在、HonoのGitHubスター数は8,000を超えた。 これはとんでもない数字なんだけど、もっと伸びるべきで、早く1万を超えなくはいけない。 npmのダウンロード数は週間「46,000」とこれは相対的に低く、こちらも伸びるべきである。 数字が全てではないが、こうした数字は昨今のOSSにとって「一番の」指標であることは確かだ。 だから戦うことはこの数字を伸ばすことである。 なぜ「戦う」のか なんで「戦う」というおっかない言葉を使い、そして戦わなくてはいけないのか。 ま
以下はSimon Holdorf( dev.to/ Twitter / GitHub )による記事、9 Projects you can do to become a Frontend Master in 2020の日本語訳です。 9 Projects you can do to become a Frontend Master in 2020 Introduction あなたがプログラミングの初心者であるか、既に経験豊富な開発者であるかにかかわらず、この業界では、急速な変化に追いつくために新しい概念と言語・フレームワークを学び続けることが必要です。 たとえばFacebookが4年前にオープンソース化したReactは、既に世界中のJavaScript開発者にとって第一の選択肢になっています。 もちろんVueとAngularにも多くのフォロアーがついています。 さらにはSvelte、Next
以下はSimon Holdorf( dev.to/ Twitter / GitHub )による記事、9 Projects you can do to become a Frontend Master in 2020の日本語訳です。 9 Projects you can do to become a Frontend Master in 2020 Introduction あなたがプログラミングの初心者であるか、既に経験豊富な開発者であるかにかかわらず、この業界では、急速な変化に追いつくために新しい概念と言語・フレームワークを学び続けることが必要です。 たとえばFacebookが4年前にオープンソース化したReactは、既に世界中のJavaScript開発者にとって第一の選択肢になっています。 もちろんVueとAngularにも多くのフォロアーがついています。 さらにはSvelte、Next
エンジニアの辛い仕事をいい感じにする技術 - コンサルの仕事術・思想から学べること - Lean Baseball
エンジニアの辛い仕事を消す本かも（多分） 2014年の秋にリクルートに転職してから何社か経て今も自社サービスのエンジニアとして働いてるマンです. リクルートに入ったとき, そしてその後の転職先*1などなどで, 社内外問わずのコミュニケーションの辛さ. 社内調整, 顧客折衝etc... コードじゃなくて, ドキュメントを書く仕事の辛さ. プレゼンテーション・説明そのもの. 技術わかんない上司に説明(ry*2 みたいな経験をたくさんしました&これはエンジニアをやってたら誰でも直面する事態かなと思います, 自社サービス企業だろうがSIer/受託開発の企業だろうが. そもそも, 昔の調査にもそんな雰囲気ありますし, おそらく今もさほど変わらないでしょう. ...ということを, 前回のブログの執筆中および反響で改めて思い*3, そういえば自分はこの辺, 元々ITコンサルタント*4だった時に学んだこと
大幅にリニューアルされた Next.js のチュートリアルをどこよりも早く全編和訳しました - Qiita
数日前（4/21頃）に Next.js のチュートリアルが一新されました。 Next.js は 3 月頭に ver 9.3 がリリースされ、ビルド時に静的に HTML を生成する関数などが追加されるなど、今までよりもかなりパワフルになり、いわゆる JAMstack と呼ばれるようなアプリケーションを作りやすくなりました。 そのバージョンアップに対応するかたちで、チュートリアルも大幅に書き直されました。 参考（開発チームの @chibicode さんのツイッター） Next.jsの公式チュートリアルを最新版に沿ってゼロから書き直しました! 🎓英語ですが初心者向けです! ⚛️最近導入されたgetStaticProps等の関数や、 🎨CSS Modulesの解説をしています! 🗣ブログを作りながら学びます 🤗ご感想お待ちしております!https://t.co/R4j9vpAQoc — S
まさかソフトウェアエンジニアの自分が本業で家を建てる仕事をするとは思っても見ませんでした。２年前、DeployGateの米国オフィスを自分で施工した事をきっかけに声をかけてもらい、以来、技術アドバイザーとして携わらせて頂いていた米国の建築スタートアップ「HOMMA」に本格的に参加し、ソフトウェア・アーキテクトとしてアメリカでスマートハウスをソフトウェア面から設計して家を建てる仕事をはじめました。趣味の電子工作から初まり、深センでの独自設計ハードの少量生産、アメリカでのオフィスの施工と来て、次はまさかの本物の建売住宅の開発です。プログラミングの傍ら取り組んできた物理的な「ものづくり」のサイズがどんどん大きくなってきて楽しい限りです。制御用のファームウェアやアプリ、Webシステムを書きながら、ヘルメットを被って建設現場で大工職人さんへ施工の指示出しをしたり、信号線や電力系統の配線を設計して建築
【JS完全に理解した】JavaScript PrimerとプログラミングTypeScriptとレガシーフロントエンド安全改善ガイドを読んでみた - give IT a try
はじめに 僕は仕事でRuby on Railsを使ってWebアプリケーションを開発しているので、JavaScriptはそれなりに使えます。 ですが、サーバーサイドで使っているRubyに比べると、JavaScriptの習熟度はそれほど高くありません。 とくに、文法が一気にブラッシュアップされたES2015（ES6）以降の知識は「なんとなく把握はしているが、あくまでなんとなく」といった感じです。 また、最近よく名前を聞くようになったTypeScriptも「名前は知っているが使ったことはない」というのが現状です。 というわけで、「そろそろちゃんと勉強しておかないと」という思いから、以下の本を購入してみました。 JavaScript Primer 迷わないための入門書 (アスキードワンゴ) 作者:azu,Suguru Inatomi発売日: 2020/06/10メディア: Kindle版プログラミ
Ajaxから始まった一つの時代の終わり
最近の流れを見ていての感想文なので、ideaとして投稿します。筆者のバックグラウンドとしては、Remixの商業記事を書いたり、App Routerの商業記事を書いたりしている人です。 さて、筆者は2022年の秋から、社内システムではありますがRemixをプロダクション運用しています。また、Next.jsのApp Routerについても、パラダイムとしてはRemixにインスパイアされた部分が多い[1]おかげで、順調にキャッチアップできています。 RemixとApp Routerは、ルーティングとデータフェッチを高度に統合しており、Progressively Enhanced SPA（PESPA）と呼ばれることもあるそうです。PESPAについては、次の記事が話題になりましたね。 このPESPAであるRemixを実運用する中で、フレームワークの手触りが近年触ってきたものと大きく違っている点があっ
ブラックフライデー＆サイバーセール開催！ Udemyでは何を買う？ 編集部の2021年イチ押しトピック10選 - はてなニュース
新型コロナウイルスの影響で、リモートワーク（テレワーク）やオンラインでの学習といった働き方・学び方の大きな変化は2021年も続いています。そんな2021年もあとわずか。やり残したことや学び残したことはありませんか？ オンライン学習プラットフォーム「Udemy」では、2021年11月19日（金）～2021年12月1日（水） の間、年間最大のセール「ブラックフライデー＆サイバーセール」 を開催します！ 対象の講座がなんと1,200円から購入可能になります。 ブラックフライデーセールは11月19日（金）～11月26日（金）、サイバーセールは11月29日（月）〜12月1日（水）の開催です。11月27日（土）〜11月28日（日）はセール対象外なので、ご注意ください。 講座は買い切りなので、おトクなこの期間に気になる講座を購入しておいて、時間ができたときに自分のペースで学んでみるのもいいかもしれません
面倒なJavaScriptコードのとりまとめがこれ1つで可能に、「webpack」入門 | さくらのナレッジ
最近JavaScript関連の開発で採用が進んでいる「webpack」は、JavaScriptファイルの変換や結合といった操作をコマンド1つで実行できるツールだ。本記事では、webpackとは何かという基本的な概念から導入方法、実際の利用例などを紹介する。 モジュール管理機構の不足や未サポート機能の問題をツールで解決する「webpack」 今日のWeb開発においてJavaScriptの利用は避けることができないが、JavaScriptのソースコードをどのように管理・デプロイすべきかという問題に対しては、まだ決定的な解決策が生まれていない状況が続いている。その根本的な原因の1つには、最近までJavaScriptにおいて普遍的に利用できるモジュール管理システムが存在しなかったことがある。 一般的なプログラミング言語では、大規模なプログラムを実装する際に作業性やメンテナンス性を高めるためプログラ
こんにちは。ソウゾウの Software Engineer (CTO) の @suguru です。連載：「メルカリShops」プレオープンまでの開発の裏側の1日目を担当させていただきます。 7月末にメルカリShopsという新しいサービスが公開されました。メルカリShops は、2021年1月にメルカリのグループ会社として設立したソウゾウが新たに立ち上げたサービスです。 この記事では、メルカリShops を作るにあたり、どういった技術、アーキテクチャを選定したのか、その背景と意思決定をまとめて共有したいと思います。 monorepo まず最初にプロジェクトをスタートしたときに、サービスのリポジトリを作るのですが、迷わず monorepo による構成を選択しました。monorepo は、システムを構成する複数のコンポーネントの独立性を保ちつつ、全ての構成を1つのリポジトリで管理する手法です。今
GitHubがnpmの買収を発表、JavaScriptのパッケージ管理サービス。将来的にはGitHubとnpmを統合へ
GitHubがnpmの買収を発表、JavaScriptのパッケージ管理サービス。将来的にはGitHubとnpmを統合へ GitHubは、JavaScriptのパッケージ管理サービスを提供するnpmの買収を発表しました（GitHubの発表、npmの発表）。 We’re excited to announce that @npmjs will be joining GitHub. Millions of JavaScript developers rely on npm, and we’re honored to support this community in a new way. Learn more at https://t.co/MsQMc1rIJd pic.twitter.com/CUuPojccpm — GitHub (@github) March 16, 2020 npmはNo
フロント開発を炎上させてしまった話
はじめに お久しぶりです、皆様のサンドバックが帰ってまいりました。 投稿ができていない期間、Nuxtにボコボコにされて裸足で逃げ出し、逃げた先のReactにも強烈な左カウンターをお見舞いされました。 本来であれば、このような場所に投稿することすらはばかられる内容ですが、敢えて書きましょう。 私はフロント開発を炎上させた愚か者です。 なぜ今懺悔するのか Twitterでこんな投稿を見ました。 確かに、実務で得られる経験は、とても大きく得難いものです。 当然、ご迷惑をおかけしてしまうことは、だれであろうとあるでしょう。 ただし、その「ご迷惑」の大きさについて、我々は知っておかなくてはなりません。 見えている地雷を踏んでしまうようなモノ好きもいないでしょう。 特に、この手の地雷は強力ですからね。 塵となって吹き飛んだ私の命が、新たな浅瀬の民の糧となることを祈っています。 具体的に何が起こったのか
ブラウザからDBに行き着くまでただまとめる
はじめに あなたはブラウザからデータベース(DB)に情報が行き着くまでにどんな技術が使われているか説明できますでしょうか？ どのようなプロトコルが用いられ、どの技術を駆使してサーバと通信しているのか、Webサーバでは何が行われ、どのようにして負荷が分散されているのか、トランザクションはどのように管理されているのか、そしてデータベースではシャーディングや負荷対策のためにどのような対策が取られているのか… なんとなくは理解しているものの、私は自信を持って「こうなっている！！」とは説明ができません。 そこで今回は「大規模サービス」を題材としてブラウザからデータベースに至るまでの、情報の流れとその背後にある技術について、明確かつ分かりやすく解説していきたいと思います。 対象としてはこれからエンジニアとして働き出す、WEB、バックエンド、サーバーサイド、インフラ、SREを対象としております。 1.
そろそろWebエンジニア3年目の折り返しになるので、Webエンジニアとして働く中でこれまで読んできた情報たちをまとめようと思い立ちました。 エンジニア3年目の今だからこそまとめられる情報として、「エンジニア1年目の１年間で読んでおきたかったな〜。」という本と記事をまとめておきます。 まとめ始めたら楽しくなってしまい、情報量が多くなってしまった...。全部手に取るのは不可能だと思うので、サーっと目を通して見て興味が湧いた本や情報を手にとっていただけると良いかと。 これからWebエンジニアになる人、Webエンジニア1年目の人の参考になれば幸いです。 これは何？ Webエンジニア1年目が仕事を進める上で絶対に求められるであろう知識を、技術力・Web知識・仕事の進め方・キャリアの観点からまとめました。 「これだけ読んでおけば絶対大丈夫！！」という安易なものではありませんが、「どんな知識を学べばいい
はじめに 今年のエンジニア研修の担当をしたkurotakyとtokkyです。ペパボのエンジニア研修2021がはじまっていますという記事を書いてあっという間に時が経ち、先日研修が終わったので研修資料を公開します。各研修の講師からコメントをもらっているので、ぜひ読んでいってください！ 研修を実施するにあたって、専門的な内容を学んでから現場に入る方法や、幅広い技術層に触れてから現場に入る方法など、さまざまなスタイルがあります。ペパボでは最新の技術の幅広く触れてOJTに入っていくやり方を選択しています。それはなぜかというと、GMOペパボのわたしたちが大切にしている3つのことの中で、「みんなと仲良くする」ということ話がありますが、みんなと仲良くするというのは、エンジニアという職種だけでも100人以上になり、そのみんなと仲良くするのは実際は結構難しいと思います。過去にCTOのあんちぽさんが2017年の
Help us understand the problem. What is going on with this article? メリークリスマス！ この記事はFirebase Advent Calendar 2019の25日目の記事です。 これはなに？ この1年、本を書いたり勉強会で登壇したりいろいろやってみた結果を振り返ってみると、本当に多くの人がFirebaseにふれるようになったなぁと思います。圧倒的な開発者体験の良さをもってバックエンドの関心事を一手に引き受け、アプリケーション開発を劇的に高速化してくれるソリューションとして、Webアプリでもモバイルアプリでもバックエンド第一の選択肢として確固たる地位を確立しつつあるのではないでしょうか。 それ自体はとてもいいことなのですが、Firebaseの強さを活かすためのアーキテクチャに関するアイデアはあまり表に出てきていないのではな
＊この記事は2020年3月頭に書かれている記事です どうも、Vueはいいぞおねーさん(自称)です。 Vue.jsは私に言わせるととてもよいフロントエンドフレームワークであり、その理由の一つにプログレッシブフレームワークである(段階的に利用する機能を増やしていくスタイルにマッチしている)ものとして、フロントエンド初学者の皆さんにもおすすめしたい代物です。 しかし、現在までに様々なプラクティスが考案されたがゆえに、「最初からベストな方法で始めたい」という思いから一度にたくさんのことに挑戦してしまいたくなりがちです。 そしてそれはプログレッシブという思想に反するもので、結果として挫折を生んでしまっているのではないかと思いました。 そこで今回は「知るのを後回ししてよいこと」として、Vue.jsへの入門する方へのアドバイスを独断と偏見で不要度という指標でまとめてみました。 不要度というネガティブな指
営業、受注、制作、納品、運用と、ウェブ制作の活動は長期に渡り、そのタスクの種類と量は膨大です。だからこそ、基本的なプロセスや使用するドキュメントなどを明確に定義しておかないと、サービスの品質が担当者により大きく変わることになります。 ベイジは社員がまだ5名の頃、各人に委ねた進め方によって以下のようなトラブルが頻発していました。 ミスが発生しても「次から気をつける」と精神論で終わらせてしまう 担当するディレクターやクリエイターによってタスクの抜け漏れが起きる 担当者それぞれが属人的な進め方をしてて品質が安定しない 役割が不明瞭なグレーゾーンのタスクが放置されてしまう 創造的な仕事の時間が、ルーチンや計画にないタスクに奪われてしまう 新しい社員が入る度に同じことを教えないといけない これら問題を解決するため、2014年頃からワークフローを整備するようになりました。ちなみに私が入社したのはこれ以
Webフロントエンド入門
まずはじめに HTML、CSS、JSを学んだ後にモダンなweb制作を行う上でこれから何を学べばいいだろうと手探り状態だった過去があるので、今同じ悩みを抱えている方に向けてこの記事を書こうと思いました。また、自分自身が2023年に多くのことを学んだのでそれの整理になればという思いもあります。 あと、いいね、コメントいただけると記事作成の励みになります😇 この記事の対象者 HTML, CSS, JSはある程度理解した モダンなWeb制作を行いたい これから学ぶべき技術 React, Next.js 一度は聞いたことある人も多いと思います。これは、Webサイトを効率的に開発することを目的に作られたJSのフレームワーク(正確にいうとReactはライブラリ)です。 ReactはFacebook社が開発したもので、それをVercel社がより使いやすくしたものがNext.jsです。 作成するものによっ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
すべての新米フロントエンドエンジニアに読んでほしい50の資料 - Qiita
これだけは押さえよう！住所フォームの作り方 - ケンオールブログ
GWの休みに勉強しよう！！！有名IT企業の研修資料まとめ - Qiita
エンジニアリングマネージャ/プロダクトマネージャのための知識体系と読書ガイド - Qiita
アプリケーションにおける権限設計の課題 - kenfdev’s blog
プログラミング初心者のための JavaScript と Node.js の歴史、それを踏まえた勉強方法
現代ウェブフロントエンド（ウェブアプリケーション）について理解する唯一の方法｜erukiti
レガシーおじさん、SPAを始めてみた。そして限界を知る
Googleのエンジニアが「ウェブサイトの画像読み込み」を最適化する方法を解説
【2020年】AWS全サービスまとめ | DevelopersIO
技術選定/アーキテクチャ設計で後悔しないためのガイドライン - Qiita
2020年のフロントエンドマスターになりたければこの9プロジェクトを作れ - Qiita
2020年のフロントエンドマスターになりたければこの9プロジェクトを作れ - Qiita
ソフトウェアエンジニアとして家を建てる仕事をはじめました
メルカリShops の技術スタックと、その選定理由 | メルカリエンジニアリング
Webエンジニア1年目の自分に捧げたい本・記事を超まとめ - Qiita
GMOペパボのエンジニア研修2021の資料を公開します - Pepabo Tech Portal
君はまだ平成のアーキテクチャを使ってるのか？僕はFirebaseと令和の時代に行くぞ。 - Qiita
今からVue.jsを始める人のための「知るのを後回しにしてよい」n個のこと - Qiita
ベイジのウェブ制作ワークフロー2021年版（約100のタスクと解説） | knowledge / baigie