Node.js

プロジェクトを実行！npm startの使い方【初心者向け】

初心者向けにnpm startの使い方について解説しています。npmコマンドを使ってファイルやプロジェクトの実行をすることができます。node inspectorを実行してデバッグするサンプルプログラムを実際に書いています。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　調査手法：インターネット調査

npm startの使い方について解説します。

ファイルの実行をする際などに使うコマンドで、実際に書きながら使い方を解説しているので、ぜひ参考にしてみてください。プロジェクトが実行される流れを理解しておきましょう。

なお本記事は、TechAcademyのNode.jsオンライン講座の内容をもとに作成しています。

今回はnpm startについて説明するよ。何回も使うことになるコマンドなので、しっかり覚えておこう。

田島メンター！npm startはどういうときに使うんですか～？

npm startは作成したプログラムを実行するものなんだ。まずはヘルプを見て基本の仕組みを理解しておこうか。

お願いします！

npm startとは

Nodeプロジェクトを実行

npm startとは、npmコマンドの1つで、npmを使用してファイルやプロジェクトを実行することができます。

package.json の scripts.start に指定された内容を実行することができます。

npmとはについての記事も参考にしてみて下さい。

npm startの使い方

npm startのヘルプを見る

コマンド

npm --help start

表示結果

解説

npm –help startというコマンドを実行するとstartの使い方に関するヘルプが表示されます。

npm startは、package.json の scripts.start に指定された文字列を実行するものです。

package.jsの内容

表示結果

解説

ここでは、13行目に”start”: “node server.js”と記載してあります。

つまり、npm startと実行することで、server.jsが実行されることを意味します。

このserver.jsは実行しようとしているプロジェクトのルートファイルを指定します。

ルートファイルとは、プロジェクトのトップページのファイルというイメージするとわかりやすいです。

package.jsonの内容を確認してみよう。

package.jsonはnpm initで作成したファイルでしたね。

この場合npm startをコマンドを使うと、ルートに存在するserver.jsというファイルが実行されるということになるんだ。実際に動かしてみよう。

[PR] 未経験からWebエンジニアを目指す方法とは

npm startの実行してみる

コマンド

npm start

表示結果

解説

npm startでnode server.jsが実行されプロジェクトが実行されました。

npm startを実際に使ってみよう

npm startを利用してnode inspectorを利用する

package.jsに記載

"scripts": {"start": "node --debug server.js"}

コマンド

npm start

解説

npm startで実行されるコマンドが、node –debug server.jsになるため、node inspectorを実行してデバッグすることが可能になります。

今回は、npm startを利用してNodeプロジェクトを起動する方法を説明しました。

Node.jsについてより詳しく知りたい方は、Node.jsとはの記事も合わせてご覧ください。

動作したプログラムを停止したいときはCtrl＋cを使うよ。

ログを見ると、確かにserver.jsという名前のファイルが実行されているのが分かります。

もちろんルートの場所に該当のファイルが存在しない場合はエラーになるからね。各ディレクトリの構造とファイルの位置を確認しておこう。

分かりました。ありがとうございました！

オンラインのプログラミングスクールTechAcademyでは、Node.jsオンライン講座を開催しています。

Node.jsを使ってWebアプリケーションを開発することができます。

現役エンジニアがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、習得することが可能です。

この記事を監修してくれた方

中本賢吾（なかもとけんご）
アジマッチ有限会社　代表取締役社長

開発実績：PHPフレームワークを利用した会員制SNS・ネットショップ構築、AWSや専用サーバー下でLinuxを使用したセキュアな環境構築、人工知能を利用したシステム開発、店舗検索スマホアプリ開発など。

その他にも地域の職業プログラマー育成活動を行い、2018年には小学生がUnityで開発したオリジナルAndroidアプリをGooglePlayでリリース。ゲームで遊ぶより作ろうぜ！を合言葉に、小学生でも起業できる技術力を育成可能で有ることを証明し続けている。

便利なパッケージ管理ツール！npmとは【初心者向け】

今回は、パッケージ管理ツールのnpmについて解説します。 npmの代表的なパッケージ例やnpmの使い方について詳しく紹介しています。Node.jsを使う上...

Node.js

環境設定を行う！Node.jsのenvの使い方【初心者向け】

今回はNode.jsのenvについて解説します。本番環境と開発環境の切り替えを行う場合に必要な知識なので、複数人で1つのプロジェクトを開発する際に役立つ...

Node.js

設定ファイルを便利に！Node.jsでのconfigの使い方【初心者向け】

今回は、Node.jsで使うconfigについて解説します。設定ファイルを扱う際に便利に利用できるようになるので、ぜひチェックしておきましょう。 ...

Node.js

実際に書いてみる！Node.jsのasyncの使い方【初心者向け】

Node.jsでasyncを使う方法を解説します。非同期処理を行う上でpromiseとの違いについても理解しておくと良いでしょう。 ...

Node.js

拡張機能を扱う！Node.jsのrequireの使い方【初心者向け】

今回はNode.jsのrequireについて解説します。拡張機能を使う上で必要なモジュールなので、ぜひインストールして使ってみてください。 &nb...

Node.js

初期化処理を行う！npm initの使い方【初心者向け】

今回はnpm initについて解説します。 npm initでpackage.jsonを生成する流れを実際にコマンドを入力しながら説明しているので、ご自身...

Node.js

あわせてよく読まれている記事

リアルタイム通信で活用！注目の技術「Node.js」とは【初心者向け】

