• Skip to main content
  • Skip to primary sidebar

プログラミング入門ナビ by Proglus(プログラス)

プログラミング学習初心者のための情報メディア

本ページにプロモーションが含まれる場合があります

You are here: Home / Archives for 2021

Archives for 2021

Emmetとは?HTMLを素早くコーディングする方法を習得しよう!

2021-01-31 By プログラミング入門ナビ編集部

タイムアラートボタン

はじめに

タイピングの手元

HTMLのプログラミングをしていると、最初は丁寧に書くものの、慣れてくるとだんだん似たような表記が多くて煩わしくなってきますよね。

簡単なWebページなら問題になりませんが、たくさんの階層構造を持つページをコーディングする場合は骨が折れます。

Emmetというプラグイン機能を使えば、この手間を大幅に省くことが可能です。

このページではEmmetの概要と使用方法、および人気のエディタであるVSCodeでの導入方法を紹介します。

動画でEmmetについて学ぶ

フォローしてね!

Emmetとは?

タイムアラートボタン

Emmet(読み:エメット)は、短く略したコードをタイプすると本来の長いコードに変換されるようにする機能です。

若者を中心によく用いられる「略語」のようなもので、「スマートフォン」を「スマホ」、「サブスクリプション」を「サブスク」と言い換えるのと似ています。

略語を使えば文字数が減りますし、言いやすくなりますよね。コーディングでも文字数が減ればタイプする労力や時間が大幅に減らせます。

具体的に見た方が早いので下記の例を見てください。

<!doctype html>
<html lang="en">
<head>
  <title>Demo</title>
</head>
<body>
  ul#nav>li.item$*4>a{Item $}
</body>
</html>

7行目に見慣れない表記がありますが、これがEmmetを使うための書き方です。これを「展開」すると下記のようなコードになります。

<!doctype html>
<html lang="en">
<head>
  <title>Demo</title>
</head>
<body>
  <ul id="nav">
    <li class="item1"><a href="">Item 1</a></li>
    <li class="item2"><a href="">Item 2</a></li>
    <li class="item3"><a href="">Item 3</a></li>
    <li class="item4"><a href="">Item 4</a></li>
  </ul>
</body>
</html>

たった1行だったのが6行のコードに早変わりしました。

「展開」の方法はエディタにより異なりますが大体ボタン1つでできることが多く、上記の例でいえば「27文字+展開ボタン」の手間で199文字分のコーディングができることになります。

この使い方を知っていると知っていないではコーディングの速さに雲泥の差が出ますね。

これは公式サイトで取り上げている一例ですので、意味についてはまだ理解しなくて問題ありません。

公式サイト:Emmet — the essential toolkit for web-developers

VSCodeでの使い方

ペンで画面を指すプログラマー

プログラマーから絶大な人気を得ているテキストエディタであるVSCode(Visual Studio Code)でEmmetを使う方法ですが、実は最初から使用できるように組み込まれているため特別な設定は必要ありません。

「展開」はTabキーでできます。

VSCodeを使っている方はすぐにでも試せますのでぜひお手元で打ち込みながら次項をお読みください。

なお他のテキストエディタ(Sublime TextやAtom等)では外部プラグインとして導入が必要になります。

公式サイトからダウンロード可能です。

主な記述方法

ここからはEmmetの数ある表記の中でも特に多用されるものを中心に記述方法を見ていきましょう。

まずは初級編を覚えておくだけでも大いに役立ちます。余力があれば中級編・上級編も使ってみましょう。

初級編

レッスン

タグ単体

要素名だけ入力し「展開」(VSCodeではTabキー押下)すると、開始タグと(必要に応じ)終了タグが補完されます。

<!-- 展開前 -->
h2

Tabキーを押すと

<!-- 展開後 -->
<h2></h2>

入れ子構造

入れ子構造にするには、先に親要素名を書いてから「>」で子要素名につなぎます。

<!-- 展開前 -->
div>a

Tabキーを押すと

<!-- 展開後 -->
<div><a href=""></a></div>

兄弟構造

入れ子ではなく、同列の並びとなる兄弟構造は「+」で要素名をつなぎます。

<!-- 展開前 -->
h2+div

