Re:ゼロから始める文系プログラマ

未経験がプログラミングを通して人生を変える

JavaScriptの「スコープ」を徹底解説

f:id:ShotaNukumizu_1000:20211114052320p:plain

おはようございます。Shotaです。

今回の記事では、JavaScriptの「スコープ」について初心者向けに徹底解説します。スコープを正しく理解し、適切に範囲を指定することでより可読性の高いプログラムを書けるようになります。

そもそも、JavaScriptについてわからない人は以下の記事を参考にしてください。

▼おすすめの記事

shotanukumizu-1000.hatenablog.com

shotanukumizu-1000.hatenablog.com

それでは早速、本題に入りましょう。


「スコープ」とは

スコープは「変数の有効範囲」です。JavaScriptは細かくスコープを扱える一方で、少しの記述ミスでスコープの種類が大きく変わることがあります。

簡単なプログラムを書いているうちは、スコープをそこまで意識しなくてもコーディングできるようになることが多いです。しかし、複雑なコードを書くとスコープを小さくすることでバグを減らしたり、プログラム全体の見通しを良くすることを意識する必要があります。

スコープの役割

スコープで変数の有効範囲を限定することで、範囲の外へ影響することを未然に防げます。これによって、エラーの範囲を限定しやすく編集しやすいコードに仕上がります。

スコープの種類

JavaScriptには次のようなスコープが存在します。

  • グローバルスコープ
  • ローカルスコープ(関数、ブロック)

また、クラスに関係する変数もスコープに影響します。一般的には次のようなものが挙げられます。

ブロックスコープ

ブロックとは{}で囲まれたコードを指します。ifforと一緒に使われることが多いです。constletで宣言された定数や変数はこのブロックスコープで扱われます。

if (true) {
    const myBlockVar1 = 'value1'
    console.log(myBlovkVar1)
} else {
    const myBlockVar1 = 'value2'
    console.log(myblockVar1)
}

上記のプログラムのように、ifelse文の2つのブロック内にmyBlockVar1という変数をそれぞれ宣言して利用できます。コード中に二回myBlockVar1が出ていますが、それぞれ別の変数として扱われます。

ブロックは特にifforと一緒に利用せずとも、自由にロジックを追加できます。

関数スコープ

関数の中が有効範囲内になるスコープです。関数の中でvarが宣言される変数のみがこれに該当します。

const funcScope = () => {
    var myFuncVar1 = 'value'
    console.log(myFuncVar1)
}

funcScope()
// console.log(myFuncVar1) エラー:関数の外なので変数を利用できません。

グローバルスコープ

JavaScriptにおいて最も範囲の広いスコープで、プログラムのどこからでも参照できます。

関数に全く含まれていない最上位の領域で変数を宣言したり、関数内でも変数を宣言する際にvarconstletを付けずに使うとグローバルスコープとして処理されます。

// 最上位でのvarはグローバルスコープに変数を宣言
var arg1 = 'JavaScript'

// これもグローバルスコープに変数を宣言
arg1 = 'TypeScript'

// varやconstが付けられていないので、グローバル変数として利用される
const myFunc = () => {
    arg2 = 'Dart'
} 

console.log(arg1)

// console.log(arg2)  まだ宣言していないのでここで呼び出すとエラー
myFunc() // 関数の中でグローバル変数arg2が呼び出される
console.log(arg2) // ここでarg2が利用できる

varconstletなどの宣言を付けずに変数を利用するとグローバル変数として処理されるので、これがバグの原因になることがよく知られています。

letvar

今回の記事では変数宣言時にletvarを両方とも使いました。

しかし、JavaScriptでは変数宣言時にletを使うと、varよりも厳密にプログラムがチェックされてバグが発生しにくい仕組みで実現されています。

このように考えると、varを使う機会はほとんど無くなるかと思います。

まとめ

今回の記事では、JavaScriptの「スコープ」を詳細に解説しました。

今回の記事を参考に、JavaScriptへの理解を一層深めていただけると幸いです。

