IT×MYTHING

IT関連技術や自分の好きなテーマについて紹介するブログです!

JavaScriptに特化したオンラインプログラミング学習サイト「JS-Pro.」とは? - オンラインプログラミング学習戦国時代

こんにちは。

今日はJavaScriptに特化したオンラインプログラミング学習サイトJS-Pro.について紹介します。

f:id:TrouT:20200112144309p:plain

画像:https://js-pro.jp/

目次

オンラインプログラミング学習サイトとは?

今までのプログラミング学習は、誰かに教えてもらう場合は本を買って学習することがほとんどでした。しかし、本だと荷物も多くなるし、本を押さえながらPC画面をみて学ぶのはかなり面倒くさい。。。しかも、初心者の場合、環境構築で躓くことも多いと思います。

以上の課題を解決できるのがオンラインプログラミング学習サイトです。以下の画像のように、実際にコーディングしながら学べるので実践的にプログラミングを学ぶことが出来ます。

f:id:TrouT:20200112141827p:plain

画像:JS-Pro.

JS-Proとは?

世の中には色々なプログラミング学習サイトが溢れています。例えば、Progateは様々な言語を取り扱った学習サイトです。PyQPythonに特化した学習サイトになります。

今回紹介するのは、JavaScriptに特化したプログラミングサイト「JS-Pro」になります。JavaScriptは主にWebサイトに用いられている言語で、最も人気のあるプログラミング言語の一つになります。

f:id:TrouT:20200112142541p:plain

画像:https://octoverse.github.com/

このランキングからみても、Webサイトを作成する上でJavaScriptは必須な言語と言えます。ずっと不動の一位なので、今から学習してもすぐに廃れる心配はなさそうです。

そして、JS-ProはこのJavaScriptを基本から学ぶことが出来ます。コンテンツ量が多く、十分にJavaScriptを学習できそうです。シンプルなデザインなので、直感的に操作することが可能です。

f:id:TrouT:20200112143010p:plain

画像:https://js-pro.jp/category/1

さらに、基本文法だけではなく人気のフレームワークのVue.jsまで学ぶことが出来るので、実践的にも使える学習サイトだと言えます。

MyPageもこんな感じで、学んだ内容を確認することが出来ます。 

f:id:TrouT:20200112143807p:plain

 画像:https://js-pro.jp/mypage

オンラインプログラミング学習サイト自体は多数存在しますが、今からJavascriptを学習したい、という方にとってはピッタリかと思います。

さいごに

今回は、JavaScript特化したサイトJS-Proを紹介しました。

現在は様々な学習サイトが乱立し、まさにオンラインプログラミングサイトの戦国時代と言える時代です。そのため、どのサイト学習するのかを選ぶことが、ますます難しくなって来ているかもしれません。

ただ、どのサイトも低コストで学べるので、まずは行動、つまりやってみるということが大事だと思います。

今回の紹介は以上です!多くのオンラインプログラミング学習サイトがあるので、自分に必要なものを見極めて、自分にあったものを選びましょう!

 

 

 

 

 

【GoogleApps】【スプレッドシート】「サーバーエラーが発生しました。〜」の解決方法!

こんにちは。

Google SpreadSheetにおけるエラーの解決方法を紹介します。

解決するエラーは、

スプレッドシートを開いた時に発生する"サーバーエラーが発生しました。ブラウザの[再読み込み]を押して下さい。"です。

画像キャプチャ:https://docs.google.com/spreadsheets

Error SpreadSheet

スプレッドシートのエラー

結論から言うと、

AdBlockが原因です!

このアドブロックを解除すれば、上記のエラーがでなくなります。

解除の手順は以下の通りです。

-------------------------------------------

1. まずブラウザの右上にあるAdBlockのマークを選択し、一番下の"このサイト内のページ上で実行しないで下さい"をクリックします

2. 次のような表示が出るので、"除外"をクリックします。