Tabキーを押すと

<!-- 展開後 -->
<h1></h1>
<div></div>

繰り返し

特に表や箇条書きなどでは同じタグを何度も書かなければならないのが面倒ですよね。

繰り返したい要素名の後に「*回数」を書けばその回数分が表記されます。

入れ子表記との組み合わせも可能です。

<!-- 展開前 -->
ul>li*3

Tabキーを押すと

<!-- 展開後 -->
<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

HTML雛形

HTML文書の冒頭に必ず書く必要のある雛形も、簡単に展開することができます。

一般的には「html:5」と入力しますがVSCodeの場合は「!」でも可です。

<!-- 展開前 -->
html:5

Tabキーを押すと

<!-- 展開後 -->
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

</body>
</html>

なお、デフォルトでは言語設定部分(<html lang=”ja”> )が日本語(”ja”)でなく英語(”en”)となっていることが多いです。

適宜直すか、面倒ならばエディタの設定で修正することができるので対応しておくと良いでしょう。

VSCodeでの設定方法は下記の記事の「Emmetの日本語設定」を参照してください。

Visual Studio CodeでHTMLを書くときの便利な設定方法!ミスの防止や開発効率UPに役立てよう|プログラミング入門ナビ

中級編

Webプログラミングする女性

idを付加

要素にidをつけるには「#」で指定します。

<!-- 展開前 -->
div#item1

Tabキーを押すと

<!-- 展開後 -->
<div id="item1"></div>

クラスを付加

要素にクラス名をつけるには「.」で指定します。

<!-- 展開前 -->
p.content

Tabキーを押すと

<!-- 展開後 -->
<p class="content"></p>

テキストを指定

コンテンツであるテキストを入れて入力することもできます。要素名に続けて「{}」内に記述しましょう。

<!-- 展開前 -->
p{ここが本文です}

Tabキーを押すと

<!-- 展開後 -->
<p>ここが本文です</p>

属性を指定

属性を記述するには「[]」を使います。スペースで区切って複数の属性を同時に指定することも可能です。

<!-- 展開前 -->
img[src="dog.jpg" alt="犬の画像"]

Tabキーを押すと

<!-- 展開後 -->
<img src="dog.jpg" alt="犬の画像">

上級編

微笑むエンジニア

グルーピング

いくつかの表記の組み合わせを()で囲めば、一つのグループとして扱うことができます。

繰り返したい要素が1つだけでなく複数要素である場合などに有効です。

<!-- 展開前 -->
table>(tr>th+td*3)*3

Tabキーを押すと

<!-- 展開後 -->
<table>
  <tr>
    <th></th>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <th></th>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <th></th>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

連番をつけて展開

クラス名やテキストの内容に連番をふりたい場合はその部分を「$」にします。

<!-- 展開前 -->
h2.item${見出し$}*3

Tabキーを押すと

<!-- 展開後 -->
<h2 class="item1">見出し1</h2>
<h2 class="item2">見出し2</h2>
<h2 class="item3">見出し3</h2>

兄弟要素のテキストを指定

次のように要素を挟みたい場合は兄弟要素の記述要領でテキスト指定が可能です。

<!-- 展開前 -->
p>{お申し込みは}+a{こちら}+{から}

Tabキーを押すと

<!-- 展開後 -->
<p>
  お申し込みは
  <a href="">こちら</a>
  から
</p>

まとめ

3人の喜ぶプログラマー

HTMLをサクサクとコーディングするためのプラグインであるEmmetについて概要と使用方法を解説しました。

CSSにも応用可能なので興味のある方は調べて活用してみてください。

コードを早く書けるようになることはもちろん、プログラマーはコードを打ちすぎて腱鞘炎になる方も多いので、その予防の意味でもぜひ役立てていきましょう。

動画でプログラミング入門をしよう

オンライン学習サービスProglus(プログラス)でプログラミングを学び、創れる人になろう!

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

Filed Under: ツールの使い方 Tagged With: CSS, Emmet, HTML

プログラミング学習で挫折しない3つの方法

2021-01-31 By プログラミング入門ナビ編集部

パソコンの前で挫折している男性

はじめに

パソコンの前で挫折している男性