今回の記事はこれで終了です。

参考サイト

techacademy.jp

codezine.jp

Figmaとは?|話題のデザインツールを2分で解説

f:id:ShotaNukumizu_1000:20220102090648p:plain

おはようございます。Shotaです。

皆さんは、Figmaを知っていますか?

🤨「Figma?何それおいしいの?」

🤔「名前は聞いたことあるけど、実際に使ったことはない」

このように考えている方も少なくないでしょう。

そこで、今回の記事ではFigmaについて初心者向けに詳細に解説します。それでは早速、本題に入りましょう。


Figmaとは?

f:id:ShotaNukumizu_1000:20220123151009p:plain

Figmaは、簡単に言えばデザインを制作するためのツールです。似たような機能があるデザインツールとして、SketchやAdobe XDがあります。

Figmaの特徴

ブラウザ上で簡単に閲覧、編集ができるのが最大の特徴です。個人、小規模プロジェクト向けのStarterプランであれば無料で使えるので、手軽に使えるのも魅力の一つです。

それだけではなく、メンバーへデザインのデータを簡単かつ高速で共有できます。

Figmaの使い方

主にFigmaの使い方は以下の通りです。


このように幅広い場面で使われています。デザイナーやプログラマーにも利用されています。

メリット

f:id:ShotaNukumizu_1000:20210921075852p:plain

ブラウザ環境があればどこでも使える

Figmaはブラウザさえあればどこでも作業を継続できるのが一番の強みです。

リアルタイムで編集できる

この機能のおかげで、複数人で話し合いながらデザインを進められます。特にリモートでの作業では、同じ画面を見ながら作業できるのでデザインアイデアの共有にも便利です。

URL一つで簡単にデータ共有できる

URLだけで簡単にデータを共有できるので、最新版をローカルフォルダに入れて、圧縮してZIPファイルで保存して...という手間がなくなります。

公開設定や権限管理が簡単

Figmaでは、プロジェクトやファイル単位で公開設定や権限管理ができます。データの閲覧は制限なく誰でもできるので、データ共有をスムーズにできます。

制作したデザインをCSSに変換できる

Figmaで制作したデザインはCSSに変換できます。Figmaで制作したデザインをWEBページに反映させる際には非常に便利です。

軽量

とにかく動作が軽量です。

デメリット

f:id:ShotaNukumizu_1000:20210924065330p:plain

日本語の情報が少ない

Figmaは登場したばかりのツールなので、まだ発展途上です。そのため。日本語の情報が少ないです。

画像を加工できない

Figmaでは画像を加工する機能はありません。画像を加工したいならPhotoshopが必要になります。

Figmaへの登録方法

Figmaを利用する際にはアカウントが必要です。公式サイトにアクセスしてください。

Googleアカウントを持っていれば、メールアドレスやパスワードを新規作成する必要はありません。

これでアクセスは終了です。

まとめ

f:id:ShotaNukumizu_1000:20210924101936p:plain

今回の記事では、最近話題のツール「Figma」について詳細に解説しました。

今回の記事を参考に、Figmaに対する理解を深めていただければ幸いです。

今回の記事はこれで終了です。

参考サイト

www.ejworks.com

crestadesign.org

Flutter開発で需要の高いDartの特徴を徹底解説

f:id:ShotaNukumizu_1000:20210924095508p:plain

おはようございます。Shotaです。

🤔「Dartが最近話題になっているが、どう勉強すればいいのか?」

🤨「Dartを開発で使うメリットってなんだろうか?」

このように考えている人も少なくないでしょう。

そこで、今回の記事ではプログラミング初心者に向けてDartについて詳細に解説します。今回の記事を参考に、Dartについて興味を持ってくれる人がいれば幸いです。

それでは早速、本題に入りましょう。


Dartとは?

f:id:ShotaNukumizu_1000:20211002142621p:plain

Dartは2011年にGoogleが開発したプログラミング言語です。もともとはWEBアプリ向けのプログラミング言語として開発され、Google社内で使用されていました。しかし、リリースされた当初はほとんど普及されていませんでした。