注意:今回の場合(上の画像)だと、docs.google.com/*に当てはまるURLは全てアドブロックを解除されます(google slideやdocsも)。スプレッドシートだけをブロック解除したい場合、「ページ」のつまみを右に移動すると、スプレッドシートだけを対象にアドブロックを解除出来ます。

3. 以下のように表示されたら、設定は終了です。"完了"をクリックしてポップアップを閉じて下さい。

4. 最終確認として、ブラウザを更新してみてください。エラーが出なくなりました!

 

以上です!

ずっと何が原因なのかがわかりませんでしたが、Adblockでした。このエラーはOKを押せば特に動作に問題は無いので、実害は少なかったですが、何回も出てくるとイライラしてくるので解消できて良かったです。

最近は、ブラウザがうまく動作しない問題のほとんどがAdblockな気がします。

効きすぎている。。。

 

 

 

【GoogleApps】【スプレッドシート】条件付き書式を使って自動的に色を付ける!

Google SpreadSheet 条件付き書式

Google SpreadSheet 条件付き書式

こんにちは。

今回は、Google SpreadSheetで条件付き書式を使って特定の文字が入力された時に、自動的に色を付ける方法を紹介します!

そもそもGoogle SpreadSheetとは、一言で例えるとMicrosoftのエクセルのようなものです。機能としてはMicrosoftのエクセルの方が多いですが、Google SpreadSheetはブラウザ上での同時編集がかなり使いやすく、複数人で利用するのにおすすめです!機能としては、Microsoftのエクセルに劣るものの、基本的な機能はGoogle SpreadSheetでカバーすることが出来ます。

また、Google SpreadSheetには「条件付き書式」だけでなく「Google Apps Script」と呼ばれる、Javascriptのようなコードを記述し、Google SpreadSheetの内容を自動化したり、GmailGoogle SpreadSheetに自動的に取り込んだりすることが出来ます。

今回紹介するGoogle SpreadSheetの「条件付き書式」は、書式の適用に関して繰り返して行う作業が発生する場合に、この条件付き書式を使うと、セルや文字の色を自動的にコントロールすることが出来ます。

実際どういうもの?というのは文字だけでは伝えづらいので、画像を用いて以下に、イメージを記述していきます。

例えば次の画像のような表があったとします。課題の列に対して、STATUSの列があり、STATUSがcloseになったらその行をグレーアウトします。

・すべてopenの状態

f:id:TrouT:20200111114630p:plain

・「コーラを買う」の行をcloseにする

f:id:TrouT:20200111114712p:plain

closeとなった行が自動的にグレーアウトにされてますね!

この方法を以下で紹介していきます。

目次

  • セル単位で色を付ける
  • 行単位で色を付ける
  • 使用シーン
続きを読む

【Python基礎文法2】まとめました

こんにちは。

再び自分用にPythonの基礎的な文法をまとめました。よければご利用ください。

第一弾はこちら↓

www.it-crossover.com

内容としては以下になります。

・関数

・文字の加工

・文字の検索

・小数点の表示

・論理演算子

### 関数の基本的な書き方
def add(x):
  retrun x +1

print(add(10)) # 11

### 文字の加工
## タプル
sake = ('sake', 'head', 'body', 'hire') #値は変更できない
man = ('man', 'head', 'body', 'foot') #値は変更できない
dic = {
  sake: 'fish',
  man: 'mammal'
}
for name, spiecies in dic.items():
        parts_1, parts_2, parts_3, parts_4 = name
        print(parts_1, 'は', spiecies, 'で、',parts_4, 'がある')

# sake は fish で、 hire がある
# man は mammal で、 foot がある

## 結合(join)
message = ['Happy!', 'sad?']
question = ' or '.join(message) #結合
print(question) # Happy! or sad?

## 置換(replace)
positive = question.replace('sad?', 'interest?')
print(positive) # Happy! or interest?

## 文字の長さ(len)
print(len(positive)) # 19 #文字の長さ

### 文字の検索(startswith, find)
str = 'yamame'
str2 = 'meyama'
## startswith(文頭の検索)
result_startswith1 = str.startswith('yama')
result_startswith2 = str2.startswith('yama')
print( result_startswith1, result_startswith2) # True False
## find(検索対象の位置indexを返す)
result_find1 = str.find('yama')
result_find2 = str2.find('yama')
print(result_find1, result_find2) # 0 2
## in(文字が含まれているか)
result_in1 = 'yama' in str
result_in2 = 'yama' in str2
print(result_in1, result_in2) #True True

### 小数点の表示
score = 30
print('テストの平均点は{:d}点'.format(score)) #テストの平均点は30点
print('テストの平均点は{:f}点'.format(score/3)) #テストの平均点は10.000000点
print('テストの平均点は{:.2f}点'.format(score/3)) #テストの平均点は10.00点

### 論理演算子
kabu = 5
nasu = 6
if kabu > 4 and nasu > 4:
     print('在庫は十分') #在庫は十分
if kabu > 5 or nasu > 5:
     print('在庫は足りています') #在庫は足りています
if not kabu == 0:
     print('カブは0個ではない') #カブは0個ではない
if (not kabu == 0 and not nasu == 0) or (kabu < 10 and nasu < 10):
     print('在庫はあるみたいです') # 在庫はあるみたいです

以上です!

【Vue.js基礎文法1】まとめました

こんにちは!

Vue.jsの基本的な文法についてまとめてみました。

jp.vuejs.org

Vueをやったことない人や復習する人、これから取り組もうとしている人がいらっしゃったら是非みてみてください。

参考↓

js-pro.jp

内容としては、以下になります。

1. cdn読み込み

2. マスタッシュ構文で表示

3. v-bindで表示

4. v-ifで条件分岐

5. v-forで繰り返し表示

6. v-onでイベントを実行

7. v-modelで値の書き換え(双方向バインディング

8. コンポーネント

9. 算出プロパティ

10. 監視プロパティ

続きを読む

git --versionでエラーが起きたときの対処法(xcrun: error: invalid active developer path)

こんにちは。

git --versionでエラーが起きたときの対処法です。

そもそもの背景としては、以下になります。

Visual Studio CodeでGitLensをインストールしようとしましたが、以下の画像のエラーが出てしまいました。

f:id:TrouT:20191230183911p:plain

そこで、ターミナルでgit --versionを試したところ...

$ git --version
xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun

とエラーになってしまいました。そして、このエラーでググったところ同じような事例が出てきました。

qiita.com

MacOSのアップデートが原因とのこと。

これはxcode-select --installすれば、解消できるということなので、同じくターミナルにて、以下のコマンドを実行し、xcodeをインストールしたら解消しました。

$ xcode-select --install

f:id:TrouT:20191230183605p:plain

最後に確認↓

$ git --version
git version 2.21.0 (Apple Git-122)

 

問題なし、以上!

【Python基礎文法1】まとめました

こんにちは。

自分用にPythonの基礎的な文法をまとめました。よければ辞書代わりや復習時にご利用ください。

この記事の続きは以下になりますので、こちらも見ていただければ!

www.it-crossover.com

Python基礎文法1の内容としては、以下になります。

・変数と表示

・条件分岐

・リストの変更

・辞書

csvの読み込み、書き込み

・時間の処理

続きを読む