今回は、Node.jsについて解説します。 Node.jsとは一体何ができて、使う上でどんなメリット・デメリットがあるのか気になる方もいるでしょう。比較的新しい技術ですが、Netflixなど有名なサービスでも採用されています。エンジニアでなくてもどんな技術が理解しておくことをおすすめします。なお本記事は、TechAcademyのNode.jsオンライン講座の内容をもとに作成しています。田島悠介ここではNode.jsについて解説していくよ。大石ゆかり田島メンター！Node.jsとはどういうものなんですか～？田島悠介 Node.jsは、サーバサイドでJavaScriptを使う環境のひとつなんだ。もう少し詳しく見ていくよ。大石ゆかりお願いします！目次 Node.jsとは Node.jsのバージョン Node.jsの使用用途 Node.jsの代表的なモジュール Node.jsのメリット Node.jsのデメリット Node.jsを学習できるサービス Node.jsを学習できる本 Node.jsとは Node.jsとは、サーバーサイドのJavaScript実行環境です。 Node.jsはJavaScriptを使用して処理しています。したがって、Node.jsを操作する上で使用する言語はJavaScriptです。ただし、フロントエンドのJavaScriptではなく、サーバーサイドのJavaScriptです。フロントエンドとは、HTMLやCSSと組み合わせて、ブラウザ上にグラフィカルに表示する部分を操作するためのJavaScriptです。一方、サーバーサイドとは、インターネット上のデータが保存されているコンピューター上で動作する処理系の事です。最近で言うとクラウドと呼ばれるような、データセンター内のコンピューターをサーバーと呼びます。 Node.jsは、PHPやRubyやPythonやJava等のプログラム言語と同様に、サーバー側で動作するJavaScriptです。また、Google Chromeに搭載されているV8というエンジンをコマンドラインから使用することができます。 [PR] 未経験からWebエンジニアを目指す方法とはNode.jsのバージョン Node.jsの最新バージョンは、推奨版が8.9.3で、最新版が9.3.0です。ただし、通常使用する場合は推奨版の8.9.3のように先頭の数字が偶数の物を使用します。最新版のように先頭の数字が奇数の場合は、新しい機能を追加して、問題がないかを確認しているバージョンになりますので、Node.jsでの先進的な開発を行う上級者向けのバージョンになります。 Node.jsのインストール方法もぜひチェックしておきましょう。また、Node.jsをコマンドラインから使用する場合は、次のように記載します node 対象ファイル名.js 田島悠介 Node.jsの基本的な説明はこんな感じかな。大石ゆかり JavaScriptというと、Webサイトでダイアログとかを入れたいときに使っていたものですよね。田島悠介そうだね。それらのフロントエンドで使っていたJavaScriptをサーバサイドで使えるようにしたものがNode.jsだよ。他にどういう特徴があるか見てみよう。 Node.jsの使用用途メモリ消費量が少ないため、小さな規模の開発・運用時に、他の環境と比べるとよりパフォーマンスを出すことが可能です。同時に大量のトラフィックを捌くことができ、動画配信やチャットアプリ、ゲームの開発で使われることが増えてきています。 Webアプリこれまでのプログラミング言語同様にWebアプリケーション開発時に使用されます。ピグライフ公式サイトピグライフ構成 Node.jsを利用することで、ゲーム上で多数のユーザーが同時接続を行う状況で、パフォーマンスを落とさず処理をすることが可能です。参照 Webサーバーこれまでのでのプログラム言語とは異なり、Webサーバーとしても使用されます。チャットサーバー事例（IBM） Node.jsでWebサーバーを構築することは、CPU利用率の低い処理をリアルタイムで頻繁に返す用途に向いています。 Node.jsでは、Socket.ioというリアルタイム通信を行うライブラリを使用することができます。参照スマホアプリネイティブアプリやハイブリッドアプリの開発に使用できます。グランブルーファンタジー公式サイトグランブルーファンタジーのNode.js活用環境 Node.jsを使用することで複数ユーザーのモバイル通信速度が異なる状態でも、スムーズなバトル処理を行うことができます。参考 Node.jsの代表的なモジュール async Node.jsで非同期処理を実装する場合、JavaScriptのコールバック関数を使用することになります。しかし、コールバック関数だけで実装すると処理が複数になると非常に複雑で、保守しづらいソースコードになります。 asyncを使用すれば、簡潔にに非同期処理を実装可能です。ただし、全てのブラウザのバージョンに対応しているわけではありません。 asyncの使い方 Express Node.jsでゼロからアプリケーション開発を開発することは非常に手間がかかります。これは、他の言語でも同様ですが、Node.jsはフロントエンド開発を主とするJavaScriptから発展してきているため、サーバーサイドに関する便利な機能を最初から揃えているわけではありません。その為、npmを利用して必要なモジュールをインストールして使用します。そうは言っても、使用するモジュールをアプリケーション開発の度に考えるのも大変です。そこで、よく使う機能をあらかじめまとめてくれたのが、Node.jsのフレームワークであるExpressです。実務上でも、Expressを使用することで、同じ設計を共有して開発効率を格段に高めることが可能です。 Node.jsのメリット C10K問題の解決につながる高速性能 C10K問題とは、従来のサーバーで発生していた問題で、サーバーへの接続台数が10,000台を超えると、表示が遅くなるという問題です。もちろん、技術的に解決することが可能ですが、Node.jsのノンブロッキングI/Oという処理により、Node.jsを使用するだけでC10K問題を解決することができます。 Node.jsの大きな特徴である「非同期処理」を行うことである処理が完了する前に次の処理を行います。そうすることで1つのプロセスで多くの処理を捌くことができます。 Node.jsのデメリット Node.jsは当初、フロントエンドとサーバーサイドを同じJavaScriptを使用して、連動して処理させることも目標の1つでした。しかし、最終的に、サーバーサイド（Node.js）のJavaScriptとフロントエンドのJavaScriptとの処理上の互換性はありません。そうは言っても、JavaScriptで有ることは変わりないため、フロントエンドで習得したJavaScriptに関する基本知識は非常に役立ちます。 Node.jsを学習できるサービスドットインストール動画を見ながら学習する形式のサービスです。 1つの動画が3分くらいで見終わることができるので、スキマ時間にサクサク進めることができるはずです。基本的な文法を理解し、使い方を学習できます。ドットインストールをやってみた Udemy こちらもドットインストール同様、動画の学習サービスとなっています。英語の内容のものが多いですが、非常に実践的な内容が多いので、Node.jsを使ってアプリケーションを開発したい人におすすめです。有料の動画はキャンペーンなどで格安で手に入る時期などもあるので、ぜひチェックしておきましょう。 Udemy SMART Node.js入門インストールする手順やNode.jsを理解する上で知っておきたい知識を学べます。 Expressというフレームワークも学べるので、アプリを開発するイメージがつかめるはずです。数時間・数日で終わる内容なので、これからNode.jsを学びたい方は最初に目を通しておくと良いでしょう。 SMART Node.js入門もっと多くのサービスを比較したい人は、Node.jsの学習サービスまとめを参考にしてみてください。 Node.jsを学習できる本いまどきのJSプログラマーのためのNode.jsとReactアプリケーション開発テクニックいまどきのJSプログラマーのための Node.jsとReactアプリケーション開発テクニック React.jsとNode.jsを使用して実際にWebアプリケーションを開発する流れを学べます。どちらもモダンな技術で多くの企業で使い始めているので、これからエンジニアを目指す方であれば就職や転職で有利に働くはずです。 Node.js超入門 Node.js超入門 HTML/CSSをある程度理解し、初めてプログラミングの技術に触れる方は基礎から学べます。後半ではExpressというフレームワークを使って実際にWebアプリケーションの開発を学べます。入門から実践的な内容まで学習できる本になっています。 JS+Node.jsによるWebクローラー/ネットエージェント開発テクニック JS+Node.jsによるWebクローラー/ネットエージェント開発テクニッククローリングやスクレイピング、APIの使い方などいろんなサイトの情報を集めて1つのサービスを作りたい方におすすめです。ある程度JavaScriptの知識がある方は、手を動かしながら自分の作りたいものを形にすることができるでしょう。もっと多くの本を比較したい人は、Node.jsを学習できる本まとめを参考にしてみてください。今回はNode.jsについて解説しました。有名なサービスやゲームにも使われていて、今後ますます需要が増す技術になるでしょう。Node.jsの習得を目指したい方はぜひ全体像を理解しておきましょう。また、現役エンジニアから学べる無料のプログラミング体験会もオンラインで実施しているので、ぜひ参加してみてください。田島悠介 Node.jsの実装例と、最後に学習方法もいくつか紹介したよ。大石ゆかり JavaScriptを理解していると、フロントエンドとサーバサイド両方で知識が役に立つんですね。田島悠介最初の環境構築などは特に新しい情報が大事になるので、これらの学習サイトに加えて公式サイトの方もチェックしながら挑戦してみよう。大石ゆかりそうですね、頑張ってみます。ありがとうございました！また、オンラインのプログラミングスクールTechAcademyでは、Node.jsオンライン講座を開催しています。 Node.jsを使ってWebアプリケーションを開発することができます。現役エンジニアがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、習得することが可能です。独学に限界を感じている方はぜひご覧ください。この記事を監修してくれた方中本賢吾（なかもとけんご）アジマッチ有限会社　代表取締役社長開発実績：PHPフレームワークを利用した会員制SNS・ネットショップ構築、AWSや専用サーバー下でLinuxを使用したセキュアな環境構築、人工知能を利用したシステム開発、店舗検索スマホアプリ開発など。その他にも地域の職業プログラマー育成活動を行い、2018年には小学生がUnityで開発したオリジナルAndroidアプリをGooglePlayでリリース。ゲームで遊ぶより作ろうぜ！を合言葉に、小学生でも起業できる技術力を育成可能で有ることを証明し続けている。