DartWebブラウザの組み込みスクリプト言語として、JavaScriptの問題を解決するために開発されました。(いわゆるAltJS―JavaScript代替言語)そのため、JavaScriptと比較してさらに大規模なプロジェクトにも対応できるようになり、セキュリティ面での対策も大幅に向上しております。

DartJavaScriptをベースに開発されているので、JavaScriptに慣れている人はそこまで習得に困らないと思います。

Dartでできること

f:id:ShotaNukumizu_1000:20210924101936p:plain

Dartでできることは主に以下の4つです。

Android/iOS両対応のスマホアプリの開発
フロントエンド開発
バックエンド開発
JavaScriptへの変換

それぞれ順番に解説していきます。

Android/iOS両対応のスマホアプリの開発

Dartを使って、AndroidiOS両方に対応しているスマホアプリを開発できます。

最近、スマホアプリの開発で注目されているFlutterはDartで開発されています。Googleでは今後もFlutterで開発を進めていく予定なので、プログラマーとして習得しておくと仕事の幅が広がるかもしれません。

KotlinまたはSwiftを使ってスマホアプリの開発を進めている人はDartを視野に入れておいたほうがいいかもしれません。

フロントエンド開発

Dartではフロントエンド開発ができます。しかも、CSSファイルを使わずに画面のデザインを構築できるのが強みです。フロントエンドで見やすいデザインを効率的に開発できるのはDartならではの良さでしょう。

バックエンド開発

Dartはフロントエンドではなく、バックエンドの開発にも対応しています。こちらに関しては発展途上で、まだ情報が少ないです。今後の状況次第ではDartによるバックエンドの開発が主流になるかもしれません。

JavaScriptへの変換

f:id:ShotaNukumizu_1000:20211114052320p:plain

DartJavaScriptと互換性があり、Dartで書かれたコードをJavaScriptに変換できます。

Dartのメリット・デメリット

本章では、Dartのメリットやデメリットをそれぞれ詳細に解説していきます。

メリット

f:id:ShotaNukumizu_1000:20210921075852p:plain

Dartのメリットは主に以下のようなものがあります。


文法がわかりやすい
大規模開発に向いている
動的型付け・静的型付けに両対応
効率的にフロントエンドを開発できる
複数のプラットフォームに対応(Windows, Mac, Linux)


それぞれ順番に解説していきます。

文法がわかりやすい

前章でも話しましたが、DartJavaScriptの代替言語として設計されています。そのため、JavaScriptを経験しているプログラマーには馴染みやすいです。

JavaScriptをベースに設計されているので、学習コストはそこまで高くないです。

大規模開発に向いている

Dartオブジェクト指向プログラミング言語なので、大規模開発に向いています。

動的型付け・静的型付けに両対応

Dartには強力な型推論の機能がありますので、動的型付け・静的型付け両方とも対応しています。

たとえば、変数を宣言する際にdynamicを変数の前に書けば動的型付けになります。

用途に応じて、動的型付けや静的型付けを切り替えられます。

効率的にフロントエンドを開発できる

DartCSSなしで画面のデザインを構築できます。そのため、WEBアプリを開発する際に別途CSSファイルを用意する必要はありません。

複数のプラットフォームに対応(Windows, Mac, Linux)

DartWindows, MacLinuxに対応しているので多種多様な環境で動作できます。SwiftやRubyと違って、開発に必要なOSを選びません。

デメリット

f:id:ShotaNukumizu_1000:20210924065330p:plain

ここまでDartのメリットを列挙しました。ところが、そんなDartにもデメリットはあります。

❌**まだまだ発展途上** ❌**日本語の情報が少ない**

それぞれ順番に解説していきます。

まだまだ発展途上

Dartは他の言語と比べて開発から日が浅いので、現時点ではまだ発展途上です。

日本語の情報が少ない

