JavaScript勉強会

JavaScriptの学習日記

ツール

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が肥大化していき、自分で書いたコードなのに段々把握しづらくなってきました。(汗) 論理設計はともかく、物理設計では粒度を細かくして、なるべく疎結合になるようにしようと…

わかばちゃんと学ぶ Git使い方入門

はてなブックマークで話題になっていたGitの入門書を買ってみました。 「わかばちゃんと学ぶ Git使い方入門」という本です。 わかばちゃんと学ぶ Git使い方入門〈GitHub、Bitbucket、SourceTree〉 作者: 湊川あい,DQNEO 出版社/メーカー: シーアンドアール研…

Visual Studio CodeでJavaScriptをステップ実行する方法

JavaScriptを練習するときブラウザーで実行していました。 JavaScript(JS)のコードは、Visual Studio Code(VSCode)で書いています。 VSCode上でJSを実行して、動作確認する方法がありました。(メモ) 前提(準備) Windowsパソコンの用意 Node.jsの用意…

WindowsでMochaテストフレームワークを使う

JavaScriptの学習メモ。 今日は「関数型プログラミングの基礎 JavaScriptを使って学ぶ」の第9章を読んでみます。 jsstudy.hatenablog.com Mochaテストフレームワークを使う Mochaとは? Node.jsの設定 フォルダの移動 Mochaのインストール gulpのインストー…

nvm(Node Version Manager)でWindowsにNode.jsをインストールする

WindowsにNode.jsをインストールするとき、Node.jsのバージョン管理ツールとして「nodist」を使ってみました。 「nvm」(Node Version Manager)というツールもあるので、nvmの使い方も調べてみました。 nodistの使い方 nvmとは? nvmw nvm-windows nvm-wind…