Node.js

これだけは覚えておきたい！基本的なUNIXコマンド20【初心者向け】

今回は、プログラミング初心者でも覚えておきたいUNIXコマンドを紹介します。プログラミングを学んでWeb開発する際に、WebサーバのOSとしてLinuxやUNIX系を利用することがあります。そのため、Web開発をするためにUNIXコマンドの知識が必要です。 Amazonが運営するAWSといったサービスやCloud9といったサービスでも、UbuntuやLinuxが利用されています。そのため、特定のOSで利用可能なコマンドです。また、Macのターミナルを扱う時も使用しますので、覚えておくと便利です。 WindowsでUNIXコマンドを利用できるので、コマンド操作に慣れることは実務においても技術的なレベルが上がります。そこでこの記事では、プログラミング初心者でも覚えておきたいUNIXコマンドを初心者向けに紹介します。目次npm startとはnpm startの使い方npm startの実行してみるnpm startを実際に使ってみよう UNIXコマンドとは UNIXコマンドとは、LinuxやUNIX系OSのWeb開発で利用するコマンドです。ウィンドウやボタン、アイコンといった視覚的なオブジェクトをマウスで操作するインターフェイスをGUI（Graphical User Interface）と呼びます。一方、文字入力によってコンピュータに命令を与えて操作するインターフェイスをCLI（Command Line Interface）、あるいはCUI（Character User Interface）と呼びます。「コマンド」とはコンピュータに指示する命令であり、CLI上で用いるプログラム／アプリケーションのことを指します。 UNIXに由来するコマンドを「UNIXコマンド」と呼称します。現在ではGUIがコンピュータを操作する手法として主流ですが、ある操作の結果を別の操作に用いたり、自動的に複数の操作を行ったりする場合など、CLIの方が適している作業が多く存在します。 Windows10でUNIXコマンドを利用する方法 2021年3月現在の最新バージョンのWindows10では、WSL（Windows Subsystem for Linux）を有効化することでUNIXコマンドを利用できます。コントロールパネルプログラムプログラムと機能 Windowsの機能の有効化または無効化上記の順に選択をして、「Linux用 Windows サブシステム」をチェックしてください。コントロールパネルを開いてプログラムを選択する画面プログラムを選択してWindowsの機能の有効化または無効化を選択する画面 Linux用Windowsサブシステムを選択してOKを押してください。 Microsoft StoreでUbuntuをインストール Microsoft StoreをWindowsで起動します。 Ubuntuを検索して出てきた表示の入手をクリックしてUbuntuをインストールします。インストールにはしばらく時間が必要です。インストールが完了したら起動ボタンを押してください。 Windows上で初期設定を行うための起動が始まります。初回のみ起動時間が必要です。ユーザー名とパスワードを設定すると完了です。パスワードは設定用と入力用に同じものを2回入力する必要があります。設定が完了したら、UNIXコマンドの入力が可能になります。 [PR] 未経験からWebエンジニアを目指す方法とは覚えておきたいUNIXコマンド20 ここからは主要なUNIXコマンド20選を紹介します。いずれもMacのターミナルで入力した例を画像で表示しているので、ぜひ自分のPCでも試してみてください。ディレクトリとファイルの確認、移動に使うコマンド pwd 現在の作業ディレクトリの絶対パスを表示します。なお絶対パスとは、最上位階層から目的のファイルやフォルダまでの道筋を省略なく記述する方式のことです。一方の相対パスは、起点となる現在位置から目的のファイルやフォルダまでの道筋を記述する方式です。入力例： pwd 現在どのディレクトリにいるのかを確認するときに使います。 cd 作業ディレクトリを変更するコマンドです（ディレクトリを移動します）。入力例： cd (ディレクトリ名) cdだけで実行するとホームディレクトリへ移動します。「cd -」とすると、直前にいたディレクトリへ移動します。「cd ..」とすると親ディレクトリへ移動します。 ls ディレクトリの内容をリスト表示するコマンドです。入力例： ls (ディレクトリ名) lsだけで実行すると、現在のディレクトリに含まれるファイル名をリスト表示します。ディレクトリを指定すると、そのディレクトリに含まれるファイル名をリスト表示します。また、「ls -l」でパーミッションや所有者などの関連情報を付加して表示、「ls -a」で隠しファイル・隠しフォルダを含めて表示することが可能です。ディレクトリとファイルの操作で使うコマンド cp ファイルをコピーするコマンドです。入力例： cp (ファイルA) (ファイルB) この場合ファイルAをファイルBにコピーします。また「-f」オプションをつけた場合、コピー先に同名のファイルがあった場合上書きされます。「-i」オプションをつけた場合は上書きするかどうかをファイルごとに確認します。なおディレクトリを内容ごと（再帰的に）コピーするときは、「-R」オプションをつけます。 mv ファイルの移動およびリネームを行うコマンドです。入力例： mv (ファイルA) (ディレクトリB) mv (ファイルA) (ファイルB) 1つめの例では、ファイルAをディレクトリBに移動します。 2つめの例では、ファイルAからファイルBに名前を変えることができます。 cpコマンドと同じように、「-f」オプションをつけた場合、移動先に同名のファイルがあった場合は上書きされます。「-i」オプションをつけた場合は、上書きするかどうかを確認します。 rm ファイルを削除するコマンドです。入力例： rm (ファイル名) ディレクトリを削除する場合は「-d」オプションを指定しますが、削除できるのは空のディレクトリだけです。ディレクトリに内容物がある場合は「-r」オプションを指定することで、中に入っているファイルを含めてディレクトリを削除します。ゴミ箱へ入れるのではなく、即座に削除されることに注意してください。 mkdir ディレクトリを作成するコマンドです。入力例： mkdir (ディレクトリ名) 通常、指定したパスの途中のディレクトリが存在しない場合はエラーになります。「-p」オプションをつけると、途中のディレクトリが存在しない場合、それらを含めてディレクトリを作成することが可能です。 touch ファイルの変更日を更新するコマンドです。入力例： touch (ファイル名) 「touch file1.txt」とすると、「file1.txt」の変更日時が更新されます。存在しないファイル名を指定した場合、その名前で空のファイルが作成されます。 ln リンクを作成するコマンドです。入力例： ln -s (ファイル名) (リンク名) 「-s」オプションを付けることで、シンボリックリンクを作成します。シンボリックリンクは、ディレクトリやファイルのショートカットとして用いられます。 chmod ファイルのパーミッション（所有権）を変更します。入力例： chmod 750 (ファイル名) この入力例は、ファイル所有者にすべての権限を与え、グループに読み込みと実行権、その他のユーザーは権限なしにするコマンドです。パーミッションは「mode」引数に8進数字あるいは記号で指定します。上記の入力例は8進数字の指定です。 8進数字指定する場合は、3桁の値で指定します。 1桁目が「ファイル所有者」のアクセス権、2桁目が「グループ」のアクセス権、3桁目が「その他のユーザー」のアクセス権です。各桁の値は、読み込み権を表す4と、書き込み権を表す2と、実行権を表す1の和を指定します。例えば、読み込み権と実行権のみを与える場合には、4と1の和である「5」を指定します。それぞれの権限の組み合わせと値は、下記の表をご覧ください。アクセス権値 0 権限なし 1 実行権 2 書き込み権 3 書き込み権と実行権 4 読み込み権 5 読み込み権と実行権 6 読み込み権と書き込み権 7 すべての権限また、記号で指定する場合は、以下の記号を組み合わせてパーミッションを指定します。 chmod a+w (ファイル名) この入力例の場合、すべてのユーザーに書き込み権限を付加します。記号誰に a すべてのユーザ u 所有者 g グループ o 他のユーザ記号付加・除去 + 付加 – 除去 = 全クリア記号権限の種類 r 読み w 書き x 実行 chown ファイル・ディレクトリの所有者とグループを変更します。入力例： chown (ユーザー名) (ファイル名) この例では、指定したファイルの所有者を指定したユーザーに変更します。なお、ファイルの所有者とグループはファイルのパーミッション範囲に関係してきます（あるユーザーのみアクセス可能など）。所有者の変更はスーパーユーザーのみ可能です。 chgrp ファイルのグループを変更します。入力例： chgrp (グループ名) (ファイル名) この例では、指定したファイルの所属グループを変更します。 chownと同じく、グループはファイルのパーミッション範囲に関係してきます（あるグループに属しているユーザーのみアクセス可能など）。ファイル内容の表示、閲覧するときに使うコマンド cat ファイルの内容を結合し、表示するコマンドです。入力例： cat (ファイルA) (ファイルB) 複数ファイルの内容を結合して表示します。ファイルを1つだけ指定して、単にその内容を表示する場合にも使用可能です。 less ファイルの内容をスクロール可能な状態で表示するコマンドです。入力例： less (ファイル名) ファイル内容を一画面しか見ることができない（スクロールできない）catコマンドとは異なり、スクロール可能な状態で表示するコマンドです。 qを入力すると表示が終了します。ファイルの検索で使うコマンド find ファイルを検索するコマンドです。入力例： find (ディレクトリ名) find (ディレクトリ名) -name (文字列) 1つめの入力例では、ディレクトリ内にあるファイルを表示します。 -nameを付けることで、ディレクトリ内にある文字列を指定して検索できます。また「find . -ctime

