• Skip to main content
  • Skip to primary sidebar

プログラミング入門ナビ by Proglus(プログラス)

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

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

You are here: Home / Archives for プログラミング入門

プログラミング入門

GCPで本当に各サービスがすべて停止、シャットダウンしてて課金対象外となってるか確認する方法

2021-09-28 By プログラミング入門ナビ編集部

GCP(Google Cloud Platform)の学習が終わりリソースをクリーンアップした後に、本当に各サービスがすべて停止、シャットダウンしてて課金対象外となってる確認する方法について解説します。

このコースは、Udemyコース「最速で学ぶ – Google Cloud Platform(GCP)入門完全攻略コース」と、Proglus(プログラス)で公開しているオンラインコース「Google Cloud Platform(GCP)入門」のサポート記事です。

解決方法

結論としては「GCPのお支払いページで日毎の利用料がゼロになったのを確認する」ことが確実です。

日毎の利用料の確認方法

お支払い > レポート から確認ができます。

GCP お支払い ><noscript><img decoding=

尚、補足として、「プロジェクトの削除」「Cloud 請求先アカウントを閉鎖する」を実行すれば、より安心できます.

プロジェクトの削除

Cloud請求先アカウントの閉鎖

おわりに

GCP(Google Cloud Platform)の学習が終わりリソースをクリーンアップした後に、本当に各サービスがすべて停止、シャットダウンしてて課金対象外となってる確認する方法について解説しました。

クラウドの利用に慣れていない場合、料金面が不安になる方も多いと思います
利用料レポートを日々確認して異常のないことを確認しましょう。

また、学習が終わり、当面GCPを使わない場合には、忘れないうちに「プロジェクトの削除」「Cloud 請求先アカウントを閉鎖する」を実行するとよいでしょう。

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

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

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

今すぐ詳細を確認する

Filed Under: プログラミング入門 Tagged With: GCP

Nuxt.jsのバージョンを動作検証済みバージョンへ変更しHello Worldプログラムを実行しよう

2021-08-10 By プログラミング入門ナビ編集部

概要

create-nuxt-appを利用すると、その時点での最新のNuxt.jsでプロジェクトが作成されます。

最新バージョンでは、コースの通り進めることができなくて、本質的ではないところで躓いてしまいますので、コースで使用しているバージョンにダウングレードします。

本コースは、この記事は、Udemyにて公開中のオンライン講座「Nuxt JS入門決定版!Vue.jsのフレームワークNuxt JSの基本からFirebaseと連携したSPAの開発まで」及びのProglus(プログラス)で公開中のオンライン講座「Nuxt.JS入門」サポート記事です。

流れはこのようになっています。

  1. インストール済みの依存パッケージを削除
  2. package-lock.jsonを削除
  3. package.jsonを修正
  4. nuxt.config.jsを修正
  5. 依存パッケージを再インストール
  6. pages/index.vue を編集
  7. 動作確認(Hello World!)

この記事では、3.15系から2.8系へダウングレードする方法について紹介します。

1. インストール済みの依存パッケージを削除

node_modules フォルダを削除します。

2. package-lock.jsonを削除

3. package.jsonの修正

①scriptsを下記のよう書き換えます。

v2.8当時の書き方に修正する。

修正前

"scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },

↓
修正後

 "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "export": "nuxt export",
    "serve": "nuxt serve"
  },

② nuxtのバージョンを2.9未満の最新版(2.8系の最新版)に設定

 "nuxt": "<2.9"

4. nuxt.config.jsを修正

@babel/preset-envのエラーが出ないように検証した結果を反映している。

編集前

build: {
}

↓

編集後

 build: {
    babel: {
      presets({isServer}) {
        const targets = isServer ? { node: 'current' } : { ie: 11 }
        return [
          [ require.resolve("@babel/preset-env"), { targets }  ]
        ]
      },
      plugins: [
        "@babel/syntax-dynamic-import",
        "@babel/transform-runtime",
        "@babel/transform-async-to-generator"
      ]
    }
  }

5. pages/index.vue を編集

v2.8当時の書き方に修正する。

編集前

<template>
  <Tutorial/>
</template>

<script>
export default {}
</script>

↓

編集後

<template>
  <section class="container">
      <p>Hello World</p>
  </section>
</template>

 
<script>
export default {}
</script>

6. 依存パッケージを再インストール

$ cd hello
$ npm install

