プログラミング入門ナビ by Proglus（プログラス）

プログラミング学習初心者のための情報メディア

本ページにプロモーションが含まれる場合があります

You are here: Home / Archives for ツールの使い方

ツールの使い方

Vue.jsの読み込み方法について

By

この記事ではVue.jsの読み込みについて学習します。

オンライン講座「Vue JS入門決定版！jQueryを使わないWeb開発 – 導入からアプリケーション開発まで体系的に動画で学ぶ」を、世界最大級のオンライン学習プラットフォームUdemy（ユーデミー）で公開中です。

Vue.jsを使ってプログラムを書くには、Vue.jsのファイルを読み込む必要があります。

Vue.jsを読み込む方法

Vue.jsを読み込む方法ですが、主に、次の方法があります。

  • ◯ CDN（Content Delivery Network経由 ）
  • 直接組み込み（ファイルをダウンロードして配置）
  • NPM（パッケージ管理ソフトの利用）

この記事では原則CDNを使った読み込みを行います。無料で利用できます。

動画で学習する

CDNについて

CDNというのはContent Delivery Network の略です。
ウェブコンテンツをインターネット経由で配信するために最適化されたネットワークのことです。

Vue.jsで利用するのはjsdelivrというCDNですが、東京と大阪にもエッジロケーション、つまり、配信サーバがあるので高速です。

Network map | jsDelivr

基本的には、何かしらの理由がある時以外は、CDNを使うのがおすすめです。

読み込み方ですが。
Vue.jsの公式サイトで、「インストール」 などのキワードで検索すると、
インストールのページが開けます。

見出しCDN, のところに、vue.jsをCDNから読み込むための、コードが記載されているのでコピーします。

HTML入力欄の末尾にコピーしまします。
実際のHTMLの場合は、bodyの終了タグの直前に配置します。

これでVue.jsを読み込むことができました。

Vue.jsのバージョンについて

この数字を変更することで,読み込むvue.jsのバージョンを変更することができます。

このコースのサンプルコードは、vue.js バージョン2.5.16で動作確認を行っています。

2.5.xというバージョンで、かつ、2.5.16以上であれば基本的には動作すると考えられます。

しかしながら、2.5.16以外のバージョンですと、動作が動画と異なる可能性もあるため、学習中には、バージョン2.5.16を明示的に指定することをおすすめします。

実際に本番環境で一般ユーザーに公開する場合も、バージョンを固定するのが安全です。
Vue.jsのバージョンを上げるときには、必ず、ステージング環境など開発用の環境で、新しいVue.jsのバージョンでアプリケーションの動作検証をしてから、本番環境に公開するようにしてください。

おわりに

このレクチャーでは、Vue.jsをCDNを使った読み込む方法について学習しました。
オンライン講座「Vue JS入門決定版！jQueryを使わないWeb開発 – 導入からアプリケーション開発まで体系的に動画で学ぶ」では、Vue.jsを動画を使って学習します。
Vue.jsを使ったWeb開発に興味はあるけれど、まだ触れていない方におすすめです。
動画教材を使うことで、独学するよりも効率的に学べます。

はじめてのVue.js 3 入門！jQuery を使わないウェブ開発 - 導入からアプリケーション開発まで体系的に学ぶはじめてのVue.js 3 入門！jQuery を使わないウェブ開発 - 導入からアプリケーション開発まで体系的に学ぶ中村 祐太 Yuta Nakamura, Proglus （プログラス）Angular.js、React.jsに比べて学習コストが低い注目度抜群のJavaScriptフレームワーク Vue.js！高度化するWeb開発のフロントエンド開発の課題を解決。 4.2 (3689 ratings)122 lectures, 5 hours

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

JSFiddleの画面の概要について説明

By

この記事では、jsFiddleの画面の概要について、学習します。

オンライン講座「Vue JS入門決定版！jQueryを使わないWeb開発 – 導入からアプリケーション開発まで体系的に動画で学ぶ」を、世界最大級のオンライン学習プラットフォームUdemy（ユーデミー）で公開中です。

jsFiddleのサイトをWebブラウザで開く

Webブラウザでjsfiddle.netを開いてください。
Webブラウザは、本質的ではない部分でトラブルが発生しないために、Google Chromeを使うことをおすすめしています。

動画で学ぶ

初期操作

JSFiddleを開いたら、
Closeを押して、作業領域を広くします。

いまは、黒い画面、Darkテーマになっているのですが、
動画で皆さんが見やすいように、明るいテーマに変更をしておきます。
Settings > Dark テーマ をOFFにしします。
テーマは、各自の好みで構いません。

HTML 入力欄について

このHTMLと記載がある入力欄には、Vue.jsのテンプレート記述します。

もう少し補足すると、
ここには、HTMLのbodyタグの要素の内容を記述します。
HTMLタグとか、ヘッダーなどは、JSfiddleが、自動的に生成するので書く必要はありません、