プログラミング

PythonでローカルPC環境にWeb Serverを立ち上げる方法を現役エンジニアが解説【初心者向け】

PythonでローカルPC環境にWeb Serverを立ち上げる方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して、初心者向けに解説します。 Pythonについてそもそもよく分からないという方は、Pythonとは何なのか解説した記事を読むとさらに理解が深まります。なお本記事は、TechAcademyのオンラインブートキャンプ、Python講座の内容をもとに紹介しています。田島悠介今回は、Pythonに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 PythonでローカルPC環境にWeb Serverを立ち上げる方法について詳しく説明していくね！大石ゆかりお願いします！今回はPythonを使ってWeb Serverを立ち上げる方法を紹介します。今では機械学習に使われている言語として有名なPythonですが、サーバーサイドの言語としても使われており、種類豊富なWebフレームワークが存在します。今回はPythonの標準モジュールを使ってローカルのPC環境でWeb Serverを立ち上げてみます。 Web Serverとは？ Web Serverとは、ブラウザ（Chrome, Fire Foxなど）からのリクエストに応じて、画像表示をさせたり、画面を遷移したりする操作を行うマシンのことです。イメージを示すと、以下の画面の通りです。ブラウザでURLを入力するとサーバに対してリクエストが送信されてサーバがレスポンスの画面をブラウザ上に表示させる仕組みです。通常、サーバーはLinuxを使用したマシンが多いですが、ローカルで動作確認を行う程度であればWindowsやMacで確認することもできます。 HomebrewのインストールそれではMacのPython3上でサーバーを立ち上げるために、Python3の環境を構築します（Windowsの方はこの先のコマンドプロンプトでのWeb Serverの立ち上げ方まで進んでください。）。そのためにまずはHomebrewをインストールします。HomebrewはMacで動作する拡張パッケージを簡単にセットアップするためのシステムです。以下のコマンドを実行してHomebrewをインストールします。 /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" [PR] 未経験からWebエンジニアを目指す方法とはpyenvのインストール Homebrewのインストールが終わったら、以下のコマンドを実行しpyenvをインストールします。 brew install pyenv 続いて、Python3系のバージョンをインストールします。今回は以下のコマンドを実行し、Python3.7をインストールします。 pyenv install 3.7.0 適当な作業ディレクトリに移動し、以下のコマンドで作業ディレクトリ上で先程インストールしたPythonのバージョンを実行します。 pyenv local 3.7.0 ローカル上でのWeb Serverの立ち上げ方（ターミナル）先程pyenvでセットしたPythonのバージョンでWeb Serverを立ち上げるときは以下のコマンドで立ち上げが可能です。 python -m http.server 5000 数字はサーバーのポート番号を指定します。ちなみに何も指定しない場合は8000番ポートでこのサーバーが動作します。ブラウザを立ち上げて【localhost:5000】と入力すると、以下のようにブラウザ上にディレクトリの一覧が出力されます。ローカル上でのWeb Serverの立ち上げ方（コマンドプロンプト） Windowsの方はpyenvを使わずに、こちらのリンクからPythonをインストールして環境を構築します（既にパソコンでPython3系の環境が動作する場合はこの手順は不要です）。コマンドプロンプトを立ち上げて【python -version】と入力し、Pythonのバージョンが表示されたらPythonがコマンドラインで動作します。それではターミナルの時と同様に以下のコマンドを実行し、Web Serverを立ち上げてみます。 python -m http.server 5000 ブラウザ上で【localhost:5000】と入力すると、以下のようにブラウザ上にディレクトリの一覧が出力されます。実際にローカルPC環境でWeb Serverを立ち上げてみようそれでは、Web Serverを立ち上げてHTMLファイル表示させてみます。適当な作業ディレクトリに移動し、以下のコマンドを実行します。 python -m http.server 5000 続いてテキストエディタを開き、以下のHTMLファイルを作成し、サーバーを動作させている作業ディレクトリ上に保存します。ファイル名は【index.html】とします。 <html> <body> <h1>Hello World!</h1>

Python

今さら聞けない！ターミナルの使い方【初心者向け】

