HTMX入門【はじめからそうやって教えてくれればいいのに！】
はじめに この記事の内容は、以下の動画でも解説しています。アニメーションでわかりやすくなっているので、ぜひ見てみてください。他にもWebに関する解説動画を投稿しているので、気になる人はチャンネル登録よろしくお願いします！ HTMXとは？ HTMX とは、一言で言うと、JavaScriptを書かずに動的なページを簡単に作成できるライブラリのことです。 htmx is a library that allows you to access modern browser features directly from HTML, rather than using javascript. （訳）htmx は、JavaScript を使用するのではなく、HTML から最新のブラウザー機能に直接アクセスできるようにするライブラリです。 </> htmx ~ Documentation ...と言っても
生成AI時代のフロントエンド開発術
2022年11月にChatGPTがリリースされて、1年と約半年が経過しました。私はChatGPTが話題になった頃から、継続して利用しています。ChatGPTを使い続けていると、Webアプリケーションのフロントエンド開発に役立つことがありました。 そこで、本記事ではフロントエンド開発でChatGPTを活用して効率よく進める3つのパターンにまとめました。これらのパターンを紹介し、読者の皆さんの開発に役立ててもらえればと思います。 以下は、本記事で紹介するFigma、ソースコード、デプロイ先URLです。 Wireframing photo - Figma silverbirder/figma-photo-sample-app-for-ai - GitHub https://figma-photo-sample-app-for-ai.vercel.app ChatGPTを使う前に ChatGPTに
React が少し分かるようになる！JSX チートシート - コムテブログ
TL;DR このページでは、JSX の基礎の実装方法について解説しますね。一言でいうと JSX とは、JavaScript 内で HTML のような記述を可能にする記法です。React や Next.js を使った開発において必要不可欠な知識となります。 開発環境 バージョン
Advanced Custom Fields Proを用いたGutenbergのブロック開発 - Qiita
Gutenbergが嫌われている件について WordPress5.0にてGutenbergが搭載されてから早4年が経ちました。 今ではGutenbergをフル活用した「フルサイトエディター (FSE)」なるものが実装されつつあり、もはやWordPressを使用する人にとって、Gutenbergの理解は必須です。 しかし、、、世の中はGutenbergが嫌いな人が多い印象を抱きます Gutenberg内の機能開発が活発であり、運用の工数がかかる クラス名が勝手に割り振られてしまい、CSSでの制御が難しい アップデートによりブロックの見た目が崩れることがある Classic Editorよりも、投稿画面のカスタマイズがしにくい カスタムフィールドを設置しても、場所が見にくい（ページ下部とサイドバーにしか出せない）ので編集しにくい などが主に嫌われる理由だと思います。 ※余談ですが、フルサイトエ
今すぐにNext.jsでフロントエンド開発 or Web制作を快適に始めたい方におすすめの簡単セットアップを紹介する
はじめに 株式会社LCLでフロントエンドエンジニアとして働いている「おとの」と申します。 今回は、今をときめくフロントエンドのフレームワーク「Next.js」を使って、個人もしくは複数人のチームで快適にフロントエンド開発を行いたい方にオススメのセットアップを紹介します。 本セットアップを行うメリットは以下の通りです。 （自動formatが有効になる等）開発速度が増す （StylelintやEslintの静的解析により）不具合の発生や潜在的なエラーを防ぎやすくなる コードの品質と一貫性を保つことができる Next.jsを使いこなせれば、フロントエンド開発だけに限らず、ランディングページ（LP）など静的なWebサイトの実装を行うWeb制作にも有用です。 私自身、Webサイト1ページのコーディングが求められる際もNext.jsを使っています。本セットアップも簡単に終わるので、今すぐ始めたい方はぜ
GA4のトラッキングコードの取得方法 - by Takumi Hirashima
GA4タグ（UAで言うところのトラッキングコード）の取得方法を紹介します。 例えば、GA4（Google Analytics 4）の設定はしたみたけど、タグの設置がまだの方に向けてご説明します。 UA プロパティが使用できなくなるため、その代替サービスとしてGA4が提供されています。 変更がまだの方で、コードの取得手段がわからない方は以下の手順を確認してください。 まずはアナリティクスの管理画面へログイン データストリームの画面からストリームの追加 「Google タグ」の項目にある「タグの設定を行う」を選択 「Google タグ」の項目にある「実装手順」を選択 UAタグとGA4タグを併記する方法 まずはアナリティクスの管理画面へログイン まずはアナリティクスの管理画面へログイン、管理画面へ移動します。 管理画面から対象のプロパティにある「データストリーム」の項目を選択。 データストリーム
WordPressをヘッドレスCMSにしてNext.jsでブログを作成する方法とエラー対処法
2022年12月24日 JavaScript, React, Wordpress 最近はReactをベースにしたフレームワーク、Next.jsをいじっております。今回はWordPressに登録した投稿をNext.jsで表示させてみようと思います！ ↑私が10年以上利用している会計ソフト！ ヘッドレスCMSとは？ ヘッドレスCMSはコンテンツの管理のみをするCMS（＝Content Management System）のこと。例えばWordPressではコンテンツの作成から表示までを行えますが、ヘッドレスCMSではコンテンツの表示は別の方法で行います。ここではNext.jsを使ってみます。 ヘッドレスCMSを使うメリット 表示部分を別途用意することになんのメリットがあるのでしょうか？ざっくりと以下の3点が挙げられるかなと思います： 表示速度の改善 セキュリティの向上 管理しやすい 通常のWo
Nuxt3のリリースが待ち切れない！ベータ版を使ってToDoリストを作ってみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、エンジニアのザワです。 Go言語でAPIを作ってみたかったので、前回は手っ取り早く作れるアプリケーションとしてToDoリストを作ってみました。 執筆時点ではまだベータ版であるNuxt3をどうしても使ってみたいので、今回はToDoリスト制作を通してNuxt3の一部機能を試したいと思います。 Nuxt3のロードマップを見ると、2022年6月に安定板がリリースされる予定になっています。 今回もミニマムな要件で作りきることを目標にして、データの永続化はせず、見た目を作っていきます。少ない手間でスタイリングしていくために、UIフレームワークであるVuetifyを使います。 それではNuxt3、Vuetifyのインストールから始めます。 環境・バージョン情報 使用した環境とバージョン情報は以下の通りです。 Node.js(v16.14.0) Nuxt(3.0.0-27465767.70f0
2024年版、ファビコン画像の作成方法と設置方法、さまざまなデバイスに対応させるには6種類のファイルが必要
最近のデバイスやブラウザに対応させる最小限のファビコンセットには、6種類のファイルで対応できます。ブラウザはもちろん、スマホやタブレットにも対応し、さらにSVGも含めて6種類だけです。 ファビコンに必要な6種類のファイル、ファビコンの設定方法、ファビコン画像を作成する方法について紹介します。 How to Favicon in 2024: Six files that fit most needs by Andrey Sitnik Sitnik氏は、PostCSS, Autoprefixer, NanoIDの制作者です。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 2024/2/28: 元記事がアップデートされたので、当記事もアップデートしました。 はじめに ファビコンの設定方法 -ショートバージョン ファビコンの設定方法
カスケードレイヤー「@layer」でCSSの実装がどう変わるのか、仕組みと基礎知識、さまざまな使用例を徹底解説
CSSの新機能「カスケードレイヤー」がいよいよ主要ブラウザすべてにサポートされます。Firefox 97（先月リリース）とChrome 99（3/1リリース）でサポートされ、そしてSafariでは次期バージョンでサポートされる予定です。 カスケードレイヤー@layerを使用すると、CSSの詳細度とスタイルの順番をカスケード内で明示的にレイヤー化（階層化）でき、これまでのCSSの実装方法が大きく変わります。 カスケードレイヤーの仕組みと基礎知識、さまざまな使用例を紹介します。 Hello, CSS Cascade Layers by Ahmad Shadeed CSSのカスケードレイヤーについて知識を得たい人は、下記の記事もお勧めします。 CSSの新機能カスケードレイヤー「@layer」CSSをレイヤー化して扱え、今までの実装方法が大きく変わる！ CSSの新機能カスケードレイヤーが主要ブラウ
グーグルが開発した画像圧縮ツールSquoosh。フロント開発向けにNode.jsで扱う方法まとめ - ICS MEDIA
グーグルが開発した画像圧縮ツールSquoosh。フロント開発向けにNode.jsで扱う方法まとめ 『Squooshスクーシュ』というGoogleが開発した画像圧縮ウェブアプリがあります。ブラウザで変換結果を見ながら圧縮設定ができるので、画像圧縮の難しい知識を持たない方でも使いやすいことが特徴です。圧縮だけでなく、WebPなどの各種フォーマットへの変換・リサイズといったこともできる便利ツールです。 このSquooshをNode.jsで扱える『libSquoosh』が存在します。libSquooshは大量の画像を一括で圧縮、WebPへの変換、リサイズなどの処理をこれ1つで完結できるのがポイントです。昨今のウェブはページの読み込み時間が重視される傾向があります。画像のファイルサイズは読み込み時間に大きく影響するため、画像圧縮は重要なテクニックです。libSquooshをwebpack・Viteと
バックエンドエンジニアのためのVue.js、React、Angular入門 - Qiita
WEBシステム、WEBプログラム開発において昨今ではjQueryではなくVue.js、React、AngularなどのJSフレームワークが主流となってきています。ただ、これらの活用は学習コストが高いといわれています。その原因はフロントエンドありきで話が進みすぎていたからだと考えています。したがって、自分の投稿記事は、jQueryを多用するWEBシステムエンジニアに向けた、フォーム操作をメインに置いた半備忘録兼自分なりに解釈した解説です。 ちなみに自分はサーバ構築からバックエンドまでこなしているワンオペエンジニア（フリーランス、非正規雇用に非ず）です。 コンポーネント、ルーティング、スタイル周りの続編を作成しました（編集が困難になるほど容量圧迫してたので、それぞれで独立させています）。また、Vueは3.2から採用されたscript setup、Angularは14から採用されたスタンドアロン
Next.jsを勉強してみる その① 〜何も考えず環境構築編〜 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
まいどです。LIGにジョインして5ヶ月経ちますが、コーディングしたステップ数はまだ100行に満たないバックエンドエンジニアのやなさんです。 とはいえ、私もエンジニア。現在の案件で採用されているNext.jsを勉強するため、勉強用の開発環境を構築することにしてみました。 Next.jsとは Zeit社が開発したユニバーサルなReactアプリの開発が可能なフレームワーク。よく比較されるフレームワークでいくとVue.jsを使って開発されたNuxt.jsなどがある。 今回はDockerを使って何も考えず、爆速（気分）で開発環境を構築してみようと思います。 とりあえず、立ち上げるまで頑張ってみる next.jsインストール # ルートディレクトリにsrcフォルダを作成・移動 mkdir src && cd src # Next.jsのアプリケーションの雛形を作成 $ npx create-next-
Xcodeでボタンを押すとテキストが変わる簡単なアプリをつくってみるよ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうも、ハルです。 アイドル沼が止まりません。カメラ沼が止まりません。 今回は、Webエンジニアがネイティブアプリに挑戦したよ！ 的な記事なので過度な期待はしてはいけません！ ネイティブアプリ作ったことないという方！ 一緒に作ってみてこんな感じにできるんだーという感動を一緒にどうぞ！ こんなものをつくるよ ボタンとテキストを用意して、ボタンを押すとテキストが変わる、ザ初心者のはじめてのアプリを作ってみたいと思います。 プロジェクトの準備 Xcodeを立ち上げます。 この画像でいう、真ん中の「Create a new Xcode project」を選択します。 テンプレートの選択で「Single View App」を選び「Next」。 プロジェクトの設定をします。 Product Name：気合いを入れてアプリ名を入力しましょう。 Organization Name：あなたの名前を入力しまし
Webサイト制作のチュートリアル連載「Nuxt de Portfolio（全５回）」を始めます！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、フロントエンドエンジニアのライダーです。 2018年 秋に Nuxt v2 がリリースされたこともあり Nuxt.js（以降、Nuxt） が人気を博しています。これまで興味がなかったあなたも、その人気ぶりから少し Nuxt への興味が湧いてきたころではないでしょうか？ LIGにも着実にその流れはきており、シングルページアプリケーション（以降、SPA）やそのサーバサイドレンダリング（以降、SSR）以外のWebサイトでも、Nuxt を導入して快適コーディングする事例が増えてまいりました。 そこで今回から「ポートフォリオサイトの作成」を題材に、Nuxt を使ったWebサイト制作をチュートリアル式に進めていきたいと思います。 本連載「Nuxt de Portfolio」の目的 冒頭でも話しましたが、いま日本で、Nuxt はどんどん広まってきており、ドキュメントも充実し、Tips系の記事
WordPressを劇的に高速化、1秒以内に表示されるフロントエンドの構築方法 -Zero-latency WordPress Front-end
サーバーサイドのレンダリング（SSR）を使用して、数分の1秒以内にページが高速に表示されるWordPressのフロントエンドを構築するテクニックを紹介します。 バックエンドのキャッシュと組み合わせることで、非常に高速になり、しかも安価にWordPressサイトを構築できます。 Zero-latency WordPress Front-end -GitHub 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様のライセンスを元に翻訳しています。 デモページ サーバーサイドのレンダリング（SSR） バックエンドのサービス 非キャッシュページのアクセス キャッシュページのアクセス キャッシュのパージ 始めてみよう Nginxの設定 バックエンドのJavaScript フロントエンドのJavaScript Cordova 終わりに デモページ サンプルのコードで何ができるのか
JavaScriptのArrayを知る。大きな目標への小さな一歩 〜Array.prototype.filter編〜 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
本日はArray.prototype.filter()メソッドについて見ていきます。名前からも想像はつきやすいかと思います。要は「フィルタリングするんでしょ？」ってことですよね。本当にそうなのか、その目で確かめてください。 ※ここからの説明は個人的に調べて解釈したざっくりとした説明になります。詳しく知りたい方はこちらへどうぞ https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter Array.prototype.filter()メソッドとは フィルタリングして新しい配列を作成するメソッドです。 引数にはコールバック関数を渡します。 コールバック関数は配列の各要素に対して実行され、trueを返した要素のみが新しい配列に残る、ということになります。コールバック関数の第１
CSSの便利な疑似セレクタ「:empty」と「:blank」、その違いと賢い使い方
エラーメッセージを実装する際、エラーがある時とエラーがない時の区別は「:empty」や「:blank」を使用すると、非常に簡単にスタイルを定義することができます。 「:empty」と「:blank」、その違いと実際にどのように使用するのか、どちらが便利なのかを紹介します。 :empty and :blank 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 私は誤解していた 「:empty」と「:blank」の違い 「:empty」と「:blank」を実際に使用する場面 「:empty」の方が十分ではないと思った理由 「:empty」と「:blank」のサポートブラウザ まとめ 私は誤解していた 私は1ヵ月前のツイートで、「:empty」と「:blank」についてひどい誤解をしてました。 「:empty」は有用ではなく、「:bla
ちょっとしたデータまとめにも便利！ Googleスプレッドシートで「GAS（Google Apps Script）」をつかってみよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、フロントエンドエンジニアのハルです。 最近、スプレッドシートでデータをまとめることにハマっています。特に、GASという便利なスクリプト言語を書くのがとても面白くて……。今回はそのGASについて、触り程度ですがご紹介したいと思います。 GAS(Google Apps Script)とは Javascriptベースのスクリプト言語で、Googleのサーバーでスクリプトを実行することができます。 Jvascriptを使える方なら、問題なく扱うことができるはず。このGASを使用すれば、Googleのスプレッドシート・ドキュメント・Gmailなどと容易に連携することが可能になります。今回はスプレッドシートの操作を行う方法を紹介しますが、「なんでもできそう」という気持ちになってもらえると思います。 ダイアログボックスをポップアップさせてみる 最初なので、まずはファイルを作成するところから紹
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - mitsuruog/javascript-style-guide: 常に気をつけたい、JavaScriptへの正しい接し方