みなさんはプログラミングの学習を始めるにあたって、どんなことを目標にしていましたか?

きっとプログラミングを習得して何かやり遂げたいことがあったはずです。

ワークライフバランスを改善するために在宅でできる業種に就くこと、ストレスの少ない独立業としてやっていけるスキルを身につけること、他にも様々あるかもしれませんね。

しかしながら、学習が思ったように続けられず挫折してしまいそうになるというお悩みもよく耳にします。

せっかくやりたいことがあってプログラミングを学習しているのに、もったいないですよね。

この記事では、挫折せずにプログラミング学習を続けるためのコツを解説します。

なぜ挫折してしまうのか?

考え込む女性

やりたいことが明確でない場合、途中で「何のためにやっているんだろう?」という気持ちになって続かないことは多いです。

「なんとなく流行っているからプログラミングを始めてみた」「趣味の一環でやってみた」といったような場合、余程楽しくのめり込めるような人でないと継続できません。

しかし、冒頭のように具体的な目標や「こうなりたい!」という姿が描けているにも関わらず挫折してしまう方も一定数いらっしゃいます。

これは一体なぜなのでしょうか。

モチベーションが続かない

まず、短期間での動機付けや気力といったところが不足してしまい、十分なやる気が出ないことがあります。

特にプログラミング学習は冒頭の例のように「次の職に就くこと」を目標としている方が多いので、どうしても本業との兼ね合いで気力や体力が不足してしまいがちです。

「今日は残業で疲れたし今から勉強するのはちょっと…」

「この講座をやりきれば次に進めるのはわかっているんだけど、何だかやる気が出ないんだよなぁ」

といった気持ちになったこと、あなたもきっとあるはずです。

時間が取れない

時計で時間を確認する女性

人が普通に生活するための睡眠・食事・入浴にかかる時間と、仕事の業務時間・移動時間を全て合わせるとおおよそ20時間ほどになります。

単純に考えて4時間ほどは学習に充てられるはずですが、とてもそんなに自由時間があるように感じられない方も多いはずです。

帰宅直後は家の用事等やることが多くて自由時間が細切れになっている場合や、起床直後に時間を取ってみたものの頭が働きだすまでに時間がかかったり、就寝前は眠気が襲ってくる、といったケースもありますね。

環境要因

仕事する女性と乳幼児

例えば子育て中のパパ・ママは子どもが横にいる状態ではとても学習に集中できませんよね。

一人暮らしであっても、特に都心に住んでいる方などでは家がそんなに広くなくすぐ横にベッドがあったり、デスクとチェアが揃っておらず地べたでパソコン作業をせざるを得なかったり…といった理由ですぐにゴロゴロしてしまうといったこともあるでしょう。

他にも様々な環境的な要因で集中を削がれることも学習が捗らない原因の一つのようです。

モチベーションを保つには

モチベーションの板書

では、これらの要因に対処して挫折を防ぐにはどうすればよいのでしょうか。

まず、モチベーションを高く保つには下記のポイントを押さえるのがおすすめです。

短期的で客観的なゴールを作る

1年以上かかるような長期目標を掲げてしまうと、なかなか自分自身の力でモチベーションを保つのが難しいことがわかっています。

これに対処するには、数ヶ月単位で達成できかつ客観的な目標を作るのが良いでしょう。

挫折せずに続けられている人は、資格の取得や競技プログラミングなどをこのために活用していることが多いです。

人への報告を習慣化する

自分一人でやみくもに頑張っていると挫折しやすいです。

プログラミング講座を受講している方は、学習したら講師への報告を習慣化するのもいいかもしれません。

独学の場合は友達や家族に報告するのでもいいですし、同じ目標に向かう人を匿名マッチングし応援し合うアプリもあるので、こういったものを活用するのもいいですね。

時間を確保するための工夫

円グラフを描く女性

「朝活」という言葉が流行っていたり「早起きは三文の得」ということわざがあったりするので、朝早く起きて学習時間を確保しようとする方が多いようです。

これでうまくいくケースも確かにあるのですが、挫折につながることも少なくはありません。

