WEB制作には欠かせない技術を、当方の感想も交えながらご紹介いたします。お楽しみいただければ幸いです。
SCSS: CSSの魔法使い
SCSSは、CSSを幻想的に変える魔法の杖のようなプリプロセッサです。(噛みます笑)変数、ネスト、ミックスインといった魔法の要素を使って、あなたのCSSコードを効率的で美しいものに変えることができます。
GSAP（GreenSock Animation Platform）: アニメーションの魔術師
ウェブアニメーションを創造するための魔法箱、GSAP。このツールを手に入れれば、複雑なアニメーションも簡単に、そして洗練されたものに仕上げることができます。
Node.js: なんでもできる万能.js
サーバーサイドでJavaScriptを活用するための魔法のランタイム。ダウンロードするだけで、究極のツールを手に入れることができるのです。Wordpressとも相性が良く、ライブリロードの環境もあっという間に構築できます。
PUG（旧名Jade）: HTMLの上位版
HTMLの書き方を魔法のようにシンプルにするPUG。インデントや空白を使って、HTMLの構造をクリアで効率的に表現できます。if文やfor文などの機能も使えます（当方は使えません笑)
Vite: 開発環境のカールルイスことスピードスター
フロントエンド開発におけるスピードの絶対王者Vite。高速な起動とホットモジュールリプレースメントで、開発時間を劇的に短縮します。
Astro: Viteを搭載したオールインワンのウェブフレームワーク
ウェブサイト構築のための多機能ツールキット、Astro。様々なフレームワークを組み合わせて、高パフォーマンスなウェブサイトを迅速に作り上げることができます。コンポーネントによる共通パーツで使いまわしまくりです。
WordPress: 無敵のCMS
WordPressは、ChatGPTでショートコードに変換するのが得意な、最強のCMSです（笑）。
LOCAL: 無敵のCMSのローカルのテストの環境の構築
WordPressサイトをローカルで構築する際に役立つ強力なツール。LOCALを使えば、複雑な設定は一切不要で簡単にウェブサイトを構築できます。構築したサイトをAll-in-one-Wp-migationでインポートすれば完了です！
Git: コードのタイムマシン
人生は一度きりですが、コーディングは何度でもやり直せます。ボス戦の前にはセーブし、負けそうになったらロードするのが賢い選択。Gitを使えば、あなたのコーディングは無敵になるのです。
Cursor: VsCodeとChatGPTの融合
最強のコラボレーションです。それはまるでケンシロウとラオウがタッグを組んだようなもの。説明不要のパワフルなツールです。
以上です。以下に、これらの情報を活用してウェブ制作を完成させる手順を示します。参考にしていただけると幸いです。最後に少しだけ出品の宣伝をさせていただきます（笑）。
コーディングからクライアント初稿までの流れ -2023年version
テキストエディタはCursor
わからないことはChatGTP
↓
フレームワークはAstroを使用
Vite＆PugでもOK！
↓
必要なモジュール(Scss/Gsap等)をインストール
Swiper/TailwindCss/そのほか沢山のモジュールが存在！
↓
HTMLデータへbuild
この段階で以下が実装されます。
-ファイルの圧縮Minify処理
-ファイルにハッシュ値の設定
-Javascriptコードは古いバージョンに変換されることで、互換性を確保
-SCSSはCSSにコンパイルされ、各ブラウザに対応するためのベンダープレフィックスが付与
↓
Wordpress化
オリジナルテーマの作成
↓
LOCALアプリでテスト環境を構築
↓
Node.jsのBrowsersincで自動リロードを形成
※ここが重要
↓
オリジナルテーマカスタム用のDartScssの導入
↓
ACF/CPTプラグインで編集機能を設定
↓
主要なブラウザ及び実機テストを実施
↓
テストサーバーにアップロード後、クライアント確認。nodex並びにBASIC認証を設定。※無料で高機能なシン・クラウドもおすすめです。
↓
修正
↓
納品
Web制作における欠かせない技術をご紹介いたしました。これらはどれも魅力的なツールであり、あなたのWeb開発をより効率的に進める手助けとなるでしょう。ご興味があれば、下記のプランの活用もご検討ください。