Dartがリリースされたのは2011年ですが、有名になったのはつい最近なので日本語での情報はありません。

そのため、Dartを勉強する際には自分で英語の情報を収集する必要があります。

サンプルコード

ここで簡単にDartの言語仕様を見ていきましょう。

main関数

Dartではmain関数からプログラムが始まります。

// main.dart
void main() {
    print('Hello Dart');
}

Dartプログラムを動かす場合は、dartコマンドで実行できます。dartコマンドはFlutterをインストールしておけば使えます。

実行する際は以下のコマンドを入力してください。

$ dart main.dart
Hello Dart

今回の記事で紹介した方法は、dartをインストールしていなくてもTry Dartでプログラムを書いて実行できます。

変数の特徴

Dartでは、変数の型すべてがオブジェクト型の派生で、基本ライブラリで型が用意されています。

基本的な変数の型はこれだけ覚えておけば大丈夫です。

概要
int 整数。64bitで管理されている(Flutterに限る)
double 浮動小数点数
num intnumの親タイプ
bool 真偽値。truefalseで表現
Null 無効の値
String 文字列型

余談ですが、型変換をする際にはそれぞれのクラスに変換メソッドがあります。

例えば、小数点まで管理できるdoubleを整数型(int)に変換する際はtoIntを利用します。

double num = 10.1;
int intNum = num.toInt()

まとめ

f:id:ShotaNukumizu_1000:20211018171617p:plain

今回の記事では、Dartについて徹底解説しました。

今後、スマホアプリあるいはフロントエンドを開発するならDartは欠かせないと思います。

今回の記事を参考に、Dartについて詳細に理解を深めていただければ幸いです。

今回の記事はこれで終了です。

参考サイト

www.fenet.jp

type.jp

dart.dev

codezine.jp

【毎週日曜更新】本の要約・考察第43回~『うまくいっている人の考え方』~

おはようございます。Shotaです。

今日は日曜日なので、本の要約・考察記事を書いていきます。

今回紹介する記事は100万部の超ベストセラー『うまくいっている人の考え方』です。



はじめに

本書のテーマは「自尊心」です。本書では、自尊心は「自分のことを好きになり、他人と同じように自分も素晴らしい人生を作り上げられる人間だ」と信じる気持ちのことだと書かれています。この自尊心は、自分の人生をより良くするためには非常に大事な要素です。

しかし、多くの人が自尊心を失って苦しんでいます。誰しも成長の過程で、自分に対して悪い感情をいだきたくなるような不快な経験をします。そして、その経験があまりにも多いと、心のなかに次のような考えが生まれます。

私はなんてダメな人間なんだ

自尊心を取り戻すことは難しいことではありません。言い換えれば、自分に対する考え方や価値観を修正するだけでいいのです。

そこで、今回の記事では本書に書かれている自尊心を取り戻すために必要な100の考え方のうち、7個に絞ってそれぞれ徹底解説します。


うまくいっている人の考え方


したくないことははっきり断る

1つ目の考え方は「したくないことははっきり断る」です。

こちらが嫌だと思っているのに、自分の仕事や都合をひたすら押し付けてくる人がいます。このような時ははっきり断りましょう。一番効果的な方法は、「私はやりたくありません」と断言することです。理由を述べる必要はありません。


たくさん失敗して、たくさん学ぶ

2つ目の考え方は「たくさん失敗して、たくさん学ぶ」です。

前提として、人生で起こる失敗を確実に避ける方法はありません。失敗をする時、落ち込んでしまうのが大半ではありますが、失敗は学ぶためには必要不可欠です。

すべての失敗は学ぶための絶好の機会です。そのように考えるのが賢明です。たくさん失敗してたくさん学びましょう。


他人に期待しない

3つ目の考え方は「他人に期待しない」です。

私たちは他人が自分と同じような行動を取るものだと思い込みがちです。だから、他人が以外な行動を取ると、イライラしたりがっかりしたりすることがあります。