元々朝が苦手な方に不向きなのはもちろん、そうでなくとも普段の生活ペースを崩すわけですから、最初はうまくいっているように見えても徐々にストレスが溜まってきてしまいます。

一番重要なのは、自分の日々の生活を見つめてどこがベストに集中しやすい時間帯なのかを見定めることです。

もしもテレビをみたり読書をしたりするのに当てていた時間があれば、そこが狙い目でしょう。

もちろんある程度の娯楽は必要なので、初めからごっそりと学習時間に変えてしまうとストレスを感じて挫折しやすくなってしまいます。

例えば2時間、娯楽の時間があったならば半分の1時間はプログラミング学習をやってから娯楽時間を開始する、といったように徐々に慣れていくと良いでしょう。

ちょっとした環境チェンジ

カフェで学習する男性

子育てや家の状況など、環境によるものが学習阻害の原因となっているならば、なかなかそこを改善するのは難しいと思ってしまうかもしれません。

でも諦めるのは尚早です。

例えば1日2時間を学習に充てると決めたのならば、その時だけカフェに行ったり子どもを預けるかシッターを呼ぶなどすれば、環境を変えることができます。

今は個人で契約できるシェアオフィスも充実してきているので、そういったところに行ってみるのも良いかもしれません。

当然多少のお金がかかるため、その投資を回収するためにもより集中しようという気力がわいてくる効果も期待できますね。

まとめ

やる気に溢れた女性

プログラミング学習で挫折しないための方法を紹介しました。

せっかく心に決めた目標があるのに、挫折してしまうのは非常にもったいないですよね。

なるべく無理のないレベルで始めて、徐々にギアアップしていきましょう!

動画でプログラミング入門をしよう

オンライン学習サービスProglus(プログラス)でプログラミングを学び、創れる人になろう!

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

Filed Under: エンジニアへの道 Tagged With: プログラミング, 学習時間, 挫折, 確保

ウェブアプリケーションエンジニアになりたい!何を学習するべきか?

2021-01-08 By プログラミング入門ナビ編集部

プログラミングを学習するうえで、何を、どの順番で学習したらよいか、よくご質問をいただくため、記事を書きました。

この記事では、プログラミングを学習して、
ウェブアプリケーションエンジニアになるために必要な技術について説明します。

YouTube動画で学習する

ウェブアプリケーションとは

ざっくりいってしまうと、ユーザーがウェブブラウザで使うアプリケーションのことを指しています。

具体例をあげると、

  • Amazon
  • Uber Eats
  • Yahoo
  • Netflix
  • Wikipedia

などのウェブサイトが、挙げられます。

そして、ウェブアプリケーションを作る技術者のことを、ウェブアプリケーションエンジニアといったりします。

どういった技術を、どの順番で学習するべきか?

ウェブアプリケーションエンジニアになるために、
どういった技術を、どの順番で学習するべきか説明していきます。

ウェブ関係の技術というのは、幅広くて、新しいものがどんどんでてくるので、上げるとキリがないのですが、

ここでは、ITエンジニアを目指して就職活動をするための、ポートフォリオサイトを作るにあたって、まずは、これらを学習してくださいというものを紹介します。

HTML, CSS

はじめに、
HTML、ウェブページの構造を定義する言語を学習します。
あわせて、
CSS、ウェブページのスタイルを指定する言語を学習します。
ウェブページのデザインを定義します。

HTMLだけだと、見た目は考慮されていない文書が表示されるだけなのですが、

CSSを使うと、デザインが適用されたウェブページが作れます。

HTML、CSSは、プログラミング言語ではないのですが、ウェブ関連のプログラミングを行ううえで、必須の基礎知識です。

JavaScript

JavaScriptは、主に、ウェブブラウザ上で動く、プログラミング言語です。

サイトに動きをつけたり、ページをリロードしなくても表示内容を動的に変更できたりします。

ここまでのHTML、 CSS、 JavaScriptは基本的には、学習しないという選択肢はありません。

ほぼ必須スキルといえますし、代わりになるほかのテクノロジを選択するといったことも基本的にはできません。

サーバーサイドのプログラミング言語(Rubyなど) とフレームワーク(Ruby on Railsなど)

次に、サーバーサイドのプログラミング言語、Rubyなど、を学習します。