<!-- この部分を記述する -->

JavaScript入力欄

JavaScriptの欄には、JavaScriptを記載します。
jsファイルの読み込みに相当する記述は、JSFiddleが自動的に裏側で記述してくれます。

CSS入力欄

JavaScriptの欄には、CSSを記載します。
CSSファイルの読み込みに相当する記述は、JSFiddleが自動的に裏側で記述してくれます。

出力欄

この部分には、
書いたコードの出力が表示されます。

RUNボタン押すと、書いたコードが描画されます。

デベロッパーツールで、HTMLを確認してみましょう。
iframeで、開発者が書いたWebページを表示していることが分かります。

おわりに

もう少し詳しい使い方や、便利な使い方については、あとのレクチャーで随時紹介していきます。

実際に使ってみたほうがイメージしてが着くと思いますので、つぎのレクチャーから、実際にはコードを書いてきましょう。

この記事では、このレクチャーでは、JSFiddleの画面について概要を学習しました。

はじめてのVue.js 3 入門！jQuery を使わないウェブ開発 - 導入からアプリケーション開発まで体系的に学ぶはじめてのVue.js 3 入門！jQuery を使わないウェブ開発 - 導入からアプリケーション開発まで体系的に学ぶ中村 祐太 Yuta Nakamura, Proglus （プログラス）Angular.js、React.jsに比べて学習コストが低い注目度抜群のJavaScriptフレームワーク Vue.js！高度化するWeb開発のフロントエンド開発の課題を解決。 4.2 (3689 ratings)122 lectures, 5 hours

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

MySQL 5.7 for Windowsのアンインストール方法について解説

By

MySQL 5.7 for Windowsのアンインストール方法について説明します。

単純に「アプリケーションの追加と削除」から削除するだけだと、再インストール時にトラブルが発生して対処が困難となりますので、注意してください。

この記事は、オンライン講座「はじめてのSQL・データ分析入門 – データベースのデータをビジネスパーソンが現場で活用するためのSQL初心者向コース」のサポート記事です。

注意事項

  • データベースのデータはすべて削除されます。必要に応じてバックアップを取ってください。
  • 検証環境にはWindows10を利用しています。Windows7, 8では、OSのUIなど違うところがある可能性があります。

大まかな流れ

  1. サービスを停止
  2. 管理者権限でコマンドプロンプトを実行
  3. MySQLアプリケーションの削除
  4. プログラムの追加と削除 を使って関連ファイル削除
  5. Program Files内のMySQLフォルダを削除
  6. ProgramData内のMySQLフォルダを削除
  7. PCの再起動

サービスを停止

サービス　アプリを起動

「管理ツール」 > 「サービス」 を起動。

MySQL57 停止

MySQL57を右クリック

停止

停止済み

MySQL57の状態が、「実行中」ではなく、 空白になっていればOKです。

管理者権限でコマンドプロンプトを実行

右クリック、管理者で実行

MySQLの削除

cdコマンドを使って、MySQLフォルダ内のbinフォルダに移動

C:\Users\yourusename>cd "C:\Program Files\MySQL\MySQL Server 5.7\bin"

入力したら、エンターキーを押す。

MySQL57を削除

C:\Program Files\MySQL\MySQL Server 5.7\bin>mysqld --remove MySQL57

入力したら、エンターキーを押す。

MySQLアプリケーションの削除

“Service successfully removed.”と表示されればOKです。

プログラムの追加と削除 を使って関連ファイル削除

ログラムの追加と削除 を起動

MySQL Server 5.7　をアンインストール

「MySQL」のキーワードで検索

MySQL Server 5.7　 アンインストール

MySQL関連のものを削除

同様に、 「MySQL 〇〇〇〇◯」 は、全てアンインストールする

すべてなくなればOK

Program Files内のMySQLフォルダを削除

パスは、

C:\Program Files\MySQL\MySQL Server 5.7

ProgramData内のMySQLフォルダを削除

パスは、

C:\ProgramData\MySQL\MySQL Server 5.7

ProgramDataフォルダは隠しフォルダ

ProgramDataフォルダが表示されていない方は、Windowsの設定を確認してください。

PCの再起動

念の為となりますが、PCを再起動します。

おわりに

この記事では、MySQL 5.7 for Windowsのアンインストール方法について学習しました。

UdemyでSQL入門講座を公開中

世界最大級のオンライン学習プラットフォームUdemy（ユーデミー）にて、SQL初心者向けのオンライン講座を公開中です。

ベストセラーコースにも選ばれたことがある人気のコースです。
ぜひ、ご利用ください。

「はじめてのSQL・データ分析入門 – データベースのデータをビジネスパーソンが現場で活用するためのSQL初心者向コース」

