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

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

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

You are here: Home / Archives for プログラミング入門ナビ編集部

プログラミング入門ナビ編集部

MySQL WorkbenchをMacにインストールする方法

By

MySQL WorkbenchをMacにインストールする方法について説明します。

MySQL Workbench（マイエスキューエル ワークベンチ）とは

MySQL公式ツールです。
データベースの設計、作成、管理をビジュアルに行うことができます。

ダウンロード

公式サイトのダウンロードページを開きます。

■■■■■■■■■■■■■■■■■■■■■■■
追記：2021/1/28
MySQL Workbench 8.0.23 には不具合あり、MySQL Workbenchが起動しないケースが報告されています。
MySQL Workbench 8.0.23は利用しないようにお願いいたします。
■■■■■■■■■■■■■■■■■■■■■■■

MySQL Workbench

「ダウンロードはこちら」ボタンをクリック

Download MySQL Workbenchページに遷移します。

OS選択

スクロールしてページの下の方を表示。

OS選択でmacOSが選択されていることを確認して、「download」ボタンをクリックします。

基本的には、学習時点で、最新のバージョンを使えばOKですが、
大幅に仕様が変わってしまったときなど、使用に支障がある場合は、
旧バージョンをダウンロードして（一時的に）使うこともできます。
previous GA versionsのリンクをクリックすると、旧バージョンを選択できます。

ユーザー登録はパスすることもできる

ユーザー登録してからダウンロードすることもできるのですが、ここでは、ユーザー登録無しでダウンロードします。

「No thanks, just start my download.」
をクリックするとダウンロードが始まります。100MBくらいあるので、少し時間がかかります。

ファイルがダウンロードされます。

インストール

「mysql-workbench-community-6.3.10-macos-x86_64.dmg」

などといったファイルを、ダブルクリックして開きます。

ドラッグアンドドロップ

MySQLWorkbench.app アイコンを、Applicationsディレクトリにドラッグアンドドロップします。

コピーが行われます

MySQLWorkbenchを開く

アプリケーションからMySQLWorkbench.appを開きます。

“MySQLWorkbench.app”はインターネットからダウンロードされたアプリケーションです。開いてもよろしいですか？と表示される場合は、メッセージを確認した上で、開きます。

MySQL Workbenchが開きました。

これで、インストールは完了です。

おわりに

この記事では、MacにMySQL Workbenchのインストール方法について説明しました。

オンライン講座「アプリ開発入門総合コース 」では、MySQLの使い方を始めとした、アプリ開発の基礎が学べます。

264レクチャー18時間の大型コースで、HTML5, CSS3, JavaScript, Bootstrap, SQL, Ruby, Ruby on Rails, Cloud9, Git, GitHub. Web開発に必要なプログラミングスキルを1つのコースで沢山学べるお得なコースです。

無料プレビューを60分公開していますので、ぜひご覧ください。
「アプリ開発入門総合コース – プログラミング初心者が実務で使える本質的なエンジニアスキルを習得できる入門講座 –」

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

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

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

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

今すぐ詳細を確認する

CSSフレームワーク Bootstrap（ブートストラップ）とは

By

Web開発のフロントエンド開発を効率良く行う事ができる、Bootstrap(ブートストラップ)とは何かについて、プログラミング初心者向けに説明します。

Bootstrapとは

フロントエンド開発を効率よく行うためのフロントエンドフレームワークです。
レスポンシブ対応のWebサイトのレイアウトを、簡単に素早くできることから、CSSフレームワークとも呼ばれることもあります。
よく使うレイアウトやUIコンポーネントが用意されていて、簡単に使うことができます。
レイアウトはGridシステムを用います。
HTML,CSS,JavaScriptで制作されています。
無償で使うことができます。
もともとはTwitter bootstrapと呼ばれていて、Twitterのサイト構築に利用されていました。

Bootstrapについて動画で学習する

Gridシステムとは

レイアウトを格子状に分解して配置するデザイン手法のことです。
コンテナ、行、および列を使用してコンテンツをレイアウトし、整列します。
画面サイズによっても、レイアウトが変わり、画面サイズが異なるデバスイスでも、いい感じに表示することができるのが特徴です。

Bootstrapの公式サイト

Bootstrapの公式サイトは、下記になります。
Bootstrap

インストール方法やドキュメントなどの情報が掲載されています（英語）

ライセンス

ライセンスはMITライセンスとなっているので、比較的使いやすいです。

このソフトウェアを誰でも無償で無制限に扱って良い。ただし、著作権表示および本許諾表示をソフトウェアのすべての複製または重要な部分に記載しなければならない。
作者または著作権者は、ソフトウェアに関してなんら責任を負わない。

