HTMLのvideo要素やaudio要素は、source要素を使って複数のリソースを指定することができます。実は、このsource要素の順番によっては、想定したリソースは決して読み込まれません。この記事では、正しい記述順序と、ブラウザが読み込んでいるリソースを確認する方法を書きます。 ベストプラクティス video要素では次の通りです。 <!-- this is best practice --> <video> <source src="myvideo.webm" type="video/webm"> <source src="myvideo.mp4" type="video/mp4"> <video> 上記の例だと、WebMが再生できるなるならWebMを、そうでないならMP4を読み込みます。 解説 2018年現在のHTMLでは、video要素・audio要素に、特定形式のリソースをサポ

初めに 私は独学でプログラミングその他について勉強をしていますが、基本的に知識を得るために金はかけません。調べれば何とかなるので。 私がプログラミングを始めるにあたって自分に投資したものは安いノートパソコンとマウスのみで合計金額は14600円（ノートパソコン14000円、マウス600円）ですね。 もちろんいいものはお金をかけなければ手に入りません。しかし、いいものというのはある程度のレベルにならなくては持っていても意味がほとんどないと思います。 実際にプログラミングの勉強を独学で始めると、なかなか教材を見つけることができず、え？こんないいサイトあったの！？もうちょっと早く見つけときゃあよかった！というものがめっちゃありましたので、これから独学でプログラミングの勉強をしたいという方に向けて、少しでもお役に立てたらと、紹介をしたいと思います。 というわけで、今回は私が感謝する神サイトおよびその

この記事はNuco Advent Calendar 2023の18日目の記事です。 はじめに 本記事ではGithubレポジトリTop28を紹介します！ Githubレポジトリは日々の業務や学習に役立てることが可能です。必要な機能や学習教材は、無料で利用出来る高機能なものがあるのなら積極的に利用して役立てるべきです。 以下の内容に分けて合計28個のGithubレポジトリを紹介します！ 開発用Githubレポジトリ 学習用Githubレポジトリ QOL高めのエンジニアとして日常を過ごしたい方は参考にしてください！ 弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。 また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、こちらまで。

はじめに 運が良いことに自分は今、今まで出会ってきたエンジニアの中で一番凄いと思う人と一緒に働けています。 今の会社で働けていてよかったな〜と日々感謝しつつ、一緒に働いている中でたくさんのことを勉強させていただいています。 そしてそろそろアウトプットせねば！（使命感）と思いこの記事を書いています。 今回は技術以外のことで学んだこと、大切だと思ったことを書いていきます。 （この記事の中で凄腕エンジニアさんのことはTさんと呼ぶことにします。） （どれくらい凄いのかも本当は書きたいですが、この記事の目的とは離れてしまうので省略します。。。） （本当は【凄腕エンジニア】という言葉でくくりたくないくらいすごいエンジニアさんです。。。） ドメイン知識、業務知識の大切さ 今自分が参加しているプロジェクトではTさんが業務要件の整理やヒアリング、システムの設計、DBの設計を手掛けているのですが、 ドメイン知

大量の画像を含むWebページは、一般に表示速度が遅くなりがちです。 imgタグを使って、普通に実装すると次のような現象が起きてしまいます。 画像の読み込みが終わるまでブラウザが重くなり、画面操作に支障が出る ネットワークやサーバーの負荷が瞬間的にひっ迫する PageSpeed Insightsで低スコアになる これだと、サイト利用者にとっても、サーバー側にとっても、いいことはないですね。 対処方法として、スプライト画像を使うとか、CDNを使うとか、Expiresヘッダを設定するとか様々な方法がありますが、Webフロント側でお手軽にできる対策が画像を遅延ロードできるJavaScriptライブラリ「Lazy Load」の導入です。 今回は、Lazy Load で画像を遅延ロードする方法を解説します。 遅延ロードとは？ 画像の遅延ロードとは、ブラウザの画面領域内に存在する画像のみをロードし、画面