補足:cd helloは、現在のディレクトリがhelloではない場合のみ(helloがカレントディレクトリではない場合のみ)、実施する

7. 動作確認(Hello World!)

開発用のウェブサーバを起動

$ npm run dev

※ 終了する場合はcontrol + c

8. 動作確認(Hello World!)

Nuxt.jsバージョン確認&Google Chromeで指定のURLを開く

ページにHello World!と表示されれば動作確認OK。

よくあるご質問

Q. 記事の通り実行してもバージョンが変更されません。
Ans. 各種編集後のファイルが保存されていないケースが多いです。再度ご確認ください。

補足

ダウングレードするとプロジェクト直下にpluginsフォルダや、assetsフォルダ等ができない場合があるようですが、手動で作成すれば動作します。

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

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

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

今すぐ詳細を確認する

Filed Under: プログラミング入門 Tagged With: JavaScript, Nuxt.js

VSCodeの基本~プロジェクトフォルダの設定方法について解説します!

2021-04-29 By プログラミング入門ナビ編集部

この記事では、VSCodeを使用する上で必須となるプロジェクトフォルダ機能の設定方法について解説します。

この記事は、オンライン講座「ウェブ開発入門完全攻略コース – HTML/CSS/JavaScript. プログラミングをはじめて学び創れる人へ!」とProglus「新HTML入門」のサポート記事です。

なお、アクセス時期によっては実際のサイトと記事中の画像で表示が異なる場合があります。

VSCodeとは

VSCodeはVisual Stduio Codeの略で、Microsoft社が開発しているエディタを指します。

VSCodeは様々な言語やOSに対応しており、拡張機能も豊富で効率的に開発を進めることができるため、人気が集まっています。

VSCodeのプロジェクトフォルダ設定

プロジェクトフォルダとは、プログラムを作成する際の作業フォルダを指します。

プロジェクトフォルダを設定することでコーディングを効率的に進めることができます。

GUIでの設定

ここでは、デスクトップに配置した「web」という名前のフォルダをプロジェクトフォルダに設定する想定で、手順について説明します。

まずVSCodeを起動します。

VSCodeを起動すると、デフォルトではプロジェクトフォルダは設定されていない状態です。

左のカラムの一番上が「Explorer」のアイコンです。

「Explorer」アイコンをクリックすると、右側に「You have not yet opened a folder」という表示が出るので、その下の「Open Folder」ボタンをクリックします。

なお、VSCodeの左上の「File」をクリックして、「Open…」を選択しても同じ操作が可能です。(Windows版では「File」から「Open Folder…」を選択)

Finderまたはファイルエクスプローラーが表示されるので、プロジェクトフォルダを選択します。

プロジェクトフォルダを設定すると、Exploerのカラムにプロジェクトフォルダの中身が表示されます。

今回は、「web」フォルダの中に「html-basic」という名前のフォルダが存在するので、その中身が一覧表示されています。

プロジェクトフォルダを設定すると、フォルダ内のファイル構成が一目で分かるようになるので便利です。

ファイル名をクリックすると、ファイルが右側のタブで表示されます。

コマンドラインでの設定

プロジェクトフォルダはコマンドラインからも設定できます。

VSCodeをダウンロードするとコマンドラインでcodeコマンドが有効になります。code フォルダ名とすることで、該当フォルダをプロジェクトフォルダとしたウィンドウが立ち上がります。

WindowsではPowerShellまたはコマンドプロンプト、Macではターミナルから起動可能です。

$ cd ~/Desktop
$ ls
web
$ code web

VSCodeで画像をプレビュー表示

ここでは、インターネットからダウンロードした画像をプロジェクトフォルダに追加し、VSCodeでプレビュー表示する方法ついて説明します。

①画像のダウンロード

Webサイトなどで表示されている画像をダウンロードして利用したい場合について解説します。

画像を右クリックして、「名前をつけて画像を保存」をクリックします。

②画像のドラッグ & ドロップ

ダウンロードした画像をプロジェクトフォルダにドラッグ & ドロップします。

VSCodeで既にプロジェクトフォルダを設定している場合は、直接画像ファイルをドラッグ & ドロップすることも可能です。

③VSCodeでプロジェクトフォルダを開く

VSCodeのプロジェクトフォルダにダウンロードした画像が追加されています。

画像ファイル名をクリックすると、右側のタブに画像が表示されます。

VSCodeで画像をプレビュー表示することができました!

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

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

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