しかし、他人の行動を正確に予想できる確率は5分5分ぐらいでしかありません。人間には一人一人個性があるからこそ、他人の行動は時として理解しづらいことがあります。裏を返せば、あなたの行動だって時には理解しづらいのです。


自分と他人を比較しない

4つ目の考え方は「自分と他人を比較しない」です。

自分と他人を比較することは、一方で不満を生み、他方で間違った優越感を生むだけです。自分と他人を比較する際には、心のなかで自分と相手の優劣を判断するのが典型的なパターンです。

自分と他人を比較するのは無意味です。


自分の考えを大切にする

5つ目の考え方は「自分の考えを大切にする」です。

相手が期待していることではなく、自分が本当に思っていることを言いましょう。自分の信念や価値観を曲げて妥協する態度は、本当に価値のある仲間を作ることにはつながらないのです。

相手の意見に賛成できなければ、「私はそう思いません」とはっきり述べましょう。


相手を大切にする

6つ目の考え方は「自分の考えを大切にする」です。

自分にポジティブな感情を持ちたいなら、相手も自分と同じように大切にしましょう。相手も自分と同じように、痛みを敏感に感じる人間であることを十分に理解しましょう。


不幸な人間関係を避ける

最後の7つ目の考え方は「不幸な人間関係を避ける」です。

一つの人間関係が終わったら、すぐに別の人間関係を作ろうとせずに新しい人間関係を作るために時間を費やしましょう。人間関係を作るのに急ぐ必要はありません。本当にそれが必要なのかどうかは、検証してからも遅くないでしょう。


まとめ

今回の記事では、100万部のベストセラー『うまくいっている人の考え方』を要約・解説しました。

今回の記事はこれで終了です。

【参考サイト】

【Python】型定義を詳細に解説

f:id:ShotaNukumizu_1000:20220104152603p:plain

おはようございます。Shotaです。

今回の記事では、Pythonで型定義する方法を詳細に解説します。

Pythonは動的型付け言語ですが、型情報をあえて書いておくことでプログラミングが楽になったり、あとから見直したりしたときにドキュメントの代わりになったりするので非常に便利です。

それでは早速、本題に入りましょう。



型を作る

Pythonではクラスを作成することで、自己定義型を用意できます。自己定義型は簡単に言えば、「自分で作るデータの型」です。

次のようなプログラムを作ることで簡単に自己定義型を作成できます。

# クラスの作成
class Person:
    def __init__(self, name, age):
        self.name = name
        self.age = age
    
    def show(self):
        print('-------------')
        print(f'Name: {self.name}, Age: {self.age}')

# インスタンスの作成
v1 = Person('Taro', 30)
v1.show()

v2 = Person(10, 'Ken') #順番が逆
v2.show()

▼出力結果

-------------
Name: Taro, Age: 30
-------------
Name: 10, Age: Ken

このクラスでは名前、年齢をインスタンス変数として扱っています。そして、showメソッドを用意してそれらを表示する機能を持っています。


型定義を使う

型定義とは、予め関数の引数と返り値の値を書き記すものです。

まずは、以下のようにPersonクラスを手直ししてみましょう。

class Person:
    def __init__(self, name:str, age:str): # 注目
        self.name = name
        self.age = age
    
    def show(self) -> None: # 注目
        print('-------------')
        print(f'Name: {self.name}, Age: {self.age}')

v1 = Person('Taro', 30)
v1.show()

v2 = Person(10, 'Ken')
v2.show()

▼出力結果(変更前と同じ)

-------------
Name: Taro, Age: 30
-------------
Name: 10, Age: Ken

これでPythonの型定義は終了です。引数や関数の返り値にデータの型を書くだけで終わります。


まとめ

今回の記事では、Pythonで型定義をする方法について詳細に解説しました。

今回の記事を参考に、Pythonの型定義について理解を深めていただければ幸いです。Pythonの型定義はそこまで難しくないので、一度適当なプログラムを作って実際にやってみてはどうでしょう?

今回の記事はこれで終了です。

【参考サイト】

www.sejuku.net