ゼロからはじめるJavaScript(31) 美しいソースコードを共有するJSツール「Carbon」を使ってみよう
ソースコードを共有してみんなに見てもらう機会があるでしょうか。そんな時、せっかく見てもらうなら、美しく読みやすいコードを見てもらいたいと思うものです。今回紹介するJavaScript製のツール「Carbon」を使うと、手軽にソースコードを美しい画像に変換して共有できます。 ソースコードを画像に変換するJSライブラリ「Carbon」 見栄えの良いソースコードを共有しよう 昨今、プログラマーであれば、誰しも自分の書いたソースコードを誰かに見てもらう機会があります。プログラミングに関するコラムを書いたり、作成したライブラリの告知のためにSNSで共有したり、プレゼンテーションでプログラムのコードを解説したりと、みんなに見てもらうという場面が多くあります。 そんな機会に、より美しく見栄えの良いソースコードを見せたいと思うことでしょう。今回紹介するJavaScriptのライブラリ「Carbon」を使う
JavaScriptビルドツールの整理 各ツールの機能と依存関係
フロントエンドのビルドツールが色々ありすぎて、何がどうなっているのかがわかりづらいため、 各ツールができること、特徴 ツール間がどのように依存しあっているか を一気に調べて整理した。(情報は2023/10時点) 概要 ツールの依存関係整理 上層: dev server付きのバンドラ/ビルドツール。アプリ開発者が直接configなどを書いて取り扱うのはここが多いと思われる。(Next.jsに関しては、ビルド機能に着目した場合) 下層: やや基盤的なdev serverなしのツール群。 矢印は、明示的な依存関係を表す。実際には、明示的な依存関係がなくても、下層のツール群は上層のバンドラ(やRollup)に対してプラグインを提供していることが多い。 各ツールのできること整理 ツールごとに、大まかな機能区分で、できることとできないことをまとめた。 各機能区分の定義は次セクションを参照。 ツールごと
全ての道はRomeへ続くのか - これからのJavascript開発を考える
Romeとは 現代のJavascript開発には多くのツールチェーンが必要とされます。Babel,webpack,Jest,ESLint,Prettier,Typescriptなどを組み合わせて開発することが多く、さらにこれらの一部代替選としてesbuild,SWC,Viteなどのツールチェーンの選択肢が存在し、選択肢の多さやその組み合わせの複雑さに苦い思いをしたことがある方も少なくないのではないと思います。 こうした中で、新たに開発が進められているツールチェーン、Romeをご存知でしょうか？ Romeは先に挙げたように複数のツールチェーンを役割ごとに組み合わせて使うのではなく、1つのツールチェーンでこれら全ての役割を担ってしまおうという壮大な計画を持つツールチェーンです。 Romeは2020/03にFacebookより発表されました。現在は法人化され、yarnやBabelの生みの親である
ゼロからはじめるJavaScript(11) JavaScriptで手軽に文章校正textlintを使おう
プログラミングの世界で「リント」と言えば、プログラムの文法チェックや改行など綺麗にプログラムを整形してくれる便利なツールのことです。そして、JavaScriptで作られたリントの一つに、日本語の文章をチェックしてくれるtextlintなるツールがあります。この便利なツールを使う方法を紹介します。 textlintとは textlint(テキストリント)というのは、日本語に限らず、英語や中国語にも対応したテキストの確認ツールです。簡単な間違いであれば自動で修正してくれる機能もあります。さまざまなプラグインが提供されており、チェックに必要なルールを追加していくことで、自分にぴったり合った校正ツールになります。オープンソースの形態で開発、配布されているため、誰でも気軽に利用できます。また、日本人の方が開発しているため、その点でも安心です。 textlintのWebサイト - サイトは英語だが日本
ChromeのデベロッパーツールでJSをデバッグする方法(2022年版) - ICS MEDIA
JavaScriptのデバッグは、ウェブ開発の必須スキルのひとつです。プログラムの実行をデバッグすることで、現在の変数の値や、処理がどのように進んでいるのかを確認できます。デバッグによってプログラムが意図した動作になっているかの分析に役立てられます。 本記事ではGoogle Chromeブラウザーの「Chrome Developer Tools」（以下「デベロッパーツール」、「DevToolsデブ・ツールズ」という略称もあります）を使用してJavaScriptをデバッグする際の基本的な使い方を解説します。「今までデベロッパーツールを使ったことのない」という方でもこの記事を読めば理解できるよう、チュートリアル形式になっています。20分ほどで理解できるようまとめているので、順番に試しながら読み進めてください。 この記事で学べること デベロッパーツールの使い方 JavaScriptのブレークポイ
JavaScript開発者のための優秀なVSCodeツール26選 - Qiita
以下はjsmanifestによる記事、26 Miraculous VS Code Tools for JavaScript Developers in 2019の日本語訳です。 26 Miraculous VS Code Tools for JavaScript Developers in 2019 Visual Studio Code(一般的にはVScodeと呼ばれる)は、デスクトップ上で動作する軽量で強力なクロスプラットフォームのコードエディタです。 TypeScriptやChrome Debuggerなどの開発ツールがサポートされています。 最初は自分のプロジェクトを構築するためにVScodeを使ったのですが、すぐに惚れ込みました。 VScodeには、誰もが開発することができ、誰もが使用することができる莫大なオープンソースの拡張機能が存在します。 開発に使える便利なツールを探している
JavaScriptフレームワーク選定の議論 - Qiita
相談内容 既存の管理ツールを新しく作り直すために新しいJSフレームワーク/言語使いたいのですが、何を選んだらよいでしょうか？ ここで選んだものは今後新しく作る時にも使用していく予定のため、学習コストよりメンテナンスしやすいものを選びたいと考えています。 利用者は社内外で特定の権限を持った人のみであるため、サーバサイドレンダリングはしない予定です。 言語は型があるものを利用したいのですが、TypeScriptとFlowのどちらがよろしいでしょうか？ 時間に余裕があれば、テストフレームワークやビルドツールについてもお聞きしたいです。 現在のページ/チーム jQueryなどで書かれている部分が多いですが、変更を加えることが難しくメンテナンスコストが高いです。 サーバサイドをやってる人が片手間で書くJavaScriptといった状況です。 今回新規で数ページを追加する必要があるため、何を利用すれば良
オシャレなスライドショーを簡単に作れちゃう reveal.js の使い方を reveal.js を使って解説してみた. | TM Life
昨日, コリスさんの記事で紹介されていた reveal.js に一目惚れしてしまったので使い方をまとめてみました. reveal.js の使い方を reveal.js を使って解説しています. 簡単にオシャレでシンプルなプレゼンを作れるのでぜひ遊んでみてください. 追記: 『reveal.jsベースのプレゼンをWeb上で作れちゃうオンラインエディタ『rvl.io』の使い方をrvl.ioを使って解説してみた』というエントリーを公開しました. とても便利なので, よかったらこちらも参考にしてくださいな♪ Sample reveal.js を解説しているサンプルはこちらです. また, 最小サンプルも作ってみました.(こちら) Download 今回制作したサンプルはこちらでダウンロードできます. index.html が 解説しているサンプル, sample.html が最小サンプルになります.
たったワンクリックであらゆるサイトのJavaScriptやCSSを圧縮＆最適化してくれる『zbugs』 | 100SHIKI
これはすんごく便利・・・。 zbugsを使えば、ワンクリックであらゆるサイトのCSSおよびJavaScriptを圧縮してくれるようだ。 もちろん何パーセント圧縮されたかとか、どのファイルがどれだけ小さくなったかといったことの詳細も教えてくれる。 さらに圧縮したファイル群をまとめてダウンロードすることも可能だ。 サイトをつくったあとに、さらなるスピードアップを図るのにいいだろう。インターフェースも素敵でシンプルなので一度試してみるといいですよ。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Google製のJavaScript教育ツール「Grasshopper」は基礎から学べて初心者に優しい！【どれ使う？プログラミング教育ツール】