Mac OSを使っていると、システム環境設定などでは設定することができない、高度な設定をしたいと思う場合があるかと思います。そのようなカスタマイズをおこなうためには、Mac OSのターミナルという機能を使う必要があります。また、ターミナルはプログラミングをする際にも利用します。そこで今回は、初心者向けにターミナルの利用方法を紹介します。なお本記事は、TechAcademyのWebアプリケーションオンラインブートキャンプの内容をもとに紹介しています。なお、今回の記事の内容は動画でもご覧いただけます。テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。目次本記事は、下記の流れで説明します。主要コマンドも紹介しているので、記事を読んだらすぐに使ってみてください。ターミナルとはターミナルの使い方ターミナルの主要コマンドターミナルとはターミナルとは、コマンドと呼ばれる命令文を用いてMacの操作や設定をおこなうためのツールです。通常は利用する必要はありませんが、高度な設定をする場合や、Macでプログラミングをおこなう場合には利用する必要があります。 Windowsにおけるコマンドプロンプトと呼ばれているものとほぼ同じものです。ターミナル上では、マウスやトラックパッドを用いて操作するのではなく、キーボードで「コマンド」と呼ばれる命令を入力することによって操作します。この記事では、ターミナルの基本的な使い方や、よく利用されるコマンドについてまとめています。 [PR] 未経験からWebエンジニアを目指す方法とはターミナルの使い方ターミナルは、「アプリケーションフォルダ」内の「ユーティリティフォルダ」にインストールされています。起動すると、次のような真っ白な画面が表示されると思います。しばらくすると時刻などが表示されますので、それまで待ちましょう。このとき表示されている文字の意味は、次の通りです。ログイン日時：ターミナルを起動した日時、1行目に表示コンピュータ名：コンピュータの名前、2行目前半に表示ディレクトリ：現在のディレクトリの位置、2行目後半に表示 ※この画像では個人情報が含まれるために上記の情報は消していますが、実際は画像中赤文字の上にこれらの情報が表示されますディレクトリとは、「Finder」で言うところの「フォルダ」と同じものです。例えば、先ほどの画像で示したターミナルで開いているディレクトリは、個人情報なため、ここでは白で隠してありますが、Macのユーザ名と同じ名前のディレクトリです。 Finderですと、次のようにフォルダに該当します。（左側のメニューから、自分のユーザ名と同じフォルダを開いています）このように、ターミナルは特定のディレクトリについて操作をおこなうツールになります。そのため、特定のファイルに対して操作をおこないたい場合、そのファイルが存在するディレクトリに移動してから操作する必要があります。（詳しくは「コマンドの使い方」にて記載します）ターミナルの設定は、通常のアプリケーションと同じく、上部バーの「ターミナル」内にある「環境設定」からおこなえます。背景や文字の色を変えたい場合は、この環境設定中にある「プロファイル」から変更することができます。ここでは、あらかじめ用意されているいくつかの配色パターンから、背景色や文字の色を選ぶこともできます。例えば、この画像中にある「Homebrew」を選択すると、ターミナルは次のように変わります。また、これらの配色は自分の好きな色にカスタマイズすることもできます。カスタマイズする場合は、同じくプロファイルの左下にある「+」ボタンから、新しいプロファイルを作成し、右側の「テキスト」や「ウィンドウ」のタブを切り替えながら、色などを選択します。ターミナルの主要コマンド基本的な設定がわかったら、ターミナルのコマンドを覚えていきましょう。今回は、ターミナルでよく利用するコマンドを11個紹介していきます。全てのコマンドは、入力した後にEnterを押すことによって実行されます。 cd ディレクトリ間を移動する場合に使用します。「ターミナルの使い方」でも述べたとおり、ターミナルでは1つのディレクトリしか開くことができません。そのため、他のディレクトリにあるファイルを操作したい場合は、そのディレクトリまで移動する必要があります。（パスを指定する方法もありますが、ここでは割愛します）このディレクトリの移動に用いるコマンドが「cd」コマンドです。「cd ディレクトリ名」と入力して実行します。例えば、現在のディレクトリ中にある「Documents」ディレクトリへ移動したい場合は、「cd Documents」と入力します。このとき、もし入力したディレクトリが存在しない場合は、「No such file or directory」というエラーが出ます。また、現在のディレクトリよりも1つ上のディレクトリへ移動したい際は、「cd ../」と入力します。これらのディレクトリ名は、連続で入力することもできます。例えば、Documentsディレクトリ内にあるtextディレクトリを開きたい場合は、「cd Documents/text」と入力すると移動できます。 ls 現在のディレクトリ内に存在する、ディレクトリやファイルを表示するコマンドです。このコマンドは「ls」のみで実行します。例えば、先ほど画像で示したユーザ名のディレクトリですと、この図のように表示されます。（ユーザー名は白で隠してあります） Finderのフォルダと比較すると、全く同じ名前のディレクトリを表示していることが分かるかと思います。先ほど紹介したcdコマンドでディレクトリを移動する際は、このlsコマンドで事前に移動したいディレクトリが存在するか確認すると便利です。 mkdir ディレクトリを作成するためのコマンドです。「mkdir 作成したいディレクトリ名」で実行します。例えば「mkdir AAA」と入力し実行すると、AAAというディレクトリが作成されます。 rm ファイルを削除するコマンドです。「rm ファイル名」で実行します。このコマンドで削除したファイルはゴミ箱には入らず、また警告等も出ませんので、十分注意して実行するようにしてください。誤って重要なファイルを削除してしまった場合、コンピュータが起動しなくなる可能性もあります。 mv ファイルやディレクトリの名前を変更する場合や、移動する場合に利用します。用途が2つあるので紛らわしいのですが、どちらの場合も「mv AAA BBB」のように入力して実行します。 AAAとBBBは、ファイルまたはディレクトリの名前です。このコマンドを実行した場合の動作は、このAAAとBBBによって、次のように異なります。 BBBというディレクトリが存在する場合は、AAAをBBBの中へ移動 BBBというファイルが存在する場合で、かつAAAがファイルの名前である場合は、BBBへ上書き保存 BBBが存在しない場合には、AAAをBBBという名前に変更 cp ファイルをコピーするコマンドです。「cp AAA BBB」と入力すると、AAAというファイルがBBBという名前でコピーされます。このとき、BBBというファイルが既に存在している場合は、BBBへ上書き保存します。また、BBBがディレクトリの名前である場合は、BBBディレクトリの中にAAAがコピーされます。 pwd 今開いているディレクトリまでのパスを表示します。ターミナルで今どのディレクトリを表示しているのか分からなくなったら、このコマンドを実行しましょう。このコマンドもlsと同様に、「pwd」のみで実行します。 man コマンドのマニュアルを開きます。マニュアルは英語ですが、各コマンドのオプションなどが表示されるので、1度は試してみましょう。「man マニュアルを開きたいコマンド名」で実行します。例えば、「man man」と入力した場合は、次のようにmanコマンドの利用方法が表示されます。このマニュアルを読んでいると、「OPTIONS」という項目があることが分かるかと思います。この記事では説明を割愛しましたが、多くのコマンドにはオプションと呼ばれる機能を付加して実行することができます。例えばmvやcpコマンドで「-n」オプションを付けて実行すると、上書き保存を防止することなどができます。特にプログラミングなどをターミナルでおこなう場合にはオプションもかなり利用することになると思いますので、こちらのmanコマンドでオプションの使い方などを一通り目を通してみましょう。このマニュアルは、終了する場合に「q」を入力します。 qを入力して終了しないと、次のコマンドを受け付けませんので注意しましょう。 find ファイルやディレクトリの検索に利用します。「find 検索する場所 -name 検索するファイル名」で実行します。「検索する場所」が分からない場合には、先ほどのpwdコマンドやlsコマンドを用いて、大体の目星を付けましょう。 clear ターミナル画面をクリアし、表示された文字を全て消去します。実行した内容が取り消される訳ではありません。同じコマンドを何度も実行する場合などは、どのコマンドをいつ実行したのかが分かりにくくなってしまいます。そのような場合はこのコマンドを実行し、一旦ターミナルを見やすくしましょう。このコマンドは「clear」のみで実行できます。 exit ログアウトする場合に用います。通常のターミナル利用では、ログアウトせずにターミナルを終了しても問題ありません。しかし、サーバ等に接続している場合は必ずこのコマンドでログアウトしてからターミナルを終了しましょう。このコマンドは「exit」のみで実行できます。 exitではなく、「logout」コマンドでもログアウトすることができます。さいごに今回の記事は以上です。ターミナルではかなり高度な設定や操作をおこなうことができます。しかし、コマンドを一度実行してしまうと、その操作を取り消すことはできません。 rmコマンドの欄にも記載しましたが、コンピュータ中の重要なファイルを消去してしまったり、破損させてしまったりした場合は、起動しなくなる場合も起こりえます。インターネット上では、ターミナルで実行できる様々なコマンドが紹介されていますが、どのような動作をするのか分からないコマンドは、十分に調べてから実行するようにしましょう。 [お知らせ]TechAcademyでは初心者でもエンジニアになれるオンラインブートキャンプを開催しています。各自にパーソナルメンターがつきます。また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。

