エンジニアのキャリア

HTMLの head と header タグの意味と違いを理解しよう!

HTML, CSS, JavaScript

HTMLのタグには、<head> と<header>という非常に似ている名前のタグが存在します。名前は似ていますが、意味と役割は全く違うのできちんと区別しましょう。

結論から言えば、<head>はブラウザのため、<header>はユーザーのためのものです。フロントエンドエンジニアの面接でも、よく聞かれる項目です。

続きを読む

なぜReactではkey propsが必要なのか?

React

Reactで何かのリスト(arrayの中の要素など)をレンダーする際にkey propsをつけ忘れると、warningで怒られた、という経験のある人もいるのではないでしょうか。そして、なんとなくkeyをつけておしまい、という人が多いような気がします(過去の僕も含め。)

この記事で「なぜReactではkey propsを加える必要があるのか」を、まとめます。結論から言えば、key propsはパフォーマンスに影響してきます!

続きを読む

構造化データを追加しGoogle検索結果の表示にサイトナビゲーションを表示する方法

search engines

どうもフロントエンドエンジニアのワタです。

今日は、SEO関連のトピックです。グーグルで検索した際、色々な形式で検索結果が表示されています。画像のサムネイルが並んでいたり、サイトリンク検索ボックスが表示されていたりします。その中で、今日は構造化データを追加しサイトナビゲーションを表示する方法について、実装方法、データ形式の種類、テストツール、注意点などを解説します。

続きを読む

初心者向けReact入門!【おすすめチュートリアルと本を紹介します】

React

こんにちは!現役フロントエンドエンジニアのワタです。

今日は、僕自身も実務の開発現場で4年間ぐらい使用しているReactの入門向けチュートリアル、おすすめの書籍等を紹介します。

Reactを身につければ、当面仕事に困ることはないと思うので、これからフロントエンド、フルスタックエンジニアを目指す方にも大変おすすめなフレームワークです。

続きを読む

Chrome v76よりnative lazy loadingサポート開始!

native-lazy-loading

こんにちは、フロントエンドエンジニアのワタです。

ついに、Chrome v76よりnative lazy loadingのサポートが開始しました!!!そこで、Native lazy loadingの実装方法、おすすめwordpressプラグイン、ブラウザ対応方法をまとめます。

続きを読む