JavaScript勉強会

JavaScriptの学習日記

ツール

便利なツールやWebサービス

はてなブックマークで便利なWebサービスが話題になっていました。 https://anond.hatelabo.jp/20200525021541 anond.hatelabo.jp 記事のトラックバックやブックマークのコメントが参考になりました。 https://b.hatena.ne.jp/entry/s/anond.hatelabo.jp/2020…

Mermaid.jsでグラフを簡単に描く方法

読書メモを図にしたいとき、簡単なグラフを作成できるツールがあったら便利です。 調べたらいくつか候補がありました。 PlantUML https://plantuml.com/ja/ Mermaid.js https://mermaidjs.github.io/ Typora https://typora.io/ 今回は、手軽に使えて、拡張…

Yarnをインストールする方法

「Yarn」は「npm」を改良したツールです。 yarnpkg.com 前提 Yarnのインストール Yarnとnpmの違い まとめ 前提 WindowsにYarnをインストールする場合、事前に Node.js npm がインストールされている必要があります。 Node.jsとnpmまだ入ってない場合は、先に…

nodistをバージョンアップする方法

nodistの新しいバージョンが出ていたのでアップデートしました。 アップデートのやり方を検索したら、新しいインストーラーをそのまま実行すれば良いみたいでした。 nodist 0.8.8 → 0.9.1へ更新 (参考) ksby.hatenablog.com https://github.com/nullivex/n…

Visual Studio Codeで現在の日時を入力するショートカットを設定する方法

Visual Studio Codeは大変便利なIDEですが、他のIDEやエディターではよく使っている機能が標準では搭載されていなかったので、追加方法を調べてみました。 プログラムのコメントなどを編集するとき、 現在の日時(日付+時間) 現在の日付だけ 現在の時間だ…

Visual Studio CodeでIntelliCodeを使ってみよう

はてなブックマークを見ていたら、便利なツールが紹介されていました。 docs.microsoft.com Visual Studio Code 用 IntelliCode 拡張機能では、Python、Java、TypeScript、JavaScript 用の AI 支援 IntelliSense が提供されます。 AI 支援 IntelliSense では…

React学習 オンラインの練習ツール「CodeSandbox」

Reactの勉強メモ。 Reactを準備なしですぐに練習してみたい場合、オンラインの実行環境が用意されているので、すぐに試してみることができます。 「CodeSandbox」というオンラインエディターを使うと、すぐにReactを試せます。 jsstudy.hatenablog.com CodeS…

Revo UninstallerでWindows10上のWindows Security Essentialsをアンインストールする方法

Windows7のパソコンをWindows10にアップデートする際、Windows Security Essentialsが入っていたら、アップデートの前にアンインストールしておいた方が良いです。 Windows10にアップデートした後、Windows Security Essentialsをアンインストールしようとし…

Visual Studio CodeでPHP中のHTMLを整形するプラグイン

Visual Studio CodeでPHPのファイルを開いたら、HTMLが圧縮(minify)されてて非常に読みづらい状態になってました。→自分がやったことだけどw ちゃんとインデントされた状態に戻したいので、HTMLをフォーマットするプラグインを探してみました。 Visual St…

JavaScriptの有向グラフ描画ライブラリー

JavaScriptでマインドマップのようなグラフを描画するライブラリーを探してみました。 有向グラフとは? グラフ理論 - Wikibooks グラフ理論におけるグラフ (Graph)とは、頂点(node)と辺(edge)により構成された図形のことである。 グラフは主に、有向グラ…

vimtutorでviエディターの練習

Linuxサーバーを操作するとき、設定ファイルなどをviエディターで編集する機会が多いです。 vi - Wikipedia vi(ヴィーアイ)は、Emacsと共にUNIX環境で人気があるテキストエディタ。 名の由来はVIsual editorないしVisual Interfaceとされる。 後発のUnix系…

【JS学習マラソン】第3回 1.1.3 開発者コンソール

JavaScript学習マラソンの第3回は、 「現代の JavaScript チュートリアル」パート1の1.3「開発者コンソール」です。 開発者コンソール https://ja.javascript.info/devtools を読んでみます。 ブラウザーについているデバッガー JavaScriptの学習で、Webブ…

【JS学習マラソン】第2回 1.1.2 コードエディタ

JavaScript学習マラソンの第2回は、 「現代の JavaScript チュートリアル」パート1の1.2「コードエディタ」です。 コードエディタ https://ja.javascript.info/code-editors を読んでみます。 IDE JavaScriptでプログラムを書くときに便利なIDEやエディター…

tmuxでLinuxのSSH接続画面を複数に増やす方法

WindowsパソコンからLinuxのWebサーバーにSSHでリモート接続するとき、RLogin等の端末ソフトを使っています。 普通は、1つのSSH接続に対して、1つの操作画面が表示されます。 しかし、同時にいろんなディレクトリーを見ながら作業する場合、画面が1つだと…

Windowsでフォルダの位置を指定してコマンドプロンプトを起動する方法

Windowsでコマンドプロンプトを起動すると、起動直後はカレントディレクトリ(現在位置)がデフォルトのまま(C:\Windows\System32 など)になっています。 別の作業フォルダに移動するには「cd」コマンドを入力して、移動先のフォルダを手動で指定しないと…

VagrantのUbuntuとWinSCPでSSH接続する方法