プログラミング

今さら聞けない！コマンドプロンプトの使い方【初心者向け】

初心者向けに、Windowsの「コマンドプロンプト」の使い方を紹介した記事です。コマンドプロンプトは、WindowsのPCがあれば誰でも使うことができますが、通常は利用することはほとんどありません。ただし高度な設定をする場合や、Windowsでプログラミングをおこなう場合には利用する必要があります。そのため、プログラミングを勉強する前に基本的な使い方を覚えておくと良いでしょう。なお、Macで使えるターミナルとほぼ同じものです。また本記事は、TechAcademyのWebアプリケーションオンラインブートキャンプの内容をもとに紹介しています。なお、今回の記事の内容は動画でもご覧いただけます。テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。目次本記事は、下記の流れで説明します。主要コマンドも紹介しているので、記事を読んだらすぐに使ってみてください。コマンドプロンプトとはコマンドプロンプトの使い方コマンドプロンプトの主要10コマンドコマンドプロンプトとはコマンドプロンプトとは、コマンドと呼ばれる命令文を用いてWindowsの操作や設定をおこなうためのツールです。真っ黒の画面を見たことがあるかもしれません。コマンドプロンプト上では、マウスやトラックパッドを用いて操作するのではなく、キーボードで「コマンド」と呼ばれる命令を入力することによって操作します。この記事では、コマンドプロンプトの基本的な使い方や、よく利用されるコマンドについてまとめています。 [PR] 未経験からWebエンジニアを目指す方法とはコマンドプロンプトの使い方コマンドプロンプトはスタートメニューから開くことができます。スタートメニューの検索で「cmd.exe」と入力してみてください。ここで表示されるのがコマンドプロンプトです。次にウィンドウを大きくしたり、色を変更していく流れを紹介していきます。左上のアイコンをクリックするとプロパティが表示されます。そこからフォントタブを選択し、文字サイズを選択することができます。自分が使いやすい大きさにするといいでしょう。オプションコマンドプロンプトのプロパティを開いた状態で、最初に表示されるのがオプションです。オプションでは、カーソルのサイズ、コマンドの履歴、編集オプションの設定が可能です。カーソルのサイズカーソルのサイズでは、コマンドプロンプト上で表示されているカーソル自体の大きさを、大中小から選択することが可能です。コマンドの履歴コマンドの履歴ではバッファーサイズとバッファー数と重複する古い履歴を破棄する設定が可能です。バッファーサイズでは履歴をどれくらい保存するか設定できます。たくさん保存自体場合は数字を増やします。バッファー数はプロセスごとの保存数を設定できます。通常利用の場合変更不要です。重複する古い履歴を破棄する設定を有効にすると無駄な履歴がなくなります。編集オプション編集オプションは基本的に全てチェックした状態で所為です。簡易編集モードでは、コピー・アンド・ペーストが利用できます。挿入モードでは、コマンドの挿入が可能になります。 Ctrlを有効にすると、Ctrlキーを利用可能になります。テキストの選択行の折り返し選択を有効にするでは、1行を折り返して表示することができます。テキスト選択キーを拡張することで、一般的なショートカットキーを利用することができます。現在のコードページ現在のコードページでは文字コードが表示されています。従来のコンソールを使う従来のコンソールを使うを有効化すると、再起動することで以前のバージョンのコマンドプロンプトを利用できます。コンソールの新機能の詳細コンソールの新機能の詳細では、マイクロソフトのWebページに遷移してコンソールの新機能を知ることができます。フォントウィンドウの大きさも同様にフォントタブでサイズを選択することで、自由に変更することができます。サイズサイズでは文字サイズを変更できます。フォントフォントでは文字フォントを変更できます。選択したフォント選択したフォントでは実際に選択したフォントがどのように表示されるか見ることができます。レイアウト「レイアウト」のタブを選択すると、画面バッファーのサイズやウィンドウのサイズ、ウィンドウの位置を変えることができます。画面バッファーのサイズ画面バッファーのサイズでは、画面全体としてのサイズを指定できます。ウィンドウのサイズウィンドウのサイズでは、ウィンドウのサイズ自体を指定できます。ウィンドウの位置ウィンドウの位置では、コマンドプロンプト起動時のウィンドウの位置を指定できます。画面の色「画面の色」のタブを選択すると、ウィンドウの色を自分が見やすいように変えることができます。画面の文字では、最終的にどのような文字や背景や色を利用するかを設定することが可能です。色に関してはRGBの値を指定することで様々な色を指定することが可能です。画面の色以外に、ポップアップする表示の文字と背景色も変更することが可能です。また、不透明度を変更することで、コマンドプロンプトの後ろに別のウィンドウがある場合、後ろのウィンドウを透けて見せるかどうかを設定する事が可能です。不透明度が100%の場合は、後ろの別のウィンドウは全く見えません。不透明度30％にすることで、後ろのウィンドウをより透けて見えやすくすることができます。不透明度が30％より小さい値が無いのは、不透明度の値が小さすぎるとコマンドプロンプト自体が透明になり見えなくなるためです。閉じる時にはコマンドプロンプトの左上にあるアイコンをクリックして終了を選択したり、右上にあるバツ印をクリックして閉じます。基本的な使い方はこれだけです。コマンドプロンプトの主要10コマンド基本的な使い方がわかったところで、コマンドプロンプトでよく使うコマンドを10つ紹介します。どれも基本的なコマンドですので、覚えておきましょう。 cd 現在表示されているディレクトリ（カレントディレクトリ）を表示することができます。コマンドを打ち実行するだけで確認できます。また、「cd パス」を入力するとカレントディレクトリを変更することができます。この際、指定するパスは、現在のカレントディレクトリを基準として指定する必要があります。 dir dirと入力するだけで、カレントディレクトリにあるファイルやフォルダーの一覧が表示されます。また、「dir パス」とすることで、指定したパスに含まれるファイルなどを表示することも可能です。 tree dirと似ていますが、ディレクトリ構造をグラフィカルなツリーで表示することができます。 type テキストファイルの内容を確認するコマンドです。「type ファイル名」とすると、ファイルの内容が出力されます。 ren ファイル名を変更する際に利用します。「ren 対象のファイル名新しいファイル名」とすることで変更可能です。 move 大きく分けて2つの利用目的があるコマンドです。 1つは、ファイルを移動する時に利用します。「move 移動するファイル名移動先パス」とすることで、移動します。 2つ目は、ディレクトリ名を変更する時に利用します。「move 変更前ディレクトリ名変更後ディレクトリ名」とすることで変更可能です。 copy ファイルをコピーする時に利用します。「copy コピー元コピー先」とすることでコピー可能です。 del ファイルやフォルダを削除する時に利用します。「del ファイル名」とするとファイルが削除されます。 help コマンドの使い方を調べることができます。「help コマンド名」とすることで、そのコマンドの使い方が表示されます。 cls 画面を消去するのに使用します。clsと入力することで、コマンドプロンプトの画面に表示されていた内容が消えます。今回の記事は以上です。この記事を監修してくれた方中本賢吾（なかもとけんご）アジマッチ有限会社　代表取締役社長開発実績：PHPフレームワークによるフランチャイズ企業向け会員制SNS。Shopifyによる海外進出用大規模ネットショップ構築。Vue.jsによる金融機関向け内部アプリ。AWSやLinuxハウジングサーバーでの環境構築。人工知能を利用した画像判別システム。小売チェーン店舗用スマホアプリ。Wordpressによる不動産チェーン店向け賃貸・売買仲介システム。基幹システム移管用データコンバートシステム。小学生がオリジナルAndroidアプリをGooglePlayでリリース、NHK Whyプログラミング入賞、全国Programing Festival入賞、中学生がSNS型PWAアプリリリースなど、ボランティアプログラミング教育活動行っている。紹介したコマンドはぜひ自分で試してみてください。 [お知らせ]TechAcademyでは初心者でもエンジニアになれるオンラインブートキャンプを開催しています。これからプログラミングを学びたい、エンジニアとして活躍したいという方はぜひご覧ください！また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。