エクセル作業からのステップアップ！データベースのデータを取得し、効果的にレポーティングしたいビジネスパーソンにおすすめ。データベースを操作する言語SQLを短期間で身につけビジネスの現場で使うための実践型カリキュラム。MySQL使用。

Bestseller はじめてのSQL ・データ分析入門 -データベースのデータをビジネスパーソンが現場で活用するためのSQL初心者向コースはじめてのSQL ・データ分析入門 -データベースのデータをビジネスパーソンが現場で活用するためのSQL初心者向コース中村 祐太 Yuta Nakamura, Proglus （プログラス）MySQL 使用。エクセル作業からのステップアップ！データベースのデータを取得し、効果的にレポーティングしたいビジネスパーソンにおすすめ！データベースを操作する言語SQLを短期間で身につけビジネスの現場で使うための実践型カリキュラム。 4.4 (6990 ratings)144 lectures, 7 hours

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

Herokuアカウントの新規作成方法

By

Railsアプリケーション等を簡単にインターネットに公開できるクラウドサービスHerokuのアカウント作成方法について説明いたします。
この記事は、Ruby on Railsを使いWebアプリケーションを開発して公開するのサポートと記事です。

HerokuのWebサイトを表示

Heroku
このURLから登録します。

新規登録ボタンをクリック

必要事項を記入

必要事項を記入します。

迷いそうな点について補足すると、
役職は、学習用途であれば「趣味でのご利用」、
主な開発言語は、「Ruby」、としておけば問題ないでしょう。

メールアドレス確認

登録したメールアドレスに、確認メールが届きます。
記載されたURLをクリックして、確認を完了させます。

パスワード

セキュアなパスワードを設定します。

Herokuへようこそ


アカウント作成が完了しました。
ボタンをクリックします。

ログイン完了

ログインが完了しました。

おわりに

オンライン講座「Ruby on Railsを使いWebアプリケーションを開発して公開する」では、
汎用性が高くPythonやPHPと同様に人気のあるRubyを使ってWebアプリ作成に挑戦します。
基礎からAWSでの開発環境構築、Herokuを使ってWebアプリをインターネット上で公開するまでを体系的に学びます。

＞＞ いますぐ確認する

詳細は無料プレビュー動画を30分用意しましたので、ぜひUdemyのWebサイトでご覧ください！ ！

コース紹介動画

Bestseller はじめてのRuby on Rails入門-RubyとRailsを基礎から学びウェブアプリケーションをネットに公開しようはじめてのRuby on Rails入門-RubyとRailsを基礎から学びウェブアプリケーションをネットに公開しよう中村 祐太 Yuta Nakamura, Proglus （プログラス）Rails8対応。汎用性が高くPythonやPHPと同様に人気のある Rubyを使ってWebアプリケーション開発に挑戦しよう。基礎からCodespacesによる開発環境構築、Renderを使ってインターネットに公開するまでを体系的に学べる 4.3 (1935 ratings)156 lectures, 8 hours

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

controlキー + cキーで、プロセスを強制終了できないときの対処方法

By

ターミナルでコマンドを実行したときに、controlキー + cキーで、プロセスを強制終了できないときの対処方法について説明いたします。
Linux環境(CentOS環境)に関する記事です。

この記事は、オンラインプログラミング学習講座「Web開発入門完全攻略コース」サポート記事です。

1) 新規のターミナルを別タブで立ち上げる

2) PSコマンドを使って、強制終了させたいプロセスのプロセスIDを確認

$ ps aux | grep while.rb
ec2-user  4463  2.7  0.9 144604  9460 pts/1    Sl+  09:59   0:00 ruby while.rb
ec2-user  4467  0.0  0.2 110516  2136 pts/3    S+   09:59   0:00 grep --color=auto while.rb

※ while.rbのところは、ファイル名を入れる
※ この例では、4463が該当のプロセスIDです。

3) killコマンドでプロセスを強制終了する

$ kill -9 4463
$

4) 処理が強制終了されたことを確認

・・・（略）・・・
0
0
0
0Killed
$

おわりに

この記事ではターミナルでコマンドを実行したときに、controlキー + cキーで、プロセスを強制終了できないときの対処方法について説明しました。

オンライン講座「Web開発入門完全攻略コース」では、HTML入門を動画を使って学習できます。
無料プレビューを1時間分用意しています。ぜひご確認ください！

Web開発入門完全攻略コース - HTML/CSS/JavaScript. プログラミングをはじめて学び創れる人へ！Web開発入門完全攻略コース - HTML/CSS/JavaScript. プログラミングをはじめて学び創れる人へ！中村 祐太 Yuta Nakamura, Proglus （プログラス）MySQL/Bootstrap/Node.js/Git/GitHub等ウェブ開発に必要な様々なスキルを沢山学ぼう！カフェのウェブサイト、フォトギャラリー、ポートフォリオサイト、天気情報アプリ等の開発に挑戦！ 4.4 (7711 ratings)356 lectures, 22 hours

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する