今すぐ詳細を確認する

Filed Under: プログラミング入門 Tagged With: Visual Studio Code

vimで編集・保存できない時の対処法を解説!swpファイル削除

2021-03-01 By プログラミング入門ナビ編集部

この記事では、swpファイルが作成されてvimでファイルが編集できない時の対処法について説明します。

この記事は、オンライン講座「はじめてのLinuxサーバー構築運用入門 – Linuxコマンドラインを基礎から学び、自分のウェブサーバまで構築できる」のサポート記事です。

YouTubeで学習する

チャンネル登録してね!

なお、アクセス時期によっては実際のサイトと記事中の画像で表示が異なる場合があります。

Vimとは

・CUIで利用できるエディタです。

・Viという世界でよく使われているエディタの拡張版です。

・GUIの無いサーバーなどでターミナルからファイルの編集を行う際によく用いられます。

Vimでファイルが編集できない場合

vimエディタを起動した時に、以下のような画面が表示されて上手くファイルが編集できないときがあります。

これはvimが何らかの原因で強制終了した時や、別のターミナルで同一ファイルを編集している際に作成されるswpファイルが原因です。

この画面は、前回の編集内容についてどのような操作を行うか聞かれている状態です。

以下の選択肢から選びます。

・[O] Open Read-Only

読み取り専用モードでファイルを開きます。ファイルの編集を行うことはできません。

・[E] Edit anyway

前回の編集内容は気にせずにそのまま編集・上書きを行います。

・[R] Recover

前回の編集内容の復元を行います。

・[D] Delete it

前回の編集内容を削除します。

・[Q] Quit

該当ファイルの編集を終了します。

・[A] Abort

vimアプリケーション自体を強制終了します。

この中から自分の実行したい選択肢に該当する記号を入力し、確定してください。

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

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

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

今すぐ詳細を確認する

Filed Under: プログラミング入門 Tagged With: swap, vim

オブジェクト指向とは?プログラミング初心者にもわかりやすく解説!

2021-01-31 By プログラミング入門ナビ編集部

様々なつみき

はじめに

クエスチョンマーク

オブジェクト指向という言葉を聞いたことがあるでしょうか。

プログラミングを学習していると遅かれ早かれ耳にする用語ですね。

オブジェクト指向については、概念的なものであるためか理解するのにちょっと手間取る方が多いようです。

この記事では、初心者の方にもわかりやすいように噛み砕いてオブジェクト指向について解説します。

オブジェクト指向の理解する一助になれば幸いです。

プログラミング言語の分類

マインドマップ

まず、プログラミング言語は、プログラミングの考え方や記述方法によっていくつかに分類されます。

主なものでは手続き型言語、命令型言語、関数型言語、論理型言語などがあり、その分類の1つがオブジェクト指向言語です。

ここに挙げた中で従来比較的ポピュラーだったのが手続き型言語で、その代表例にC言語があります。

その他の言語については説明を省略しますが、オブジェクト指向言語はこの手続き型言語の欠点を補える点で注目を集めました。よく挙げられる代表言語例はJavaです。

ここからは、わかりやすさのために手続き型言語と比較しながらオブジェクト指向言語について解説していきます。

手続き型言語 vs オブジェクト指向

睨み合うビジネスマン

オブジェクト指向言語とは、簡単にいうと「処理対象をオブジェクトと呼ばれる単位に分割しオブジェクト同士のやりとりとして処理を記述する」ものです。

この説明ではいまいちピンときませんよね。

比較対象としてわかりやすい手続き型言語と比べながらどういうことか見ていきましょう。

ここでは、簡単なコード例として動物(犬、猫、鳥)を順番に鳴かせるプログラムを書いてみます。細かい文法は気にしなくてかまいませんので、雰囲気を味わってください。

手続き型言語(例:C言語)の場合

まず、手続き型言語はその名の通りコンピューターに実行してもらいたい手続きを上から順に書き連ねていく形式です。

#include <stdio.h>

void dog_speak(void) {
  printf("ワンワン/n");
  return;
}

void cat_speak(void) {
  printf("ニャンニャン/n");
  return;
}

void bird_speak(void) {
  printf("ピヨピヨ/n");
  return;
}

int main(void)
{
  dog_speak();
  cat_speak();
  bird_speak();
  return 0;
}

C言語では必ず「main」という関数が実行されます。

