〜プログラミングの学習準備をしようITリテラシー④〜

以前の記事を見逃した方や見直したい方は下記リンクへ

①Google Chromeのデベロッパーツールを使いこなそう

デベロッパーツール（Developer tools、略称DevTools）とは、ブラウザに標準搭載されている検証ツールです。ブラウザで表示しているWebページのHTMLやCSSを確認したり、異なるデバイスでの表示を確認したりする事が出来ます。プログラミング学習中はもちろんの事、Web開発の現場でもこのデベロッパーツールをよく使うので、ぜひ覚えて下さい。ではデベロッパーツールを実際に使いながら、出来る事を詳しく説明します。今回は中でも使いやすいGoogle Chromeのデベロッパーツールを利用して解説します。

右クリックしたあと1番下の検証をクリックして下さい。ちなみに以下のショートカットキーでも検証を開けます。

• Windows：Ctrl + Shift + I
• Mac：Command + Option + I

では、デベロッパーツールで画面説明と具体的な使い方を解説します。ここからの説明は実際にプログラミング言語（特にHTML/CSSやJavaScriptなど）を学習しないと難しい内容です。したがって、現時点ではサラッと読み進め、必要に応じて再度読むようにしてください。

デベロッパーツールの画面の見方を知ろう

• （1）Select an element in this page to inspect it（ページ内の要素を選択して検査）
• （2）Toggle device toolbar（デバイスのツールバーを切り替え）
• （3）Elements（要素）
• （4）Settings（設定）
• （5）Style（スタイル）
• （6）Computed（計算済み）

（1）Select an element in this page to inspect it（ページ内の要素を選択して検査）

ちなみに、ショートカットキーは以下のとおりです。

• Windows：Ctrl + Shift + C
• Mac：Command + Shift + C

（2）Toggle device toolbar（デバイスのツールバーを切り替え）

ちなみに、ショートカットキーは以下のとおりです。

• Windows：Ctrl + Shift + M
• Mac：Command + Shift + M

（3）Elements（要素）

（4）Settings（設定）

（5）Style（スタイル）

（6）Computed（計算済み）

②具体的な使い方を知ろう

「Toggle device toolbar（デバイスのツールバーを切り替え）」を使うと、様々な画面サイズでWebページを見る事が出来ます。これにより、パソコンから開いているWebページでも、タブレットやスマートフォンではどのように表示されるかを確認できます。端末の種類を選択出来るので、非常に細かく表示を確認出来ます。デベロッパーツールを使えばよりスピーディーにデバイスごとの表示を確認し、整える事が出来るので便利です。

ソースコードを検証する

検証方法は以下の2通りあります。2の方が直感的に検証しやすいです。

• デベロッパーツール側から検証する
• Webページ側から検証する

デベロッパーツール側から検証する

Webページ側から検証する

ソースコードの編集する

③表示言語を変更する

デベロッパーツールは日本語でも利用可能です。初期設定で英語表示になっていてどうしても日本語で使いたい方は、設定方法を読んで言語変更をしてください。

• 画面右上の歯車マーク「settings（設定）」をクリック
• 「Language（言語）」の中から「Japanese – 日本語」を選択
• 「Reload DevTools（DevToolsを再読み込み）」という青いボタンをクリック

ちなみに、日本語に対応したのは2021年8月24日からです。日本語対応して日が浅いので、デベロッパーツールに関して情報を得たい場合は、英語表記をキーワードにして検索した方が情報を得られやすいです。また、エンジニアとして個人や組織で働く場合、英語を避けて通る事は出来ません。デベロッパーツールも英語で慣れておく事をおすすめします。

④タイピング速度を上げよう

タイピング速度は日々の仕事の生産性を左右する為、一定レベルまでは必ず上げておきたいスキルです。キーボードを見ずに正確に文字を打てるだけで仕事の効率が大きく変わるので、本記事ではそのコツと練習方法を解説します。

⑤コツは基本のホームポジションを覚えること

タイピングにはホームポジションといって、指を置く位置があらかじめ決められています。「F」に左手の人差し指、「J」に右手の人差し指を置いて、そこから左手は「D」「S」「A」に中指・薬指・小指の順番で置き、右手は「K」「L」「；」に中指・薬指・小指の順番で置きます。これが基本となるホームポジションです。それぞれのキーはどの指で入力すべきかあらかじめ決められているので、それに慣れて下さい。

⑥タイピング練習におすすめのWebサイト

e-typing、13種類のお題の中から選んでタイピング練習ができ、終了時にタイピングスコアが出るようになっています。どのキーをどの指で押せばよいか表示されるので、それを見ながらキーと指の正しい組み合わせを覚えて下さい。

⑦エンジニアが導入すべきアプリ

Evernote

Evernoteはメモアプリです。高機能でありながら見た目がシンプルなので、とても使いやすいです。ノートのフォルダ分けやタグ設定が出来る他、文字だけでなく画像やPDFファイルなども貼り付ける事が出来ます。IT業界で働く人であれば、気になった記事や画像、PDFなどをメモする事が多いです。Evernoteはパソコンとスマートフォンを連携させる事で、移動中はスマートフォンでメモを取り仕事中はパソコンで編集出来るので便利です。

Todoist

Todoistは「ToDo＝すべきこと」を管理出来るアプリです。頭の中でToDoを整理出来ていれば目の前の作業に集中出来るので、ToDoや毎日の目標をリストで管理する事は大切です。プログラミング学習を始める前にToDoを洗い出し、さっそく今日からToDo管理をする習慣をつけていきましょう。ToDo管理が出来るアプリはたくさんありますが、中でもおすすめなのがTodoistです。

Skitch