こんにちは。 どうもしばひろです。 皆さんは、Webサイトをコーディングする時、文字サイズはどうやって指定してますか？ 「px」や「pt」などの絶対値ですか？ それとも「rem」や「em」などの文字サイズをベースとした相対値ですか？ CSSには色んな単位があり、色んな考え方があります。 一概にどれがベストだとかは言えませんが、僕は基本「rem」や「em」などの文字サイズをベースとした相対値で文字サイズを指定しています。 最近では、「もう、remやemなどの文字サイズをベースとした相対値じゃなくてpxでいいんだよ。」系のツイートやブログを目にすることが多いのですが、それでも僕は今現在は、rem や em などの文字サイズをベースとした相対値を使っています。 あ、決して 「px で font-size を指定しているサイトはダメだ！」とか、「今日から君も rem を使うんだ！」とか言うつもりは

はじめに 周りを見渡せば自分より優れたエンジニアは無限に存在します。 「自分よりも知識がある。」「自分よりも経験を積んでる。」「自分よりも・・・」 他人と比較をしている以上、自己肯定感の低下は否めないでしょう。 しかし、それは正しく自分を評価できているでしょうか？ この記事の目的は、目先の技術力ではなく自らの成長角度を基準に客観的な評価をすることで、本質的ではない比較から身を守る考え方を提案したいと思っています。 対象読者 若手エンジニア 未経験からスタートしたエンジニア 学生エンジニア 同期といえども経験年数は異なる 新卒で会社に入社して、まず意識する対象は「同期」でしょう。全体研修を終えてそれぞれ部署に配属をされ、すぐに圧倒的な結果を出す人が現れます。 すると大抵の人は焦りや遅れなどネガティブな感情を抱いてしまいます。 しかしそんな時は一度、GitHubの履歴を覗いてみてください。 も

はじめに 去年の6月に入社して、1年たったので転職から1年間やってきたことを振り返りたいと思います。 自分は運がよかっただけなのかもしれませんが、未経験のころに抱いていた未経験エンジニア転職と違ったので、これからエンジニア目指す未経験の方の1つの事例としてケーススタディになればと思います。 転職が決まった！ 転職が決まった時、エンジニアの友人と喜び合ったのを今でも覚えています。 私「転職きまったよ～」 友人「おーおめでとう」 私「フルリモートで未経験は1年研修があるらしいよ～」 友人「研修長くない！？有給プログラミングスクールじゃん」 私「提示年収これぐらいだった。1日7時半労働らしいよ～」 友人「！？」 ～4か月後～ 私「フルフレックスになった～」 友人「ファッ！？」 実際、今年の4月半ばごろまで研修をやっていました。(10ヶ月半ぐらい) 最初、「あ～これは、実際は3ヶ月ぐらい研修で現場

この記事はNuco Advent Calendar 2022の14日目の記事です。 VSCodeに必須の機能20個を紹介していきます。 インストール数と星の数は記事作成時点(2022年11月時点)のものです。 Japanese Language Pack for Visual Studio Code vscode-icons Code Spell Checker zenkaku Path Autocomplete Prettier - Code formatter indent-rainbow GitLens Git History HTML CSS Support Output Colorizer TODO Highlight vscode-random Atom One Dark Theme Trailing Spaces REST Client Live Server Jupyter

はじめに エンジニアとして成長し、「つよつよエンジニア」と呼ばれて周囲から評価されるエンジニアになりたいという若手エンジニアや学生の方は多くいると思います。 私は今までで数百人以上のエンジニアと一緒に仕事をしており、その中にはベンチャーや上場企業でCTO/VPoT/テックリードといった役職についている「つよつよエンジニア」も多くいます。 (かくいう私も組織マネジメント力よりは技術力を評価されてCTOをしていますし、今もコードを書いています)。 「つよつよエンジニアになるためにはどのようなアクションをとればいいか」という視点で述べられていることは多くても「成果物にどのような特徴があるのか」という観点で述べられていることはあまり無い印象です。 成果物の特徴さえわかれば、まだ自身がそのレベルまで到達できていなくても、成果物のレベルを引き上げることができます。 （世阿弥の「風姿花伝」でも「真似る」