サーバー側で動くアプリケーションの動作を記述するための言語です。

しかしながら、Rubyといったプログラミング言語だけを使って、ウェブサービスを開発することは、特殊な事例を除いては、あまりなくて、

サーバーサイドのフレームワーク、Ruby on Railsなどと組み合わせて使います。

フレームワークは、アプリケーションを作るときの土台となるもので、
よく使う機能がパッケージされていて、用意された機能を使うことで、素早くアイディアを形にすることができます。

たとえば、ECサイトであれば、合計金額を計算したり、クレジットカード会社と通信して決済を実行する処理などを書きます。

サーバーサイドのプログラミング言語やフレームワークは、選択肢が沢山あるので、これが1つの正解というのはありません。

価値観は人それぞれ違ってあたりまえなので、皆さんが自由に選択して使えばよいです。

しかしながら、何を使ったらよいかわからない方には、
Ruby とRuby on Railsをおすすめしています。

トレンドが目まぐるしく変わる、IT業界において、10年以上に渡って広く使われている技術で、安心して使えるからです。

民泊予約サイトのAirBnB(エアービーアンドビー)や、ソースコード管理サービスGitHub(ギットハブ)、 クラウドファンディングのKickstarter(キックスターター)など、有名スタートアップ企業が使っています。

日本でいうと、日本最大の料理レシピサービスであるクックパッドや、特にベンチャー企業、スタートアップ企業で採用されることも多いです。

私も普段から業務に使ってビジネスをしているので、安心しておすすめができます。

SQL

関連して、SQLも学んだ方が良いです。

SQLは、データベースを操作するための言語です。
ECサイトを例に取ると、データベースには、顧客情報や商品情報、注文情報などが保存されています。

SQLを使って、データベースのデータを、追加、編集、削除します。

ウェブサービスは、ほぼ100%のケースで何かしらのデータベースを使っているので、SQLは知っておいたほうが良いです。

Git

Gitは、ソースコードを管理するためのソフトウェアです。

書いたプログラムのバージョン管理します。
特にチームで開発する場合は、ほぼGitが使われますので、基本を抑えて置く必要があります。

これらの基本が学習できたら、企業に実力を示すための、ポートフォリオを作り、就職活動することをおすすめしています。

余力がある方向けの学習項目

余力があれば、サーバー 関係の技術、AWS、GCP、herokuなど。
CSSフレームワークのBootstrap、
JavaScriptのライブラリ、フレームワーク。たとえばVue.jsやNuxt.jsを学習するのも良いです。

おわりに

ウェブアプリケーションエンジニアになりたいと持ったときに、何を学習するべきか?説明しました。
プログラミング関連の学習には終わりがないので、
ポートフォリオサイトをサクッと作って、早くIT企業に就職して、お金をもないながら、実務で学ぶことをおすすめしています。

実務をやりだすと、学習しているときよりも断然成長スピードが早いです。
ぜひ、今スグプログラミング学習をはじめてください

番組の説明欄に、動画で学ぶプログラミングサービス プログラスのURLを載せておきますので、ぜひチェックしてみてください。無料から始められます。

今日も皆さん、ありがとうございます!

>> 今すぐProglus(プログラス)でプログラミング学習をはじめる

動画でプログラミング入門をしよう

オンライン学習サービスProglus(プログラス)でプログラミングを学び、創れる人になろう!

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

Filed Under: プログラミング入門 Tagged With: プログラミング入門

VSCodeで画像が表示されない場合の対処法

2021-01-07 By プログラミング入門ナビ編集部

この記事は、オンライン講座「ウェブ開発入門完全攻略コース – プログラミング をはじめて学び創れる人へ!未経験から現場で使える開発スキルを習得!」のサポート記事です。

VSCodeとは

・プログラミングを行う際にコードを記述する「エディタ」と呼ばれるソフトウェアです。

・エディタを用いてコーディングを行うことで、拡張機能などを活用して効率的に開発を進めることができます。

・VSCodeは現在最も人気のあるエディタの一つです。

VSCodeでの画像表示

VSCodeでは、以下のように画像のプレビュー機能があります。