出典：「MIT License」（2016年6月27日 (月) 13:20 UTCの版）『ウィキペディア日本語版』。

なぜBootstrapを使うのか

開発スピードを上げるためのコスト削減のためです。

開発スピード

現在ビジネスのスピードが早くなってきていて、Webサービスの開発の現場は、スピードが重視されます。
すでに、用意されているレイアウトや、UIコンポーネントなどを利用することで、素早くアイデアのプロトタイプを作成したり、アプリケーション全体を構築できます。

コスト削減

予算が潤沢にあるプロジェクトであれば問題ないのですが、Webサービスの立ち上げ時は予算に制約があることが多いと思います。
そんなときに、デザイナーをアサインしなくても、一定以上のレベルでしかも素早く見た目を整えることができるので、デザイナーとエンジニアのコスト（人件費・外注費）を抑えることができます。
特に、運理で使う管理画面など、デザイン性がそこそこのレベルで良い画面は、Bootstrapを使用することがとても多いです。

メリット / デメリット

メリット

  • 素早くアイデアのプロトタイプを形にする。
  • 素早くアプリケーション全体を構築できる。

プロジェクト立ち上げの1人や1人での開発体制とリソースが限られ、さらに、短時間で開発する必要があって、デザイナーもアサインされていない、みたいなときに、とても便利です。

デメリット

  • 良くも悪くもテンプレートなので、似たようなデザインのサイトになりがち(?)

ただし、このサイトはブートストラップっぽいデザインだなぁとかと気にするのは、WebエンジニアとかWebデザイナーといった、Web業界の制作に関わる一部の人だけなけなので、過剰に心配する必要は無いでしょう。

対応ブラウザ

記事執筆時点ではBootstrap 4が最新のバージョンです。

Chrome, Firefox, Safari,Microsoft Edge といったブラウザの最新バージョンであれば大抵対応しています。
注意点としては、Internet Explorerは、IE10以上の点です。言い換えるとIE9以下はサポート外で、旧バージョンのBootstrap 3を利用する必要があります。
最近のプロジェクトであれば、IE9をサポート対象にすることは少なくなってきましたが、注意しましょう。

参照 : Browsers and devices | Bootstrap

おわりに

この記事では、Web開発のフロントエンド開発を効率良く行う事ができるWebアプリケーションフレームワークの、Bootstrap(ブートストラップ)とは何かについて、プログラミング初心者向けに説明しました。

Udemyでオンライン講座を公開中

Bootstrapは公式サイトのドキュメント（英語）を見れば学習することもできますが、Udemyで公開中のオンライン講座「アプリ開発入門総合コース」では、動画でインストール方法から丁寧に説明していますので、早く習得できて効率が良いですよ。

Bootstrapカリキュラムリスト

  • イントロダクション – Bootstrap 4入門 –
  • Bootstrapとは
  • はじめてのBootstrap 1
  • はじめてのBootstrap 2
  • ナビゲーションバー
  • グリッドシステム 1
  • グリッドシステム 2
  • グリッドシステム 3
  • グリッドシステム 4
  • 実践：フォトギャラリーの制作 1
  • 実践：フォトギャラリーの制作 2
  • 実践：フォトギャラリーの制作 3
  • 実践：フォトギャラリーの制作 4 フォントオーサムの導入
  • 実践：フォトギャラリーの制作 5 仕上げ

また、Bootstrapだけではなく、HTML5, CSS3, JavaScript, Bootstrap, SQL, Ruby, Ruby on Rails, Cloud9, Git, GitHubなど Web開発に必要なプログラミングスキルを1つのコースで沢山学べます。

無料プレビューを1時間以上公開していますのでぜひご覧ください！

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

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

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

今すぐ詳細を確認する

プログラミング言語JavaScriptとは

By

これからプログラミングを始めたい方に向けて、プログラミング言語JavaScriptとは何かについて説明します。

JavaScriptとは

  • プログラミング言語（スクリプト言語）の一つ。
  • プログラミング言語Javaとは異なるもの。
  • 実行環境が主にブラウザに実装されている。
  • Webページ内で動的な機能を実現できる技術。
  • JavaScriptは、現代のWebサービス開発には欠かせない。
  • Node.jsのようなプラットフォームを使えば、サーバサイドの処理も書ける。
  • jsと略されることがある。

用語

プログラミング言語とは

  • コンピューターのプログラムを記述するための言語

プログラムとは

  • コンピューターに、情報処理を行うための動作手順を指定するもの