プログラミング

今さら聞けない！GitHubの使い方【超初心者向け】

開発者にとってなくてはならないサービスとしてGitHubがあります。エンジニアにとっては当たり前のサービスですが、これからプログラミングの勉強を始める初心者にとってはよくわからないかもしれません。そこで今回は、GitHubの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそもGitHubとは何なのか、どんな時に使うツールなのかを知っていきながら、実際の使い方を紹介しています。本格的に使おうと思ったらもっと多くのことを知る必要がありますが、業務で使うということでなければ十分でしょう。目次npm startとはnpm startの使い方npm startの実行してみるnpm startを実際に使ってみよう Gitについてそもそもよく分からないという方は、GitHubとは何なのか解説した記事を読むとさらに理解が深まります。今回の記事の内容は動画でもご覧いただけます。テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。大石ゆかり田島メンター！！GitHubってなんですか〜？田島悠介 GitHubはね、Gitをオンライン上で管理するサービスだよ。大石ゆかりもう少し詳しく教えてもらえますか〜？ GitHubとは GitHubとは、ソフトウェア開発プロジェクトのためのソースコード管理サービスです。ソースコードを更新したバージョンの管理や閲覧、バグ追跡機能、SNSの機能を備えており、開発者にとってなくてはならないサービスです。また、GitHubを使ってソースコードの管理を行っている企業も多数あります。 GitHubが人気な理由と類似サービスとの違い GitHub は、Git を使用したソフトウェア開発とバージョン管理のための人気のあるプラットフォームおよびクラウドベースのサービスです。コードを効率的に保存、管理、共同作業するために必要なツールを開発者に提供します。ユーザーフレンドリーなインターフェースと豊富な機能を備えた GitHub は、世界中の開発者にとって不可欠なツールとなっています。 GitHub はテクノロジー業界では有名な名前かもしれませんが、ライブカジノへのユニークなアプローチを持つオンラインカジノ市場も多くの日本人プレイヤーに人気を集めています。その一例が、プレイヤーに没入型でインタラクティブなゲーム体験を提供する日本の市場志向のオンラインカジノ、ライブカジノハウスです。オンラインカジノブランドレビュー関連ページで調べる通り、ライブカジノハウスは、日本の文化と技術の要素を取り入れることで、ライブカジノの伝統的なコンセプトを次のレベルに引き上げます。伝統的な日本の衣装を着たライブディーラーから高度なバーチャルリアリティテクノロジーまで、ライブカジノハウスはプレイヤーにユニークなゲーム体験を提供します。イノベーションと顧客満足に重点を置いているライブカジノハウスは、日本市場で大きな支持を得ています。その成功は、日本のオンラインカジノ業界の可能性を浮き彫りにし、多様な興味や好みに応えるために継続的に進化している様子を示しています。より多くの日本のプレーヤーがエンターテインメントのニーズのためにオンラインカジノに目を向けるにつれて, ライブカジノハウスや他の日本の市場志向のオンラインカジノが、伝統的なカジノ体験の限界を押し広げ続ける様子を見るのはエキサイティングです。 GitHubと同じようなソースコード管理サービスとしては、BitbucketやGitLabなどがあります。それぞれのサービスとの違いをもとに、GitHubが人気な理由を見ていきましょう。理由1：無料のプライベートリポジトリソースコードを管理する単位をリポジトリと呼びます。リポジトリは格納場所という意味で、他の利用者にも公開されるパブリックリポジトリと、公開が関係者だけに限定できるプライベートリポジトリがあります。ソースコードを公開したくない場合は、プライベートリポジトリを選択する必要がありますが、以前はGitHubは有料、BitbucketやGitLabでは無料という状況でした。しかし2020年4月から、GitHubでも無料のプライベートリポジトリを無制限に作成可能になりました。これによりGitHubを使いたかったがソースコードは公開したくない個人や企業の利用が大幅に増え、さらにGitHubの人気が高まる状態となりました。理由2：オープンソースコミュニティに育まれたSNS機能オープンソースとはソースコードが公開されており、誰でも無料で利用できるソフトウェアのことを指します。また、オープンソースコミュニティとは、オープンソースの開発者同士の集まり、結びつきのことです。 GitHubでは以前から多くのオープンソースが管理されており、たくさんのオープンソースコミュニティが形成されています。このオープンソースコミュニティに育まれる形で、GitHubには以下のような機能が充実しており、コミュニティが開発を行いやすくなっています。コミュニティの中で誰がどのぐらい貢献しているかを可視化する機能（スター、貢献度）開発メンバーの知見を共有する機能（Wiki、GitHub Pages）ソースコードの更新などに関する議論をやりとりする機能（Issues、Codeとの連動）単にソースコード管理サービスとしての機能だけを捉えると、実はGitHub、Bitbucket、GitLabとも大きな違いはありません。しかしこのような開発しやすい環境を支援する機能という点では、GitHubが頭一つ抜けている印象を持ちます。理由3：先進的な機能の拡充 GitHubは2018年にMicrosoft社に買収され、傘下の一企業となりました。 Microsoft社は買収後もGitHubを独立企業として維持する意向を示しており、両社はオープンソースコミュニティにとっても良好な関係となっています。このような環境の中から、以下のような先進的な機能が次々と誕生しています。世界中のエンジニアに人気のあるMicrosoft社のフリーのソースコード編集ソフト「Visual Studio Code」をオンラインで利用できる「Codespaces」オープンソースコミュニティに開発者としてではなく、資金提供者として参加できる「Sponsors」機能ソフトウェアの開発から公開までの一連の流れをサポートする「GitHub Actions」これら先進的な機能は類似のソースコード管理サービスにはないものであり、開発者にとってGitHubを選ぶ理由の1つとなっています。 GitHubのアカウント登録それではさっそくGitHubに登録してみましょう。まずは、GitHubのトップページにアクセスします。ここでメールアドレスを入力し、緑色の「Sign up for GitHub」ボタンをクリックします。次の画面でUsername（ユーザー名）やPassword（パスワード）を入力します。下の方にある「Pick the spiral galaxy」は、不正なユーザー登録を防ぐための仕組みです。クイズになっており渦巻状の銀河の絵を数回選択します。なお、このクイズは定期的に変わるようです。決められた回数、クイズに正解すると「Create account」ボタンを押せるようになります。ボタンを押して次に進みましょう。このような画面になります。登録したメールアドレスに認証のメールが届きます。メールの内容に従いユーザー認証を行ってください。以上でGitHubのアカウント登録は完了です。大石ゆかり GitHubの登録はできました♪それで、どうやって使うんですか〜？田島悠介その前にいくつか知っておいたほうがいいことがあるから、教えておくね。大石ゆかりはい、お願いします♪ [PR] 未経験からWebエンジニアを目指す方法とはGitHubを使う上で知っておきたい事前知識早速GitHubを使っていきたいところですが、使い始める前に知っておきたい事前知識を3つ紹介します。ここで紹介する言葉がまったくわからない場合は、理解しておきましょう。事前知識1：ローカルリポジトリとリモートリポジトリ事前知識2：コミットとプッシュとは事前知識3：ブランチ（branch）とは事前知識4：インデックス（index）とは事前知識1：ローカルリポジトリとリモートリポジトリリポジトリとは、ファイルやディレクトリの状態を保存する場所です。変更履歴を管理したいディレクトリなどをリポジトリの管理下に置くことで、そのディレクトリ内のファイルなどの変更履歴を記録することができます。リポジトリは自分のマシン内にある「ローカルリポジトリ」とサーバなどネットワーク上にある「リモートリポジトリ」の2カ所にあります。基本的にローカルリポジトリで作業を行い、その作業内容をリモートポジトリへプッシュする流れで行います。事前知識2：コミットとプッシュとは最低限この2つは知っておきましょう。コミット(commit) ファイルの追加や変更の履歴をリポジトリに保存することプッシュ(push) ファイルの追加や変更の履歴をリモートリポジトリにアップロードするための操作事前知識3：ブランチ（branch）とはソフトウェアの開発では、現在リリースしてるバージョンのメンテナンスをしながら新たな機能追加やバグ修正を行うことがあります。このような、並行して行われる複数のバージョン管理を行うために、Gitにはブランチ（branch）という機能があります。ブランチは履歴の流れを分岐して記録していくものです。分岐したブランチは他のブランチの影響を受けないため、同じリポジトリ内でそれぞれの開発を行っていくことができます。事前知識4：インデックス（index）とはリポジトリ管理下にあるディレクトリの中には、一時的に使うファイルなど、Git管理が不要なものもあります。そこでGitでは、バージョン管理する対象のファイルやフォルダを「インデックス」と呼ばれる台帳に登録することで、必要なもののみバージョン管理が行えるようになっています。逆に言えば、新たにフォルダやファイルを作成した場合、コミットする前にインデックスに登録する必要があります。忘れないようにしましょう。 GitHubの使い方それでは使い方を覚えていきましょう。基本的なGitの作業は下記のような流れとなるので、GitHubを使って順番に紹介します。なお、「1」の作成は初回のみ行い、「2」から「5」を繰り返します。基本的に小さい作業の単位でコミットを行い、ある程度作業がひと段落した時にプッシュをするのが一般的です。コミットの作業がわかりやすいように、コミットメッセージを残しておくと、ログを追っていく時に役立ちますので覚えておきましょう。 Githubでリポジトリを作成（git init）ファイルの作成、編集を行うファイルの作成/変更/削除をgitのインデックスに追加する（git add）変更結果をローカルリポジトリにコミットする（git commit）ローカルリポジトリをプッシュしてリモートリポジトリへ反映させる（git push） GitHubでリポジトリを作成（git init）まずはリポジトリを作成します。 GitHubにログインした状態で以下にアクセスします。 https://github.com/new 次に表示される画面では、「Repository name」の入力のあと、必要に応じて「Description」も入力します。また、リポジトリの種類を「Public」か「Private」を選択します。ソースコードを公開したくない場合は「Private」を選択すると良いでしょう。最後に、リポジトリの中にあらかじめREADMEファイルを作成しておく場合は「Initialize this repository with a README」にチェックを入れます。 .gitignoreやlicenseについては後で追加や変更ができるので、Noneを選択します。必要項目の入力が終わり「Create repository」ボタンをクリックするとリポジトリの作成は完了です。次の画面で、リモートリポジトリのアドレスが表示されますので、控えておいてください。ファイルの作成、編集を行うはじめに、ローカルのPC上にローカルリポジトリを作成します。今回は「awesome」というディレクトリを作成することにします。以下の操作はWindowsであればPowerShell、Macであればターミナルで行います。コマンドは1行ずつ、最後にEnterキーを押して入力しましょう。 mkdir awesome cd awesome git init 「mkdir」は新しくディレクトリを作成するコマンドで、「cd」はディレクトリを移動するコマンドです。 awesomeというディレクトリを作成し、そのディレクトリに移動してから作業が始まります。そして、この「git init」コマンドはGitリポジトリを新たに作成するコマンドです。バージョン管理を行っていない既存のプロジェクトをGitリポジトリに変換する場合や、空の新規リポジトリを作成して初期化する場合に使用します。 git initコマンドを実行するとカレントディレクトリをGitリポジトリに変換します。次に、テキストエディタなどで以下のHTMLファイルを作り、先ほどのawesomeフォルダに「hello.html」という名前で保存しましょう。現在の状態を確認しましょう。 git status 結果は以下のようになります。 hello.htmlが「Untracked files」、つまりインデックスに登録されていないファイルとして表示されています。 On branch master Untracked files: (use "git add <file>..." to include in what

