WEBプログラミングに適した環境設定とExcelの便利機能【初級第7回】

本講義では、WEBプログラミングから少しだけ離れ、そのプログラミングをやりやすくするための環境設定や、プログラミングをする際に良くつかわれるExcelの便利機能を紹介します。
尚、環境設定はあくまで私見ですので、自分に向いていないと思った際には、参考にしないでも結構です。
Windows向けの内容となっております。

タスクバーのカスタマイズ

タスクバーとは、PC下部にある、黒い背景部分の事で、自分が立ち上げているアプリやピン止めした状態のアプリが表示されてたり、検索窓があったりします。
タスクバーは、自分が作業しているフォルダやブラウザ、ソフトなどの状態を表しており、現状が一目で理解できるのが良いと思うので、カスタマイズをしてみましょう。

タスクバーの表示を隠す

検索バー『Cortana』

タスクバーの黒の部分で右クリック>Cortana(T)>表示しない(N)をクリック。
この機能を使いたい場合は、[Windows]+[S]キーを押すと、検索バーが表示されます。

タスクビューボタン

タスクバーの黒の部分で右クリック>タスクビューボタンを表示をクリック。
この機能を使いたい場合は、[Windows]+[Tab]キーを押すと、タスクビューが表示されます。

その他のボタン

ボタン上で右クリック>タスクバーからピン留めを外すをクリック。

タスクバーの表示を切り替える

人それぞれの好みはあると思いますが、タスクバーボタンは結合していない方が、開いたフォルダやブラウザ、Excel等のソフトの確認がしやすいです。
そこで、タスクバーボタンのサイズ変更、結合の有無を調整しましょう。
タスクバーの黒の部分で右クリック>タスクバーの設定(T)をクリック。
下の様な設定画面が開いたら、好みに合わせて設定を行いましょう。

タスクバーにクイック起動を表示する

クイック起動を表示すると、タスクバーをランチャーのように使えます。
タスクバーの黒の部分で右クリック>ツールバー(T)>新規ツールバー(N)…をクリック。
フォルダー選択画面が表示されるので、フォルダーにshell:Quick Launchを入力して [フォルダーの選択] をクリック。
タスクバーを固定しているときはタスクバー上で右クリック>タスクバーを固定する(L)をクリックし、Quick Launchを好みの場所に移動します。
その他、Quick Launch上で右クリックすることにより、表示設定が変更できます。

Windows 10 タスクバーにクイック起動を表示する

テキストエディタ

エディタは複数インストールしておこう

初受講時の準備としてAtomエディタを推奨してましたが、実際は複数あったほうが便利です。
目印として、数値や文字に色分けするのと同じで、エディタも用途に応じて使い分けてもいいと思います。

エディタはそれぞれ癖があったり、見易さに違いがあるので、自分が一番使いやすいものを選べるように、複数のエディタに触れてみましょう。
無料テキストエディタの解説は以下を参考にしてください。

ファイルとエディタの関連付け

テキストファイルをダブルクリックすればメモ帳が開くように、ファイルはそれぞれプログラムに関連付けられています。
プログラミングの場合、主なもので『.html』ファイル、『.css』ファイル、『.js』ファイルがあります。
これらのファイルはテキストエディタと関連付けが出来てなければ、対応プログラムを選択する必要があります。
そこで、使いやすいエディタとプログラミングファイルを関連付ける方法を紹介します。

対象のファイルを選択>右クリック>プロパティ(R)をクリックで、以下の画像のようになります。

プログラム:変更>対象のプログラム>OKをクリック。
アイコンが変更されたのを確認したら『OK』をクリックしてウインドウを閉じて関連付けは完了です。

Windows 10 ファイルの関連付けと既定のプログラムを変更する

マルチモニター ( デュアルディスプレイ )

ノートPCで作業していると、画面サイズが小さいためか、作業が思うように進まない場合があります。
人間の視野を十分活かしきれないという思いがあるので、私としてはデュアルディスプレイを推奨しています。

設定方法は、講義内で実際に行いますが、自宅で設定を行いたい場合は、以下の記事が参考になります。
マルチ・デュアルモニターの設定方法(Windows版)

Excel(エクセル)

プログラミングを行っていく上で、作業管理やデータ整理などでExcelは必要になります。
本講義ではすべてを教えることはできませんが、よく使う便利な機能の紹介をします。

テーブルデータの貼り付け

テーブルデータ-Googleスプレッドシート

上記リンク先のページから、テーブルデータを引っ張り、Excelに貼り付けます。

  1. Excelで空白のブックを作成
  2. スプレッドシート内のデータを囲ってコピー
  3. Excel内のセルを選択し、右クリック>形式を選択して貼り付けをクリック
  4. 貼り付ける形式をテキストを選択し『OK』をクリック

同じデータがExcel内に表示されたら貼り付け完了です。

テーブルとして書式設定

  1. データ全体をマウスで選択
  2. Excel上部タブからホーム>スタイル>テーブルとして書式設定をクリック
  3. 好みのテーブルデザインをクリック
  4. データ範囲が間違いないか確認
  5. 先頭行をテーブルの見出しとして使用するにチェックを入れておく
  6. 『OK』ボタンをクリック

選択した通りのデザインになれば完成です。
この機能、とても便利なもので、デザインを自動で作ってくれるだけではなく、並び替えとフィルター機能が自動で付与されます。
さらに、列の最後尾(合計の行)のセルで計算ボタンを押すと、自動で計算式を入れてくれたりと、豊富な機能を追加してくれるので、データを扱う際はこのテーブルとして書式設定機能は使うべきだと思います。

文字列を結合して配列プログラムを書く

データテーブルが完成したので、このデータを配列化してプログラミングに応用しましょう。

まず、テーブルの右下端にある黒い三角形をクリックして横に伸ばし、一つセルを追加したらセル内に以下のコードを入力

="var user_"&[@[user_id]]&" = {user_id:"&[@[user_id]]&", user_name:'"&[@[user_name]]&"', class:'"&[@class]&"'}"

結合方法は講義内で解説していきますので、説明を受けながら残りのセルを結合しましょう。
エクセル(Excel)で文字列を結合する方法とは? | マネたま

結合が上手くいったら、その配列プログラムを第6回講義を参考にしてJavascriptでプログラミングし、配列を展開してみましょう。
展開できたら、各個人の合計点数を計算してみましょう。

まとめ

今回の講義では、改めてPCの環境設定や、必要な機能設定、そしてExcelの便利機能の紹介を行いました。

特に環境設定は好みがあるものの、試行錯誤することによって作業効率が2倍にも3倍にもすることが出来ます。
効率が上がれば、集中力、学習意欲が安定してくるので一度試してください。

自主学習のススメ