はじめに こんにちは！今年4月にLITALICOに新卒入社した@mihotoyamaと申します。 LITALICO Engineers Advent Calendar 2021を盛り上げたい気持ちから、 勢い余って1日目に記事を書かせていただくことになりました。 今回は、エンジニア人生を踏み出したばかりの私がこの1年間に読んだ(+積ん読した)技術書を紹介したいと思います✨ 前提 私のバックグラウンド 医学系大学院で6年ほど研究していました。 RやPythonによるライブラリを利用したデータ解析や、シェルスクリプトでの作業の自動化はよく行っていましたが、 チームでプロダクト/サービスを開発するという経験はありませんでした。 そのため『自力で調べてなんとかする』のは慣れていても、 プログラミングの基本やセオリー、開発の工程、また情報工学についての知識がほとんどなかったため、 そのあたりは本を読

ReactやVue.jsなどのモダンフロントエンド開発技術は、実際のWeb開発の現場ではどのように使われているのでしょうか。フロントエンド開発を得意とするWeb制作会社なすび代表の菅沼辰弥さん、Web開発会社LeapIn代表でありプログラミング講師も務める外村将大さん、オフィス支援のSaaSサービスを多数提供するラクスでフロントエンド開発のリーダーを務める中田和宏さんに、その使い分けや使いこなしなど、現場のリアルな声をうかがいました。 外村将大 LeapIn株式会社　代表取締役／ソフトバンクにてシステム設計、開発、運用に従事する。独立後、Web開発会社LeapIn株式会社代表。CodeMafiaの名でプログラミング講師としても活動。著書に『独習JavaScript新版』。 https://leap-in.com/ Twitter：@codemafia0000 菅沼辰弥 株式会社なすび　代表

フロントエンドは次々と新しい技術が増えていきますが、実務でそれら全てを触る機会はありません。ここでは、あくまで個人的な趣味の領域の話として年内に触ってみたいフロントエンド技術をまとめてみました。 広く技術に触れたとしても実務で役立つことは多くないです。仕事に役立てるのであれば、業務の延長にある技術を中心に学んでいくのが良いかと思います。

はじめに Web技術は日進月歩で新しい技術が増えているが、実務でそれらすべてを触る機会はない。そこで、今回の記事では2023年下半期に赤の他人に勧めたいWeb技術を個人の独断と偏見で解説する。 対象者 これから何をすればいいのかわからないプログラマー 新しい技術に興味があるひと スキルセットを拡大したいひと タイトルでなんとなく気になったひと フレームワーク FastAPI FastAPIはPythonでAPIを開発するために開発された軽量のWebフレームワークだ。FastAPIでは、主に以下の特徴がある。 Node.jsやGo言語に匹敵する高速なアプリケーションを開発できる 構造が簡単(Flaskの影響を受けている) Pythonに型定義を含められる 環境構築がコマンド一つで終了する 非同期処理を簡単に実装できる Pythonで開発されているので、機械学習との相性が抜群 RESTとGra

Reactの学習を始めて2ヶ月少々経ったので、 現時点でのこれまでの学習を少し振り返っていこうと思います。 〜きっかけ〜 学び始めたきっかけは、単にWebアプリケーションを作ってみたいという興味からでした。 元々2023年の6月までWeb制作を学ぶためにスクールに通っており、 紹介もあって制作会社のアシスタントとしてもHPの制作に携わっておりました。 HP制作をしていくうちに、JsvaScriptをもっと深く学んでみたいという気になり本格的に学習を始めました。 当初はフロントエンドエンジニア転職という事は何も考えていなかったので、 とりあえずVueかReactの基礎講座みたいなものをYoutubeを使って学習して楽に感じた方を使っていこう。 と思い2つを比べた結果、 Reactが自分には合ってると思いReactのフレームワークを勉強していこうという事になった訳です。 こちらは自分のGitH

