自己紹介～フロントエンド編～

フロントエンド

2024.04.19

自己紹介シリーズの第二弾は「フロントエンドエンジニアとしてのスキル」についてもう少し詳しくご紹介します！

言語

まずは開発言語についてご紹介します。

HTML

ルールや基本構造を理解し、下記のことなどが行えます。

入れ子のルールを理解し、適切なタグの使い分け
imgタグの中に「width」「height」「alt」「loading=”lazy”」「decoding=”async”」を入れたSEO対策
pictureタグを使い、デバイス幅ごとの画像の使い分け
formタグを活用したお問い合わせページの実装
カスタムデータ属性の活用
json-ldを使った構造化マークアップによるSEO対策

CSS

セレクタやプロパティを理解し、下記のことなどが行えます。

display: gridを使ったレイアウト
positionを使った要素の配置
maskを使ったSVGの切り抜き
レスポンシブデザイン(モバイルファースト)
marginとpaddingの使い分け

Sass(SCSS)

ネスト構造の記述を理解し、下記のことなどが行えます。

@mixinを使ったスタイルの再利用
@functionを使った自作関数の作成
@useを使ったSCSSファイルの呼び出し

JavaScript

記述方法を理解し、下記のことなどが行えます。

async、await、fetchを使ったAPIの取得
addEventListener()を使ったイベント処理
Intersection Observerを使ったスクロールアニメーション
mapやfilterを使った配列やオブジェクトの展開
if elseを使った条件分岐

ライブラリ

続いては、ライブラリについてご紹介します。

React

JSXでの記述を理解し、下記のことなどが行えます。

useState, useEffectの状態管理を用いたリアルタイム検索機能
コンポーネントを使ったSwiperやModalの実装

フレームワーク

続いては、フレームワークについてご紹介します。

Astro.js

.astroファイルの記述方法を理解し、下記のことなどが行えます。

動的ルーティングを使った300ページ以上のサイト構築
astro.config.mjsの編集
Astro.propsを使ったコンポーネントへの値の受け渡し

Next.js

基礎知識を持っており、下記のことなどが行えます。

next exportを使った静的ページの制作
App Routerを使ったルーティング
global.cssと.module.cssの使い分け

開発ツール

フロントエンドで開発を進める際に使用しているツールについてご紹介します。

Git

コマンドプロンプト上でGitコマンドを用いた下記のことが行えます。

初期設定
ローカルにリポジトリを作成
リモートからクローン
プロジェクトの登録
変更や追加をコメント付きでコミット
リモートにプッシュ

Github

使い方を理解し、下記のことなどが行えます。

Github ActionsとGithub Pagesを用いたページの公開
公開鍵、秘密鍵を作成したsshでの接続
レポジトリの作成

Visual Studio Code

使い方を理解し、下記のことなどが行えます。

拡張機能の導入によるカスタマイズ
Live shareを使った複数人によるコード編集
ユーザースニペットを使った記述の効率化

vite

使い方を理解し、下記のことなどが行えます。

プロジェクトの作成
configファイルを用いた設定変更

npm

基礎知識を持っており、下記のことなどが行えます。

npm run devによるテストサーバーの立ち上げ
npm installを用いたパッケージのインストール
npm run buildによるファイルの生成
node.jsの実行

Node.js

基礎知識を持っており、下記のことなどが行えます。

package.jsonの編集
fsモジュールを活用したscriptの記述(build後のディレクトリ削除など)

デザインツール

ページのデザインカンプやバナー作成の際に使用するデザインツールについてご紹介します。

illustrator

基本操作を理解し、下記のことなどが行えます。

地図の作成
パターンやグラデーションの作成
テキストのアウトライン化やオブジェクトのラスタライズ化

Photoshop

基本操作を理解し、下記のことなどが行えます。

画像の切り抜き
画像の加工

Adobe XD

基本操作を理解し、下記のことなどが行えます。

スライダー機能の実装
リピートグリッドの活用
プラグインの導入

最後に

いかがでしたでしょうか。まだまだ駆け出しエンジニアなので、これからも日々スキルアップをしていきます！

それではまた次回！