Git

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

プロジェクトを実行！npm startの使い方【初心者向け】

npm startとは

Nodeプロジェクトを実行

npm startの使い方

npm startのヘルプを見る

コマンド

表示結果

解説

package.jsの内容

表示結果

解説

npm startの実行してみる

コマンド

表示結果

解説

npm startを実際に使ってみよう

npm startを利用してnode inspectorを利用する

package.jsに記載

コマンド

解説

関連するキーワード

あわせてよく読まれている記事

リアルタイム通信で活用！注目の技術「Node.js」とは【初心者向け】

これだけは覚えておきたい！基本的なUNIXコマンド20【初心者向け】

PythonでローカルPC環境にWeb Serverを立ち上げる方法を現役エンジニアが解説【初心者向け】

今さら聞けない！ターミナルの使い方【初心者向け】

今さら聞けない！コマンドプロンプトの使い方【初心者向け】

今さら聞けない！GitHubの使い方【超初心者向け】

TechAcademyから
現役エンジニアの方へ
お知らせ

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

npm startとは

Nodeプロジェクトを実行

npm startの使い方

npm startのヘルプを見る

コマンド

表示結果

解説

package.jsの内容

表示結果

解説

npm startの実行してみる

コマンド

表示結果

解説

npm startを実際に使ってみよう

npm startを利用してnode inspectorを利用する

package.jsに記載

コマンド

解説

記事を検索

関連するキーワード

関連する記事

あわせてよく読まれている記事

TechAcademyから 現役エンジニアの方へ お知らせ

TechAcademyから
現役エンジニアの方へ
お知らせ