新卒1年目ながら、AWS認定クラウドプラクティショナーに合格しました！文系出身のIT未経験でインフラ知識がほぼない状態から、合格までの勉強方法を体験記として綴ります。「段階的に参考書を読むこと」「毎日手をつけること」という学習ポイントを踏まえつつ、点と点を繋げて広げる勉強法と初学者ならではの気づきを記していきます。 0．プロフィール 大学では政治学を学び、PCはwordやPowerPointをさわる程度 渋谷に本社を置くSIerに勤める新卒1年目エンジニア アプリ開発の部署に所属し、Javaに奮闘する 1年間に、本を40冊読み映画を60本見る 1．サマリー 学習をはじめる前（2019年9月頃の状態） 開発系部署に本配属されるも環境構築に苦戦 インフラの知識は新人研修で習ったのみ クラウドの知識・実務経験はなし 結果 AWS認定クラウドプラクティショナー　合格 2019年12月　727点 学

はじめに 株式会社LCLでフロントエンドエンジニアとして働いている「おとの」と申します。入社してから約3か月が経ちました。短かくもあり長くもありの濃厚な時間を過ごせた気がしています。 今回は、Web制作会社でコーダーとして働いていたわたしが、自社開発のフロントエンドエンジニアに転職した理由や経緯について紹介します。今では心の底から「転職してよかった！」と感じています。Web制作に携わっている方のキャリア形成の参考になればと思います。 前職のWeb制作会社での経験 前職はWeb制作会社のコーダー（マークアップエンジニア）として、約3年間勤めていました。 主な業務内容は以下になります。 HTML、CSS、PHP、JavaScript（jQuery）等を使ったWebサイトのコーディング WordPress等を用いたCMS構築 その他、軽微なディレクションを行ったり、ガワアプリをつくってGoogl

TL;DR 技術に興味がなくても、エンジニアとして生きていくことはできる。 対象読者 自分を技術に興味がない側の人間だと思う方 筆者について Webアプリケーションの開発エンジニア。主な仕事はプログラム詳細設計、画面設計、コーディング。 技術にあまり興味がない。 初めに エンジニア界隈では、以下のような主張がしばしば見られる。 休日に勉強するべきである。 最新の技術動向は常にチェックするべきである。 技術イベントには参加するべきである。 毎日コードを書くべきである。 レガシーな技術ではなく、モダンな技術を習得するべきである。 etc... そしてこれらの"べき論"がさらに加速すると、 「技術に興味がない人はエンジニアに向いていない」 という主張すら出現し、それに同調する声も少なくない。 最近、とあるSNSで以下のようなやり取りを見かけた。 駆け出しエンジニアの質問 休日に勉強するべきですか

新人の方によく展開させていただいている有益な情報をまとめておきます。今後も展開することがあるかもしれないため情報をまとめております。 あらたな、有益な情報がありましたら、随時追加してまいります。 有益な記事・論文・書籍等を執筆・紹介していただいた皆様に感謝申し上げます。 ちなみに、本記事に記載されている情報は、お困りごと・お悩みごとをお聞きしたとき・気づいたときに、そのお困りごとに対して参考になりそうなものだけを展開していました。この情報を一気に展開していたわけではございません。 コードリーディングについて [1]ソースコードを読むための技術 https://i.loveruby.net/ja/misc/readingcode.html [2]派生開発推進協議会 関西部会 スペックアウトチーム，「派生開発におけるスペックアウト手法の提案」，派生開発カンファレンス2015，2015 http

はじめに 今回の記事では、私の独断と偏見でエンジニアリングにおける必須の書籍を、以下の分野に分けて40冊共有する。 Web開発 行動経済学 ソフトスキル その他 対象とする読者 プログラミング初心者 どの書籍から読み進めればいいかわからないプログラマー なにか新しい書籍を読みたいひと なんとなくタイトルが気になったひと Web開発 『リーダブルコード』 良質なコードの原則と具体的なテクニックを丁寧に解説している。プログラミング初心者はまずこれを読むべき。良質なコード―要は、メンテナンスしやすいコードを書く上で重要なヒントを教えてくれる。コーディングで一生役立つ知識が満載だ。何度読んでも決して色褪せることのない不朽の古典である。 『14歳からのプログラミング』 図解付きでプログラミングの基礎(例：変数、関数、条件分岐)を理解できる。小難しい専門用語が一切なく、初心者でも問題なく理解できるよう