Windows10上でLinuxを使うために、VirtualBox+VagrantでUbuntu 18.04LTSをインストールしてみました。 jsstudy.hatenablog.com Ubuntuのフォルダやファイルのリモート操作には、「WinSCP」を使ってみます。 WinSCPを使うときに、秘密鍵をPuttyGenで変換する…

VagrantとVirtualBoxでWindows10にUbuntuをインストールする方法

「Webプログラミングが面白いほどわかる本」という本を参考にして、Windows10にUbuntu 18.04LTSをインストールしてみました。 Webプログラミングが面白いほどわかる本 環境構築からWebサービスの作成まで、はじめからていねいに (N高校のプログラミング教育)…

静的サイトジェネレーターの人気ランキング「StaticGen」

Webサイトを作るとき、表示速度を早くするために、静的ページを中心にしたいです。 静的ページ=早い:Webサーバーに置いたHTMLファイルをそのまま表示 動的ページ=遅い:アクセスのたびにプログラムでHTMLを生成して表示 Webサイトのコンテンツ制作を管理…

Webサイトで使われている技術を解析するツール「Wappalyzer」

Webサイトをどうやって作っているか?を調べるツールがありました。 「Wappalyzer」というツールです。 www.wappalyzer.com Wappalyzerは、ChromeやFirefoxのプラグインとして提供されており、インストールすると使えます。 ブラウザーでWebサイトを閲覧した…

MySQLとElasticsearchを連携して検索を高速化

MySQLのデータ件数が多くなってくると、だんだん検索が遅くなっていきます。 Elasticsearchという検索エンジンを併用すると、検索の高速化が図れるようです。 (参考) https://vitalify.jp/blog/2017/02/elasticsearch_matome.html 全文検索エンジン「Elast…

Vue Devtoolsのインストール

今日はVue.jsのお勉強。「基礎から学ぶ Vue.js」を読んでます。 jsstudy.hatenablog.com (p.36) 学習用のひな形ファイルを用意 CHAPTER 1 | 基礎から学ぶ Vue.js ↑上記のような「index.html」「main.js」を作って、Chromeで開き、コンソール画面を見ると、以…

手描きの絵からHTMLコードを作ってくれる「Sketch 2 Code」

AIを活用した便利なツールがありました。 Webページのデザインを手描きで下書きして、それをHTMLコードに自動で変換してくれる「Sketch 2 Code」というツールです。 Microsoftが、AzureのAIサービスの活用例として公開しているみたいです。 https://sketch2c…

WinSCP Portableの日本語化

WebサーバーにSSHで接続して、ファイルをアップロードするとき、WinSCPというGUIツールが便利です。 WinSCP - Wikipedia ja.osdn.net WinSCPは、Windows向けのオープンソースのSFTPおよびFTPクライアントであり、旧来のSCPプロトコルもサポートしており、ロ…

Visual Studio Codeの日本語化

Visual Studio Codeをインストールしたら、メニューが英語になっていました。 英語の公式サイトからダウンロードしたインストーラーを使ったせいでしょうか? https://code.visualstudio.com/ (インストールするときの設定に関する質問も全部英文でした。)…

UbuntuのFirefoxにAdobe Flash Playerのプラグインを追加する方法

UbuntuのFirefoxで再生できない動画がありました。 Firefoxに動画再生のプラグインを追加したら、動画が見られるようになりました。 support.mozilla.org Firefox は、HTML5 音声や動画コンテンツ をウェブページ上で再生できますが、他のコンテンツでは、他…

Ubuntuのファイヤーウォール「ufw」

テストサーバーにUbuntuをインストールしました。 Webサーバーを構築するための下準備を進めてみたいと思います。 ファイヤーウォール SSH Nginx SSL MySQL PHP Ruby パッと思いつくところは、こんなものでしょうか? Ubuntuのファイヤーウォール ufwとは? …

Linuxで文字列のMD5ハッシュ値を計算する方法

データの暗号化などのため、文字列をMD5方式でハッシュ値にしたい場合があります。 Windowsの場合は、「B64MD5」などのフリーソフトがあり、簡単にMD5ハッシュ値を求められます。 www.vector.co.jp Linuxのmd5sumコマンド Linux(Ubuntu)で、文字列のMD5ハ…

Linuxの画像編集ソフト「GIMP」

Ubuntuでキャプチャーした画像にモザイク処理を入れるために、画像編集ソフト「GIMP」を使ってみました。 GIMPとは? UbuntuにGIMPをインストールする方法 GIMPの起動 GIMPの使い方 GIMPでモザイク処理 GIMPとは? GIMPは、Adobe Photoshopみたいな画像編集…

Ubuntuで簡易画像編集するツール「Pinta」

Ubuntuでちょっとした画像編集するとき、どんなツールを使えば良いのでしょうか? 検索したら、「GIMP」「Pinta」といったソフトが推奨されていました。 bjkun2.blogspot.com krakenbeal.blogspot.jp GIMPは、Adobe Photoshopみたいに高機能なツール Pintaは…

Visual Studio CodeでPHPのメソッド一覧を表示する方法

PHPのMVCフレームワークを使っていたら、機能を追加するたびにControllerやModelが肥大化していき、自分で書いたコードなのに段々把握しづらくなってきました。(汗) 論理設計はともかく、物理設計では粒度を細かくして、なるべく疎結合になるようにしようと…