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 ...と言っても
VSCodeにFigmaを組み込む「Figma for VS Code」登場。コードの自動補完にも対応
VSCodeにFigmaを組み込む「Figma for VS Code」登場。コードの自動補完にも対応 昨年（2022年）、Adobeによる買収が発表され話題となったWebデザインツールを提供するFigmaは6月23日と24日の2日間、イベント「Config 2023」をサンフランシスコで開催しました。 その基調講演で、VSCodeのコードエディタ画面にFigmaの機能を組み込む「Figma for VS Code」が発表されました。 Bring Figma to VS Code Our new extension for VS Code eliminates context switching and helps you move faster with code suggestions based on your designs. Install to... → Inspect Fig
VS Codeでコードがさらに見やすくなる！ 行の折りたたみをより使いやすくする機能拡張 -Better Folding
VS Codeには標準機能として、行の折りたたみができます。すこし使い勝手が悪かったのであまり使用していなかったのですが、折りたたみをより使いやすくする機能拡張をインストールしてみたら、便利だったので紹介します。 折りたたみ機能は、VS Codeで行エリアをホバーすると折りたたみ可能な箇所に下向きの矢印が表示されます。 Better Folding Better Foldingの特徴 Better Foldingのインストール Better Foldingを使ってみた Better Foldingの特徴 Better FoldingはVisual Studio Codeの機能拡張で、折りたたみ機能で求められるすべての機能を一つにまとめた拡張機能です。 VS Code標準の折りたたみ機能をより使いやすくします。 左はVS Code標準の折りたたみ、右はBetter Foldingの折りたたみ
VSCodeでChatGPTにプログラムのバグや、レビューをしてもらおう！
こんにちは、プロクラスの阪口です！ 昨今、ChatGPTやBingなどの人工知能チャットボットが人気ですよね〜 なので今日は、プログラミングやコーディングに欠かせないツール「VSCode」で、ChatGPTを使えるようにするプラグイン「ChatGPT Reborn」を導入し、ソースコードのバグを発見してもらったり、ソースレビューをしてもらいたいと思います！ ChatGPT Rebornとは？ ChatGPT Rebornは、OpenAIが開発した人工知能モデル「ChatGPT」を、VSCode上で手軽に使えるようにするプラグインです。 このプラグインを使えば、アルゴリズムのヒントなどを簡単に教えてもらうことができます！ それでは、そのインストール方法と基本的な使い方について解説していきます。 ChatGPT Rebornのインストール方法 まずは、VSCodeを開いて、以下の手順でインスト
VSCodeにChatGPTの拡張機能を入れてコードレビューやバグを発見してもらう - Qiita
ChatGPTとは？ OpenAIが開発するGPT-3という言語モデルをベースとした(執筆当時)チャットアプリです。 こちらの質問に対して、AIが色々な質問に答えてくれて、一般的な内容だけではなく、コードレビューやバグなども発見してくれるめっちゃ凄いやつです。 細かい内容は以下の記事がとても参考となります。 筆者の関連記事 VSCodeと連携して、ブラウザを開かなくてもChatGPTを使用できるようにする 通常はブラウザを開いて使用するのですが、コーディング中にサクッとレビューしてもらったり、バグを見つけてもらえるような拡張機能があったので、そちらの設定方法について記述してみます。 今回インストールする拡張機能 使用までの手順 環境 PC: MacBook Pro (Apple M2) OS: macOS Ventura 13.1 VSCode: v1.74.3 OpenAIの価格について
CodeSpeedy
CodeSpeedy is a simple tool to manage your code snippet and sync to your Visual Studio Code immediately.
VS Codeの新機能がすごく便利！ JavaScriptやCSSの関数やクラスなどを上部に固定させる「スティッキー スクロール」
8/5にアップデートされた、VS Code v1.70で「スティッキー スクロール」を使用できるようになったので、紹介します。 JavaScriptやCSSで作業しているときに、関数やクラスなどが自動でスティッキーされ、エディタの上部にくっつきます。行数のある長いコードに便利ですね。 VS Codeの新機能「スティッキー スクロール」 「スティッキー スクロール」はVS Code v1.70でプレビュー機能として実装された新機能で、スクロール中にどのスコープにいるのかが分かかります。 エディタの上部にクラス/インターフェイス/名前空間/関数/メソッド/コンストラクタがスティッキーされ、常にコード内の場所を把握することができます。 Visual Studio Code July 2022 (version 1.70) 「スティッキー スクロール」を使用するのは、簡単です。 VS Codeの設
よりよいCSSを書くための、CSS / Sass (SCSS) 30のルールとその理由
Webエンジニアを始めて丸2年が経ちました。 複数プロジェクトを進める中で、CSSコーディングを行うときの「こうしておくと便利」「このほうが管理しやすい」といった知見が溜まってきたのでまとめます。 はじめに 長くなってしまった細かい説明はところどころ折りたたんでいます。概要だけで理解できたら飛ばしていただき、詳しい話が気になったら開いて読んでください。 これらは「自分がよく取り入れている手法」であって、必ずしもどのプロジェクトにも当てはまるものではないと思います。 各項目について、自分がその判断に至った 「理由」 を説明していますので、 理由を読んだ上で自分のプロジェクトに取り入れるか判断いただくと良いと思います。 この記事は、すでにCSSコーディングをしていてアイデアがほしい人に向けた記事で、 CSSをこれから学び始めるような 初学者向けではない ことご了承ください。 一般的と思われるキ
2022年の最新標準！Vue 3の新しい開発体験に触れよう - ICS MEDIA
2021年のVue.jsは新しいVue 3のコアが安定し、開発環境からライブラリやコードの書き方まで、新しい発表の多い一年でした。ICSではすでに複数のプロジェクトでVue 3やVite等の新しいフレームワーク・ツールを使用していますが、まだまだ様子見という方も多いでしょう。 変化の大きいVue 3の周辺ですが、2021年11月のVueConf Toronto 2021（セッション動画）でようやく次の定番と言える構成がアナウンスされました。この記事では、Vite・cteate-vue・<script setup>・Piniaといった新しい推薦構成を紹介し、Vue 2時代から何が良くなるのかを比較します。 新しい構成は何が良くなる？ メリットを確認 新しい構成ではプロジェクトを作成する際のコマンドラインツールからVS Codeの機能拡張やコードの書き方まで、さまざまな部分が変わっています。個
これは便利、VS Codeの設定を変更しよう！v.1.60のアップデートで、ブラケットのカラー化にネイティブ対応
VS Codeがどんどん便利になっていきますね。 先日のv.1.60のアップデートで、ブラケットのカラー化に対応しました！ VS Codeの設定を変更するだけで、開始と終了のブラケットをセットで同じカラーにします。今までは機能拡張を入れないとできなかったことが、ネイティブ対応したのは朗報です。 Visual Studio Code: August 2021 (version 1.60) 自動言語検出 - VS Codeにペーストする際にプログラミング言語を検出します。 ビルトイン高速ブラケットカラー化 - 大規模ファイルでも高速にブラケットのマッチングとカラー化。 設定エディタのシンタックスハイライト - 設定のコードブロックでリッチなシンタックスハイライトに対応。 ターミナルでグリフのレンダリング - ボックス描画とブロック要素文字の表示が改善。 デバッグウォッチ値の設定 - デバッグセ
プログラマーの書いたソースコードの続きを自動で記述する「GitHub Copilot」はエンジニアを駆逐してしまうのか？
GitHubがリリースした、プログラマーの記述したソースコードの続きを自動で補完してくれる機能が「GitHub Copilot」です。このGitHub Copilotを使えばAIがソースコードを完成させてくれるため、この種のAIが増えれば「エンジニアの仕事はなくなってしまうのでは」という危機感を覚えた人も少なくないはず。そこで、エンジニアのHrithwik Bharadwaj氏がGithub Copilotの利点と欠点を挙げています。 Limitations and The Good Things about Github Copilot https://blog.hrithwik.me/the-good-and-the-limitations-of-github-copilot 「GitHub Copilot」はMicrosoftが開発するソースコードエディター「Visual Studi
URLに2文字加えてGitHub上のWebページやコードをVSCode風のUIで表示する・「github1s」
github1sはURLに2文字加えてGitHub上のWebページやコードをVSCode風のUIで表示するWebアプリです。 https://github.com/conwnet/github1s例えば上のようなURLを https://github1s.com/conwnet/github1sというように、github.comをgithub1s.comとするだけでVSCode風のUIでGithubを閲覧できるようになる、というもの。昔別の用途ですが似たようなものがありましたね。Youtubeをなんか便利にする、みたいなのだった気がする。 各ブラウザのエクステンションも用意されていますが、前述のようにGithubのドメインに1sを加えるだけなので無くても良さそうですね。 勿論ツリーもコードもVSCodeライクになりますのでユーザーの方なら見やすくなるかもしれませんね。こちらのアプリはOSS
Vue.jsやReactなど、JavaScriptライブラリのコードスニペットを利用できるVS Codeの拡張機能 -Snipsnap
サポートしているJavaScriptライブラリの一覧（上記以外にもたくさんあります） Snipsnapは現在のプロジェクトで使用している言語やパッケージに基づいて、ライブラリで使用可能なスニペットをナビゲートし、必要なスニペットを選択します。 Snipsnapのインストール Snipsnapのインストールは、VS Code Marketplaceから。 VS Codeで開いたら、「Install」をクリック Snipsnapの使い方 Snipsnapは、手動でアクティブ化する必要はありません。ワークスペースフォルダにpackage.jsonファイルが含まれ、すぐに使用できます。トリガーが必要な場合は、コマンドパレットのReload Windowを使用します。 設定 利用可能な設定オプションは、スニペットのリクエストから特定のライブラリを除外することだけです。Snipsnapはロックファイル
Visual Studio Code (PHPStrom) で WordPress開発環境を作る - toiee Lab
個人データは、このウェブサイトでの体験のサポート、アカウントへのアクセスの管理、プライバシーポリシー に説明されている他の用途に使用されます。 ITサポート Visual Studio Code (PHPStrom) で WordPress開発環境を作るvscode + phpcs + wpcs 概要 Visual Studio Codeを用意する（あるいは、PHPStorm）PHP関連の拡張機能をインストールphpcs (コード規約チェック）をインストール by homebrewwpcs (WordPress）をインストール by composer 前提 homebrew というパッケージ管理ソフトを入れておくcomposer というPHP専用のパッケージ管理ソフトを入れておく (1) Visual Studio Code とても便利なエディタ。情報も非常に多い。インストール情報を探して
macOSのVisual Studio CodeでPHP CodeSniffer & WordPressコーディング規約によるコードチェック環境を構築
当サイトでは、WordPress標準や配布されているテーマは使用せず自作しています。 一応、WordPressのテーマチェック機能を使い使用していない機能を除いて問題がないかチェックはしていますが、正直ちゃんと出来ているのかまだまだ不安な部分があったりします。 先日、いつも「信州 WordPress Meetup」でお世話になっているとろゆに（@Toro_Unit）さんから「PHP CodeSnifferとかでコーディング規約のチェックしてみると良い」とアドバイスいただいたので早速WordPressコーディング規約を含めてインストールしましたが、Visual Studio Codeとの連携でちょっとつまずいたので環境構築手順を備忘録的にまとめてみました。 PHP CodeSnifferとは PHPのコーディング規約チェックをしてくれるツールです。 Homebrew & Composerのイ
かなり便利！VS CodeでCSSを書きながらFlexboxのチートシートを利用できる -CSS Flexbox Cheatsheet
Visual Studio CodeでCSSを書きながら、CSS Flexboxのチートシートを利用できる機能拡張を紹介します。 justify-contentやalign-itemsはどう使うんだっけ？ justify-contentの値は？ など、Flexboxの各プロパティや値がどのように配置されるか、一目で分かります。 CSSを書きながらFlexboxのチートシートをVS Codeに表示中 CSS Flexboxのチートシートは、当ブログで翻訳したチートシートなどを参考にしているとのことで、Flexboxの各プロパティや値の挙動が簡単に分かります。 参考: CSS Flexbox の基礎知識と使い方を詳しく解説 機能拡張のダウンロードは、下記ページから。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