main関数の前にそれぞれdog_speak、cat_speak、bird_speakの関数があってそれぞれ鳴き声を表示させる機能をもっており、main関数からこれらの関数が呼び出されていることに注目してください。

このように、手続き型言語では必要な手続きが上から順に書かれていて実行されます。

オブジェクト指向言語(例:Java)の場合

それではオブジェクト指向言語の場合はどうでしょうか。

public class Main {
  public static void main(String[] args) {
    Dog dog1 = new Dog();
    Cat cat1 = new Cat();
    Bird bird1 = new Bird();

    dog1.speak();
    cat1.speak();
    bird1.speak();
  }
}

class Animal {
  private String voice = null;
  public void setVoice(String str) {
    this.voice = str;
  }
  public void speak() {
    System.out.println(voice);
  }
}

class Dog extends Animal {
  public Dog(String str) {
    super.setVoice("ワンワン");
  }
}

class Cat extends Animal {
  public Cat() {
    super.setVoice("ニャンニャン");
  }
}

class Bird extends Animal {
  public Bird() {
    super.setVoice("ピヨピヨ");
  }
}

「なんだか、ややこしくなったなぁ…」と思われたかもしれません。

しかしこれは後述するオブジェクト指向のメリットを享受するためのひと手間なのです。

オブジェクト指向では、コードにもあるように犬、猫、鳥といった処理単位を「クラス(class)」として記述します。

このクラスから犬、猫、鳥のオブジェクトを生成(3、4、5行目)し、鳴かせる処理(speak)を呼び出していますね。

この部分は関数として実装していた手続き型言語との一番の違いはここです。

違いはわかったけれど、書き方が異なるだけで結局同じではないか?と思われるでしょう。

ここからはオブジェクト指向だとどんないいことがあるのかを解説していきます。

オブジェクト指向のメリット

オブジェクト指向のプログラミング言語では次のような3大メリットがあります。

これらの用語はオブジェクト指向の教科書にも必ず出てきますので、この機会にぜひ覚えてください。

継承

花を親から子へ

さきほどのJavaコードにAnimalというクラスがあったのに気づいたでしょうか。

気づかなかった方は、戻って見てみてください。

そして犬(Dog)、猫(Cat)、鳥(Bird)の各クラスは下記のような形で宣言されており、これを「Animalクラスを継承している」というふうに呼びます。

class Dog extends Animal {
…
}

Animalクラスには鳴き声を表す「voice」と、鳴かせる処理を表す「speak」が宣言されています。

一方、Dog・Cat・Birdsにはこれらがありません。

「鳴き声があって、それを鳴かせる」というやりたいことが共通しているため、ひとくくりにした「動物クラス(Animal)」の中で記述し、各動物はこれらの機能を継承して使えるようにしているわけです。

こうすれば、各動物のクラスではそれぞれに特化した内容だけを記述し、共通する内容はAnimalクラスに集約することができます。

今後別の機能(走る・食べる・遊ぶ等)を追加したり、今回の鳴く機能に修正を入れたりしたい時に一つのクラスだけを編集すればいいため管理が非常にしやすくなるのが利点です。

カプセル化

カプセル

Animalクラス内の鳴き声「voice」の宣言の頭に「private」という単語がついています。

「setVoice」には「public」がついていますね。

これは、外部から呼び出したり変更したりできるかどうかを表しています。
コード例を見たほうがわかりやすいため、下記を見てください。

Cat cat2 = new Cat();  //2匹目の猫オブジェクトを生成
cat2.speak();  // ニャンニャン
// ここで、鳴き声を変えてみる
cat2.voice = "ゴロニャン";  //voiceがprivateなのでエラー
cat2.setVoice("ゴロニャン");  //setVoiceはpublicなので成功
cat2.speak(); // ゴロニャン

このように、鳴き声(voice)に直接アクセスして勝手に変更しようとするとprivateであるためエラーとなります。

しかるべき操作方法として用意されたsetVoiceならばpublicなので成功することに注目してください。

結局外部から変更できてしまうんだから意味がないのでは?と思われたかもしれません。

しかし、例えばsetVoiceの処理の中に「いつ、どんなタイミングでvoiceが変更されたのかログに記録する」といったことを追加しておくことができます。

このように、外部からむやみやたらに変更できないようにすることをカプセル化と呼び、予期せぬバグを軽減できるのが利点です。

ポリモーフィズム

いろんな犬