コンピューター内の画像ファイルを別途開かなくても、エディタ内から画像の中身を確認できるので、開発を進める際に便利です。

VSCodeで画像が表示できない場合

以下のように「An error occurred while loading the image」とエラーが表示される場合の対処法についてお伝えします。

画像ファイルが正常に保存されているか確認

webフォルダをエクスプローラーで開いてみて、画像ファイル自体が破損していないかを確認してみてください。

画像が正常に保存できない原因としては、例えば以下が考えられます。

・ネットワークの通信が不安定
安定したネットワーク環境下で再度ダウンロードを行ってみてください。

・ストレージが不足している
余分なファイルなどを削除して、画像保存のための保存領域を確保しましょう。

・アンチウィルスソフトがブロックしている
画像の保存を妨げているセキュリティソフトなどが無いか確認してみてください。

VSCodeの再起動

もし画像が正常に保存されている場合は、ファイルの保存が反映されていない可能性があるので、VSCode自体の再起動などを行ってみてください。

まとめ

この記事では,VSCodeで画像が表示されない場合の対処法について説明しました。このような症状が発生した場合は、画像の保存状態について確認してみてください。

動画でプログラミング入門をしよう

オンライン学習サービスProglus(プログラス)でプログラミングを学び、創れる人になろう!

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

Filed Under: ツールの使い方 Tagged With: VS Code

  • « Go to Previous Page
  • Go to page 1
  • Go to page 2
  • Go to page 3
  • Go to page 4

Primary Sidebar

Proglus(プログラス)

Twitter

Follow @programmingnavi Tweets by programmingnavi

最近の投稿

  • 【05/02更新】Udemyプログラミング入門講座等の割引クーポン配布
  • AWSのパブリックIPv4アドレス有料化について 2024/2より
  • 【CSS】Google Fontsの利用方法について解説します!新UIに対応2023年11月更新
  • 【SQL】XAMPPのMySQLがXAMPPがポートの競合で起動できない問題について解決方法を解説します!
  • 【Colab】–NOMAL– と表示されて、ショートカットキー(ctrl+c)でコピーができない場合の解決方法を解説します!

カテゴリー

  • AIの使い方
  • Arduino入門
  • AWS
  • その他
  • エンジニアのしごと
  • エンジニアへの道
  • ツールの使い方
  • ニュース
  • プログラミング入門
  • 電子工作入門

タグクラウド

AI AWS AWS Cloud9 Cloud9 CodeWing CSS Emmet GCP Git GitHub Heroku HTML JavaScript li Linux macOS MySQL MySQL Workbench node.js Nuxt.js ol Proglus Python Ruby Ruby on Rails SQL Udemy Visual Studio Code Vue.js Web開発 Windows インストール エラー エンジニア オンライン学習 サーバー スクリーンショット セール プログラミング プログラミング入門 プログラミング学習 ユーデミー 初心者 未経験 機械学習

アーカイブ

  • 2025年5月
  • 2024年1月
  • 2023年11月
  • 2023年9月
  • 2023年8月
  • 2023年7月
  • 2023年5月
  • 2023年4月
  • 2023年2月
  • 2023年1月
  • 2022年12月
  • 2022年11月
  • 2022年10月
  • 2022年9月
  • 2022年8月
  • 2022年7月
  • 2022年4月
  • 2022年3月
  • 2022年2月
  • 2022年1月
  • 2021年10月
  • 2021年9月
  • 2021年8月
  • 2021年6月
  • 2021年4月
  • 2021年3月
  • 2021年1月
  • 2020年12月
  • 2020年11月
  • 2020年10月
  • 2020年9月
  • 2020年8月
  • 2020年7月
  • 2020年5月
  • 2020年4月
  • 2020年3月
  • 2020年2月
  • 2020年1月
  • 2019年11月
  • 2019年9月
  • 2019年7月
  • 2019年6月
  • 2019年5月
  • 2019年4月
  • 2019年3月
  • 2019年2月
  • 2019年1月
  • 2018年12月
  • 2018年11月
  • 2018年10月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2018年5月
  • 2018年4月
  • 2018年3月

検索

Copyright © 2025 · programmingnavi.com ・About・プライバシーポリシー