プログラミングとは

  • コンピューターのプログラムを作成すること

JavaScriptはとても人気の高いプログラミング言語

  • Webサイトの94.9%で使われていて世界で一番人気のあるプログラミング言語 （※1）
  • プログラミングナレッジの共有サイト「StackOverflow」で、最も人気のテクノロジ（※2）

JavaScriptの身近な利用例

  • Webページの再読み込みなしで新しいコンテンツを読み込み、サーバにデータを送信
  • Webページの要素のアニメーション、フェードイン・フェードアウト
  • フォーム入力値の動的なチェック

JavaScriptの歴史

  • 1995年 NetscapeNavigator 2.0 に搭載（旧名：LiveScript）
  • 1996年 IE 3.0にJavascriptに似た言語JScriptを搭載  ※ 互換性に悩む
  • 1997年 ES1 初版
  • 1998年 ES2
  • 1999年 ES3 IE6でも動く。最も知られている。jQueryが普及。
  • 2009年 ES5 現行のブラウザでは、ほぼ確実に動作する。ES3からは小規模な変更。
  • 2015年 ES2015（ES6から改名）現行のブラウザで動かない場合も
  • 2016年 ES2016 現行のブラウザで動かない場合も

補足

  • 例) ES5・・・ECMAScript（エクマスクリプト） 第5版の略。
  • ECMAScriptとは・・・JavaScriptの主な仕様を抜き出して標準化したもの。
  • ES4 策定失敗のため欠番

おわりに

この記事では、プログラミング言語JavaScriptが何かについて説明しました。
JavaScriptは現代のWebサービス開発で必須のスキルですので、ぜひ身につけたいですね。

JavaScriptの学習には、オンライン講座を使った動画学習がおすすめです。

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

※1: Usage of JavaScript for websites | w3techs

※2: Developer Survey Results2017

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

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

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

今すぐ詳細を確認する

プログラミング学習におすすめなプログラミング言語Ruby（ルビー）とは

By

Rubyは、Webサービス開発のプログラミングをはじめ、幅広く使われている人気のプログラミング言語です。

Ruby概要

Rubyは、まつもろひろゆき氏を中心に開発が行われている、オープンソースのプログラミング言語です。
無料で利用することができます。
オープンソースというのは、ソースコードが公開することと理解です。
ソースコードというのは、コンピュータプログラミング言語で書かれた、文字列のことです。

Rubyとは何か動画で学習する

Rubyの特徴

  • オブジェクト指向
  • シンプルな文法
  • 強力な標準ライブラリ
  • 国際標準（国際標準化機構／国際電気標準会議） ISO/IEC 30170

日本で開発されたプログラミング言語としては初めて国際電気標準会議で国際規格に認証されました。

Rubyの歴史

  • 1996年 バージョン1.0が公開
  • 2004年 WebアプリケーションフレームワークのRuby on Railsが公開

Ruby on Railsの登場により、世界的にRubyが使われるようになりました。

RubyとRuby on Railsの関係

Ruby

  • プログラミング言語

Ruby on Rails

  • Rubyで書かれたWebアプリケーションフレームワーク
  • Web開発における共通した作業に伴う労力を軽減
  • 実アプリケーションの開発を少ないコードで簡単に開発できる

現在のWebアプリケーション開発では、Webアプリケーションフレームワークを利用することが一般的となっています。

Rubyの公式サイト（日本語）

オブジェクト指向スクリプト言語 Ruby

Ruby関連のニュースや公式ドキュメントが掲載されています。
日本発のプログラミング言語ということもあり、日本語の情報も充実しているのがプログラミング入門にはうれしいです。

おわりに

他のプログラミング言語を経験していると、文法に違和感を感じたり、思い通りに動かないことがあると思います。
しかしながら、Rubyになれると楽しさが見えてきます！

インターネットのブログ記事などを元にRubyを学習することもできますが、初心者にとってはハードルが高く挫折の可能性があります。
動画で講師のPC操作を見ながら学習すると、習得が早いです。

キャンペーン価格により専門書1冊買うのと同じか、それ以下の価格で学べます。

「アプリ開発入門総合コース – プログラミング初心者が実務で使える本質的なエンジニアスキルを習得できる入門講座」

HTML5, CSS3, JavaScript, Bootstrap, SQL, Ruby, Ruby on Rails, Cloud9, Git, GitHubなど、Web開発に必要なプログラミングスキルを1つのコースで沢山学べてお得です。264レクチャー・18時間の大型コース。

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

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

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

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

今すぐ詳細を確認する