聞き慣れない言葉かもしれませんが、ポリモーフィズムとは多態性という意味です。

Javaの方では、犬・猫・鳥とも「speak」を呼び出すことで鳴かせることができました。

かたや手続き型言語であるC言語の方では、犬ならば「dog_speak」、猫ならば「cat_speak」という風に動物によって関数名が異なっていました。

例えばここに他の種類の犬や猫、また猿・狐・牛・馬…と様々な動物が追加されていくとしたらどうでしょうか。

動物の数だけ関数を用意し、かつその関数名を間違えないようにしっかり気をつけながらコーディングしないといけません。

オブジェクト指向言語ならば、例えばなんの動物かもはやわからないオブジェクトが100個(obj1、obj2、…、obj100)ある時ですら一律「.speak();」で処理を呼び出せば鳴かせることができます。

このようにある処理の呼び出し方を統一し、オブジェクトごとに異なる処理をさせることをポリモーフィズムといい、整合性の取れたコードが書けるのが利点です。

まとめ

いいね!の親指

オブジェクト指向について、手続き型言語との違いを交えながら解説しました。

ここで紹介したJavaに加え、C++・JavaScript・Python・Ruby等もオブジェクト指向言語です。

使ってみるのが一番早く理解できますので、ぜひチャレンジしてみてくださいね。

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

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

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

今すぐ詳細を確認する

Filed Under: プログラミング入門 Tagged With: オブジェクト指向, プログラミング言語

  • « Go to Previous Page
  • Go to page 1
  • Interim pages omitted …
  • Go to page 5
  • Go to page 6
  • Go to page 7
  • Go to page 8
  • Go to page 9
  • Interim pages omitted …
  • Go to page 23
  • Go to Next Page »

Primary Sidebar

Proglus(プログラス)

Twitter

Follow @programmingnavi Tweets by programmingnavi

最近の投稿

  • 【05/02更新】Udemyプログラミング入門講座等の割引クーポン配布
  • AWSのパブリックIPv4アドレス有料化について 2024/2より
  • 【CSS】Google Fontsの利用方法について解説します!新UIに対応2023年11月更新
  • 【SQL】XAMPPのMySQLがXAMPPがポートの競合で起動できない問題について解決方法を解説します!
  • 【Colab】–NOMAL– と表示されて、ショートカットキー(ctrl+c)でコピーができない場合の解決方法を解説します!

カテゴリー

  • AIの使い方
  • Arduino入門
  • AWS
  • その他
  • エンジニアのしごと
  • エンジニアへの道
  • ツールの使い方
  • ニュース
  • プログラミング入門
  • 電子工作入門

タグクラウド

AI AWS AWS Cloud9 Cloud9 CodeWing CSS Emmet GCP Git GitHub Heroku HTML JavaScript li Linux macOS MySQL MySQL Workbench node.js Nuxt.js ol Proglus Python Ruby Ruby on Rails SQL Udemy Visual Studio Code Vue.js Web開発 Windows インストール エラー エンジニア オンライン学習 サーバー スクリーンショット セール プログラミング プログラミング入門 プログラミング学習 ユーデミー 初心者 未経験 機械学習

アーカイブ

  • 2025年5月
  • 2024年1月
  • 2023年11月
  • 2023年9月
  • 2023年8月
  • 2023年7月
  • 2023年5月
  • 2023年4月
  • 2023年2月
  • 2023年1月
  • 2022年12月
  • 2022年11月
  • 2022年10月
  • 2022年9月
  • 2022年8月
  • 2022年7月
  • 2022年4月
  • 2022年3月
  • 2022年2月
  • 2022年1月
  • 2021年10月
  • 2021年9月
  • 2021年8月
  • 2021年6月
  • 2021年4月
  • 2021年3月
  • 2021年1月
  • 2020年12月
  • 2020年11月
  • 2020年10月
  • 2020年9月
  • 2020年8月
  • 2020年7月
  • 2020年5月
  • 2020年4月
  • 2020年3月
  • 2020年2月
  • 2020年1月
  • 2019年11月
  • 2019年9月
  • 2019年7月
  • 2019年6月
  • 2019年5月
  • 2019年4月
  • 2019年3月
  • 2019年2月
  • 2019年1月
  • 2018年12月
  • 2018年11月
  • 2018年10月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2018年5月
  • 2018年4月
  • 2018年3月

検索

Copyright © 2025 · programmingnavi.com ・About・プライバシーポリシー