SkitchはEvernoteが提供している画像編集アプリです。矢印や文字を入れるだけの簡単な画像編集をしたい時にとてもおすすめです。エンジニアはリモートワークや社外メンバーとの共同作業が多い為、必然的にテキストコミュニケーションが多くなります。しかし、テキストコミュニケーションだけではどうしても伝わらない事もあります。そんな時、Skitchを利用すれば画像を注釈出来たりするので大変便利です。

Kindle

電子書籍で本を読むメリットは以下の3点です。

• 本を買いに行く時間を省ける
• 本を持ち歩く必要がない
• アプリ上で気に入った箇所に色をつけたり、メモを追加したり出来る

もちろん紙の本もメリットはありますが、電子書籍のほうが便利な場面が多いです。特に、逆引き系の技術書は電子書籍がおすすめです。

feedly

feedlyは、お気に入りのWebサイトのコンテンツの更新日やその内容を確認できるアプリです。お気に入りのWebサイトを随時チェックしなくても、feedlyを開けば更新されたWebサイトが自動的に表示されるので、情報収集がとても楽になります。[br-xxl]IT業界で働く人は、feedlyを使った情報収集を朝のルーティーンに入れている事が多いです。

Chatwork

Chatworkはビジネスコミュニケーション用のアプリです。メッセージやタスクを発行する機能の他、電話機能が備わっています。また、Chatworkはコミュニケーションに特化している為、特に社外の人とやりとりする際に、SNSなどで繋がるよりも心理的ハードルが低いというメリットがあります。ビジネス用のチャットアプリとして多くの人が使っているので、会員登録だけでもしておけばいつでも利用できるので便利です。

Dash（Mac用）

Dashはスニペットアプリといって、あらかじめ登録しておいた文章や単語を一瞬で入力できるようになるアプリです。よく使う「ありがとうございます」や「お世話になっております」といった文章を登録しておいて、仕事の生産性を高めて下さい。エンジニアの場合はよく使うコードを登録しておくのもおすすめです。

Clippy（Mac用）

Clippyはコピー＆ペーストが楽にできるツールで、コピーしたテキストを複数保存しておけます。複数の箇所でコピー＆ペーストするときに、一つ一つコピーとペーストを繰り返すのは大変ですよね。Clippyを利用すれば、あらかじめ一度に複数コピーしたあと、いつでもその内容を呼び出してペーストできます。

LINE（パソコン版）

LINEはパソコンに入れておけば、作業中にスマートフォンを開かずに済むので生産性が向上します。また、LINEしか連絡先を知らない人にパソコンからファイルを送りたいときにも便利なので、パソコンにも入れておく事をおすすめします。

Zoom

Zoomはビデオ会議アプリです。ミーティングIDを発行するだけで誰でも参加できる為、コンタクト申請などの手間を省けます。ミーティングだけでなくセミナーにも利用できるので、ビジネスシーンに特化したアプリといえます。いつでも会議や勉強会に参加できるように、前もってZoomをインストールして下さい。

書籍・本

出典：基礎からのIT担当者リテラシー

企業のIT担当者は、「情報システム部門(情シス)」に所属するエンジニアであったり、「社内SE」「コーポレートエンジニア」などと呼ばれたりもします。IT担当者の業務は多岐にわたります。会社内の業務用のパソコンの手配やネットワーク機器の整備だけでなく、社内のセキュリティ対策や業務システムの導入、システム制作の窓口になることもありえます。

出典：ビジネスパーソンがマスターすべき必須要素 ITリテラシー

ITを上手に駆使する事は、できるビジネスパーソンの必須要素！ITに詳しいだけでは”仕事ができる”とは言えません。ITはあくまでも仕事を効率よく進める為のツールです。「ITはよく分からないから」「面倒だから」では済まされません！企業経営を支える「人、モノ、金、情報」の「情報」を取り扱う最適のツール！ITの基礎の基礎や間違いやすい実例を用いて解説。ITリテラシーに対する誤解の解消や応用など、失敗談をまじえた実例をつかってわかりやすく紹介しています。

出典：いまさら聞けない ITの常識

「弊社もAIで新サービスを立ち上げよう!」「ブロックチェーンを使えば管理コストがなくなるんだって!?」「アジャイルでやれば、2週間くらいで開発できるんじゃないの」――職場で、取引先で、こんなことは起きていませんか?IT化が進む一方で、ITを活用できる人は多くありません。いまやITは個人や組織の業務改善ツールではなく、全く異なる角度からビジネスを行うための基盤になっています。特にマネジメント層がIT投資について効率的に意思決定できず、適切なタイミングでシステムが更改されない、無駄なシステム構築が行われる、新規市場参入の機会を逃す、などの問題が起きています。

出典：新人IT担当者のためのネットワーク管理&運用がわかる本

本書は会社のネットワーク管理の入門書です。ネットワークをゼロから構築するのではなく、すでに稼働中の社内ネットワークを管理するために必要な知識を解説します。LANやインターネットのしくみから、サーバーの機能、ネットワークのメンテナンス・拡張・トラブル対策、クラウドの活用、セキュリティ対策など、会社のネットワーク管理者になった人が最初に勉強するべき情報をカバーしています。

出典：基礎からわかる情報リテラシー

特定のソフトの使い方を解説した「マニュアル本」は,巷(ちまた)にあふれています。しかし,それらは明日には役に立たなくなるかもしれません。もうちょっと基本的なレベルで勉強しておけば何年たっても、どんな環境でも役に立つはずです。

以上が私のオススメ本になります。
気になる方や読んでみたいと思っている方は、参考になりますので、ぜひ読んでみて下さい。
次回は、プログラミングの学習準備をしようITリテラシー⑤を記事にしますので、お楽しみを！！